From 1727c815f8bb9651a687d4329c4e7e13b7f1983d Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 08:30:35 -0400
Subject: install v-tooltip

---
 src/main.js | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src')

diff --git a/src/main.js b/src/main.js
index 3287fa2b..b3256e8e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -26,6 +26,7 @@ import messages from './i18n/messages.js'
 import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
+import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -37,6 +38,7 @@ Vue.use(VueI18n)
 Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
+Vue.use(VTooltip)
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary
-- 
cgit v1.2.3-70-g09d2


From 005815c8259e3ccbc1fdd9c4d352aa4053d187c4 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 08:31:02 -0400
Subject: rewrite ExtraButtons using v-tooltip

---
 src/components/extra_buttons/extra_buttons.js  | 24 ------------------
 src/components/extra_buttons/extra_buttons.vue | 35 +++++++++-----------------
 src/components/status/status.vue               |  2 +-
 3 files changed, 13 insertions(+), 48 deletions(-)

(limited to 'src')

diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 528da301..2ec72729 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,45 +1,21 @@
-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: {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 8e24e9a5..d5fc82ac 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -1,23 +1,16 @@
 <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);
   }
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index b825d17d..e9fe0700 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -824,7 +824,7 @@ $status-margin: 0.75em;
   display: flex;
   margin-top: $status-margin;
 
-  div, favorite-button {
+  > * {
     max-width: 4em;
     flex: 1;
   }
-- 
cgit v1.2.3-70-g09d2


From b9c547828e082970f8ad3fb72f81e38b738a6d0c Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 08:32:57 -0400
Subject: make popover position for status action dropdow relative to parent
 node

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

(limited to 'src')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index d5fc82ac..73f3d936 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -3,6 +3,7 @@
     v-if="enabled"
     trigger="click"
     class="extra-button-popover"
+    :container="false"
   >
     <div class="popper-wrapper" slot="popover">
       <div class="dropdown-menu">
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index e9fe0700..ab506632 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -820,6 +820,7 @@ $status-margin: 0.75em;
 }
 
 .status-actions {
+  position: relative;
   width: 100%;
   display: flex;
   margin-top: $status-margin;
-- 
cgit v1.2.3-70-g09d2


From 4f74392641f4e03723a0220fd1b012a38fd26fac Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 08:33:10 -0400
Subject: rewrite ModerationTools using v-tooltip

---
 .../moderation_tools/moderation_tools.js           |  7 +-----
 .../moderation_tools/moderation_tools.vue          | 26 +++++++++++-----------
 2 files changed, 14 insertions(+), 19 deletions(-)

(limited to 'src')

diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js
index 11de9f93..8aadc8c5 100644
--- a/src/components/moderation_tools/moderation_tools.js
+++ b/src/components/moderation_tools/moderation_tools.js
@@ -1,5 +1,4 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
-import Popper from 'vue-popperjs/src/component/popper.js.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -29,8 +28,7 @@ const ModerationTools = {
     }
   },
   components: {
-    DialogModal,
-    Popper
+    DialogModal
   },
   computed: {
     tagsSet () {
@@ -41,9 +39,6 @@ const ModerationTools = {
     }
   },
   methods: {
-    toggleMenu () {
-      this.showDropDown = !this.showDropDown
-    },
     hasTag (tagName) {
       return this.tagsSet.has(tagName)
     },
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index f1ab67a6..4990a151 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -1,18 +1,13 @@
 <template>
   <div>
-    <Popper
+    <v-popover
       trigger="click"
-      append-to-body
-      :options="{
-        placement: 'bottom-end',
-        modifiers: {
-          arrow: { enabled: true },
-          offset: { offset: '0, 5px' },
-        }
-      }"
+      class="moderation-tools-popover"
+      :container="false"
+      @show="showDropDown = true"
       @hide="showDropDown = false"
     >
-      <div class="popper-wrapper">
+      <div class="popper-wrapper" slot="popover">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -127,14 +122,12 @@
         </div>
       </div>
       <button
-        slot="reference"
         class="btn btn-default btn-block"
         :class="{ pressed: showDropDown }"
-        @click="toggleMenu"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </Popper>
+    </v-popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"
@@ -188,4 +181,11 @@
   }
 }
 
+.moderation-tools-popover {
+  height: 100%;
+  .trigger {
+    display: flex !important;
+    height: 100%;
+  }
+}
 </style>
-- 
cgit v1.2.3-70-g09d2


From c4789a348fe2bc10ed253f5dafca6547855569ed Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 11:01:12 -0400
Subject: migrate popper css

---
 src/components/extra_buttons/extra_buttons.vue     |   4 +-
 .../moderation_tools/moderation_tools.vue          |   4 +-
 src/components/popper/popper.scss                  | 147 ++++++++++++---------
 src/components/user_card/user_card.vue             |   1 +
 4 files changed, 91 insertions(+), 65 deletions(-)

(limited to 'src')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 73f3d936..23c1adb6 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,10 +2,12 @@
   <v-popover
     v-if="enabled"
     trigger="click"
+    placement="top"
     class="extra-button-popover"
+    :offset="5"
     :container="false"
   >
