*: move settings to dropdown menu

and show them in the tab bar only when active
This commit is contained in:
Simone Gotti 2019-05-21 14:55:43 +02:00
parent 2891b62b6c
commit 5b13083861
9 changed files with 204 additions and 34 deletions

View File

@ -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;
}
}
};

View File

@ -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;

View File

@ -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">

View File

@ -1,5 +1,5 @@
<template>
<div>
<div v-if="project">
<div class="panel">
<p class="panel-title">Project Settings</p>
<div class="p-4">

View File

@ -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";
},

View File

@ -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,

View File

@ -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
};
},

View File

@ -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,

View File

@ -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
};
},