*: 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"> <div class="block lg:hidden">
<button <button
class="flex items-center px-3 py-2 border rounded text-blue-200 border-blue-400 hover:text-white hover:border-white" 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 <svg
class="fill-current h-3 w-3" class="fill-current h-3 w-3"
@ -34,7 +34,7 @@
<div v-if="user" class="relative mr-3"> <div v-if="user" class="relative mr-3">
<button <button
v-click-outside="() => createDropdownActive = false" v-click-outside="() => createDropdownActive = false"
@click="toggleCreateDropdown()" @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"/>
@ -58,7 +58,7 @@
<div class="flex"> <div class="flex">
<button <button
v-click-outside="() => userDropdownActive = false" v-click-outside="() => userDropdownActive = false"
@click="toggleUserDropdown()" @click="userDropdownActive = !userDropdownActive"
class="relative flex items-center focus:outline-none" class="relative flex items-center focus:outline-none"
> >
{{user.username}} {{user.username}}
@ -159,15 +159,6 @@ export default {
this.$store.dispatch("setError", null); this.$store.dispatch("setError", null);
this.routerActive = false; this.routerActive = false;
this.$nextTick(() => (this.routerActive = true)); 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> <template>
<div> <div>
<div class="relative mr-3"> <div class="relative">
<div class="flex"> <div class="flex">
<button <button
@click="clicked" @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> >{{ buttonValue }}</button>
<button <button
v-click-outside="() => dropdownActive = false" v-click-outside="() => dropdownActive = false"
@click="toggleDropdown" @click="dropdownActive = !dropdownActive"
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" 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> <i class="mdi mdi-chevron-down"></i>
</button> </button>
@ -25,6 +25,8 @@
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"
@click="setButton('project')" @click="setButton('project')"
>New Project</a> >New Project</a>
</li>
<li>
<a <a
href="#" href="#"
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"
@ -62,9 +64,6 @@ export default {
} }
}, },
methods: { methods: {
toggleDropdown() {
this.dropdownActive = !this.dropdownActive;
},
setButton(type) { setButton(type) {
this.type = type; this.type = type;
this.dropdownActive = false; this.dropdownActive = false;

View File

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

View File

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

View File

@ -44,7 +44,7 @@
v-click-outside="() => dropdownActive = false" v-click-outside="() => dropdownActive = false"
> >
<div class="flex items-center"> <div class="flex items-center">
<button class="btn btn-blue" @click="toggleDropdown()"> <button class="btn btn-blue" @click="dropdownActive = !dropdownActive">
<span>Restart</span> <span>Restart</span>
<i class="ml-3 mdi mdi-restart" aria-hidden="true"></i> <i class="ml-3 mdi mdi-restart" aria-hidden="true"></i>
</button> </button>
@ -159,9 +159,6 @@ export default {
this.cancelRunError = null; this.cancelRunError = null;
this.restartRunError = null; this.restartRunError = null;
}, },
toggleDropdown() {
this.dropdownActive = !this.dropdownActive;
},
stillRunning(run) { stillRunning(run) {
return run.result != "unknown" && run.phase == "running"; return run.result != "unknown" && run.phase == "running";
}, },

View File

@ -39,9 +39,8 @@
<span>Members</span> <span>Members</span>
</router-link> </router-link>
</li> </li>
</ul>
<ul class="flex tab">
<li <li
v-if="$route.name.endsWith('org project group settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
> >
@ -51,6 +50,7 @@
</router-link> </router-link>
</li> </li>
<li <li
v-if="$route.name.endsWith('org settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
> >
@ -60,6 +60,49 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
<router-view class="mt-8"></router-view> <router-view class="mt-8"></router-view>
</div> </div>
@ -67,6 +110,8 @@
<script> <script>
import vClickOutside from "v-click-outside";
import { import {
ownerLink, ownerLink,
ownerProjectsLink, ownerProjectsLink,
@ -82,9 +127,17 @@ import createprojectbutton from "@/components/createprojectbutton.vue";
export default { export default {
name: "Org", name: "Org",
components: { createprojectbutton }, components: { createprojectbutton },
directives: {
clickOutside: vClickOutside.directive
},
props: { props: {
orgname: String orgname: String
}, },
data() {
return {
dropdownActive: false
};
},
methods: { methods: {
ownerLink: ownerLink, ownerLink: ownerLink,
ownerProjectsLink: ownerProjectsLink, ownerProjectsLink: ownerProjectsLink,

View File

@ -79,9 +79,8 @@
</p> </p>
</router-link> </router-link>
</li> </li>
</ul>
<ul class="flex tab">
<li <li
v-if="$route.name.endsWith('project settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
> >
@ -91,6 +90,40 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
<router-view class="mt-8"></router-view> <router-view class="mt-8"></router-view>
</div> </div>
@ -98,6 +131,8 @@
<script> <script>
import vClickOutside from "v-click-outside";
import { import {
projectLink, projectLink,
projectRunsLink, projectRunsLink,
@ -117,6 +152,9 @@ import tabarrow from "@/components/tabarrow.vue";
export default { export default {
name: "Project", name: "Project",
components: { projbreadcrumbs, tabarrow }, components: { projbreadcrumbs, tabarrow },
directives: {
clickOutside: vClickOutside.directive
},
props: { props: {
ownertype: String, ownertype: String,
ownername: String, ownername: String,
@ -124,6 +162,7 @@ export default {
}, },
data() { data() {
return { return {
dropdownActive: false,
run: null run: null
}; };
}, },

View File

@ -23,9 +23,8 @@
<span>Projects</span> <span>Projects</span>
</router-link> </router-link>
</li> </li>
</ul>
<ul class="flex tab">
<li <li
v-if="$route.name.endsWith('project group settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
> >
@ -35,6 +34,40 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
<router-view class="mt-8"></router-view> <router-view class="mt-8"></router-view>
</div> </div>
@ -42,6 +75,8 @@
<script> <script>
import vClickOutside from "v-click-outside";
import { import {
projectGroupProjectsLink, projectGroupProjectsLink,
projectGroupSettingsLink, projectGroupSettingsLink,
@ -55,11 +90,19 @@ import createprojectbutton from "@/components/createprojectbutton.vue";
export default { export default {
name: "ProjectGroup", name: "ProjectGroup",
components: { projbreadcrumbs, createprojectbutton }, components: { projbreadcrumbs, createprojectbutton },
directives: {
clickOutside: vClickOutside.directive
},
props: { props: {
ownertype: String, ownertype: String,
ownername: String, ownername: String,
projectgroupref: Array projectgroupref: Array
}, },
data() {
return {
dropdownActive: false
};
},
methods: { methods: {
projectGroupProjectsLink: projectGroupProjectsLink, projectGroupProjectsLink: projectGroupProjectsLink,
projectGroupSettingsLink: projectGroupSettingsLink, projectGroupSettingsLink: projectGroupSettingsLink,

View File

@ -71,9 +71,8 @@
</span> </span>
</router-link> </router-link>
</li> </li>
</ul>
<ul class="flex tab">
<li <li
v-if="$route.name.endsWith('user project group settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]"
> >
@ -83,6 +82,7 @@
</router-link> </router-link>
</li> </li>
<li <li
v-if="$route.name.endsWith('user settings')"
class="tab-element" class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]" :class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]"
> >
@ -92,13 +92,57 @@
</router-link> </router-link>
</li> </li>
</ul> </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> </div>
<router-view class="mt-8"></router-view> <router-view class="mt-8"></router-view>
</div> </div>
</template> </template>
<script> <script>
import vClickOutside from "v-click-outside";
import { import {
ownerLink, ownerLink,
ownerProjectsLink, ownerProjectsLink,
@ -119,11 +163,15 @@ import tabarrow from "@/components/tabarrow.vue";
export default { export default {
name: "User", name: "User",
components: { createprojectbutton, tabarrow }, components: { createprojectbutton, tabarrow },
directives: {
clickOutside: vClickOutside.directive
},
props: { props: {
username: String username: String
}, },
data() { data() {
return { return {
dropdownActive: false,
run: null run: null
}; };
}, },