diff options
| author | Aya Morisawa <AyaMorisawa4869@gmail.com> | 2018-08-17 07:16:56 +0900 |
|---|---|---|
| committer | Aya Morisawa <AyaMorisawa4869@gmail.com> | 2018-08-17 07:16:56 +0900 |
| commit | a507b7c0b01c65cc108cfbc56b355003ef6e3cc1 (patch) | |
| tree | b19943a991600f1932eede2b9331046450296748 /src | |
| parent | Merge pull request #2277 from syuilo/patch-2276 (diff) | |
| download | sharkey-a507b7c0b01c65cc108cfbc56b355003ef6e3cc1.tar.gz sharkey-a507b7c0b01c65cc108cfbc56b355003ef6e3cc1.tar.bz2 sharkey-a507b7c0b01c65cc108cfbc56b355003ef6e3cc1.zip | |
Enhance note footer
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/app/desktop/views/components/note-detail.vue | 21 | ||||
| -rw-r--r-- | src/client/app/desktop/views/components/notes.note.vue | 26 |
2 files changed, 30 insertions, 17 deletions
diff --git a/src/client/app/desktop/views/components/note-detail.vue b/src/client/app/desktop/views/components/note-detail.vue index b6980fae72..227bcc349d 100644 --- a/src/client/app/desktop/views/components/note-detail.vue +++ b/src/client/app/desktop/views/components/note-detail.vue @@ -55,15 +55,15 @@ </div> <footer> <mk-reactions-viewer :note="p"/> - <button @click="reply" title=""> + <button class="replyButton" @click="reply" title=""> <template v-if="p.reply">%fa:reply-all%</template> <template v-else>%fa:reply%</template> <p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p> </button> - <button @click="renote" title="%i18n:@renote%"> + <button class="renoteButton" @click="renote" title="%i18n:@renote%"> %fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p> </button> - <button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%"> + <button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p> </button> <button @click="menu" ref="menuButton"> @@ -372,15 +372,24 @@ root(isDark) cursor pointer &:hover - color isDark ? #9198af : #666 + color isDark ? #a1a8bf : #444 + + &.replyButton:hover + color #0af + + &.renoteButton:hover + color #8d0 + + &.reactionButton:hover + color #fa0 > .count display inline margin 0 0 0 8px color #999 - &.reacted - color $theme-color + &.reacted, &.reacted:hover + color #fa0 > .replies > * diff --git a/src/client/app/desktop/views/components/notes.note.vue b/src/client/app/desktop/views/components/notes.note.vue index a98df104a3..87acf7974d 100644 --- a/src/client/app/desktop/views/components/notes.note.vue +++ b/src/client/app/desktop/views/components/notes.note.vue @@ -42,15 +42,15 @@ </div> <footer> <mk-reactions-viewer :note="p" ref="reactionsViewer"/> - <button @click="reply" title="%i18n:@reply%"> + <button class="replyButton" @click="reply" title="%i18n:@reply%"> <template v-if="p.reply">%fa:reply-all%</template> <template v-else>%fa:reply%</template> <p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p> </button> - <button @click="renote" title="%i18n:@renote%"> + <button class="renoteButton" @click="renote" title="%i18n:@renote%"> %fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p> </button> - <button :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%"> + <button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%"> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p> </button> <button @click="menu" ref="menuButton"> @@ -487,20 +487,24 @@ root(isDark) cursor pointer &:hover - color isDark ? #9198af : #666 + color isDark ? #a1a8bf : #444 + + &.replyButton:hover + color #0af + + &.renoteButton:hover + color #8d0 + + &.reactionButton:hover + color #fa0 > .count display inline margin 0 0 0 8px color #999 - &.reacted - color $theme-color - - &:last-child - position absolute - right 0 - margin 0 + &.reacted, &.reacted:hover + color #fa0 > .detail padding-top 4px |