Sidebar compact issue1293 (#1462)

* #1293. Revise side-nav text labels

* #1293. Remove text on collapsed menu

* #1293. Height of collapsed Option

* Update side-nav.vue. Trending text in title attr

* Side-nav-more-options revised

* Restore navLabel on closed status

* Sidenav label in compact mode as an opt-in setting

* Sidenav-more-options using hideCompactSidebarText

* Sidenav after lintfix

* Sidenav label option renamed and moved to theme settings

* Set minimum height for .navOption

* Correct capitalization

* NavBar icon size on compact mode

* More compact navbar while hiding labels

* Fix store getter

* side-nav.css remove comments

* Update hide labels text

Co-authored-by: Preston <freetubeapp@protonmail.com>

src/renderer/components/side-nav-more-options/side-nav-more-options.css

@@ -50,9 +50,7 @@
   .navOption, .closed .navOption {
     width: 70px;
     height: 40px;
-    padding: 0px;
+    padding: 10px 0px;
-    padding-top: 10px;
-    padding-bottom: 10px;
   }
 
   .navLabel {
@@ -67,10 +65,14 @@
     margin-left: 0px;
     width: 100%;
     display: block;
-    margin-bottom: 0px;
+    margin-top: 0.5em;
   }
 
   .moreOption {
     display: block;
   }
+
+  .closed .navIconExpand{
+    height:1.3em;
+  }
 }

src/renderer/components/side-nav-more-options/side-nav-more-options.js

@@ -13,6 +13,14 @@ export default Vue.extend({
     },
     hideTrendingVideos: function () {
       return this.$store.getters.getHideTrendingVideos
+    },
+    hideLabelsSideBar: function () {
+      return this.$store.getters.getHideLabelsSideBar
+    },
+    applyNavIconExpand: function() {
+      return {
+        navIconExpand: this.hideLabelsSideBar
+      }
     }
   },
   methods: {

src/renderer/components/side-nav-more-options/side-nav-more-options.vue

@@ -2,13 +2,18 @@
   <div class="sideNavMoreOptions">
     <div
       class="navOption moreOptionNav"
+      :title="$t('More')"
       @click="openMoreOptions = !openMoreOptions"
     >
       <font-awesome-icon
         icon="ellipsis-h"
         class="navIcon"
+        :class="applyNavIconExpand"
       />
-      <p class="navLabel">
+      <p
+        v-if="!hideLabelsSideBar"
+        class="navLabel"
+      >
         {{ $t("More") }}
       </p>
     </div>
@@ -19,38 +24,54 @@
       <div
         v-if="!hideTrendingVideos"
         class="navOption"
+        :title="$t('Trending.Trending')"
+
         @click="navigate('trending')"
       >
         <font-awesome-icon
           icon="fire"
           class="navIcon"
+          :class="applyNavIconExpand"
         />
-        <p class="navLabel">
+        <p
+          v-if="!hideLabelsSideBar"
+          class="navLabel"
+        >
           {{ $t("Trending.Trending") }}
         </p>
       </div>
       <div
         v-if="!hidePopularVideos"
         class="navOption"
+        :title="$t('Most Popular')"
         @click="navigate('popular')"
       >
         <font-awesome-icon
           icon="users"
           class="navIcon"
+          :class="applyNavIconExpand"
         />
-        <p class="navLabel">
+        <p
+          v-if="!hideLabelsSideBar"
+          class="navLabel"
+        >
           {{ $t("Most Popular") }}
         </p>
       </div>
       <div
         class="navOption"
+        :title="$t('About.About')"
         @click="navigate('about')"
       >
         <font-awesome-icon
           icon="info-circle"
           class="navIcon"
+          :class="applyNavIconExpand"
         />
-        <p class="navLabel">
+        <p
+          v-if="!hideLabelsSideBar"
+          class="navLabel"
+        >
           {{ $t("About.About") }}
         </p>
       </div>
@@ -62,6 +83,7 @@
       <font-awesome-icon
         icon="history"
         class="navIcon"
+        :class="applyNavIconExpand"
       />
       <p class="navLabel">
         {{ $t("History.History") }}
@@ -75,6 +97,7 @@
       <font-awesome-icon
         icon="sliders-h"
         class="navIcon"
+        :class="applyNavIconExpand"
       />
       <p class="navLabel">
         {{ $t("Settings.Settings") }}
@@ -87,8 +110,12 @@
       <font-awesome-icon
         icon="info-circle"
         class="navIcon"
+        :class="applyNavIconExpand"
       />
-      <p class="navLabel">
+      <p
+        v-if="!hideLabelsSideBar"
+        class="navLabel"
+      >
         {{ $t("About.About") }}
       </p>
     </div>

src/renderer/components/side-nav/side-nav.css

@@ -26,6 +26,14 @@
   width: 80px;
 }
 
