diff options
| author | HJ <30-hj@users.noreply.git.pleroma.social> | 2022-08-22 21:21:43 +0000 |
|---|---|---|
| committer | HJ <30-hj@users.noreply.git.pleroma.social> | 2022-08-22 21:21:43 +0000 |
| commit | 4e2feae8686c7ff7cbaec35d0c8e07f0a696c2dd (patch) | |
| tree | 1729d9464fc49c6c4a8623bcfeade595b09e1e3b /src/components/extra_buttons/extra_buttons.vue | |
| parent | 966dc36954dde7ec7f77f576b960f4874783db58 (diff) | |
| parent | cd536157ee0e675f7a2d408043c2ddbbc30eaa3b (diff) | |
Merge branch 'from/develop/tusooa/1092-accessible-status-xact' into 'develop'
Make status interaction buttons accessible
Closes #1092
See merge request pleroma/pleroma-fe!1425
Diffstat (limited to 'src/components/extra_buttons/extra_buttons.vue')
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 40 |
1 files changed, 36 insertions, 4 deletions
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 2c893bf3..011dff9b 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-show="!expanded" + class="focus-marker" + transform="shrink-6 up-8 right-16" + icon="plus" + /> + <FAIcon + v-show="expanded" + class="focus-marker" + transform="shrink-6 up-8 right-16" + icon="times" + /> + </FALayers> </span> </template> </Popover> @@ -135,6 +151,7 @@ <style lang="scss"> @import '../../_variables.scss'; +@import '../../_mixins.scss'; .ExtraButtons { /* override of popover internal stuff */ @@ -151,6 +168,21 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + } + + .popover-trigger-button { + @include unfocused-style { + .focus-marker { + visibility: hidden; + } + } + + @include focused-style { + .focus-marker { + visibility: visible; + } + } } } </style> |