clean up and fixes, change popover padding -> margin

src/components/account_actions/account_actions.vue

@@ -69,12 +69,10 @@
   margin: 0 .8em;
 }
 
-.account-tools-popover {
-}
-
 .account-actions button.dropdown-item {
   margin-left: 0;
 }
+
 .account-actions .trigger-button {
   color: $fallback--lightText;
   color: var(--lightText, $fallback--lightText);

src/components/emoji_reactions/emoji_reactions.vue

@@ -23,7 +23,12 @@
               :compact="true"
             />
             <div class="reacted-user-names">
-              <span class="reacted-user-name" v-html="account.name_html" />
+              <!-- eslint-disable vue/no-v-html -->
+              <span
+                class="reacted-user-name"
+                v-html="account.name_html"
+              />
+              <!-- eslint-enable vue/no-v-html -->
               <span class="reacted-user-screen-name">{{ account.screen_name }}</span>
             </div>
           </div>
@@ -44,15 +49,14 @@
       </button>
     </Popover>
     <a
-        v-if="tooManyReactions"
-        @click="toggleShowAll"
-        class="emoji-reaction-expand faint"
-        href='javascript:void(0)'
-      >
-        {{ showAll ? $t('general.show_less') : showMoreString }}
-      </a>
+      v-if="tooManyReactions"
+      class="emoji-reaction-expand faint"
+      href="javascript:void(0)"
+      @click="toggleShowAll"
+    >
+      {{ showAll ? $t('general.show_less') : showMoreString }}
+    </a>
   </div>
-
 </template>
 
 <script src="./emoji_reactions.js" ></script>

src/components/popover/popover.js

@@ -1,14 +1,24 @@
 
 const Popover = {
   name: 'Popover',
-  props: [
-    'trigger',
-    'placement',
-    'boundTo',
-    'padding',
-    'offset',
-    'popoverClass'
-  ],
+  props: {
+    // Action to trigger popover: either 'hover' or 'click'
+    trigger: String,
+    // Either 'top' or 'bottom'
+    placement: String,
+    // Takes object with properties 'x' and 'y', values of these can be
+    // 'container' for using offsetParent as boundaries for either axis
+    // or 'viewport'
+    boundTo: Object,
+    // Takes a top/bottom/left/right object, how much space to leave
+    // between boundary and popover element
+    margin: Object,
+    // Takes a x/y object and tells how many pixels to offset from
+    // anchor point on either axis
+    offset: Object,
+    // Additional styles you may want for the popover container
+    popoverClass: String
+  },
   data () {
     return {
       hidden: true,
@@ -16,14 +26,14 @@ const Popover = {
       oldSize: { width: 0, height: 0 }
     }
   },
-  computed: {
-    display () {
-      return !this.hidden
-    }
-  },
   methods: {
     updateStyles () {
-      if (this.hidden) return { opacity: 0 }
+      if (this.hidden) {
+        this.styles = {
+          opacity: 0
+        }
+        return
+      }
 
       // Popover will be anchored around this element, trigger ref is the container, so
       // its children are what are inside the slot. Expect only one slot="trigger".
@@ -36,31 +46,31 @@ const Popover = {
       const parentBounds = this.boundTo &&
         (this.boundTo.x === 'container' || this.boundTo.y === 'container') &&
         this.$el.offsetParent.getBoundingClientRect()
-      const padding = this.padding || {}
+      const margin = this.margin || {}
 
       // What are the screen bounds for the popover? Viewport vs container
-      // when using viewport, using default padding values to dodge the navbar
+      // when using viewport, using default margin values to dodge the navbar
       const xBounds = this.boundTo && this.boundTo.x === 'container' ? {
-        min: parentBounds.left + (padding.left || 0),
-        max: parentBounds.right - (padding.right || 0)
+        min: parentBounds.left + (margin.left || 0),
+        max: parentBounds.right - (margin.right || 0)
       } : {
-        min: 0 + (padding.left || 10),
-        max: window.innerWidth - (padding.right || 10)
+        min: 0 + (margin.left || 10),
+        max: window.innerWidth - (margin.right || 10)
       }
 
       const yBounds = this.boundTo && this.boundTo.y === 'container' ? {
-        min: parentBounds.top + (padding.top || 0),
-        max: parentBounds.bottom - (padding.bottom || 0)
+        min: parentBounds.top + (margin.top || 0),
+        max: parentBounds.bottom - (margin.bottom || 0)
       } : {
-        min: 0 + (padding.top || 50),
-        max: window.innerHeight - (padding.bottom || 5)
+        min: 0 + (margin.top || 50),
+        max: window.innerHeight - (margin.bottom || 5)
       }
 
       let horizOffset = 0
 
       // If overflowing from left, move it so that it doesn't
       if ((origin.x - content.offsetWidth * 0.5) < xBounds.min) {
-        horizOffset = -(origin.x - content.offsetWidth * 0.5) + xBounds.min
+        horizOffset += -(origin.x - content.offsetWidth * 0.5) + xBounds.min
       }
 
       // If overflowing from right, move it so that it doesn't
@@ -85,9 +95,11 @@ const Popover = {
       const xOffset = (this.offset && this.offset.x) || 0
       const translateX = (anchorEl.offsetWidth * 0.5) - content.offsetWidth * 0.5 + horizOffset + xOffset
 
+      // Note, separate translateX and translateY avoids blurry text on chromium,
+      // single translate or translate3d resulted in blurry text.
       this.styles = {
         opacity: 1,
-        transform: `translate(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
+        transform: `translateX(${Math.floor(translateX)}px) translateY(${Math.floor(translateY)}px)`
       }
     },
     showPopover () {

src/components/popover/popover.vue

@@ -10,7 +10,7 @@
       <slot name="trigger" />
     </div>
     <div
-      v-if="display"
+      v-if="!hidden"
       ref="content"
       :style="styles"
       class="popover"