ditch b-modal

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" drop="right" title="Settings">
+                <dropdown class="settings-dropdown" toggle-class="btn btn-link toolbar-item px-2" ref="menuDropdown" drop="right" title="settings = ''">
                     <template v-slot:button>
                         <span class="icon">{% inline "more-horizontal.svg" %}</span>
                     </template>
@@ -260,8 +260,8 @@
                 <div v-html="itemSelectedContent"></div>
             </div>
         </div>
-        <b-modal id="settings-modal" hide-header hide-footer lazy>
-            <button class="btn btn-link outline-none float-right p-2 mr-n2 mt-n2" style="line-height: 1" @click="$bvModal.hide('settings-modal')">
+        <modal :open="!!settings" @hide="settings = ''">
+            <button class="btn btn-link outline-none float-right p-2 mr-n2 mt-n2" style="line-height: 1" @click="settings = ''">
                 <span class="icon">{% inline "x.svg" %}</span>
             </button>
             <div v-if="settings=='create'">
@@ -423,7 +423,7 @@
                     </tr>
                 </table>
             </div>
-        </div>
+        </modal>
     </div>
     <!-- polyfill -->
     <script src="./static/javascripts/fetch.umd.js"></script>

src/assets/javascripts/app.js

@@ -136,6 +136,43 @@ Vue.component('dropdown', {
   },
 })
 
+Vue.component('modal', {
+  props: ['open'],
+  template: `
+    <div class="modal custom-modal" tabindex="-1" v-if="$props.open">
+      <div class="modal-dialog">
+        <div class="modal-content" ref="content">
+          <div class="modal-body">
+            <slot v-if="$props.open"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+  data: function() {
+    return {opening: false}
+  },
+  watch: {
+    'open': function(newVal) {
+      if (newVal) {
+        this.opening = true
+        document.addEventListener('click', this.handleClick)
+      } else {
+        document.removeEventListener('click', this.handleClick)
+      }
+    },
+  },
+  methods: {
+    handleClick: function(e) {
+      if (this.opening) {
+        this.opening = false
+        return
+      }
+      if (e.target.closest('.modal-content') == null) this.$emit('hide')
+    },
+  },
+})
+
 function dateRepr(d) {
   var sec = (new Date().getTime() - d.getTime()) / 1000
   var neg = sec < 0
@@ -181,14 +218,6 @@ var vm = new Vue({
     this.refreshFeeds()
     this.refreshStats()
   },
-  mounted: function() {
-    this.$root.$on('bv::modal::hidden', function(bvEvent, modalId) {
-      if (vm.settings == 'create') {
-        vm.feedNewChoice = []
-        vm.feedNewChoiceSelected = ''
-      }
-    })
-  },
   data: function() {
     return {
       'filterSelected': undefined,
@@ -214,7 +243,7 @@ var vm = new Vue({
       'filteredFolderStats': {},
       'filteredTotalStats': null,
 
-      'settings': 'create',
+      'settings': '',
       'loading': {
         'feeds': 0,
         'newfeed': false,
@@ -525,7 +554,7 @@ var vm = new Vue({
         if (result.status === 'success') {
           vm.refreshFeeds()
           vm.refreshStats()
-          vm.$bvModal.hide('settings-modal')
+          vm.settings = ''
         } else if (result.status === 'multiple') {
           vm.feedNewChoice = result.choice
           vm.feedNewChoiceSelected = result.choice[0].url
@@ -597,8 +626,11 @@ var vm = new Vue({
     },
     showSettings: function(settings) {
       this.settings = settings
-      this.$bvModal.show('settings-modal')
 
+      if (settings === 'create') {
+        vm.feedNewChoice = []
+        vm.feedNewChoiceSelected = ''
+      }
       if (settings === 'manage') {
         api.feeds.list_errors().then(function(errors) {
           vm.feed_errors = errors

src/assets/stylesheets/app.css

@@ -84,10 +84,6 @@ select.form-control:not([multiple]):not([size]) {
   outline: none;
 }
 
-.modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.7);
-}
-
 .modal.fade .modal-dialog {
   transition: none !important;
   transform: none !important;
@@ -384,6 +380,12 @@ select.form-control:not([multiple]):not([size]) {
   left: -999px;
 }
 
+.custom-modal {
+  background-color: rgba(0, 0, 0, 0.9);
+  overflow-y: auto;
+  display: block !important;
+}
+
 /* content */
 
 .content {