diff options
Diffstat (limited to 'src/components/extra_buttons/extra_buttons.vue')
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 38 |
1 files changed, 15 insertions, 23 deletions
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index 5027be1b..fc800072 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -1,18 +1,13 @@ <template> - <Popper - v-if="showPopper" + <v-popover + v-if="enabled" trigger="click" - append-to-body - :options="{ - placement: 'top', - modifiers: { - arrow: { enabled: true }, - offset: { offset: '0, 5px' }, - } - }" - @hide="showDropDown = false" + placement="top" + class="extra-button-popover" + :offset="5" + :container="false" > - <div class="popper-wrapper"> + <div slot="popover"> <div class="dropdown-menu"> <button v-if="!status.muted" @@ -30,6 +25,7 @@ </button> <button v-if="!status.pinned && canPin" + v-close-popover class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" > @@ -37,6 +33,7 @@ </button> <button v-if="status.pinned && canPin" + v-close-popover class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" > @@ -44,6 +41,7 @@ </button> <button v-if="canDelete" + v-close-popover class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" > @@ -51,17 +49,10 @@ </button> </div> </div> - <div - slot="reference" - class="button-icon" - @click="toggleMenu" - > - <i - class="icon-ellipsis" - :class="{'icon-clicked': showDropDown}" - /> + <div class="button-icon"> + <i class="icon-ellipsis" /> </div> - </Popper> + </v-popover> </template> <script src="./extra_buttons.js" ></script> @@ -73,7 +64,8 @@ .icon-ellipsis { cursor: pointer; - &:hover, &.icon-clicked { + &:hover, + .extra-button-popover.open & { color: $fallback--text; color: var(--text, $fallback--text); } |