From 9fc997500e33d561a1aa5d26c8ed8f4446a0248e Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Fri, 12 Apr 2019 15:35:29 -0400
Subject: #468 - add extra buttons for status actions

---
 src/components/extra_buttons/extra_buttons.vue | 46 ++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 src/components/extra_buttons/extra_buttons.vue

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
new file mode 100644
index 00000000..13f8587b
--- /dev/null
+++ b/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>
-- 
cgit v1.2.3-70-g09d2


From 075ddc34f1e3139d8a7b6c28802347ecdbe48f34 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Sun, 14 Apr 2019 13:18:56 -0400
Subject: #468 - shwo pin button for valid statuses (public & unlisted)

---
 src/components/extra_buttons/extra_buttons.js  | 3 +++
 src/components/extra_buttons/extra_buttons.vue | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 40bab2ab..0b12f993 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -44,6 +44,9 @@ const ExtraButtons = {
     },
     ownStatus () {
       return this.status.user.id === this.currentUser.id
+    },
+    canPin () {
+      return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 13f8587b..7b86d257 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -13,10 +13,10 @@
   >
     <div class="popper-wrapper">
       <div class="dropdown-menu"> 
-        <button class="dropdown-item dropdown-item-icon" @click.prevent="pinStatus" v-if="!status.pinned && ownStatus">
+        <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>
-        <button class="dropdown-item dropdown-item-icon" @click.prevent="unpinStatus" v-if="status.pinned && ownStatus">
+        <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>
         <button class="dropdown-item dropdown-item-icon" @click.prevent="deleteStatus" v-if="canDelete">
-- 
cgit v1.2.3-70-g09d2


From 8095ce8f6263115979a784c51b79ff089a8b16d3 Mon Sep 17 00:00:00 2001
From: dave <starpumadev@gmail.com>
Date: Sun, 14 Apr 2019 22:27:16 -0400
Subject: #468 - hide status menu after action button is clicked

---
 src/components/extra_buttons/extra_buttons.js  | 13 ++++++++++++-
 src/components/extra_buttons/extra_buttons.vue |  1 +
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 0b12f993..71f5946d 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -7,11 +7,13 @@ const ExtraButtons = {
   },
   data () {
     return {
-      showDropDown: false
+      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 })
@@ -21,6 +23,7 @@ const ExtraButtons = {
       this.showDropDown = !this.showDropDown
     },
     pinStatus () {
+      this.refreshPopper()
       this.$store.state.api.backendInteractor.pinOwnStatus(this.status.id).then((status) => {
         if (status.error) {
           this.$emit('onError', status.error)
@@ -30,9 +33,17 @@ const ExtraButtons = {
       })
     },
     unpinStatus () {
+      this.refreshPopper()
       this.$store.state.api.backendInteractor.unpinOwnStatus(this.status.id).then((status) => {
         this.$store.dispatch('updatePinned', status)
       })
+    },
+    refreshPopper () {
+      this.showPopper = false
+      this.showDropDown = false
+      setTimeout(() => {
+        this.showPopper = true
+      })
     }
   },
   computed: {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 7b86d257..b55a020f 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -3,6 +3,7 @@
     trigger="click"
     @hide='showDropDown = false'
     append-to-body
+    v-if="showPopper"
     :options="{
       placement: 'top',
       modifiers: {
-- 
cgit v1.2.3-70-g09d2


From 1747cd87717e5658cdae70d8b86216612c58bc81 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Fri, 26 Apr 2019 16:30:04 -0400
Subject: use text color instead

---
 src/components/extra_buttons/extra_buttons.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b55a020f..38e933bb 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -40,8 +40,8 @@
   cursor: pointer;
 
   &:hover, &.icon-clicked {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: $fallback--text;
+    color: var(--text, $fallback--text);
   }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 07d0143bda8d35b9743731711a2085f8399168c5 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 16 May 2019 13:45:18 -0400
Subject: hide three dot menu button if has no items

---
 src/components/extra_buttons/extra_buttons.js  | 3 +++
 src/components/extra_buttons/extra_buttons.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index f70ecd1d..528da301 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -54,6 +54,9 @@ const ExtraButtons = {
     },
     canPin () {
       return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted')
+    },
+    enabled () {
+      return this.canPin || this.canDelete
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 38e933bb..ef11138d 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -3,7 +3,7 @@
     trigger="click"
     @hide='showDropDown = false'
     append-to-body
-    v-if="showPopper"
+    v-if="enabled && showPopper"
     :options="{
       placement: 'top',
       modifiers: {
-- 
cgit v1.2.3-70-g09d2


From 6c7eeb93fef28789a4d560be7feaeccc19d6ed20 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 May 2019 00:13:08 +0300
Subject: move drowdown menu to popper

---
 src/components/extra_buttons/extra_buttons.vue     |  3 +-
 .../moderation_tools/moderation_tools.vue          | 58 ----------------------
 src/components/popper/popper.scss                  | 57 +++++++++++++++++++++
 3 files changed, 59 insertions(+), 59 deletions(-)

(limited to 'src/components/extra_buttons/extra_buttons.vue')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index ef11138d..a761d313 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -13,7 +13,7 @@
     }"
   >
     <div class="popper-wrapper">
-      <div class="dropdown-menu"> 
+      <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>
@@ -35,6 +35,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../popper/popper.scss';
 
 .icon-ellipsis {
   cursor: pointer;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index c9e3fc78..146673a5 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -86,64 +86,6 @@
 @import '../../_variables.scss';
 @import '../popper/popper.scss';
 
-.dropdown-menu {
-  display: block;
-  padding: .5rem 0;
-  font-size: 1rem;
-  text-align: left;
-  list-style: none;
-  max-width: 100vw;
-  z-index: 10;
-  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
-  box-shadow: var(--panelShadow);
-  border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
-
-  .dropdown-divider {
-    height: 0;
-    margin: .5rem 0;
-    overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
-  }
-
-  .dropdown-item {
-    line-height: 21px;
-    margin-right: 5px;
-    overflow: auto;
-    display: block;
-    padding: .25rem 1.0rem .25rem 1.5rem;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: normal;
-    border: none;
-    border-radius: 0px;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-
-    &-icon {
-      padding-left: 0.5rem;
-
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-    &:hover {
-      // TODO: improve the look on breeze themes
-      background-color: $fallback--fg;
-      background-color: var(--btn, $fallback--fg);
-      box-shadow: none;
-    }
-  }
-}
-
 .menu-checkbox {
   float: right;
   min-width: 22px;
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index 0c30d625..cfc5c8e7 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -68,3 +68,60 @@
   margin-right: 0;
 }
 
+.dropdown-menu {
+  display: block;
+  padding: .5rem 0;
+  font-size: 1rem;
+  text-align: left;
+  list-style: none;
+  max-width: 100vw;
+  z-index: 10;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+  box-shadow: var(--panelShadow);
+  border: none;
+  border-radius: $fallback--btnRadius;
+  border-radius: var(--btnRadius, $fallback--btnRadius);
+  background-color: $fallback--bg;
+  background-color: var(--bg, $fallback--bg);
+
+  .dropdown-divider {
+    height: 0;
+    margin: .5rem 0;
+    overflow: hidden;
+    border-top: 1px solid $fallback--border;
+    border-top: 1px solid var(--border, $fallback--border);
+  }
+
+  .dropdown-item {
+    line-height: 21px;
+    margin-right: 5px;
+    overflow: auto;
+    display: block;
+    padding: .25rem 1.0rem .25rem 1.5rem;
+    clear: both;
+    font-weight: 400;
+    text-align: inherit;
+    white-space: normal;
+    border: none;
+    border-radius: 0px;
+    background-color: transparent;
+    box-shadow: none;
+    width: 100%;
+    height: 100%;
+
+    &-icon {
+      padding-left: 0.5rem;
+
+      i {
+        margin-right: 0.25rem;
+      }
+    }
+
+    &:hover {
+      // TODO: improve the look on breeze themes
+      background-color: $fallback--fg;
+      background-color: var(--btn, $fallback--fg);
+      box-shadow: none;
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2

