diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue index 0db6f66b3..ed7aedb58 100644 --- a/src/client/app/common/views/components/reaction-picker.vue +++ b/src/client/app/common/views/components/reaction-picker.vue @@ -1,7 +1,7 @@ <template> <div class="mk-reaction-picker"> <div class="backdrop" ref="backdrop" @click="close"></div> - <div class="popover" :class="{ compact }" ref="popover"> + <div class="popover" :class="{ compact, big }" ref="popover"> <p v-if="!compact">{{ title }}</p> <div> <button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button> @@ -25,7 +25,28 @@ import * as anime from 'animejs'; const placeholder = '%i18n:@choose-reaction%'; export default Vue.extend({ - props: ['note', 'source', 'compact', 'cb'], + props: { + note: { + type: Object, + required: true + }, + source: { + required: true + }, + compact: { + type: Boolean, + required: false, + default: false + }, + cb: { + required: false + }, + big: { + type: Boolean, + required: false, + default: false + } + }, data() { return { title: placeholder @@ -162,6 +183,16 @@ root(isDark) border-right solid $balloon-size transparent border-bottom solid $balloon-size $bgcolor + &.compact + > div + width 280px + + > button + width 50px + height 50px + font-size 28px + border-radius 4px + > p display block margin 0 diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue index 76633490f..48c9c8bcb 100644 --- a/src/client/app/mobile/views/components/note-detail.vue +++ b/src/client/app/mobile/views/components/note-detail.vue @@ -197,7 +197,8 @@ export default Vue.extend({ (this as any).os.new(MkReactionPicker, { source: this.$refs.reactButton, note: this.p, - compact: true + compact: true, + big: true }); }, menu() { diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue index c3d4181a5..c947a6c56 100644 --- a/src/client/app/mobile/views/components/note.vue +++ b/src/client/app/mobile/views/components/note.vue @@ -213,7 +213,8 @@ export default Vue.extend({ (this as any).os.new(MkReactionPicker, { source: this.$refs.reactButton, note: this.p, - compact: true + compact: true, + big: true }); },