2 files changed, 131 insertions, 0 deletions
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
new file mode 100644
index 00000000..528da301
--- /dev/null
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -0,0 +1,64 @@
+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: {
+    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
+    },
+    canPin () {
+      return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+    },
+    enabled () {
+      return this.canPin || this.canDelete
+    }
+  }
+}
+
+export default ExtraButtons
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
new file mode 100644
index 00000000..8e24e9a5
--- /dev/null
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -0,0 +1,67 @@
+<template>
+  <Popper
+    v-if="enabled && showPopper"
+    trigger="click"
+    append-to-body
+    :options="{
+      placement: 'top',
+      modifiers: {
+        arrow: { enabled: true },
+        offset: { offset: '0, 5px' },
+      }
+    }"
+    @hide="showDropDown = false"
+  >
+    <div class="popper-wrapper">
+      <div class="dropdown-menu">
+        <button
+          v-if="!status.pinned && canPin"
+          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"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="unpinStatus"
+        >
+          <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span>
+        </button>
+        <button
+          v-if="canDelete"
+          class="dropdown-item dropdown-item-icon"
+          @click.prevent="deleteStatus"
+        >
+          <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>
+  </Popper>
+</template>
+
+<script src="./extra_buttons.js" ></script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+@import '../popper/popper.scss';
+
+.icon-ellipsis {
+  cursor: pointer;
+
+  &:hover, &.icon-clicked {
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
+  }
+}
+</style>