Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2279 from syuilo/enhance-note-footer

Browse source 
Enhance note footer
This commit is contained in:
syuilo 2018-08-17 14:43:25 +09:00 committed by GitHub
parent 77d82d2d17 a507b7c0b0
commit e18655d18f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/client/app/desktop/views/components/note-detail.vue
View file

@ -55,15 +55,15 @@
</div> </div>
<footer> <footer>
<mk-reactions-viewer :note="p"/> <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-if="p.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template> <template v-else>%fa:reply%</template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p> <p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button> </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> %fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
</button> </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> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
</button> </button>
<button @click="menu" ref="menuButton"> <button @click="menu" ref="menuButton">
@ -372,15 +372,24 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
color isDark ? #9198af : #666 color isDark ? #a1a8bf : #444
&.replyButton:hover
color #0af
&.renoteButton:hover
color #8d0
&.reactionButton:hover
color #fa0
> .count > .count
display inline display inline
margin 0 0 0 8px margin 0 0 0 8px
color #999 color #999
&.reacted &.reacted, &.reacted:hover
color $theme-color color #fa0
> .replies > .replies
> * > *

26
src/client/app/desktop/views/components/notes.note.vue
View file

@ -42,15 +42,15 @@
</div> </div>
<footer> <footer>
<mk-reactions-viewer :note="p" ref="reactionsViewer"/> <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-if="p.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template> <template v-else>%fa:reply%</template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p> <p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button> </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> %fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
</button> </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> %fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
</button> </button>
<button @click="menu" ref="menuButton"> <button @click="menu" ref="menuButton">
@ -487,20 +487,24 @@ root(isDark)
cursor pointer cursor pointer
&:hover &:hover
color isDark ? #9198af : #666 color isDark ? #a1a8bf : #444
&.replyButton:hover
color #0af
&.renoteButton:hover
color #8d0
&.reactionButton:hover
color #fa0
> .count > .count
display inline display inline
margin 0 0 0 8px margin 0 0 0 8px
color #999 color #999
&.reacted &.reacted, &.reacted:hover
color $theme-color color #fa0
&:last-child
position absolute
right 0
margin 0
> .detail > .detail
padding-top 4px padding-top 4px