Commit 005815c8 authored by Tae Hoon's avatar Tae Hoon

rewrite ExtraButtons using v-tooltip

parent 1727c815
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: {
......
<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);
}
......
......@@ -824,7 +824,7 @@ $status-margin: 0.75em;
display: flex;
margin-top: $status-margin;
div, favorite-button {
> * {
max-width: 4em;
flex: 1;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment