rewrite ExtraButtons using v-tooltip

This commit is contained in:
taehoon 2019-07-11 08:31:02 -04:00
parent 1727c815f8
commit 005815c825
3 changed files with 13 additions and 48 deletions

View file

@ -1,45 +1,21 @@
import Popper from 'vue-popperjs/src/component/popper.js.vue'
const ExtraButtons = {
props: [ 'status' ],
components: {
Popper
},
data () {
return {
showDropDown: false,
showPopper: true
}
},
methods: {
deleteStatus () {
this.refreshPopper()
const confirmed = window.confirm(this.$t('status.delete_confirm'))
if (confirmed) {
this.$store.dispatch('deleteStatus', { id: this.status.id })
}
},
toggleMenu () {
this.showDropDown = !this.showDropDown
},
pinStatus () {
this.refreshPopper()
this.$store.dispatch('pinStatus', this.status.id)
.then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error))
},
unpinStatus () {
this.refreshPopper()
this.$store.dispatch('unpinStatus', this.status.id)
.then(() => this.$emit('onSuccess'))
.catch(err => this.$emit('onError', err.error.error))
},
refreshPopper () {
this.showPopper = false
this.showDropDown = false
setTimeout(() => {
this.showPopper = true
})
}
},
computed: {

View file

@ -1,23 +1,16 @@
<template>
<Popper
v-if="enabled && 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"
class="extra-button-popover"
>
<div class="popper-wrapper">
<div class="popper-wrapper" slot="popover">
<div class="dropdown-menu">
<button
v-if="!status.pinned && canPin"
class="dropdown-item dropdown-item-icon"
@click.prevent="pinStatus"
v-close-popover
>
<i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
</button>
@ -25,6 +18,7 @@
v-if="status.pinned && canPin"
class="dropdown-item dropdown-item-icon"
@click.prevent="unpinStatus"
v-close-popover
>
<i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
</button>
@ -32,22 +26,16 @@
v-if="canDelete"
class="dropdown-item dropdown-item-icon"
@click.prevent="deleteStatus"
v-close-popover
>
<i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
</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>
@ -59,7 +47,8 @@
.icon-ellipsis {
cursor: pointer;
&:hover, &.icon-clicked {
&:hover,
.extra-button-popover.open & {
color: $fallback--text;
color: var(--text, $fallback--text);
}

View file

@ -824,7 +824,7 @@ $status-margin: 0.75em;
display: flex;
margin-top: $status-margin;
div, favorite-button {
> * {
max-width: 4em;
flex: 1;
}