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>
This commit is contained in:
JInfantesC 2021-10-05 20:16:47 +00:00 committed by GitHub
parent e681772192
commit 9f591ba6ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 215 additions and 77 deletions

View File

@ -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;
}
}

View File

@ -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: {

View File

@ -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>

View File

@ -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%;
}
}

View File

@ -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: {

View File

@ -2,21 +2,33 @@
<ft-flex-box
ref="sideNav"
class="sideNav"
:class="{closed: !isOpen}"
:class="[{closed: !isOpen}, applyHiddenLabels]"
>
<div class="inner">
<div
class="navOption topNavOption mobileShow"
class="inner"
:class="applyHiddenLabels"
>
<div
class="navOption topNavOption mobileShow "
role="button"
tabindex="0"
:title="$t('Subscriptions.Subscriptions')"
@click="navigate('subscriptions')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="rss"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="fire"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="users"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="bookmark"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="history"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="sliders-h"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
{{ $t("Settings.Settings") }}
</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')"
>
<div
class="thumbnailContainer"
>
<font-awesome-icon
icon="info-circle"
class="navIcon"
:class="applyNavIconExpand"
fixed-width
/>
<p class="navLabel">
</div>
<p
v-if="!hideText"
class="navLabel"
>
{{ $t("About.About") }}
</p>
</div>

View File

@ -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'
])
}
})

View File

@ -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

View File

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

View File

@ -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