diff options
Diffstat (limited to 'src/components/react_button/react_button.vue')
| -rw-r--r-- | src/components/react_button/react_button.vue | 35 |
1 files changed, 30 insertions, 5 deletions
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue index 5a809847..e30f6b68 100644 --- a/src/components/react_button/react_button.vue +++ b/src/components/react_button/react_button.vue @@ -7,7 +7,8 @@ :bound-to="{ x: 'container' }" remove-padding popover-class="ReactButton popover-default" - @show="focusInput" + @show="onShow" + @close="onClose" > <template #content="{close}"> <div class="reaction-picker-filter"> @@ -46,10 +47,24 @@ class="button-unstyled popover-trigger" :title="$t('tool_tip.add_reaction')" > - <FAIcon - class="fa-scale-110 fa-old-padding" - :icon="['far', 'smile-beam']" - /> + <FALayers> + <FAIcon + class="fa-scale-110 fa-old-padding" + :icon="['far', 'smile-beam']" + /> + <FAIcon + v-if="!expanded" + class="focus-marker" + transform="shrink-6 up-9 right-17" + icon="plus" + /> + <FAIcon + v-else + class="focus-marker" + transform="shrink-6 up-9 right-17" + icon="times" + /> + </FALayers> </span> </template> </Popover> @@ -125,6 +140,16 @@ color: $fallback--text; color: var(--text, $fallback--text); } + + .focus-marker { + visibility: hidden; + } + + &:hover, &:focus { + .focus-marker { + visibility: visible; + } + } } } |