diff options
Diffstat (limited to 'src/client')
| -rw-r--r-- | src/client/components/reactions-viewer.reaction.vue | 30 |
1 files changed, 16 insertions, 14 deletions
diff --git a/src/client/components/reactions-viewer.reaction.vue b/src/client/components/reactions-viewer.reaction.vue index 67774cbb39..8f9324096a 100644 --- a/src/client/components/reactions-viewer.reaction.vue +++ b/src/client/components/reactions-viewer.reaction.vue @@ -1,7 +1,7 @@ <template> <button class="hkzvhatu _button" - :class="{ reacted: note.myReaction == reaction }" + :class="{ reacted: note.myReaction == reaction, canToggle }" @click="toggleReaction(reaction)" v-if="count > 0" @mouseover="onMouseover" @@ -40,11 +40,6 @@ export default Vue.extend({ type: Object, required: true, }, - canToggle: { - type: Boolean, - required: false, - default: true, - }, }, data() { return { @@ -57,6 +52,9 @@ export default Vue.extend({ isMe(): boolean { return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId; }, + canToggle(): boolean { + return !this.reaction.match(/@\w/); + }, }, mounted() { if (!this.isInitial) this.anime(); @@ -144,19 +142,23 @@ export default Vue.extend({ padding: 0 6px; border-radius: 4px; - &.reacted { - background: var(--accent); + &.canToggle { + background: rgba(0, 0, 0, 0.05); - > span { - color: #fff; + &:hover { + background: rgba(0, 0, 0, 0.1); } } - &:not(.reacted) { - background: rgba(0, 0, 0, 0.05); + &:not(.canToggle) { + cursor: default; + } - &:hover { - background: rgba(0, 0, 0, 0.1); + &.reacted { + background: var(--accent); + + > span { + color: #fff; } } |