diff options
Diffstat (limited to 'src/components/retweet_button/retweet_button.vue')
| -rw-r--r-- | src/components/retweet_button/retweet_button.vue | 48 |
1 files changed, 23 insertions, 25 deletions
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index b234f3d9..5d4915aa 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,29 +1,29 @@ <template> - <div v-if="loggedIn"> - <template v-if="visibility !== 'private' && visibility !== 'direct'"> + <div> + <button + v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn" + class="button-unstyled -padded RetweetButton -interactive" + :class="status.repeated && '-repeated'" + > <FAIcon - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding -interactive" + class="fa-scale-110 fa-old-padding" icon="retweet" :spin="animated" :title="$t('tool_tip.repeat')" @click.prevent="retweet()" /> - <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> - </template> - <template v-else> - <FAIcon - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding" - icon="lock" - :title="$t('timeline.no_retweet_hint')" - /> - </template> - </div> - <div v-else-if="!loggedIn"> + </button> + <FAIcon + v-else-if="loggedIn" + :class="classes" + class="RetweetButton fa-scale-110 fa-old-padding" + icon="lock" + :title="$t('timeline.no_retweet_hint')" + /> <FAIcon + v-else :class="classes" - class="fa-scale-110 fa-old-padding" + class="RetweetButton fa-scale-110 fa-old-padding" icon="retweet" :title="$t('tool_tip.repeat')" /> @@ -38,18 +38,16 @@ .RetweetButton { &.-interactive { - cursor: pointer; - animation-duration: 0.6s; - &:hover { + .svg-inline--fa { + animation-duration: 0.6s; + } + + &:hover .svg-inline--fa, + &.-repeated .svg-inline--fa { color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } } - - &.-repeated { - color: $fallback--cGreen; - color: var(--cGreen, $fallback--cGreen); - } } </style> |