+.closed .hiddenLabels {
+  width: 60px;
+}
+
+.closed.hiddenLabels {
+  width: 60px;
+}
+
 .topNavOption {
   margin-top: 10px;
 }
@@ -34,6 +42,7 @@
   position: relative;
   padding: 5px;
   cursor: pointer;
+  min-height: 35px;
 }
 
 .moreOption {
@@ -58,15 +67,18 @@
   margin-left: 10px;
 }
 
-.navLabel {
+.navOption .navLabel {
-  margin-left: 5px;
+  margin-left: 40px;
-  display: inline-block;
+  overflow: hidden;
+  margin-left: 40px;
+  word-break: break-word;
 }
 
 .navChannel .navLabel {
-  font-size: 11px;
+  overflow: hidden;
-  width: 150px;
   margin-left: 40px;
+  word-break: break-word;
+  font-size: 12px;
 }
 
 .thumbnailContainer {
@@ -106,10 +118,7 @@
 
 .closed .navOption {
   width: 100%;
-  height: 45px;
+  padding: 5px 0px;
-  padding: 0px;
-  padding-top: 10px;
-  padding-bottom: 10px;
 }
 
 .closed .navIcon {
@@ -118,6 +127,9 @@
   display: block;
   margin-bottom: 0px;
 }
+.closed .navIconExpand{
+  height:1.3em;
+}
 
 .closed .navLabel {
   margin-left: 0px;
@@ -125,24 +137,25 @@
   text-align: center;
   left: 0px;
   font-size: 11px;
+  margin-block-end: 0em;
 }
 
 .closed .navChannel {
   width: 100%;
-  padding: 0px;
+  height: 45px;
-  padding-top: 10px;
+  padding: 5px 0px;
-  padding-bottom: 10px;
 }
 
 .closed .thumbnailContainer {
   position: static;
   display: block;
   float: none;
-  margin-left: 0px;
   margin: 0 auto;
   top: 0px;
   -ms-transform: none;
   transform: none;
+  margin-block-start: 0.3em;
+  margin-block-end: 0.3em;
 }
 
 @media only screen and (max-width: 680px) {
@@ -189,14 +202,10 @@
     font-size: 11px;
   }
 
-  .navIcon {
-    margin-left: 0px;
-    width: 100%;
-    display: block;
-    margin-bottom: 0px;
-  }
-
   .moreOption {
     display: block;
   }
+  .closed.hiddenLabels{
+    width: 100%;
+  }
 }

src/renderer/components/side-nav/side-nav.js

@@ -55,6 +55,22 @@ export default Vue.extend({
     },
     hideActiveSubscriptions: function () {
       return this.$store.getters.getHideActiveSubscriptions
+    },
+    hideLabelsSideBar: function () {
+      return this.$store.getters.getHideLabelsSideBar
+    },
+    hideText: function () {
+      return !this.isOpen && this.hideLabelsSideBar
+    },
+    applyNavIconExpand: function() {
+      return {
+        navIconExpand: this.hideText
+      }
+    },
+    applyHiddenLabels: function() {
+      return {
+        hiddenLabels: this.hideText
+      }
     }
   },
   methods: {

src/renderer/components/side-nav/side-nav.vue

@@ -2,21 +2,33 @@
   <ft-flex-box
     ref="sideNav"
     class="sideNav"
-    :class="{closed: !isOpen}"
+    :class="[{closed: !isOpen}, applyHiddenLabels]"
   >
-    <div class="inner">
+    <div
+      class="inner"
+      :class="applyHiddenLabels"
+    >
       <div
-        class="navOption topNavOption mobileShow"
+        class="navOption topNavOption mobileShow "
         role="button"
         tabindex="0"
+        :title="$t('Subscriptions.Subscriptions')"
         @click="navigate('subscriptions')"
       >
-        <font-awesome-icon
+        <div
-          icon="rss"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="rss"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("Subscriptions.Subscriptions") }}
         </p>
       </div>
