From 17119e4a546522468878cf115558b17949ab50d0 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 12 Nov 2020 15:28:54 +0100 Subject: Reorganize left menu and account menu Add my-settings and my-library in left menu Move administration below my-library Split account menu: my-setting and my library --- client/src/app/menu/menu.component.html | 179 +++++++++---------- client/src/app/menu/menu.component.scss | 296 +++++++++++++++++++------------- client/src/app/menu/menu.component.ts | 42 +++-- 3 files changed, 294 insertions(+), 223 deletions(-) (limited to 'client/src/app/menu') diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 2011899d3..a4b4f26d0 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -1,98 +1,106 @@
- +
- +
+ -
- {{ user.account?.displayName }} - {{ user.account?.displayName }} +
+ {{ user.account?.displayName }} + {{ user.account?.displayName }} -
{{ user.username }}
-
- -
- - - - - Log out - +
+ + +
+ +
+ + + My account + + + + + My library + + + + + Administration + +
-
+ -
-
MY LIBRARY
+ -
-
VIDEOS
+
+
ON {{instanceName}}
@@ -134,22 +142,19 @@ - Local + Local videos
-
- - - Administration - +
Settings - + + About @@ -168,7 +173,7 @@ FAQ Stats API - Shortcuts + Keyboard shortcuts
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 975604055..a95a80af6 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -1,6 +1,39 @@ @import '_variables'; @import '_mixins'; +$menu-link-icon-size: 22px; +$menu-link-icon-margin-right: 18px; + +@mixin menu-link { + display: flex; + align-items: center; + padding-left: $menu-lateral-padding; + color: pvar(--menuForegroundColor); + cursor: pointer; + font-size: 16px; + white-space: normal; + word-break: break-word; + padding-right: 20px; + transition: background-color .1s ease-in-out; + + &.active { + background-color: rgba(255, 255, 255, 0.15); + } + + &:hover, &.focus-visible { + background-color: rgba(255, 255, 255, 0.10); + } + + my-global-icon { + @include apply-svg-color(#808080); + + display: flex; + width: $menu-link-icon-size; + height: $menu-link-icon-size; + margin-right: $menu-link-icon-margin-right; + } +} + .menu-wrapper { position: fixed; height: calc(100vh - #{$header-height}); @@ -14,14 +47,14 @@ menu { @include ellipsis; background-color: pvar(--menuBackgroundColor); - margin: 0; - padding: 0; - height: 100%; - overflow-x: hidden; color: pvar(--menuForegroundColor); + display: flex; flex-direction: column; + height: 100%; width: 100%; + margin: 0; + padding: 0; &:focus, &:hover { overflow-y: auto; @@ -31,7 +64,7 @@ menu { overflow-y: auto; } - &.logged-in { + &.is-logged-in { .panel-block { margin-bottom: 20px; } @@ -40,19 +73,22 @@ menu { margin-bottom: 15px; } } +} - .top-menu { - flex-grow: 1; - width: $menu-width; - } +.top-menu { + flex-grow: 1; + width: $menu-width; +} - .logged-in-block { - height: 100px; - background-color: rgba(255, 255, 255, 0.15); +.logged-in-block { + margin-bottom: 20px; + background-color: rgba(255, 255, 255, 0.15); + + > div:first-child { + height: 80px; display: flex; align-items: center; justify-content: center; - margin-bottom: 20px; .logged-in-info { @include ellipsis; @@ -95,32 +131,88 @@ menu { } } - .button-block { - margin: 30px 25px 35px 25px; + .logged-in-menu { + display: flex; + flex-direction: column; + align-items: flex-start; + border-top: 1px solid var(--greyForegroundColor); + + a { + @include menu-link; + @include disable-default-a-behaviour; - .login-button { - @include peertube-button-link; - @include orange-button; + $icon-size: 13px; + $additional-margin: ($menu-link-icon-size - $icon-size) / 2; - display: block; + font-size: 14px; width: 100%; - margin-bottom: 10px; - } + min-height: 35px; - .create-account-button { - @include peertube-button-link; + my-global-icon { + width: $icon-size; + height: $icon-size; - display: block; - width: 100%; + // Keep aligned with other icons + margin-left: $additional-margin; + + &[iconName="channel"] { + margin-top: -2px; + } + } + + &.active, + &:hover, + &:focus-visible { + my-global-icon { + @include apply-svg-color(var(--mainBackgroundColor)); + } + } + + &.active { + $border-left-width: 4px; - color: #fff; - background-color: rgba(255, 255, 255, 0.25); + font-weight: $font-semibold; + border-left: $border-left-width solid var(--mainColor); - &:hover { - background-color: rgba(255, 255, 255, 0.28); + my-global-icon { + margin-left: $additional-margin - $border-left-width; + } } } } +} + +.login-buttons-block { + margin: 30px 25px 35px 25px; + + .login-button { + @include peertube-button-link; + @include orange-button; + + display: block; + width: 100%; + margin-bottom: 10px; + } + + .create-account-button { + @include peertube-button-link; + + display: block; + width: 100%; + + color: #fff; + background-color: rgba(255, 255, 255, 0.25); + + &:hover { + background-color: rgba(255, 255, 255, 0.28); + } + } +} + +.in-my-account, +.on-instance, +.footer-block { + margin-bottom: 15px; .block-title { text-transform: uppercase; @@ -128,116 +220,86 @@ menu { font-size: 13px; margin-bottom: 25px; margin-left: 26px; - } - .panel-block { - margin-bottom: 15px; + @include ellipsis; - a { - @include disable-default-a-behaviour; - - display: flex; - align-items: center; - padding-left: $menu-lateral-padding; - color: pvar(--menuForegroundColor); - cursor: pointer; - min-height: 40px; - font-size: 16px; - transition: background-color .1s ease-in-out; - white-space: normal; - word-break: break-word; - padding-right: 20px; - - &.active { - background-color: rgba(255, 255, 255, 0.15); - } - - &:hover, &.focus-visible { - background-color: rgba(255, 255, 255, 0.10); - } - - my-global-icon { - @include apply-svg-color(#808080); + margin-right: 30px; + } - display: flex; - width: 22px; - height: 22px; - margin-right: 18px; + a { + @include menu-link; + @include disable-default-a-behaviour; - &[iconName="playlists"] { - height: 24px; - width: 24px; + min-height: 40px; - margin-right: 16px; - } + my-global-icon { + &[iconName="playlists"] { + height: 24px; + width: 24px; - &[iconName="videos"] { - position: relative; - right: -1px; - } + margin-right: 16px; } - .icon { - @include icon(22px); - - margin-right: 18px; + &[iconName="videos"] { + position: relative; + right: -1px; } } } +} + +.footer { + width: $menu-width; + padding-bottom: 15px; + + .bottom-links { + display: flex; + flex-direction: column; + padding: 0 $menu-lateral-padding; + } - .footer { - width: $menu-width; - padding-bottom: 15px; + $footer-links-base-opacity: .8; - .bottom-links { + .footer-links { + &, > div { display: flex; - flex-direction: column; - padding: 0 $menu-lateral-padding; + flex-wrap: wrap; } - $footer-links-base-opacity: .8; + a, span[role=button] { + display: inline-block; + text-decoration: none; + color: pvar(--mainBackgroundColor); + opacity: $footer-links-base-opacity; + white-space: nowrap; + font-size: 90%; + font-weight: 500; + line-height: 1.4rem; + margin-right: 8px; + + &.inline-global-icon { + display: inline-flex; + align-items: center; + white-space: nowrap; + height: 1.4rem; - .footer-links { - &, > div { - display: flex; - flex-wrap: wrap; - } + my-global-icon { + @include apply-svg-color(pvar(--mainBackgroundColor)); - a, span[role=button] { - display: inline-block; - text-decoration: none; - color: pvar(--mainBackgroundColor); - opacity: $footer-links-base-opacity; - white-space: nowrap; - font-size: 90%; - font-weight: 500; - line-height: 1.4rem; - margin-right: 8px; - - &.inline-global-icon { - display: inline-flex; - align-items: center; - white-space: nowrap; - height: 1.4rem; - - my-global-icon { - @include apply-svg-color(pvar(--mainBackgroundColor)); - - display: flex; - width: auto; - height: 90%; - margin-right: .2rem; - } + display: flex; + width: auto; + height: 90%; + margin-right: .2rem; } } } + } - .footer-copyleft small a { - @include disable-default-a-behaviour; + .footer-copyleft small a { + @include disable-default-a-behaviour; - color: pvar(--mainBackgroundColor); - opacity: $footer-links-base-opacity - .2; - } + color: pvar(--mainBackgroundColor); + opacity: $footer-links-base-opacity - .2; } } @@ -292,7 +354,7 @@ menu { .icon { @include disable-outline; - @include icon(22px); + @include icon($menu-link-icon-size); opacity: 0.8; &.icon-shortcuts { diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts index f9a0a9f57..48ed91973 100644 --- a/client/src/app/menu/menu.component.ts +++ b/client/src/app/menu/menu.component.ts @@ -61,6 +61,29 @@ export class MenuComponent implements OnInit { } } + get language () { + return this.languageChooserModal.getCurrentLanguage() + } + + get nsfwPolicy () { + if (!this.user) return + + switch (this.user.nsfwPolicy) { + case 'do_not_list': + return $localize`hide` + + case 'blur': + return $localize`blur` + + case 'display': + return $localize`display` + } + } + + get instanceName () { + return this.serverConfig.instance.name + } + ngOnInit () { this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() @@ -109,25 +132,6 @@ export class MenuComponent implements OnInit { }) } - get language () { - return this.languageChooserModal.getCurrentLanguage() - } - - get nsfwPolicy () { - if (!this.user) return - - switch (this.user.nsfwPolicy) { - case 'do_not_list': - return $localize`hide` - - case 'blur': - return $localize`blur` - - case 'display': - return $localize`display` - } - } - isRegistrationAllowed () { return this.serverConfig.signup.allowed && this.serverConfig.signup.allowedForCurrentIP -- cgit v1.2.3