-    <div class="popper-wrapper" slot="popover">
+    <div slot="popover">
       <div class="dropdown-menu">
         <button
           v-if="!status.pinned && canPin"
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 4990a151..d97ca3aa 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -4,10 +4,12 @@
       trigger="click"
       class="moderation-tools-popover"
       :container="false"
+      placement="bottom-end"
+      :offset="5"
       @show="showDropDown = true"
       @hide="showDropDown = false"
     >
-      <div class="popper-wrapper" slot="popover">
+      <div slot="popover">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
index cfc5c8e7..279b01be 100644
--- a/src/components/popper/popper.scss
+++ b/src/components/popper/popper.scss
@@ -1,71 +1,99 @@
 @import '../../_variables.scss';
 
-.popper-wrapper {
+.tooltip.popover {
   z-index: 8;
-}
 
-.popper-wrapper .popper__arrow {
-  width: 0;
-  height: 0;
-  border-style: solid;
-  position: absolute;
-  margin: 5px;
-}
+  .popover-inner {
+    box-shadow: 1px 1px 4px rgba(0,0,0,.6);
+    box-shadow: var(--panelShadow);
+    border-radius: $fallback--btnRadius;
+    border-radius: var(--btnRadius, $fallback--btnRadius);
+    background-color: $fallback--bg;
+    background-color: var(--bg, $fallback--bg);
+  }
 
-.popper-wrapper[x-placement^="top"] {
-  margin-bottom: 5px;
-}
+  .popover-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: $fallback--bg;
+    border-color: var(--bg, $fallback--bg);
+    z-index: 1;
+  }
 
-.popper-wrapper[x-placement^="top"] .popper__arrow {
-  border-width: 5px 5px 0 5px;
-  border-color: $fallback--bg transparent transparent transparent;
-  border-color: var(--bg, $fallback--bg) transparent transparent transparent;
-  bottom: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .popover-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
 
-.popper-wrapper[x-placement^="bottom"] {
-  margin-top: 5px;
-}
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .popover-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
 
-.popper-wrapper[x-placement^="bottom"] .popper__arrow {
-  border-width: 0 5px 5px 5px;
-  border-color: transparent transparent $fallback--bg transparent;
-  border-color: transparent transparent var(--bg, $fallback--bg) transparent;
-  top: -5px;
-  left: calc(50% - 5px);
-  margin-top: 0;
-  margin-bottom: 0;
-}
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .popover-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
 
-.popper-wrapper[x-placement^="right"] {
-  margin-left: 5px;
-}
+  &[x-placement^="left"] {
+    margin-right: 5px;
 
-.popper-wrapper[x-placement^="right"] .popper__arrow {
-  border-width: 5px 5px 5px 0;
-  border-color: transparent $fallback--bg transparent transparent;
-  border-color: transparent var(--bg, $fallback--bg) transparent transparent;
-  left: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
-}
+    .popover-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
 
-.popper-wrapper[x-placement^="left"] {
-  margin-right: 5px;
-}
+  &[aria-hidden='true'] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity .15s, visibility .15s;
+  }
 
-.popper-wrapper[x-placement^="left"] .popper__arrow {
-  border-width: 5px 0 5px 5px;
-  border-color: transparent transparent transparent $fallback--bg;
-  border-color: transparent transparent transparent var(--bg, $fallback--bg);
-  right: -5px;
-  top: calc(50% - 5px);
-  margin-left: 0;
-  margin-right: 0;
+  &[aria-hidden='false'] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity .15s;
+  }
 }
 
 .dropdown-menu {
@@ -76,13 +104,6 @@
   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;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index f987fbbb..ef3a5144 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -503,6 +503,7 @@
     }
   }
   .user-interactions {
+    position: relative;
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
-- 
cgit v1.2.3-70-g09d2


From e3ac71968b549e90e90db976da1571fddbbb6472 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 11:49:18 -0400
Subject: fix moderation menu partially hidden by usercard boundary

---
 src/components/user_card/user_card.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index ef3a5144..9e142480 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -283,7 +283,6 @@
 
 .user-card {
   background-size: cover;
-  overflow: hidden;
 
   .panel-heading {
     padding: .5em 0;
@@ -298,6 +297,8 @@
     word-wrap: break-word;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%);
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%);
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
   }
 
   p {
-- 
cgit v1.2.3-70-g09d2


From 051b3b5141b7da8fd5c73af20848d6546ff43248 Mon Sep 17 00:00:00 2001
From: taehoon <th.dev91@gmail.com>
Date: Thu, 11 Jul 2019 11:50:56 -0400
Subject: fix eslint warnings

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

(limited to 'src')

diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 23c1adb6..cdad1666 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -11,25 +11,25 @@
       <div class="dropdown-menu">
         <button
           v-if="!status.pinned && canPin"
+          v-close-popover
           class="dropdown-item dropdown-item-icon"
           @click.prevent="pinStatus"
-          v-close-popover
         >
           <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"
-          v-close-popover
         >
           <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"
-          v-close-popover
         >
           <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span>
         </button>
-- 
cgit v1.2.3-70-g09d2