From eb2453d46fd3e561031bcc363867338c2ebe19d8 Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Sat, 13 Jul 2019 00:08:02 +0200
Subject: [PATCH] use v-click-outside-x instead of v-click-outside

looks like v-click-outside doesn't work on mobile (tested with chrome and
firefox on android) since the dropdown menu is closed also when clicking a menu
entry.
---
 package-lock.json                      |  8 ++++----
 package.json                           |  2 +-
 src/App.vue                            | 12 ++++++------
 src/components/createprojectbutton.vue |  2 +-
 src/components/rundetail.vue           |  2 +-
 src/views/Org.vue                      | 18 +++++++++---------
 src/views/Project.vue                  |  2 +-
 src/views/ProjectGroup.vue             | 12 ++++++------
 src/views/User.vue                     |  2 +-
 9 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9b47cac..2e7f216 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11813,10 +11813,10 @@
       "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=="
+    "v-click-outside-x": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-4.0.9.tgz",
+      "integrity": "sha512-sfbhSCugCQ4Bdi7aIT+Tv/0BgB5SPMDR+ogUhQJJBbsVVPijZJ+Z5lnZhi1sNI5D2vb3CoI0qhDNcTPo+V0SNA=="
     },
     "validate-npm-package-license": {
       "version": "3.0.4",
diff --git a/package.json b/package.json
index 8b14fd1..6496189 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "ansi_up": "^4.0.3",
     "moment": "^2.23.0",
     "moment-duration-format": "^2.3.2",
-    "v-click-outside": "^2.1.3",
+    "v-click-outside-x": "^4.0.9",
     "vue": "^2.6.10",
     "vue-router": "^3.0.7",
     "vue2-filters": "^0.6.0",
diff --git a/src/App.vue b/src/App.vue
index 2deb946..f5f52a6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
             class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight"
             to="/"
           >
-            <img class="w-10 mr-2" src="/img/agola-logo-circle.svg">
+            <img class="w-10 mr-2" src="/img/agola-logo-circle.svg" />
             Agola
           </router-link>
         </div>
@@ -22,7 +22,7 @@
               xmlns="http://www.w3.org/2000/svg"
             >
               <title>Menu</title>
-              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
+              <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
             </svg>
           </button>
         </div>
@@ -37,7 +37,7 @@
               @click="createDropdownActive = !createDropdownActive"
               class="relative flex items-center focus:outline-none"
             >
-              <i class="mdi mdi-plus-box mdi-24px"/>
+              <i class="mdi mdi-plus-box mdi-24px" />
               <i class="mdi mdi-chevron-down"></i>
             </button>
             <div
@@ -75,14 +75,14 @@
                   <b>{{user.username}}</b>
                 </li>
                 <li>
-                  <hr class="navbar-divider">
+                  <hr class="navbar-divider" />
                 </li>
                 <li>
                   <router-link
                     class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
                     :to="ownerSettingsLink('user', user.username)"
                   >
-                    <i class="mr-1 mdi mdi-settings"/>
+                    <i class="mr-1 mdi mdi-settings" />
                     <span>User Settings</span>
                   </router-link>
                 </li>
@@ -125,7 +125,7 @@
 
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import { mapGetters } from "vuex";
 
diff --git a/src/components/createprojectbutton.vue b/src/components/createprojectbutton.vue
index e862908..0f58da4 100644
--- a/src/components/createprojectbutton.vue
+++ b/src/components/createprojectbutton.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 export default {
   components: {},
diff --git a/src/components/rundetail.vue b/src/components/rundetail.vue
index f45e3e1..ffafec9 100644
--- a/src/components/rundetail.vue
+++ b/src/components/rundetail.vue
@@ -138,7 +138,7 @@
 </template>
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import { cancelRun, stopRun, restartRun } from "@/util/data.js";
 import { userDirectRunLink, projectRunLink } from "@/util/link.js";
diff --git a/src/views/Org.vue b/src/views/Org.vue
index ff07b56..595de9a 100644
--- a/src/views/Org.vue
+++ b/src/views/Org.vue
@@ -16,7 +16,7 @@
 
     <div class="mb-8 flex justify-between">
       <span class="text-3xl">{{orgname}}</span>
-      <createprojectbutton v-on:click="goToCreate($event)"/>
+      <createprojectbutton v-on:click="goToCreate($event)" />
     </div>
 
     <div class="flex justify-between">
@@ -26,7 +26,7 @@
           :class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]"
         >
           <router-link :to="ownerProjectsLink('org', orgname)">
-            <i class="mr-1 mdi mdi-home"/>
+            <i class="mr-1 mdi mdi-home" />
             <span>Projects</span>
           </router-link>
         </li>
@@ -35,7 +35,7 @@
           :class="[{ 'tab-element-selected': $route.name === 'org members' }]"
         >
           <router-link :to="orgMembersLink(orgname)">
-            <i class="mr-1 mdi mdi-account-group"/>
+            <i class="mr-1 mdi mdi-account-group" />
             <span>Members</span>
           </router-link>
         </li>
@@ -45,7 +45,7 @@
           :class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
         >
           <router-link :to="projectGroupSettingsLink('org', orgname, [])">
-            <i class="mr-1 mdi mdi-settings"/>
+            <i class="mr-1 mdi mdi-settings" />
             <span>Root Project Group Settings</span>
           </router-link>
         </li>
@@ -55,7 +55,7 @@
           :class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
         >
           <router-link :to="ownerSettingsLink('org', orgname)">
-            <i class="mr-1 mdi mdi-settings"/>
+            <i class="mr-1 mdi mdi-settings" />
             <span>Organization Settings</span>
           </router-link>
         </li>
@@ -71,7 +71,7 @@
               <button
                 class="relative flex items-center focus:outline-none bg-transparent hover:bg-gray-300 text-dark font-semibold hover:text-dark py-1 px-4 border border-gray-500 rounded"
               >
-                <i class="mr-4 mdi mdi-settings"/>
+                <i class="mr-4 mdi mdi-settings" />
                 <i class="mdi mdi-chevron-down"></i>
               </button>
             </div>
@@ -85,7 +85,7 @@
                     class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
                     :to="projectGroupSettingsLink('org', orgname, [])"
                   >
-                    <i class="mr-1 mdi mdi-settings"/>
+                    <i class="mr-1 mdi mdi-settings" />
                     <span>Root Project Group Settings</span>
                   </router-link>
                 </li>
@@ -94,7 +94,7 @@
                     class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
                     :to="ownerSettingsLink('org', orgname)"
                   >
-                    <i class="mr-1 mdi mdi-settings"/>
+                    <i class="mr-1 mdi mdi-settings" />
                     <span>Organization Settings</span>
                   </router-link>
                 </li>
@@ -110,7 +110,7 @@
 
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import {
   ownerLink,
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 4eb24ac..98629ba 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -137,7 +137,7 @@
 
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import {
   projectLink,
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 320628c..5907bba 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -9,7 +9,7 @@
 
     <div class="mb-8 flex justify-between">
       <span class="text-3xl">{{projectGroupName()}}</span>
-      <createprojectbutton v-on:click="goToCreate($event)"/>
+      <createprojectbutton v-on:click="goToCreate($event)" />
     </div>
 
     <div class="flex justify-between">
@@ -19,7 +19,7 @@
           :class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
         >
           <router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
-            <i class="mdi mdi-home"/>
+            <i class="mdi mdi-home" />
             <span>Projects</span>
           </router-link>
         </li>
@@ -29,7 +29,7 @@
           :class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
         >
           <router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
-            <i class="mdi mdi-settings"/>
+            <i class="mdi mdi-settings" />
             <span>Project Group Settings</span>
           </router-link>
         </li>
@@ -45,7 +45,7 @@
               <button
                 class="relative flex items-center focus:outline-none bg-transparent hover:bg-gray-300 text-dark font-semibold hover:text-dark py-1 px-4 border border-gray-500 rounded"
               >
-                <i class="mr-4 mdi mdi-settings"/>
+                <i class="mr-4 mdi mdi-settings" />
                 <i class="mdi mdi-chevron-down"></i>
               </button>
             </div>
@@ -59,7 +59,7 @@
                     class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
                     :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"
                   >
-                    <i class="mdi mdi-settings"/>
+                    <i class="mdi mdi-settings" />
                     <span>Project Group Settings</span>
                   </router-link>
                 </li>
@@ -75,7 +75,7 @@
 
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import {
   projectGroupProjectsLink,
diff --git a/src/views/User.vue b/src/views/User.vue
index 69b1bd8..75533bf 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -134,7 +134,7 @@
 </template>
 
 <script>
-import vClickOutside from "v-click-outside";
+import * as vClickOutside from "v-click-outside-x";
 
 import {
   ownerLink,