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
GitHub
parent
e681772192
commit
9f591ba6ee
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
])
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -196,6 +196,7 @@ const state = {
|
|||
hideVideoLikesAndDislikes: false,
|
||||
hideVideoViews: false,
|
||||
hideWatchedSubs: false,
|
||||
hideLabelsSideBar: false,
|
||||
landingPage: 'subscriptions',
|
||||
listType: 'grid',
|
||||
playNextVideo: false,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue