feat(settings): hideable tab labels in navigation

pigmentapp · Apr 28, 2019 · ea95c72 · ea95c72
1 parent 996b18f
commit ea95c72
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 5 deletions.
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
@@ -4,8 +4,10 @@
       [$style.app]: true,
       [$style.app__osMac]: $options.isMac,
       [$style.app__osWin]: $options.isWin,
-      [$style.app__layoutLeft_extended]: !isLayoutInverted,
-      [$style.app__layoutRight_extended]: isLayoutInverted,
+      [$style.app__layoutLeft_compact]: !isLayoutInverted && !displaysTabLabels,
+      [$style.app__layoutLeft_extended]: !isLayoutInverted && displaysTabLabels,
+      [$style.app__layoutRight_compact]: isLayoutInverted && !displaysTabLabels,
+      [$style.app__layoutRight_extended]: isLayoutInverted && displaysTabLabels,
     }"
   >
     <div
@@ -46,6 +48,9 @@ export default {
     isLayoutInverted() {
       return this.$store.getters['Settings/byKey']('layout.sideBarLocation') === 'right';
     },
+    displaysTabLabels() {
+      return this.$store.getters['Settings/byKey']('navigation.displayTabLabels');
+    },
   },
 };
 </script>
@@ -65,27 +70,55 @@ export default {
   height: 100vh;
 }
 
+.app__osMac.app__layoutLeft_compact {
+  grid-template-areas:
+    "space space title title title"
+    "aside main  main  main  main"
+  ;
+}
+
 .app__osMac.app__layoutLeft_extended {
   grid-template-areas:
     "space space title title title"
     "aside aside main  main  main"
   ;
 }
 
+.app__osMac.app__layoutRight_compact {
+  grid-template-areas:
+    "space space title title ....."
+    "main  main  main  main  aside"
+  ;
+}
+
 .app__osMac.app__layoutRight_extended {
   grid-template-areas:
     "space space title ..... ....."
     "main  main  main  aside aside"
   ;
 }
 
+.app__osWin.app__layoutLeft_compact {
+  grid-template-areas:
+    "title title title space space"
+    "aside main  main  main  main"
+  ;
+}
+
 .app__osWin.app__layoutLeft_extended {
   grid-template-areas:
     "title title title space space"
     "aside aside main  main  main"
   ;
 }
 
+.app__osWin.app__layoutRight_compact {
+  grid-template-areas:
+    "title title title space space"
+    "main  main  main  main  aside"
+  ;
+}
+
 .app__osWin.app__layoutRight_extended {
   grid-template-areas:
     "title title title space space"

diff --git a/src/components/TabsNav.vue b/src/components/TabsNav.vue
@@ -11,11 +11,13 @@
       v-for="tab in tabList"
       :key="tab.id"
       :item="tab"
+      :show-label="displaysTabLabels"
     />
     <div
       slot="footer"
       :class="{
         [$style.footer]: true,
+        [$style.footer__extended]: displaysTabLabels,
       }"
     >
       <side-bar-button
@@ -54,6 +56,9 @@ export default {
         this.$store.commit('Tabs/setSorting', items);
       },
     },
+    displaysTabLabels() {
+      return this.$store.getters['Settings/byKey']('navigation.displayTabLabels');
+    },
   },
 };
 </script>
@@ -70,6 +75,10 @@ export default {
   @apply mt-auto;
 }
 
+.footer__extended {
+  @apply flex flex-row-reverse;
+}
+
 .drag {
   @apply cursor-move text-blue-lighter bg-blue;
 }

diff --git a/src/components/TabsNavItem.vue b/src/components/TabsNavItem.vue
@@ -26,7 +26,10 @@
         face="tab"
       />
     </div>
-    <div :class="$style.label">
+    <div
+      v-if="showLabel"
+      :class="$style.label"
+    >
       {{ item.label }}
     </div>
   </router-link>
@@ -39,6 +42,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    showLabel: {
+      type: Boolean,
+      required: true,
+    },
   },
   computed: {
     pageState() {
@@ -71,7 +78,7 @@ export default {
 .thumb {
   @apply
     flex flex-no-shrink justify-center items-center
-    p-1 w-8 h-8 mr-3 rounded-sm;
+    p-1 w-8 h-8 rounded-sm;
 }
 
 .thumbIsImage {
@@ -87,6 +94,6 @@ export default {
 }
 
 .label {
-  @apply truncate;
+  @apply ml-3 truncate;
 }
 </style>
diff --git a/src/store/modules/Settings.js b/src/store/modules/Settings.js
@@ -6,6 +6,7 @@ const db = new Connection({
     'dimmer.dimDelayInMs': 5000,
     'dimmer.dimIfWindowIsNotInFocus': false,
     'layout.sideBarLocation': 'left',
+    'navigation.displayTabLabels': true,
     'notifications.holdBackIfWindowIsNotInFocus': false,
     'notifications.sendSummaryIfWindowIsNotInFocus': false,
     'notifications.summaryIntervalInMs': 1200000,

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -44,6 +44,19 @@
       </div>
     </button>
 
+    <button
+      @click="displaysTabLabels = !displaysTabLabels"
+    >
+      <app-icon
+        :size="5"
+        :class="displaysTabLabels && $style.active"
+        :face="displaysTabLabels ? 'toggle-switch' : 'toggle-switch-off'"
+      />
+      <div :class="$style.label">
+        Display navigation labels
+      </div>
+    </button>
+
     <button
       @click="notificationsPreventOnBlur = !notificationsPreventOnBlur"
     >
@@ -139,6 +152,14 @@ export default {
         this.$store.dispatch('Settings/set', ['layout.sideBarLocation', value]);
       },
     },
+    displaysTabLabels: {
+      get() {
+        return this.$store.getters['Settings/byKey']('navigation.displayTabLabels');
+      },
+      set(value) {
+        this.$store.dispatch('Settings/set', ['navigation.displayTabLabels', value]);
+      },
+    },
     muteOnWindowBlur: {
       get() {
         return this.$store.getters['Settings/byKey']('window.muteAudioIfWindowIsNotInFocus');