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>
2021-10-05 20:16:47 +00:00 · 2021-10-05 20:16:47 +00:00 · 9f591ba6ee
parent e681772192
commit 9f591ba6ee
10 changed files with 215 additions and 77 deletions
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.css
+++ b/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-top: 10px;
-    padding-bottom: 10px;
+    padding: 10px 0px;
  }

  .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;
+  }
 }
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.js
+++ b/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: {
--- a/src/renderer/components/side-nav-more-options/side-nav-more-options.vue
+++ b/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>
--- a/src/renderer/components/side-nav/side-nav.css
+++ b/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 {
-  margin-left: 5px;
-  display: inline-block;
+.navOption .navLabel {
+  margin-left: 40px;
+  overflow: hidden;
+  margin-left: 40px;
+  word-break: break-word;
 }

 .navChannel .navLabel {
-  font-size: 11px;
-  width: 150px;
+  overflow: hidden;
  margin-left: 40px;
+  word-break: break-word;
+  font-size: 12px;
 }

 .thumbnailContainer {
@ -106,10 +118,7 @@

 .closed .navOption {
  width: 100%;
-  height: 45px;
-  padding: 0px;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  padding: 5px 0px;
 }

 .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;
-  padding-top: 10px;
-  padding-bottom: 10px;
+  height: 45px;
+  padding: 5px 0px;
 }

 .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%;
+  }
 }
--- a/src/renderer/components/side-nav/side-nav.js
+++ b/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: {
--- a/src/renderer/components/side-nav/side-nav.vue
+++ b/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
-          icon="rss"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="rss"
+            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
-          icon="fire"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="fire"
+            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
-          icon="users"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="users"
+            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
-          icon="bookmark"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="bookmark"
+            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
-          icon="history"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="history"
+            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
-          icon="sliders-h"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
-          {{ $t("Settings.Settings") }}
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="sliders-h"
+            class="navIcon"
+            :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
-          icon="info-circle"
-          class="navIcon"
-          fixed-width
-        />
-        <p class="navLabel">
+        <div
+          class="thumbnailContainer"
+        >
+          <font-awesome-icon
+            icon="info-circle"
+            class="navIcon"
+            :class="applyNavIconExpand"
+            fixed-width
+          />
+        </div>
+        <p
+          v-if="!hideText"
+          class="navLabel"
+        >
          {{ $t("About.About") }}
        </p>
      </div>
--- a/src/renderer/components/theme-settings/theme-settings.js
+++ b/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'
    ])
  }
 })
--- a/src/renderer/components/theme-settings/theme-settings.vue
+++ b/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
--- a/src/renderer/store/modules/settings.js
+++ b/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,
--- a/static/locales/en-US.yaml
+++ b/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