a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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.
This commit is contained in:
Simone Gotti 2019-07-13 00:08:02 +02:00
parent 3ffd81cc56
commit eb2453d46f
9 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -11813,10 +11813,10 @@
"integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==", "integrity": "sha512-yXJmeNaw3DnnKAOKJE51sL/ZaYfWJRl1pK9dr19YFCu0ObS231AB1/LbqTKRAQ5kw8A90rA6fr4riOUpTZvQZA==",
"dev": true "dev": true
}, },
"v-click-outside": { "v-click-outside-x": {
"version": "2.1.3", "version": "4.0.9",
"resolved": "https://registry.npmjs.org/v-click-outside/-/v-click-outside-2.1.3.tgz", "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-4.0.9.tgz",
"integrity": "sha512-8d11/fN+nkSPeor87K8OtGc/lDbRwbUiFwdzxQEGidlXt6eko3gIgRM7ghgi4p/zohF3Ja9hAaydAajV3gnlPQ==" "integrity": "sha512-sfbhSCugCQ4Bdi7aIT+Tv/0BgB5SPMDR+ogUhQJJBbsVVPijZJ+Z5lnZhi1sNI5D2vb3CoI0qhDNcTPo+V0SNA=="
}, },
"validate-npm-package-license": { "validate-npm-package-license": {
"version": "3.0.4", "version": "3.0.4",

2
package.json
View File

@ -13,7 +13,7 @@
"ansi_up": "^4.0.3", "ansi_up": "^4.0.3",
"moment": "^2.23.0", "moment": "^2.23.0",
"moment-duration-format": "^2.3.2", "moment-duration-format": "^2.3.2",
"v-click-outside": "^2.1.3", "v-click-outside-x": "^4.0.9",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.0.7", "vue-router": "^3.0.7",
"vue2-filters": "^0.6.0", "vue2-filters": "^0.6.0",

12
src/App.vue
View File

@ -7,7 +7,7 @@
class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight" class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight"
to="/" 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 Agola
</router-link> </router-link>
</div> </div>
@ -22,7 +22,7 @@
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<title>Menu</title> <title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path> <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg> </svg>
</button> </button>
</div> </div>
@ -37,7 +37,7 @@
@click="createDropdownActive = !createDropdownActive" @click="createDropdownActive = !createDropdownActive"
class="relative flex items-center focus:outline-none" 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> <i class="mdi mdi-chevron-down"></i>
</button> </button>
<div <div
@ -75,14 +75,14 @@
<b>{{user.username}}</b> <b>{{user.username}}</b>
</li> </li>
<li> <li>
<hr class="navbar-divider"> <hr class="navbar-divider" />
</li> </li>
<li> <li>
<router-link <router-link
class="block px-4 py-2 hover:bg-blue-500 hover:text-white" class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="ownerSettingsLink('user', user.username)" :to="ownerSettingsLink('user', user.username)"
> >
<i class="mr-1 mdi mdi-settings"/> <i class="mr-1 mdi mdi-settings" />
<span>User Settings</span> <span>User Settings</span>
</router-link> </router-link>
</li> </li>
@ -125,7 +125,7 @@
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";

2
src/components/createprojectbutton.vue
View File

@ -40,7 +40,7 @@
</template> </template>
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
export default { export default {
components: {}, components: {},

2
src/components/rundetail.vue
View File

@ -138,7 +138,7 @@
</template> </template>
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { cancelRun, stopRun, restartRun } from "@/util/data.js"; import { cancelRun, stopRun, restartRun } from "@/util/data.js";
import { userDirectRunLink, projectRunLink } from "@/util/link.js"; import { userDirectRunLink, projectRunLink } from "@/util/link.js";

18
src/views/Org.vue
View File

@ -16,7 +16,7 @@
<div class="mb-8 flex justify-between"> <div class="mb-8 flex justify-between">
<span class="text-3xl">{{orgname}}</span> <span class="text-3xl">{{orgname}}</span>
<createprojectbutton v-on:click="goToCreate($event)"/> <createprojectbutton v-on:click="goToCreate($event)" />
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
@ -26,7 +26,7 @@
:class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]" :class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]"
> >
<router-link :to="ownerProjectsLink('org', orgname)"> <router-link :to="ownerProjectsLink('org', orgname)">
<i class="mr-1 mdi mdi-home"/> <i class="mr-1 mdi mdi-home" />
<span>Projects</span> <span>Projects</span>
</router-link> </router-link>
</li> </li>
@ -35,7 +35,7 @@
:class="[{ 'tab-element-selected': $route.name === 'org members' }]" :class="[{ 'tab-element-selected': $route.name === 'org members' }]"
> >
<router-link :to="orgMembersLink(orgname)"> <router-link :to="orgMembersLink(orgname)">
<i class="mr-1 mdi mdi-account-group"/> <i class="mr-1 mdi mdi-account-group" />
<span>Members</span> <span>Members</span>
</router-link> </router-link>
</li> </li>
@ -45,7 +45,7 @@
:class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
> >
<router-link :to="projectGroupSettingsLink('org', orgname, [])"> <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> <span>Root Project Group Settings</span>
</router-link> </router-link>
</li> </li>
@ -55,7 +55,7 @@
:class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
> >
<router-link :to="ownerSettingsLink('org', orgname)"> <router-link :to="ownerSettingsLink('org', orgname)">
<i class="mr-1 mdi mdi-settings"/> <i class="mr-1 mdi mdi-settings" />
<span>Organization Settings</span> <span>Organization Settings</span>
</router-link> </router-link>
</li> </li>
@ -71,7 +71,7 @@
<button <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" 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> <i class="mdi mdi-chevron-down"></i>
</button> </button>
</div> </div>
@ -85,7 +85,7 @@
class="block px-4 py-2 hover:bg-blue-500 hover:text-white" class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="projectGroupSettingsLink('org', orgname, [])" :to="projectGroupSettingsLink('org', orgname, [])"
> >
<i class="mr-1 mdi mdi-settings"/> <i class="mr-1 mdi mdi-settings" />
<span>Root Project Group Settings</span> <span>Root Project Group Settings</span>
</router-link> </router-link>
</li> </li>
@ -94,7 +94,7 @@
class="block px-4 py-2 hover:bg-blue-500 hover:text-white" class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="ownerSettingsLink('org', orgname)" :to="ownerSettingsLink('org', orgname)"
> >
<i class="mr-1 mdi mdi-settings"/> <i class="mr-1 mdi mdi-settings" />
<span>Organization Settings</span> <span>Organization Settings</span>
</router-link> </router-link>
</li> </li>
@ -110,7 +110,7 @@
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { import {
ownerLink, ownerLink,

2
src/views/Project.vue
View File

@ -137,7 +137,7 @@
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { import {
projectLink, projectLink,

12
src/views/ProjectGroup.vue
View File

@ -9,7 +9,7 @@
<div class="mb-8 flex justify-between"> <div class="mb-8 flex justify-between">
<span class="text-3xl">{{projectGroupName()}}</span> <span class="text-3xl">{{projectGroupName()}}</span>
<createprojectbutton v-on:click="goToCreate($event)"/> <createprojectbutton v-on:click="goToCreate($event)" />
</div> </div>
<div class="flex justify-between"> <div class="flex justify-between">
@ -19,7 +19,7 @@
:class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]" :class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
> >
<router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)"> <router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
<i class="mdi mdi-home"/> <i class="mdi mdi-home" />
<span>Projects</span> <span>Projects</span>
</router-link> </router-link>
</li> </li>
@ -29,7 +29,7 @@
:class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
> >
<router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"> <router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
<i class="mdi mdi-settings"/> <i class="mdi mdi-settings" />
<span>Project Group Settings</span> <span>Project Group Settings</span>
</router-link> </router-link>
</li> </li>
@ -45,7 +45,7 @@
<button <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" 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> <i class="mdi mdi-chevron-down"></i>
</button> </button>
</div> </div>
@ -59,7 +59,7 @@
class="block px-4 py-2 hover:bg-blue-500 hover:text-white" class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)" :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"
> >
<i class="mdi mdi-settings"/> <i class="mdi mdi-settings" />
<span>Project Group Settings</span> <span>Project Group Settings</span>
</router-link> </router-link>
</li> </li>
@ -75,7 +75,7 @@
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { import {
projectGroupProjectsLink, projectGroupProjectsLink,

2
src/views/User.vue
View File

@ -134,7 +134,7 @@
</template> </template>
<script> <script>
import vClickOutside from "v-click-outside"; import * as vClickOutside from "v-click-outside-x";
import { import {
ownerLink, ownerLink,