*: add click away detection for dropdowns

package-lock.json

@@ -3421,7 +3421,8 @@
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5742,7 +5743,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -6210,6 +6212,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -12068,6 +12071,11 @@
       "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
       "dev": true
     },
+    "v-click-outside": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.3.tgz",
+      "integrity": "sha512-8d11/fN+nkSPeor87K8OtGc/lDbRwbUiFwdzxQEGidlXt6eko3gIgRM7ghgi4p/zohF3Ja9hAaydAajV3gnlPQ=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",

package.json

@@ -15,6 +15,7 @@
     "bulma": "^0.7.4",
     "moment": "^2.23.0",
     "moment-duration-format": "^2.2.2",
+    "v-click-outside": "^2.1.3",
     "vue": "^2.6.10",
     "vue-router": "^3.0.6",
     "vue2-filters": "^0.4.1",

src/App.vue

@@ -25,6 +25,7 @@
             <div
               v-if="user"
               class="navbar-item has-dropdown"
+              v-click-outside="() => createDropdownActive = false"
               v-bind:class="{ 'is-active': createDropdownActive }"
             >
               <a class="navbar-link" @click="toggleCreateDropdown()">
@@ -37,6 +38,7 @@
             <div
               v-if="user"
               class="navbar-item has-dropdown"
+              v-click-outside="() => userDropdownActive = false"
               v-bind:class="{ 'is-active': userDropdownActive }"
             >
               <a class="navbar-link" @click="toggleUserDropdown()">{{user.username}}</a>
@@ -86,10 +88,15 @@
 
 
 <script>
+import vClickOutside from "v-click-outside";
+
 import { mapGetters } from "vuex";
 
 export default {
   name: "App",
+  directives: {
+    clickOutside: vClickOutside.directive
+  },
   components: {},
   computed: {
     ...mapGetters(["error", "user"])

src/components/createprojectbutton.vue

@@ -5,9 +5,13 @@
         <button class="button" @click="clicked">{{ buttonValue }}</button>
       </p>
       <div class="control">
-        <div class="dropdown is-right" v-bind:class="{ 'is-active': dropdownActive }">
+        <div
+          class="dropdown is-right"
+          v-click-outside="() => dropdownActive = false"
+          v-bind:class="{ 'is-active': dropdownActive }"
+        >
           <div class="dropdown-trigger">
-            <button class="button" @click="toggleDropdown()">
+            <button class="button" @click="toggleDropdown">
               <span class="icon is-small">
                 <i class="mdi mdi-chevron-down"></i>
               </span>
@@ -26,8 +30,13 @@
 </template>
 
 <script>
+import vClickOutside from "v-click-outside";
+
 export default {
   components: {},
+  directives: {
+    clickOutside: vClickOutside.directive
+  },
   name: "createprojectbutton",
   props: {},
   data() {

src/components/rundetail.vue

@@ -18,6 +18,7 @@
                 <div
                   v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
                   class="dropdown is-right"
+                  v-click-outside="() => dropdownActive = false"
                   v-bind:class="{ 'is-active': dropdownActive }"
                 >
                   <div class="dropdown-trigger">
@@ -106,10 +107,15 @@
 </template>
 
 <script>
+import vClickOutside from "v-click-outside";
+
 import { cancelRun, stopRun, restartRun } from "@/util/data.js";
 
 export default {
   name: "RunDetail",
+  directives: {
+    clickOutside: vClickOutside.directive
+  },
   props: {
     run: Object
   },