feat(tabs): moved home, devtools and edit button to dropdown menu

pigmentapp · Apr 28, 2019 · 8a1df57 · 8a1df57
1 parent 6841e82
commit 8a1df57
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 31 deletions.
diff --git a/src/assets/icons/pencil.svg b/src/assets/icons/pencil.svg
diff --git 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
@@ -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,19 +65,57 @@ 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;
 }
 
 .btn[disabled] {
   @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>