From 5b1308386155b939e14c82fb464d037258e4b59e Mon Sep 17 00:00:00 2001
From: Simone Gotti <simone.gotti@gmail.com>
Date: Tue, 21 May 2019 14:55:43 +0200
Subject: [PATCH] *: move settings to dropdown menu

and show them in the tab bar only when active
---
 src/App.vue                             | 15 ++-----
 src/components/createprojectbutton.vue  | 13 +++---
 src/components/projectgroupsettings.vue |  2 +-
 src/components/projectsettings.vue      |  2 +-
 src/components/rundetail.vue            |  5 +--
 src/views/Org.vue                       | 57 ++++++++++++++++++++++++-
 src/views/Project.vue                   | 43 ++++++++++++++++++-
 src/views/ProjectGroup.vue              | 47 +++++++++++++++++++-
 src/views/User.vue                      | 54 +++++++++++++++++++++--
 9 files changed, 204 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8c026e1..0a9ca49 100644
--- a/src/App.vue
+++ b/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;
     }
   }
 };
diff --git a/src/components/createprojectbutton.vue b/src/components/createprojectbutton.vue
index ec108b5..e862908 100644
--- a/src/components/createprojectbutton.vue
+++ b/src/components/createprojectbutton.vue
@@ -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;
diff --git a/src/components/projectgroupsettings.vue b/src/components/projectgroupsettings.vue
index 2ac401f..6c75431 100644
--- a/src/components/projectgroupsettings.vue
+++ b/src/components/projectgroupsettings.vue
@@ -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">
diff --git a/src/components/projectsettings.vue b/src/components/projectsettings.vue
index 59cbf16..c221605 100644
--- a/src/components/projectsettings.vue
+++ b/src/components/projectsettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="project">
     <div class="panel">
       <p class="panel-title">Project Settings</p>
       <div class="p-4">
diff --git a/src/components/rundetail.vue b/src/components/rundetail.vue
index 37d3ccf..6981b6e 100644
--- a/src/components/rundetail.vue
+++ b/src/components/rundetail.vue
@@ -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";
     },
diff --git a/src/views/Org.vue b/src/views/Org.vue
index 4ac5252..ff07b56 100644
--- a/src/views/Org.vue
+++ b/src/views/Org.vue
@@ -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,
diff --git a/src/views/Project.vue b/src/views/Project.vue
index 82971ff..5df4383 100644
--- a/src/views/Project.vue
+++ b/src/views/Project.vue
@@ -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
     };
   },
diff --git a/src/views/ProjectGroup.vue b/src/views/ProjectGroup.vue
index 8fba904..320628c 100644
--- a/src/views/ProjectGroup.vue
+++ b/src/views/ProjectGroup.vue
@@ -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,
diff --git a/src/views/User.vue b/src/views/User.vue
index b5882a9..8bb7741 100644
--- a/src/views/User.vue
+++ b/src/views/User.vue
@@ -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
     };
   },