#468 - add extra buttons for status actions

src/components/extra_buttons/extra_buttons.js

@@ -0,0 +1,51 @@
+import Popper from 'vue-popperjs/src/component/popper.js.vue'
+
+const ExtraButtons = {
+  props: [ 'status' ],
+  components: {
+    Popper
+  },
+  data () {
+    return {
+      showDropDown: false
+    }
+  },
+  methods: {
+    deleteStatus () {
+      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.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => {
+        if (status.error) {
+          this.$emit('onError', status.error)
+        } else {
+          this.$store.dispatch('updatePinned', status)
+        }
+      })
+    },
+    unpinStatus () {
+      this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => {
+        this.$store.dispatch('updatePinned', status)
+      })
+    }
+  },
+  computed: {
+    currentUser () { return this.$store.state.users.currentUser },
+    canDelete () {
+      if (!this.currentUser) { return }
+      const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin
+      return superuser || this.status.user.id === this.currentUser.id
+    },
+    ownStatus () {
+      return this.status.user.id === this.currentUser.id
+    }
+  }
+}
+
+export default ExtraButtons

src/components/extra_buttons/extra_buttons.vue

@@ -0,0 +1,46 @@
+<template>
+  <Popper
+    trigger="click"
+    @hide='showDropDown = false'
+    append-to-body
+    :options="{
+      placement: 'top',
+      modifiers: {
+        arrow: { enabled: true },
+        offset: { offset: '0, 5px' },
+      }
+    }"
+  >
+    <div class="popper-wrapper">
+      <div class="dropdown-menu"> 
+        <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && ownStatus">
+          <i class="icon-pin"></i><span>{{$t("status.pin")}}</span>
+        </button>
+        <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && ownStatus">
+          <i class="icon-pin"></i><span>{{$t("status.unpin")}}</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>
+      </div>
+    </div>
+    <div class="button-icon" slot="reference" @click="toggleMenu">
+      <i class='icon-ellipsis' :class="{'icon-clicked': showDropDown}"></i>
+    </div>
+  </Popper>
+</template>
+
+<script src="./extra_buttons.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+
+.icon-ellipsis {
+  cursor: pointer;
+
+  &:hover, &.icon-clicked {
+    color: $fallback--cBlue;
+    color: var(--cBlue, $fallback--cBlue);
+  }
+}
+</style>