From 040d395ddbd9d36eb1ae824728537d2640ecf216 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 9 Oct 2018 01:26:04 +0900 Subject: [PATCH] :art: --- .../app/common/scripts/note-subscriber.ts | 10 +++- .../views/components/reactions-viewer.vue | 52 +++++++++++-------- src/client/theme/dark.json5 | 6 +-- src/client/theme/light.json5 | 6 +-- src/services/note/reaction/create.ts | 3 +- 5 files changed, 45 insertions(+), 32 deletions(-) diff --git a/src/client/app/common/scripts/note-subscriber.ts b/src/client/app/common/scripts/note-subscriber.ts index c41897e70f..6c994aa9bc 100644 --- a/src/client/app/common/scripts/note-subscriber.ts +++ b/src/client/app/common/scripts/note-subscriber.ts @@ -86,8 +86,16 @@ export default prop => ({ switch (type) { case 'reacted': { const reaction = body.reaction; - if (this.$_ns_target.reactionCounts == null) Vue.set(this.$_ns_target, 'reactionCounts', {}); + + if (this.$_ns_target.reactionCounts == null) { + Vue.set(this.$_ns_target, 'reactionCounts', {}); + } + this.$_ns_target.reactionCounts[reaction] = (this.$_ns_target.reactionCounts[reaction] || 0) + 1; + + if (body.userId == this.$store.state.i.id) { + Vue.set(this.$_ns_target, 'myReaction', reaction); + } break; } diff --git a/src/client/app/common/views/components/reactions-viewer.vue b/src/client/app/common/views/components/reactions-viewer.vue index 8e06b79d19..15989ff4d8 100644 --- a/src/client/app/common/views/components/reactions-viewer.vue +++ b/src/client/app/common/views/components/reactions-viewer.vue @@ -1,16 +1,16 @@ @@ -22,9 +22,6 @@ export default Vue.extend({ computed: { reactions(): number { return this.note.reactionCounts; - }, - notReacted(): boolean { - return this.note.myReaction == null; } }, methods: { @@ -46,25 +43,36 @@ export default Vue.extend({ display none > span + display inline-block + height 32px margin-right 6px - padding 6px 6px 6px 4px - border-radius 3px + padding 0 6px + border-radius 4px - &.notReacted + * + user-select none + pointer-events none + + &.reacted + background var(--primary) + + > span + color var(--primaryForeground) + + &:not(.reacted) cursor pointer - border solid 1px var(--reactionViewerButtonBorder) - background-color var(--reactionViewerButtonBg) + background var(--reactionViewerButtonBg) &:hover - border solid 1px var(--reactionViewerButtonHoverBorder) - background-color var(--reactionViewerButtonHoverBg) + background var(--reactionViewerButtonHoverBg) > .mk-reaction-icon font-size 1.4em > span - margin-left 4px - font-size 1.2em + font-size 1.1em + line-height 32px + vertical-align middle color var(--text) diff --git a/src/client/theme/dark.json5 b/src/client/theme/dark.json5 index 1ac5554a83..59cff0ae44 100644 --- a/src/client/theme/dark.json5 +++ b/src/client/theme/dark.json5 @@ -84,10 +84,8 @@ reactionPickerButtonHoverBg: 'rgba(255, 255, 255, 0.18)', - reactionViewerButtonBg: 'rgba(0, 0, 0, 0)', - reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0)', - reactionViewerButtonBorder: 'rgba(255, 255, 255, 0.1)', - reactionViewerButtonHoverBorder: 'rgba(255, 255, 255, 0.2)', + reactionViewerButtonBg: 'rgba(255, 255, 255, 0.1)', + reactionViewerButtonHoverBg: 'rgba(255, 255, 255, 0.2)', pollEditorInputBg: 'rgba(0, 0, 0, 0.25)', diff --git a/src/client/theme/light.json5 b/src/client/theme/light.json5 index 0caea33480..a1b000530a 100644 --- a/src/client/theme/light.json5 +++ b/src/client/theme/light.json5 @@ -84,10 +84,8 @@ reactionPickerButtonHoverBg: '#eee', - reactionViewerButtonBg: 'rgba(0, 0, 0, 0)', - reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0)', - reactionViewerButtonBorder: 'rgba(0, 0, 0, 0.1)', - reactionViewerButtonHoverBorder: 'rgba(0, 0, 0, 0.2)', + reactionViewerButtonBg: 'rgba(0, 0, 0, 0.05)', + reactionViewerButtonHoverBg: 'rgba(0, 0, 0, 0.1)', pollEditorInputBg: '#fff', diff --git a/src/services/note/reaction/create.ts b/src/services/note/reaction/create.ts index 6884014e33..b54f8a60bb 100644 --- a/src/services/note/reaction/create.ts +++ b/src/services/note/reaction/create.ts @@ -44,7 +44,8 @@ export default async (user: IUser, note: INote, reaction: string) => new Promise }); publishNoteStream(note._id, 'reacted', { - reaction: reaction + reaction: reaction, + userId: user._id }); // リアクションされたユーザーがローカルユーザーなら通知を作成