@@ -25,15 +37,24 @@
         class="navOption mobileHidden"
         role="button"
         tabindex="0"
+        :title="$t('Trending.Trending')"
         @click="navigate('trending')"
         @keypress="navigate('trending')"
       >
-        <font-awesome-icon
+        <div
-          icon="fire"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="fire"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("Trending.Trending") }}
         </p>
       </div>
@@ -42,15 +63,24 @@
         class="navOption mobileHidden"
         role="button"
         tabindex="0"
+        :title="$t('Most Popular')"
         @click="navigate('popular')"
         @keypress="navigate('popular')"
       >
-        <font-awesome-icon
+        <div
-          icon="users"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="users"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("Most Popular") }}
         </p>
       </div>
@@ -59,15 +89,24 @@
         class="navOption mobileShow"
         role="button"
         tabindex="0"
+        :title="$t('Playlists')"
         @click="navigate('userplaylists')"
         @keypress="navigate('userplaylists')"
       >
-        <font-awesome-icon
+        <div
-          icon="bookmark"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="bookmark"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("Playlists") }}
         </p>
       </div>
@@ -78,15 +117,24 @@
         class="navOption mobileShow"
         role="button"
         tabindex="0"
+        :title="$t('History.History')"
         @click="navigate('history')"
         @keypress="navigate('history')"
       >
-        <font-awesome-icon
+        <div
-          icon="history"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="history"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("History.History") }}
         </p>
       </div>
@@ -95,31 +143,49 @@
         class="navOption mobileShow"
         role="button"
         tabindex="0"
+        :title="$t('Settings.Settings')"
         @click="navigate('settings')"
         @keypress="navigate('settings')"
       >
-        <font-awesome-icon
+        <div
-          icon="sliders-h"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="sliders-h"
-        <p class="navLabel">
+            class="navIcon"
-          {{ $t("Settings.Settings") }}
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
+          {{ $t('Settings.Settings') }}
         </p>
       </div>
       <div
         class="navOption mobileHidden"
         role="button"
         tabindex="0"
+        :title="$t('About.About')"
         @click="navigate('about')"
         @keypress="navigate('about')"
       >
-        <font-awesome-icon
+        <div
-          icon="info-circle"
+          class="thumbnailContainer"
-          class="navIcon"
+        >
-          fixed-width
+          <font-awesome-icon
-        />
+            icon="info-circle"
-        <p class="navLabel">
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
           {{ $t("About.About") }}
         </p>
       </div>

src/renderer/components/theme-settings/theme-settings.js

@@ -81,7 +81,9 @@ export default Vue.extend({
     disableSmoothScrolling: function () {
       return this.$store.getters.getDisableSmoothScrolling
     },
-
+    hideLabelsSideBar: function () {
+      return this.$store.getters.getHideLabelsSideBar
+    },
     restartPromptMessage: function () {
       return this.$t('Settings["The app needs to restart for changes to take effect. Restart and apply change?"]')
     },
@@ -215,7 +217,8 @@ export default Vue.extend({
     ...mapActions([
       'updateBarColor',
       'updateUiScale',
-      'updateDisableSmoothScrolling'
+      'updateDisableSmoothScrolling',
+      'updateHideLabelsSideBar'
     ])
   }
 })

src/renderer/components/theme-settings/theme-settings.vue

@@ -22,6 +22,11 @@
         :default-value="disableSmoothScrollingToggleValue"
         @change="handleRestartPrompt"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.Theme Settings.Hide Side Bar Labels')"
+        :default-value="hideLabelsSideBar"
+        @change="updateHideLabelsSideBar"
+      />
     </ft-flex-box>
     <ft-flex-box>
       <ft-slider

src/renderer/store/modules/settings.js

@@ -196,6 +196,7 @@ const state = {
   hideVideoLikesAndDislikes: false,
   hideVideoViews: false,
   hideWatchedSubs: false,
+  hideLabelsSideBar: false,
   landingPage: 'subscriptions',
   listType: 'grid',
   playNextVideo: false,

static/locales/en-US.yaml

@@ -158,6 +158,7 @@ Settings:
     Expand Side Bar by Default: Expand Side Bar by Default
     Disable Smooth Scrolling: Disable Smooth Scrolling
     UI Scale: UI Scale
+    Hide Side Bar Labels: Hide Side Bar Labels
     Base Theme:
       Base Theme: Base Theme
       Black: Black