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/favorite_button/favorite_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/favorite_button/favorite_button.vue')
| -rw-r--r-- | src/components/favorite_button/favorite_button.vue | 43 |
1 files changed, 38 insertions, 5 deletions
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index d5c4c61e..4015e1e6 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -7,11 +7,31 @@ :title="$t('tool_tip.favorite')" @click.prevent="favorite()" > - <FAIcon - class="fa-scale-110 fa-old-padding" - :icon="[status.favorited ? 'fas' : 'far', 'star']" - :spin="animated" - /> + <FALayers class="fa-scale-110 fa-old-padding-layer"> + <FAIcon + class="fa-scale-110" + :icon="[status.favorited ? 'fas' : 'far', 'star']" + :spin="animated" + /> + <FAIcon + v-if="status.favorited" + class="active-marker" + transform="shrink-6 up-9 right-12" + icon="check" + /> + <FAIcon + v-if="!status.favorited" + 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> <FAIcon @@ -57,6 +77,19 @@ color: $fallback--cOrange; color: var(--cOrange, $fallback--cOrange); } + + .focus-marker { + visibility: hidden; + } + + &:hover, &:focus { + .focus-marker { + visibility: visible; + } + .active-marker { + visibility: hidden; + } + } } } </style> |