From 8a1df574e0c465df35852d8eb64f93f64a89b364 Mon Sep 17 00:00:00 2001
From: herteleo <leonard.hertel@gmail.com>
Date: Sun, 28 Apr 2019 23:04:57 +0200
Subject: [PATCH] feat(tabs): moved home, devtools and edit button to dropdown
 menu

---
 src/assets/icons/pencil.svg       |   1 +
 src/components/TabHeader.vue      |  34 ++++++----
 src/components/TitleBarButton.vue | 106 ++++++++++++++++++++++++------
 3 files changed, 110 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/icons/pencil.svg

diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg
new file mode 100644
index 0000000..bb4259a
--- /dev/null
+++ b/src/assets/icons/pencil.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>
\ No newline at end of file
diff --git a/src/components/TabHeader.vue b/src/components/TabHeader.vue
index ceaeeeb..2443d77 100644
--- a/src/components/TabHeader.vue
+++ b/src/components/TabHeader.vue
@@ -17,18 +17,28 @@
       icon="refresh"
       @click="$emit('doReload')"
     />
-    <title-bar-button
-      icon="home-variant"
-      @click="$emit('goToHome')"
-    />
-    <title-bar-button
-      icon="code-tags"
-      @click="$emit('toggleDevTools')"
-    />
-    <title-bar-button
-      :to="{ name: 'tabs-settings', params: { id: item.id } }"
-      icon="dots-vertical"
-    />
+    <title-bar-button icon="dots-vertical">
+      <template slot="dropdown">
+        <title-bar-button
+          icon="home-variant"
+          @click="$emit('goToHome')"
+        >
+          Go to homepage
+        </title-bar-button>
+        <title-bar-button
+          icon="code-tags"
+          @click="$emit('toggleDevTools')"
+        >
+          Show devtools
+        </title-bar-button>
+        <title-bar-button
+          :to="{ name: 'tabs-settings', params: { id: item.id } }"
+          icon="pencil"
+        >
+          Edit tab
+        </title-bar-button>
+      </template>
+    </title-bar-button>
   </title-bar>
 </template>
 
diff --git a/src/components/TitleBarButton.vue b/src/components/TitleBarButton.vue
index a87e1dc..1d7cf8b 100644
--- a/src/components/TitleBarButton.vue
+++ b/src/components/TitleBarButton.vue
@@ -1,22 +1,40 @@
 <template>
-  <component
-    :is="to ? 'router-link' : tag"
-    :to="to"
-    :tag="tag"
-    :type="tag === 'button' && 'button'"
-    :class="{
-      [$style.btn]: true,
-      [$style[schema]]: true,
-      [$style.active]: active,
-    }"
-    @click="$emit('click')"
-  >
-    <app-icon
-      v-if="icon"
-      :face="icon"
-    />
-    <slot />
-  </component>
+  <div :class="$style.wrap">
+    <component
+      :is="to ? 'router-link' : tag"
+      :to="to"
+      :tag="tag"
+      :type="tag === 'button' && 'button'"
+      :disabled="disabled"
+      :class="{
+        [$style.btn]: true,
+        [$style[schema]]: true,
+        [$style.active]: active || isDropdownActive,
+      }"
+      @click="triggerClick($event)"
+    >
+      <app-icon
+        v-if="icon"
+        :face="icon"
+        :class="$style.icon"
+      />
+      <div
+        v-if="$slots.default"
+        :class="$style.label"
+      >
+        <slot />
+      </div>
+    </component>
+    <div
+      v-if="$slots.dropdown"
+      v-show="isDropdownActive"
+      ref="dropdown"
+      :class="$style.dropdown"
+    >
+      <div :class="$style.dropdown_shadow" />
+      <slot name="dropdown" />
+    </div>
+  </div>
 </template>
 
 <script>
@@ -26,6 +44,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     icon: {
       type: String,
       default: '',
@@ -43,12 +65,38 @@ export default {
       default: undefined,
     },
   },
+  data() {
+    return {
+      isDropdownActive: false,
+    };
+  },
+  mounted() {
+    if (this.$slots.dropdown) {
+      this.$refs.dropdown.addEventListener('click', this.toggleDropdown);
+    }
+  },
+  methods: {
+    triggerClick(e) {
+      this.$emit('click', e);
+
+      if (this.$slots.dropdown) {
+        this.toggleDropdown();
+      }
+    },
+    toggleDropdown() {
+      this.isDropdownActive = !this.isDropdownActive;
+    },
+  },
 };
 </script>
 
 <style lang="postcss" module>
+.wrap {
+  @apply relative;
+}
+
 .btn {
-  @apply p-2 leading-none appearance-none text-grey-dark;
+  @apply flex p-2 w-full leading-none appearance-none text-left text-grey-dark whitespace-no-wrap;
   -webkit-app-region: no-drag;
 }
 
@@ -56,6 +104,18 @@ export default {
   @apply opacity-50 pointer-events-none;
 }
 
+.icon {
+  @apply flex-no-shrink;
+}
+
+.icon + .label {
+  @apply ml-2;
+}
+
+.label {
+  @apply flex-grow;
+}
+
 .blue:hover {
   @apply text-blue-lighter bg-blue;
 }
@@ -71,4 +131,12 @@ export default {
 .active {
   @apply text-blue-lighter bg-blue;
 }
+
+.dropdown {
+  @apply absolute pin-r flex flex-col overflow-hidden bg-grey-darkest rounded shadow-md;
+}
+
+.dropdown_shadow {
+  @apply fixed pin;
+}
 </style>