2 files changed, 58 insertions, 47 deletions

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 528da301..5ac73e97 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,45 +1,31 @@
-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
-      })
+    muteConversation () {
+      this.$store.dispatch('muteConversation', this.status.id)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
+    },
+    unmuteConversation () {
+      this.$store.dispatch('unmuteConversation', this.status.id)
+        .then(() => this.$emit('onSuccess'))
+        .catch(err => this.$emit('onError', err.error.error))
     }
   },
   computed: {
@@ -55,8 +41,8 @@ const ExtraButtons = {
     canPin () {
       return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
     },
-    enabled () {
-      return this.canPin || this.canDelete
+    canMute () {
+      return !!this.currentUser
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index a761d313..ed0f3aa4 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,34 +1,58 @@
 <template>
-  <Popper
+  <v-popover
+    v-if="canDelete || canMute || canPin"
     trigger="click"
-    @hide='showDropDown = false'
-    append-to-body
-    v-if="enabled && showPopper"
-    :options="{
-      placement: 'top',
-      modifiers: {
-        arrow: { enabled: true },
-        offset: { offset: '0, 5px' },
-      }
-    }"
+    placement="top"
+    class="extra-button-popover"
+    :offset="5"
+    :container="false"
   >
-    <div class="popper-wrapper">
+    <div slot="popover">
       <div class="dropdown-menu">
-        <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && canPin">
-          <i class="icon-pin"></i><span>{{$t("status.pin")}}</span>
+        <button
+          v-if="canMute && !status.muted"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="muteConversation"
+        >
+          <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span>
         </button>
-        <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && canPin">
-          <i class="icon-pin"></i><span>{{$t("status.unpin")}}</span>
+        <button
+          v-if="canMute && status.muted"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="unmuteConversation"
+        >
+          <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span>
         </button>
-        <button class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" v-if="canDelete">
-          <i class="icon-cancel"></i><span>{{$t("status.delete")}}</span>
+        <button
+          v-if="!status.pinned && canPin"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="pinStatus"
+        >
+          <i class="icon-pin" /><span>{{ $t("status.pin") }}</span>
+        </button>
+        <button
+          v-if="status.pinned && canPin"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="unpinStatus"
+        >
+          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+        </button>
+        <button
+          v-if="canDelete"
+          v-close-popover
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="deleteStatus"
+        >
+          <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
         </button>
       </div>
     </div>
-    <div class="button-icon" slot="reference" @click="toggleMenu">
-      <i class='icon-ellipsis' :class="{'icon-clicked': showDropDown}"></i>
+    <div class="button-icon">
+      <i class="icon-ellipsis" />
     </div>
-  </Popper>
+  </v-popover>
 </template>
 
 <script src="./extra_buttons.js" ></script>
@@ -40,7 +64,8 @@
 .icon-ellipsis {
   cursor: pointer;
 
-  &:hover, &.icon-clicked {
+  &:hover,
+  .extra-button-popover.open & {
     color: $fallback--text;
     color: var(--text, $fallback--text);
   }