diff options
| -rw-r--r-- | src/App.scss | 5 | ||||
| -rw-r--r-- | src/components/favorite_button/favorite_button.vue | 24 | ||||
| -rw-r--r-- | src/components/notifications/notifications.vue | 2 | ||||
| -rw-r--r-- | src/components/reply_button/reply_button.vue | 25 | ||||
| -rw-r--r-- | src/components/retweet_button/retweet_button.vue | 34 |
5 files changed, 65 insertions, 25 deletions
diff --git a/src/App.scss b/src/App.scss index b2c7be13..cdc3209c 100644 --- a/src/App.scss +++ b/src/App.scss @@ -173,11 +173,6 @@ a { color: var(--link, $fallback--link); } - &.-padded { - padding: 10px; - margin: -10px; - } - &.-fullwidth { width: 100%; } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index d54ae78c..9fc4f9d8 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -1,8 +1,8 @@ <template> - <div> + <div class="FavoriteButton"> <button v-if="loggedIn" - class="FavoriteButton -interactive button-unstyled -padded" + class="button-unstyled interactive" :class="status.favorited && '-favorited'" :title="$t('tool_tip.favorite')" @click.prevent="favorite()" @@ -19,7 +19,12 @@ :title="$t('tool_tip.favorite')" :icon="['far', 'star']" /> - <span v-if="!mergedConfig.hidePostStats && status.fave_num > 0">{{ status.fave_num }}</span> + <span + v-if="!mergedConfig.hidePostStats && status.fave_num > 0" + class="action-counter" + > + {{ status.fave_num }} + </span> </div> </template> @@ -29,8 +34,19 @@ @import '../../_variables.scss'; .FavoriteButton { - &.-interactive { + display: flex; + + > :first-child { + padding: 10px; + margin: -10px -5px -10px -10px; + } + + .action-counter { + pointer-events: none; + user-select: none; + } + .interactive { .svg-inline--fa { animation-duration: 0.6s; } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 725d1ad4..4cdb436c 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -43,7 +43,7 @@ </div> <button v-else-if="!loading" - class="button-unstyled -link -fullwidth" + class="button-unstyled -link -block" @click.prevent="fetchOlderNotifications()" > <div class="new-status-notification text-center panel-footer"> diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue index 1b02881a..fb010278 100644 --- a/src/components/reply_button/reply_button.vue +++ b/src/components/reply_button/reply_button.vue @@ -1,8 +1,8 @@ <template> - <div> + <div class="ReplyButton"> <button v-if="loggedIn" - class="button-unstyled ReplyButton -padded -interactive" + class="button-unstyled interactive" :class="{'-active': replying}" :title="$t('tool_tip.reply')" @click.prevent="$emit('toggle')" @@ -15,10 +15,13 @@ <FAIcon v-else icon="reply" - class="ReplyButton fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" :title="$t('tool_tip.reply')" /> - <span v-if="status.replies_count > 0"> + <span + v-if="status.replies_count > 0" + class="action-counter" + > {{ status.replies_count }} </span> </div> @@ -30,13 +33,25 @@ @import '../../_variables.scss'; .ReplyButton { - &.-interactive { + display: flex; + + > :first-child { + padding: 10px; + margin: -10px -5px -10px -10px; + } + .action-counter { + pointer-events: none; + user-select: none; + } + + .interactive { &:hover .svg-inline--fa, &.-active .svg-inline--fa { color: $fallback--cBlue; color: var(--cBlue, $fallback--cBlue); } } + } </style> diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 5d4915aa..2a7301ce 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,33 +1,36 @@ <template> - <div> + <div class="RetweetButton"> <button v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn" - class="button-unstyled -padded RetweetButton -interactive" + class="button-unstyled interactive" :class="status.repeated && '-repeated'" + :title="$t('tool_tip.repeat')" + @click.prevent="retweet()" > <FAIcon class="fa-scale-110 fa-old-padding" icon="retweet" :spin="animated" - :title="$t('tool_tip.repeat')" - @click.prevent="retweet()" /> </button> <FAIcon v-else-if="loggedIn" - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" icon="lock" :title="$t('timeline.no_retweet_hint')" /> <FAIcon v-else - :class="classes" - class="RetweetButton fa-scale-110 fa-old-padding" + class="fa-scale-110 fa-old-padding" icon="retweet" :title="$t('tool_tip.repeat')" /> - <span v-if="!mergedConfig.hidePostStats && status.repeat_num > 0">{{ status.repeat_num }}</span> + <span + v-if="!mergedConfig.hidePostStats && status.repeat_num > 0" + class="no-event" + > + {{ status.repeat_num }} + </span> </div> </template> @@ -37,8 +40,19 @@ @import '../../_variables.scss'; .RetweetButton { - &.-interactive { + display: flex; + + > :first-child { + padding: 10px; + margin: -10px -5px -10px -10px; + } + + .action-counter { + pointer-events: none; + user-select: none; + } + .interactive { .svg-inline--fa { animation-duration: 0.6s; } |