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/extra_buttons/extra_buttons.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/extra_buttons/extra_buttons.vue')
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 34 |
1 files changed, 30 insertions, 4 deletions
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 2c893bf3..23d74fce 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -6,6 +6,8 @@ :offset="{ y: 5 }" :bound-to="{ x: 'container' }" remove-padding + @show="onShow" + @close="onClose" > <template #content="{close}"> <div class="dropdown-menu"> @@ -122,10 +124,24 @@ </template> <template #trigger> <span class="button-unstyled popover-trigger"> - <FAIcon - class="fa-scale-110 fa-old-padding" - icon="ellipsis-h" - /> + <FALayers class="fa-old-padding-layer"> + <FAIcon + class="fa-scale-110 " + icon="ellipsis-h" + /> + <FAIcon + v-if="!expanded" + class="focus-marker" + transform="shrink-6 up-8 right-16" + icon="plus" + /> + <FAIcon + v-else + class="focus-marker" + transform="shrink-6 up-8 right-16" + icon="times" + /> + </FALayers> </span> </template> </Popover> @@ -151,6 +167,16 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + .focus-marker { + visibility: hidden; + } + + &:hover, &:focus { + .focus-marker { + visibility: visible; + } + } } } </style> |