remove v-tooltip completely

package.json

@@ -29,7 +29,6 @@
     "portal-vue": "^2.1.4",
     "sanitize-html": "^1.13.0",
     "v-click-outside": "^2.1.1",
-    "v-tooltip": "^2.0.2",
     "vue": "^2.5.13",
     "vue-chat-scroll": "^1.2.1",
     "vue-i18n": "^7.3.2",

src/components/moderation_tools/moderation_tools.js

@@ -1,4 +1,5 @@
 import DialogModal from '../dialog_modal/dialog_modal.vue'
+import Popover from '../popover/popover.vue'
 
 const FORCE_NSFW = 'mrf_tag:media-force-nsfw'
 const STRIP_MEDIA = 'mrf_tag:media-strip'
@@ -14,7 +15,6 @@ const ModerationTools = {
   ],
   data () {
     return {
-      showDropDown: false,
       tags: {
         FORCE_NSFW,
         STRIP_MEDIA,
@@ -28,7 +28,8 @@ const ModerationTools = {
     }
   },
   components: {
-    DialogModal
+    DialogModal,
+    Popover
   },
   computed: {
     tagsSet () {

src/components/moderation_tools/moderation_tools.vue

@@ -1,13 +1,12 @@
 <template>
   <div>
-    <v-popover
+    <Popover
       trigger="click"
       class="moderation-tools-popover"
-      placement="bottom-end"
+      placement="bottom"
-      @show="showDropDown = true"
+      :offset="{ y: 5 }"
-      @hide="showDropDown = false"
     >
-      <div slot="popover">
+      <div slot="content">
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -122,12 +121,12 @@
         </div>
       </div>
       <button
+        slot="trigger"
         class="btn btn-default btn-block"
-        :class="{ pressed: showDropDown }"
       >
         {{ $t('user_card.admin_menu.moderation') }}
       </button>
-    </v-popover>
+    </Popover>
     <portal to="modal">
       <DialogModal
         v-if="showDeleteUserDialog"

src/components/popover/popover.js

@@ -12,7 +12,8 @@ const Popover = {
   data () {
     return {
       hidden: true,
-      styles: { opacity: 0 }
+      styles: { opacity: 0 },
+      oldSize: { width: 0, height: 0 }
     }
   },
   computed: {
@@ -21,19 +22,6 @@ const Popover = {
     }
   },
   methods: {
-    /*
-    registerPopover (e) {
-      if (!this.targetId) {
-        this.$store.dispatch('registerPopover', e.target).then(id => this.targetId = id)
-      }
-    },
-    unregisterPopover () {
-      if (this.targetId) {
-        this.$store.dispatch('unregisterPopover', this.targetId)
-        this.targetId = null
-      }
-    },
-    */
     updateStyles () {
       if (this.hidden) return { opacity: 0 }
 
@@ -43,32 +31,40 @@ const Popover = {
       // Screen position of the origin point for popover
       const origin = { x: screenBox.left + screenBox.width * 0.5, y: screenBox.top }
       const content = this.$refs.content
-      const parentBounds = this.boundTo === 'container' && this.$el.offsetParent.getBoundingClientRect()
+      // Minor optimization, don't call a slow reflow call if we don't have to
+      const parentBounds =
+        (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
+        this.$el.offsetParent.getBoundingClientRect()
       const padding = this.padding || {}
-      const bounds = this.boundTo === 'container'
+
-        ? {
+      // What are the screen bounds for the popover? Viewport vs container
-          xMin: parentBounds.left + (padding.left || 0),
+      // when using viewport, using default padding values to dodge the navbar
-          xMax: parentBounds.right - (padding.right || 0),
+      const xBounds = this.boundTo.x === 'container' ? {
-          yMin: 0 + (padding.top || 50),
+        min: parentBounds.left + (padding.left || 0),
-          yMax: window.innerHeight - (padding.bottom || 5)
+        max: parentBounds.right - (padding.right || 0)
       } : {
-          xMin: 0 + (padding.left || 10),
+        min: 0 + (padding.left || 10),
-          xMax: window.innerWidth - (padding.right || 10),
+        max: window.innerWidth - (padding.right || 10)
-          yMin: 0 + (padding.top || 50),
-          yMax: window.innerHeight - (padding.bottom || 5)
       }
+
+      const yBounds = this.boundTo.y === 'container' ? {
+        min: parentBounds.top + (padding.top || 0),
+        max: parentBounds.bottom - (padding.bottom || 0)
+      } : {
+        min: 0 + (padding.top || 50),
+        max: window.innerHeight - (padding.bottom || 5)
+      }
+
       let horizOffset = 0
 
-      console.log(bounds, content.offsetWidth)
+      // If overflowing from left, move it so that it doesn't
-
+      if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
-      // If overflowing from left, move it
+        horizOffset = -(origin.x - content.offsetWidth * 0.5) + xBounds.min
-      if ((origin.x - content.offsetWidth * 0.5) < bounds.xMin) {
-        horizOffset = -(origin.x - content.offsetWidth * 0.5) + bounds.xMin
       }
 
-      // If overflowing from right, move it
+      // If overflowing from right, move it so that it doesn't
-      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > bounds.xMax) {
+      if ((origin.x + horizOffset + content.offsetWidth * 0.5) > xBounds.max) {
-        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - bounds.xMax
+        horizOffset -= (origin.x + horizOffset + content.offsetWidth * 0.5) - xBounds.max
       }
 
       // Default to whatever user wished with placement prop
@@ -77,21 +73,20 @@ const Popover = {
       // Handle special cases, first force to displaying on top if there's not space on bottom,
       // regardless of what placement value was. Then check if there's not space on top, and
       // force to bottom, again regardless of what placement value was.
-      if (origin.y + content.offsetHeight > bounds.yMax) usingTop = true
+      if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
-      if (origin.y - content.offsetHeight < bounds.yMin) usingTop = false
+      if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
 
       const yOffset = (this.offset && this.offset.y) || 0
-      const vertAlign = usingTop
+      const translateY = usingTop
-        ? {
+        ? -anchorEl.offsetHeight - yOffset - content.offsetHeight
-          bottom: `${anchorEl.offsetHeight + yOffset}px`
+        : yOffset + yOffset
-        }
+
-        : {
+      const xOffset = (this.offset && this.offset.x) || 0
-          top: `${anchorEl.offsetHeight + yOffset}px`
+      const translateX = (+anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
-        }
+
       this.styles = {
-        opacity: '100%',
+        opacity: 1,
-        left: `${(anchorEl.offsetLeft + anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset}px`,
+        transform: `translate(${Math.floor(translateX)}px, ${Math.floor(translateY)}px)`
-        ...vertAlign
       }
     },
     showPopover () {
@@ -125,9 +120,16 @@ const Popover = {
       this.hidePopover()
     }
   },
-  beforeUpdate () {
+  updated () {
-    console.log('beforeupdate')
+    // Monitor changes to content size, update styles only when content sizes have changed,
-    // if (!this.hidden) this.$nextTick(this.updateStyles)
+    // that should be the only time we need to move the popover box if we don't care about scroll
+    // or resize
+    const content = this.$refs.content
+    if (!content) return
+    if (this.oldSize.width !== content.offsetWidth || this.oldSize.height !== content.offsetHeight) {
+      this.updateStyles()
+      this.oldSize = { width: content.offsetWidth, height: content.offsetHeight }
+    }
   },
   created () {
     document.addEventListener('click', this.onClickOutside)

src/components/status_popover/status_popover.vue

@@ -1,8 +1,9 @@
 <template>
   <Popover
     trigger="hover"
-    bound-to="container"
     popover-class="status-popover"
+    :bound-to="{ x: 'container' }"
+    :offset="{ x: 0, y: 5 }"
     @show="enter"
   >
     <template slot="trigger">
@@ -36,7 +37,6 @@
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  margin: 0.5em 0;
 
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);

src/components/user_card/user_card.vue

@@ -184,7 +184,7 @@
             </button>
           </div>
           <ModerationTools
-            v-if="loggedIn.role === &quot;admin&quot;"
+            v-if="loggedIn.role === &quot;admin&quot; || loggedIn"
             :user="user"
           />
         </div>

src/main.js

@@ -31,7 +31,6 @@ import VueChatScroll from 'vue-chat-scroll'
 import VueClickOutside from 'v-click-outside'
 import PortalVue from 'portal-vue'
 import VBodyScrollLock from './directives/body_scroll_lock'
-import VTooltip from 'v-tooltip'
 
 import afterStoreSetup from './boot/after_store.js'
 
@@ -44,13 +43,6 @@ Vue.use(VueChatScroll)
 Vue.use(VueClickOutside)
 Vue.use(PortalVue)
 Vue.use(VBodyScrollLock)
-Vue.use(VTooltip, {
-  popover: {
-    defaultTrigger: 'hover click',
-    defaultContainer: false,
-    defaultOffset: 5
-  }
-})
 
 const i18n = new VueI18n({
   // By default, use the browser locale, we will update it if neccessary

yarn.lock

@@ -5941,11 +5941,6 @@ pngjs@^3.3.0:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
 
-popper.js@^1.15.0:
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.15.0.tgz#5560b99bbad7647e9faa475c6b8056621f5a4ff2"
-  integrity sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA==
-
 portal-vue@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/portal-vue/-/portal-vue-2.1.4.tgz#1fc679d77e294dc8d026f1eb84aa467de11b392e"
@@ -7823,15 +7818,6 @@ v-click-outside@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/v-click-outside/-/v-click-outside-2.1.3.tgz#b7297abe833a439dc0895e6418a494381e64b5e7"
 
-v-tooltip@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/v-tooltip/-/v-tooltip-2.0.2.tgz#8610d9eece2cc44fd66c12ef2f12eec6435cab9b"
-  integrity sha512-xQ+qzOFfywkLdjHknRPgMMupQNS8yJtf9Utd5Dxiu/0n4HtrxqsgDtN2MLZ0LKbburtSAQgyypuE/snM8bBZhw==
-  dependencies:
-    lodash "^4.17.11"
-    popper.js "^1.15.0"
-    vue-resize "^0.4.5"
-
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -7906,11 +7892,6 @@ vue-loader@^14.0.0:
     vue-style-loader "^4.0.1"
     vue-template-es2015-compiler "^1.6.0"
 
-vue-resize@^0.4.5:
-  version "0.4.5"
-  resolved "https://registry.yarnpkg.com/vue-resize/-/vue-resize-0.4.5.tgz#4777a23042e3c05620d9cbda01c0b3cc5e32dcea"
-  integrity sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==
-
 vue-router@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"