dropdown tweaks + use dropdown instead of popover

src/assets/index.html

@@ -35,7 +35,7 @@
                     <span class="icon">{% inline "assorted.svg" %}</span>
                 </button>
                 <div class="flex-grow-1"></div>
-                <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown">
+                <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right">
                     <template v-slot:button>
                         <span class="icon">{% inline "more-horizontal.svg" %}</span>
                     </template>
@@ -210,20 +210,11 @@
                     <span class="icon" v-if="itemSelectedDetails.status=='unread'">{% inline "circle-full.svg" %}</span>
                     <span class="icon" v-if="itemSelectedDetails.status!='unread'">{% inline "circle.svg" %}</span>
                 </button>
-                <a class="toolbar-item" id="content-appearance" v-b-tooltip.hover.bottom="'Appearance'" tabindex="0">
+                <dropdown toggle-class="toolbar-item" drop="center">
+                    <template v-slot:button>
                         <span class="icon">{% inline "sliders.svg" %}</span>
-                </a>
+                    </template>
-                <button class="toolbar-item"
+                    <div class="px-2" style="width: 200px;">
-                        :class="{active: itemSelectedReadability}"
-                        @click="getReadable(itemSelectedDetails)"
-                        v-b-tooltip.hover.bottom="'Read Here'">
-                    <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
-                </button>
-                <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
-                    <span class="icon">{% inline "external-link.svg" %}</span>
-                </a>
-                <b-popover target="content-appearance" triggers="focus" placement="bottom">
-                    <div class="p-1" style="width: 200px;">
                         <div class="d-flex">
                             <label class="themepicker">
                                 <input type="radio" name="settingsTheme" value="light" v-model="theme.name">
@@ -259,7 +250,16 @@
                                     style="font-size: 1.2rem" @click="incrFont(1)">A</button>
                         </div>
                     </div>
-                </b-popover>
+                </dropdown>
+                <button class="toolbar-item"
+                        :class="{active: itemSelectedReadability}"
+                        @click="getReadable(itemSelectedDetails)"
+                        v-b-tooltip.hover.bottom="'Read Here'">
+                    <span class="icon" :class="{'icon-loading': loading.readability}">{% inline "book-open.svg" %}</span>
+                </button>
+                <a class="toolbar-item" :href="itemSelectedDetails.link" target="_blank" v-b-tooltip.hover.bottom="'Open Link'">
+                    <span class="icon">{% inline "external-link.svg" %}</span>
+                </a>
                 <div class="flex-grow-1"></div>
                 <button class="toolbar-item" @click="itemSelected=null" v-b-tooltip.hover.bottom="'Close Article'">
                     <span class="icon">{% inline "x.svg" %}</span>
@@ -322,7 +322,7 @@
                             {{ folder.title }}
                         </div>
                         <div class="flex-shrink-0" v-if="folder.id">
-                            <dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none">
+                            <dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
                                 <template v-slot:button>
                                     <span class="icon">{% inline "more-vertical.svg" %}</span>
                                 </template>
@@ -348,7 +348,7 @@
                             {% inline "alert-circle.svg" %}
                         </span>
                         <div class="flex-shrink-0">
-                            <dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none">
+                            <dropdown class="settings-dropdown" toggle-class="btn btn-link text-decoration-none" drop="right">
                                 <template v-slot:button>
                                     <span class="icon">{% inline "more-vertical.svg" %}</span>
                                 </template>

src/assets/javascripts/app.js

@@ -84,22 +84,21 @@ Vue.component('drag', {
 })
 
 Vue.component('dropdown', {
-  props: ['class', 'toggle-class', 'ref'],
+  props: ['class', 'toggle-class', 'ref', 'drop'],
   data: function() {
-    return {open: false, openClass: ''}
+    return {open: false}
   },
   template: `
     <div class="dropdown" :class="$attrs.class">
-      <button ref="btn" @click="toggle" :class="btnToggleClass"
+      <button ref="btn" @click="toggle" :class="btnToggleClass"><slot name="button"></slot></button>
-              class="dropdown-toggle-no-caret dropdown-toggle"><slot name="button"></slot></button>
+      <div ref="menu" class="dropdown-menu" :class="{show: open}"><slot v-if="open"></slot></div>
-      <div ref="menu" class="dropdown-menu" :class="openClass"><slot v-if="open"></slot></div>
     </div>
   `,
   computed: {
     btnToggleClass: function() {
       var c = this.$props.toggleClass || ''
       c += ' dropdown-toggle dropdown-toggle-no-caret'
-      c += this.open ? ' open' : ''
+      c += this.open ? ' show' : ''
       return c.trim()
     }
   },
@@ -114,15 +113,24 @@ Vue.component('dropdown', {
     },
     show: function(e) {
       this.open = true
-      this.openClass = ' show'
+      this.$refs.menu.style.top = this.$refs.btn.offsetHeight + 'px'
-      this.$refs.menu.style.right = '0'
+      var drop = this.$props.drop
+
+      if (drop === 'right') {
         this.$refs.menu.style.left = 'auto'
-      this.$refs.menu.style.top = (this.$refs.btn.offsetHeight) + 'px'
+        this.$refs.menu.style.right = '0'
+      } else if (drop === 'center') {
+        this.$nextTick(function() {
+          var btnWidth = this.$refs.btn.getBoundingClientRect().width
+          var menuWidth = this.$refs.menu.getBoundingClientRect().width
+          this.$refs.menu.style.left = '-' + ((menuWidth - btnWidth) / 2) + 'px'
+        }.bind(this))
+      }
+
       document.addEventListener('click', this.clickHandler)
     },
     hide: function() {
       this.open = false
-      this.openClass = ''
       document.removeEventListener('click', this.clickHandler)
     },
     clickHandler: function(e) {