Improve usability

This commit is contained in:
syuilo 2018-06-26 18:25:27 +09:00
parent 81cea41154
commit 36c2f8fe5d
3 changed files with 37 additions and 4 deletions

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-reaction-picker"> <div class="mk-reaction-picker">
<div class="backdrop" ref="backdrop" @click="close"></div> <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> <p v-if="!compact">{{ title }}</p>
<div> <div>
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button> <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%'; const placeholder = '%i18n:@choose-reaction%';
export default Vue.extend({ 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() { data() {
return { return {
title: placeholder title: placeholder
@ -162,6 +183,16 @@ root(isDark)
border-right solid $balloon-size transparent border-right solid $balloon-size transparent
border-bottom solid $balloon-size $bgcolor border-bottom solid $balloon-size $bgcolor
&.compact
> div
width 280px
> button
width 50px
height 50px
font-size 28px
border-radius 4px
> p > p
display block display block
margin 0 margin 0

View file

@ -197,7 +197,8 @@ export default Vue.extend({
(this as any).os.new(MkReactionPicker, { (this as any).os.new(MkReactionPicker, {
source: this.$refs.reactButton, source: this.$refs.reactButton,
note: this.p, note: this.p,
compact: true compact: true,
big: true
}); });
}, },
menu() { menu() {

View file

@ -213,7 +213,8 @@ export default Vue.extend({
(this as any).os.new(MkReactionPicker, { (this as any).os.new(MkReactionPicker, {
source: this.$refs.reactButton, source: this.$refs.reactButton,
note: this.p, note: this.p,
compact: true compact: true,
big: true
}); });
}, },