Enhance note footer
This commit is contained in:
parent
e38e4940b4
commit
a507b7c0b0
2 changed files with 30 additions and 17 deletions
|
@ -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
|
||||||
> *
|
> *
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue