2018-02-07 18:34:43 +09:00
|
|
|
<template>
|
2020-02-22 06:43:46 +09:00
|
|
|
<div class="tdflqwzn" :class="{ isMe }">
|
2020-07-27 23:25:37 +09:00
|
|
|
<x-reaction v-for="(count, reaction) in note.reactions" :reaction="reaction" :count="count" :is-initial="initialReactions.has(reaction)" :note="note" :key="reaction"/>
|
2018-02-07 18:34:43 +09:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
2018-02-16 15:38:12 +09:00
|
|
|
<script lang="ts">
|
|
|
|
import Vue from 'vue';
|
2019-02-07 02:05:49 +09:00
|
|
|
import XReaction from './reactions-viewer.reaction.vue';
|
2018-11-09 03:44:35 +09:00
|
|
|
|
2018-02-16 15:38:12 +09:00
|
|
|
export default Vue.extend({
|
2019-02-07 02:05:49 +09:00
|
|
|
components: {
|
|
|
|
XReaction
|
|
|
|
},
|
2020-07-27 23:25:37 +09:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
initialReactions: new Set(Object.keys(this.note.reactions))
|
|
|
|
};
|
|
|
|
},
|
2018-12-27 22:54:50 +09:00
|
|
|
props: {
|
|
|
|
note: {
|
|
|
|
type: Object,
|
|
|
|
required: true
|
2019-02-07 02:05:49 +09:00
|
|
|
},
|
2018-12-27 22:54:50 +09:00
|
|
|
},
|
2018-02-16 15:38:12 +09:00
|
|
|
computed: {
|
2018-12-27 22:54:50 +09:00
|
|
|
isMe(): boolean {
|
2019-02-07 02:05:49 +09:00
|
|
|
return this.$store.getters.isSignedIn && this.$store.state.i.id === this.note.userId;
|
2018-12-17 03:29:57 +09:00
|
|
|
},
|
|
|
|
},
|
2018-02-16 15:38:12 +09:00
|
|
|
});
|
2018-02-07 18:41:48 +09:00
|
|
|
</script>
|
|
|
|
|
2020-01-30 04:37:25 +09:00
|
|
|
<style lang="scss" scoped>
|
2020-02-22 06:43:46 +09:00
|
|
|
.tdflqwzn {
|
2020-01-30 04:37:25 +09:00
|
|
|
margin: 4px -2px 0 -2px;
|
2018-02-07 18:41:48 +09:00
|
|
|
|
2020-01-30 04:37:25 +09:00
|
|
|
&:empty {
|
|
|
|
display: none;
|
|
|
|
}
|
2018-02-07 18:41:48 +09:00
|
|
|
|
2020-01-30 04:37:25 +09:00
|
|
|
&.isMe {
|
|
|
|
> span {
|
|
|
|
cursor: default !important;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2018-02-07 18:41:48 +09:00
|
|
|
</style>
|