diff options
| author | Tusooa Zhu <tusooa@kazv.moe> | 2022-01-16 01:01:19 -0500 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2022-08-22 20:28:52 +0000 |
| commit | b2e482774102a4e92b79c21cc57353e6677adf13 (patch) | |
| tree | 8ec5842e02839f3e1a1f2c0d655e11c97fbcc7f1 /src/components/retweet_button/retweet_button.vue | |
| parent | f01c3f60c81d6ee128955d1218b0d89aa91c5be0 (diff) | |
Add badges to status interacting buttons
Now, the following badges will be added:
0: (+) sign to reply, favourite, repeat, react and extra buttons
1: (-) sign to unfavourite and unrepeat
2: (x) sign to close reply form, close react popover, and close extra buttons popover
3: Check mark to favourited and repeated statuses
https://git.pleroma.social/pleroma/pleroma-fe/-/issues/1092
Diffstat (limited to 'src/components/retweet_button/retweet_button.vue')
| -rw-r--r-- | src/components/retweet_button/retweet_button.vue | 43 |
1 files changed, 38 insertions, 5 deletions
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 5a15d387..ed84066d 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -7,11 +7,31 @@ :title="$t('tool_tip.repeat')" @click.prevent="retweet()" > - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="retweet" - :spin="animated" - /> + <FALayers class="fa-old-padding-layer"> + <FAIcon + class="fa-scale-110" + icon="retweet" + :spin="animated" + /> + <FAIcon + v-if="status.repeated" + class="active-marker" + transform="shrink-6 up-9 right-12" + icon="check" + /> + <FAIcon + v-if="!status.repeated" + class="focus-marker" + transform="shrink-6 up-9 right-12" + icon="plus" + /> + <FAIcon + v-else + class="focus-marker" + transform="shrink-6 up-9 right-12" + icon="minus" + /> + </FALayers> </button> <span v-else-if="loggedIn"> <FAIcon @@ -64,6 +84,19 @@ color: $fallback--cGreen; color: var(--cGreen, $fallback--cGreen); } + + .focus-marker { + visibility: hidden; + } + + &:hover, &:focus { + .focus-marker { + visibility: visible; + } + .active-marker { + visibility: hidden; + } + } } } </style> |