*: move settings to dropdown menu
and show them in the tab bar only when active
This commit is contained in:
parent
2891b62b6c
commit
5b13083861
15
src/App.vue
15
src/App.vue
|
@ -14,7 +14,7 @@
|
|||
<div class="block lg:hidden">
|
||||
<button
|
||||
class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white"
|
||||
@click="toggleNav()"
|
||||
@click="navActive = !navActive"
|
||||
>
|
||||
<svg
|
||||
class="fill-current h-3 w-3"
|
||||
|
@ -34,7 +34,7 @@
|
|||
<div v-if="user" class="relative mr-3">
|
||||
<button
|
||||
v-click-outside="() => createDropdownActive = false"
|
||||
@click="toggleCreateDropdown()"
|
||||
@click="createDropdownActive = !createDropdownActive"
|
||||
class="relative flex items-center focus:outline-none"
|
||||
>
|
||||
<i class="mdi mdi-plus-box mdi-24px"/>
|
||||
|
@ -58,7 +58,7 @@
|
|||
<div class="flex">
|
||||
<button
|
||||
v-click-outside="() => userDropdownActive = false"
|
||||
@click="toggleUserDropdown()"
|
||||
@click="userDropdownActive = !userDropdownActive"
|
||||
class="relative flex items-center focus:outline-none"
|
||||
>
|
||||
{{user.username}}
|
||||
|
@ -159,15 +159,6 @@ export default {
|
|||
this.$store.dispatch("setError", null);
|
||||
this.routerActive = false;
|
||||
this.$nextTick(() => (this.routerActive = true));
|
||||
},
|
||||
toggleNav() {
|
||||
this.navActive = !this.navActive;
|
||||
},
|
||||
toggleUserDropdown() {
|
||||
this.userDropdownActive = !this.userDropdownActive;
|
||||
},
|
||||
toggleCreateDropdown() {
|
||||
this.createDropdownActive = !this.createDropdownActive;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,15 +1,15 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="relative mr-3">
|
||||
<div class="relative">
|
||||
<div class="flex">
|
||||
<button
|
||||
@click="clicked"
|
||||
class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-green-700 rounded rounded-r-none"
|
||||
class="relative flex items-center focus:outline-none bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-green-700 rounded rounded-r-none"
|
||||
>{{ buttonValue }}</button>
|
||||
<button
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
@click="toggleDropdown"
|
||||
class="relative flex items-center focus:outline-none bg-transparent bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-green-700 rounded rounded-l-none"
|
||||
@click="dropdownActive = !dropdownActive"
|
||||
class="relative flex items-center focus:outline-none bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-green-700 rounded rounded-l-none"
|
||||
>
|
||||
<i class="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
|
@ -25,6 +25,8 @@
|
|||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
@click="setButton('project')"
|
||||
>New Project</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
|
@ -62,9 +64,6 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
toggleDropdown() {
|
||||
this.dropdownActive = !this.dropdownActive;
|
||||
},
|
||||
setButton(type) {
|
||||
this.type = type;
|
||||
this.dropdownActive = false;
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="projectGroup">
|
||||
<div class="panel">
|
||||
<p class="panel-title">Project Group Settings</p>
|
||||
<div class="p-4">
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="project">
|
||||
<div class="panel">
|
||||
<p class="panel-title">Project Settings</p>
|
||||
<div class="p-4">
|
||||
|
|
|
@ -44,7 +44,7 @@
|
|||
v-click-outside="() => dropdownActive = false"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<button class="btn btn-blue" @click="toggleDropdown()">
|
||||
<button class="btn btn-blue" @click="dropdownActive = !dropdownActive">
|
||||
<span>Restart</span>
|
||||
<i class="ml-3 mdi mdi-restart" aria-hidden="true"></i>
|
||||
</button>
|
||||
|
@ -159,9 +159,6 @@ export default {
|
|||
this.cancelRunError = null;
|
||||
this.restartRunError = null;
|
||||
},
|
||||
toggleDropdown() {
|
||||
this.dropdownActive = !this.dropdownActive;
|
||||
},
|
||||
stillRunning(run) {
|
||||
return run.result != "unknown" && run.phase == "running";
|
||||
},
|
||||
|
|
|
@ -39,9 +39,8 @@
|
|||
<span>Members</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
v-if="$route.name.endsWith('org project group settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
|
||||
>
|
||||
|
@ -51,6 +50,7 @@
|
|||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('org settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
|
||||
>
|
||||
|
@ -60,6 +60,49 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="flex -mt-3"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
@click="dropdownActive = !dropdownActive"
|
||||
>
|
||||
<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="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="projectGroupSettingsLink('org', orgname, [])"
|
||||
>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Root Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="ownerSettingsLink('org', orgname)"
|
||||
>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Organization Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
|
@ -67,6 +110,8 @@
|
|||
|
||||
|
||||
<script>
|
||||
import vClickOutside from "v-click-outside";
|
||||
|
||||
import {
|
||||
ownerLink,
|
||||
ownerProjectsLink,
|
||||
|
@ -82,9 +127,17 @@ import createprojectbutton from "@/components/createprojectbutton.vue";
|
|||
export default {
|
||||
name: "Org",
|
||||
components: { createprojectbutton },
|
||||
directives: {
|
||||
clickOutside: vClickOutside.directive
|
||||
},
|
||||
props: {
|
||||
orgname: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownActive: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
ownerLink: ownerLink,
|
||||
ownerProjectsLink: ownerProjectsLink,
|
||||
|
|
|
@ -79,9 +79,8 @@
|
|||
</p>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
v-if="$route.name.endsWith('project settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
|
||||
>
|
||||
|
@ -91,6 +90,40 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="flex -mt-3"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
@click="dropdownActive = !dropdownActive"
|
||||
>
|
||||
<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="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="projectSettingsLink(ownertype, ownername, projectref)"
|
||||
>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Project Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
|
@ -98,6 +131,8 @@
|
|||
|
||||
|
||||
<script>
|
||||
import vClickOutside from "v-click-outside";
|
||||
|
||||
import {
|
||||
projectLink,
|
||||
projectRunsLink,
|
||||
|
@ -117,6 +152,9 @@ import tabarrow from "@/components/tabarrow.vue";
|
|||
export default {
|
||||
name: "Project",
|
||||
components: { projbreadcrumbs, tabarrow },
|
||||
directives: {
|
||||
clickOutside: vClickOutside.directive
|
||||
},
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
|
@ -124,6 +162,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownActive: false,
|
||||
run: null
|
||||
};
|
||||
},
|
||||
|
|
|
@ -23,9 +23,8 @@
|
|||
<span>Projects</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
v-if="$route.name.endsWith('project group settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
|
||||
>
|
||||
|
@ -35,6 +34,40 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="flex -mt-3"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
@click="dropdownActive = !dropdownActive"
|
||||
>
|
||||
<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="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"
|
||||
>
|
||||
<i class="mdi mdi-settings"/>
|
||||
<span>Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
|
@ -42,6 +75,8 @@
|
|||
|
||||
|
||||
<script>
|
||||
import vClickOutside from "v-click-outside";
|
||||
|
||||
import {
|
||||
projectGroupProjectsLink,
|
||||
projectGroupSettingsLink,
|
||||
|
@ -55,11 +90,19 @@ import createprojectbutton from "@/components/createprojectbutton.vue";
|
|||
export default {
|
||||
name: "ProjectGroup",
|
||||
components: { projbreadcrumbs, createprojectbutton },
|
||||
directives: {
|
||||
clickOutside: vClickOutside.directive
|
||||
},
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectgroupref: Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownActive: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
projectGroupProjectsLink: projectGroupProjectsLink,
|
||||
projectGroupSettingsLink: projectGroupSettingsLink,
|
||||
|
|
|
@ -71,9 +71,8 @@
|
|||
</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li
|
||||
v-if="$route.name.endsWith('user project group settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]"
|
||||
>
|
||||
|
@ -83,6 +82,7 @@
|
|||
</router-link>
|
||||
</li>
|
||||
<li
|
||||
v-if="$route.name.endsWith('user settings')"
|
||||
class="tab-element"
|
||||
:class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]"
|
||||
>
|
||||
|
@ -92,13 +92,57 @@
|
|||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="flex tab">
|
||||
<li>
|
||||
<div class="relative">
|
||||
<div
|
||||
class="flex -mt-3"
|
||||
v-click-outside="() => dropdownActive = false"
|
||||
@click="dropdownActive = !dropdownActive"
|
||||
>
|
||||
<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="mdi mdi-chevron-down"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
v-if="dropdownActive"
|
||||
class="z-10 origin-top-right absolute right-0 mt-2 w-64 bg-white rounded-lg border shadow-md py-2"
|
||||
>
|
||||
<ul>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="projectGroupSettingsLink('user', username, [])"
|
||||
>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>Root Project Group Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
|
||||
:to="ownerSettingsLink('user', username)"
|
||||
>
|
||||
<i class="mr-1 mdi mdi-settings"/>
|
||||
<span>User Settings</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view class="mt-8"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import vClickOutside from "v-click-outside";
|
||||
|
||||
import {
|
||||
ownerLink,
|
||||
ownerProjectsLink,
|
||||
|
@ -119,11 +163,15 @@ import tabarrow from "@/components/tabarrow.vue";
|
|||
export default {
|
||||
name: "User",
|
||||
components: { createprojectbutton, tabarrow },
|
||||
directives: {
|
||||
clickOutside: vClickOutside.directive
|
||||
},
|
||||
props: {
|
||||
username: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dropdownActive: false,
|
||||
run: null
|
||||
};
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue