From a55052c9baf2952795685d3b4e5348c8cb9da70d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Mar 2019 13:53:51 +0100 Subject: [PATCH] Add my library section in menu --- CREDITS.md | 1 + .../app/+my-account/my-account.component.ts | 27 ++++-- client/src/app/menu/menu.component.html | 58 ++++++++----- client/src/app/menu/menu.component.scss | 86 ++++++++++--------- .../shared/images/global-icon.component.ts | 17 +++- .../menu/top-menu-dropdown.component.html | 6 +- .../menu/top-menu-dropdown.component.scss | 9 ++ .../menu/top-menu-dropdown.component.ts | 10 ++- client/src/assets/images/global/folder.html | 10 +++ client/src/assets/images/global/history.html | 11 +++ .../src/assets/images/global/playlists.html | 9 ++ client/src/assets/images/global/server.html | 15 ++++ client/src/assets/images/global/sign-out.html | 3 + client/src/assets/images/global/user.html | 10 +++ client/src/assets/images/global/videos.html | 14 +++ client/src/assets/images/global/videos.svg | 14 +++ .../images/menu/{about.svg => about.html} | 5 +- ...administration.svg => administration.html} | 6 +- .../images/menu/{globe.svg => globe.html} | 6 +- client/src/assets/images/menu/go.html | 12 +++ .../images/menu/{home.svg => home.html} | 6 +- ...recently-added.svg => recently-added.html} | 7 +- .../{subscriptions.svg => subscriptions.html} | 15 ++-- .../menu/{trending.svg => trending.html} | 6 +- .../src/assets/images/video/watch-later.html | 11 --- client/src/sass/include/_mixins.scss | 16 +++- 26 files changed, 266 insertions(+), 124 deletions(-) create mode 100644 client/src/assets/images/global/folder.html create mode 100644 client/src/assets/images/global/history.html create mode 100644 client/src/assets/images/global/playlists.html create mode 100644 client/src/assets/images/global/server.html create mode 100644 client/src/assets/images/global/sign-out.html create mode 100644 client/src/assets/images/global/user.html create mode 100644 client/src/assets/images/global/videos.html create mode 100644 client/src/assets/images/global/videos.svg rename client/src/assets/images/menu/{about.svg => about.html} (90%) rename client/src/assets/images/menu/{administration.svg => administration.html} (91%) rename client/src/assets/images/menu/{globe.svg => globe.html} (82%) create mode 100644 client/src/assets/images/menu/go.html rename client/src/assets/images/menu/{home.svg => home.html} (84%) rename client/src/assets/images/menu/{recently-added.svg => recently-added.html} (73%) rename client/src/assets/images/menu/{subscriptions.svg => subscriptions.html} (82%) rename client/src/assets/images/menu/{trending.svg => trending.html} (78%) delete mode 100644 client/src/assets/images/video/watch-later.html diff --git a/CREDITS.md b/CREDITS.md index 1f7aaad7a..98313e5c7 100644 --- a/CREDITS.md +++ b/CREDITS.md @@ -211,4 +211,5 @@ # Icons * [Robbie Pearce](https://robbiepearce.com/softies/) + * [Fork-Awesome](https://github.com/ForkAwesome/Fork-Awesome) * playlist add by Google diff --git a/client/src/app/+my-account/my-account.component.ts b/client/src/app/+my-account/my-account.component.ts index f624ff505..d98d06f8e 100644 --- a/client/src/app/+my-account/my-account.component.ts +++ b/client/src/app/+my-account/my-account.component.ts @@ -21,23 +21,28 @@ export class MyAccountComponent { children: [ { label: this.i18n('My channels'), - routerLink: '/my-account/video-channels' + routerLink: '/my-account/video-channels', + iconName: 'folder' }, { label: this.i18n('My videos'), - routerLink: '/my-account/videos' + routerLink: '/my-account/videos', + iconName: 'videos' }, { label: this.i18n('My playlists'), - routerLink: '/my-account/video-playlists' + routerLink: '/my-account/video-playlists', + iconName: 'playlists' }, { label: this.i18n('My subscriptions'), - routerLink: '/my-account/subscriptions' + routerLink: '/my-account/subscriptions', + iconName: 'subscriptions' }, { label: this.i18n('My history'), - routerLink: '/my-account/history/videos' + routerLink: '/my-account/history/videos', + iconName: 'history' } ] } @@ -45,7 +50,8 @@ export class MyAccountComponent { if (this.isVideoImportEnabled()) { libraryEntries.children.push({ label: 'My imports', - routerLink: '/my-account/video-imports' + routerLink: '/my-account/video-imports', + iconName: 'cloud-download' }) } @@ -54,15 +60,18 @@ export class MyAccountComponent { children: [ { label: this.i18n('Muted accounts'), - routerLink: '/my-account/blocklist/accounts' + routerLink: '/my-account/blocklist/accounts', + iconName: 'user' }, { label: this.i18n('Muted instances'), - routerLink: '/my-account/blocklist/servers' + routerLink: '/my-account/blocklist/servers', + iconName: 'server' }, { label: this.i18n('Ownership changes'), - routerLink: '/my-account/ownership' + routerLink: '/my-account/ownership', + iconName: 'im-with-her' } ] } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 5622b3a31..e80e6b803 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -1,5 +1,5 @@
- +
@@ -13,20 +13,16 @@
@@ -37,31 +33,51 @@
-
-
Videos
+
+
My library
+ + + + Videos + + + + + Playlists + - - + + Subscriptions + + + History + + +
+ +
+
Videos
+ - + Overview - + Trending - + Recently added - + Local
@@ -70,12 +86,12 @@
More
- + Administration - + About
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 7b392b599..9241e8059 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -26,6 +26,16 @@ menu { overflow-y: auto; } + &.logged-in { + .panel-block { + margin-bottom: 25px; + } + + .block-title { + margin-bottom: 15px; + } + } + .top-menu { flex-grow: 1; width: $menu-width; @@ -37,7 +47,7 @@ menu { display: flex; align-items: center; justify-content: center; - margin-bottom: 35px; + margin-bottom: 20px; .logged-in-info { @include ellipsis; @@ -74,6 +84,24 @@ menu { border: none; } } + + .dropdown-item { + @include dropdown-with-icon-item; + + my-global-icon { + @include apply-svg-color(var(--mainForegroundColor)); + + width: 22px; + height: 22px; + + &[iconName="sign-out"] { + position: relative; + right: -1px; + height: 21px; + width: 21px; + } + } + } } } @@ -134,57 +162,31 @@ menu { background-color: rgba(255, 255, 255, 0.10); } - .icon { - @include icon(22px); + my-global-icon { + @include apply-svg-color(#808080); + display: flex; + width: 22px; + height: 22px; margin-right: 18px; - &.icon-videos-subscriptions { - position: relative; - top: -1px; - background-image: url('../../assets/images/menu/subscriptions.svg'); - } - - &.icon-videos-overview { - position: relative; - background-image: url('../../assets/images/menu/globe.svg'); - } - - &.icon-videos-trending { - position: relative; - top: -1px; - background-image: url('../../assets/images/menu/trending.svg'); - } + &[iconName="playlists"] { + height: 24px; + width: 24px; - &.icon-videos-recently-added { - width: 23px; - height: 23px; - background-image: url('../../assets/images/menu/recently-added.svg'); + margin-right: 16px; } - &.icon-videos-local { - width: 23px; - height: 23px; - + &[iconName="videos"] { position: relative; - top: -1px; - - background-image: url('../../assets/images/menu/home.svg'); - } - - &.icon-administration { - width: 23px; - height: 23px; - - background-image: url('../../assets/images/menu/administration.svg'); + right: -1px; } + } - &.icon-about { - width: 23px; - height: 23px; + .icon { + @include icon(22px); - background-image: url('../../assets/images/menu/about.svg'); - } + margin-right: 18px; } } } diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts index 3fa6fea96..d85f269ea 100644 --- a/client/src/app/shared/images/global-icon.component.ts +++ b/client/src/app/shared/images/global-icon.component.ts @@ -2,6 +2,8 @@ import { Component, ElementRef, Input, OnInit } from '@angular/core' const icons = { 'add': require('../../../assets/images/global/add.html'), + 'user': require('../../../assets/images/global/user.html'), + 'sign-out': require('../../../assets/images/global/sign-out.html'), 'syndication': require('../../../assets/images/global/syndication.html'), 'help': require('../../../assets/images/global/help.html'), 'sparkle': require('../../../assets/images/global/sparkle.html'), @@ -11,12 +13,15 @@ const icons = { 'no': require('../../../assets/images/global/no.html'), 'cloud-download': require('../../../assets/images/global/cloud-download.html'), 'undo': require('../../../assets/images/global/undo.html'), + 'history': require('../../../assets/images/global/history.html'), 'circle-tick': require('../../../assets/images/global/circle-tick.html'), 'cog': require('../../../assets/images/global/cog.html'), 'download': require('../../../assets/images/global/download.html'), + 'go': require('../../../assets/images/menu/go.html'), 'edit': require('../../../assets/images/global/edit.html'), 'im-with-her': require('../../../assets/images/global/im-with-her.html'), 'delete': require('../../../assets/images/global/delete.html'), + 'server': require('../../../assets/images/global/server.html'), 'cross': require('../../../assets/images/global/cross.html'), 'validate': require('../../../assets/images/global/validate.html'), 'tick': require('../../../assets/images/global/tick.html'), @@ -28,7 +33,17 @@ const icons = { 'share': require('../../../assets/images/video/share.html'), 'upload': require('../../../assets/images/video/upload.html'), 'playlist-add': require('../../../assets/images/video/playlist-add.html'), - 'play': require('../../../assets/images/global/play.html') + 'play': require('../../../assets/images/global/play.html'), + 'playlists': require('../../../assets/images/global/playlists.html'), + 'about': require('../../../assets/images/menu/about.html'), + 'globe': require('../../../assets/images/menu/globe.html'), + 'home': require('../../../assets/images/menu/home.html'), + 'recently-added': require('../../../assets/images/menu/recently-added.html'), + 'trending': require('../../../assets/images/menu/trending.html'), + 'videos': require('../../../assets/images/global/videos.html'), + 'folder': require('../../../assets/images/global/folder.html'), + 'administration': require('../../../assets/images/menu/administration.html'), + 'subscriptions': require('../../../assets/images/menu/subscriptions.html') } export type GlobalIconName = keyof typeof icons diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.html b/client/src/app/shared/menu/top-menu-dropdown.component.html index d3c896019..8d58fa1db 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.html +++ b/client/src/app/shared/menu/top-menu-dropdown.component.html @@ -13,7 +13,11 @@
- {{ menuChild.label }} + + + + {{ menuChild.label }} +
diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.scss b/client/src/app/shared/menu/top-menu-dropdown.component.scss index 77159532f..d7c7de957 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.scss +++ b/client/src/app/shared/menu/top-menu-dropdown.component.scss @@ -1,3 +1,6 @@ +@import '_variables'; +@import '_mixins'; + .parent-entry { span[role=button] { cursor: pointer; @@ -16,3 +19,9 @@ /deep/ .dropdown-menu { margin-top: 0 !important; } + +.icon { + @include dropdown-with-icon-item; + + top: -1px; +} diff --git a/client/src/app/shared/menu/top-menu-dropdown.component.ts b/client/src/app/shared/menu/top-menu-dropdown.component.ts index e859c30dd..e951ea236 100644 --- a/client/src/app/shared/menu/top-menu-dropdown.component.ts +++ b/client/src/app/shared/menu/top-menu-dropdown.component.ts @@ -3,6 +3,7 @@ import { filter, take } from 'rxjs/operators' import { NavigationEnd, Router } from '@angular/router' import { Subscription } from 'rxjs' import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' +import { GlobalIconName } from '@app/shared/images/global-icon.component' export type TopMenuDropdownParam = { label: string @@ -11,6 +12,8 @@ export type TopMenuDropdownParam = { children?: { label: string routerLink: string + + iconName?: GlobalIconName }[] } @@ -23,6 +26,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { @Input() menuEntries: TopMenuDropdownParam[] = [] suffixLabels: { [ parentLabel: string ]: string } + hasIcons = false private openedOnHover = false private routeSub: Subscription @@ -35,6 +39,10 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { this.routeSub = this.router.events .pipe(filter(event => event instanceof NavigationEnd)) .subscribe(() => this.updateChildLabels(window.location.pathname)) + + this.hasIcons = this.menuEntries.some( + e => e.children && e.children.some(c => !!c.iconName) + ) } ngOnDestroy () { @@ -48,7 +56,7 @@ export class TopMenuDropdownComponent implements OnInit, OnDestroy { // Menu was closed dropdown.openChange .pipe(take(1)) - .subscribe(e => this.openedOnHover = false) + .subscribe(() => this.openedOnHover = false) } dropdownAnchorClicked (dropdown: NgbDropdown) { diff --git a/client/src/assets/images/global/folder.html b/client/src/assets/images/global/folder.html new file mode 100644 index 000000000..8443c15c6 --- /dev/null +++ b/client/src/assets/images/global/folder.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/history.html b/client/src/assets/images/global/history.html new file mode 100644 index 000000000..dfb70b598 --- /dev/null +++ b/client/src/assets/images/global/history.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/global/playlists.html b/client/src/assets/images/global/playlists.html new file mode 100644 index 000000000..21b05009a --- /dev/null +++ b/client/src/assets/images/global/playlists.html @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/client/src/assets/images/global/server.html b/client/src/assets/images/global/server.html new file mode 100644 index 000000000..409026e1a --- /dev/null +++ b/client/src/assets/images/global/server.html @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/global/sign-out.html b/client/src/assets/images/global/sign-out.html new file mode 100644 index 000000000..4e316dc8b --- /dev/null +++ b/client/src/assets/images/global/sign-out.html @@ -0,0 +1,3 @@ + + + diff --git a/client/src/assets/images/global/user.html b/client/src/assets/images/global/user.html new file mode 100644 index 000000000..c7b9319b6 --- /dev/null +++ b/client/src/assets/images/global/user.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/global/videos.html b/client/src/assets/images/global/videos.html new file mode 100644 index 000000000..6e37f466f --- /dev/null +++ b/client/src/assets/images/global/videos.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/assets/images/global/videos.svg b/client/src/assets/images/global/videos.svg new file mode 100644 index 000000000..6e37f466f --- /dev/null +++ b/client/src/assets/images/global/videos.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.html similarity index 90% rename from client/src/assets/images/menu/about.svg rename to client/src/assets/images/menu/about.html index eac2932a9..bea602aac 100644 --- a/client/src/assets/images/menu/about.svg +++ b/client/src/assets/images/menu/about.html @@ -1,11 +1,10 @@ - - - + + diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.html similarity index 91% rename from client/src/assets/images/menu/administration.svg rename to client/src/assets/images/menu/administration.html index b6da837d2..0dceda082 100644 --- a/client/src/assets/images/menu/administration.svg +++ b/client/src/assets/images/menu/administration.html @@ -1,11 +1,7 @@ - - filter - Created with Sketch. - - + diff --git a/client/src/assets/images/menu/globe.svg b/client/src/assets/images/menu/globe.html similarity index 82% rename from client/src/assets/images/menu/globe.svg rename to client/src/assets/images/menu/globe.html index a4b3db9c5..cf8331256 100644 --- a/client/src/assets/images/menu/globe.svg +++ b/client/src/assets/images/menu/globe.html @@ -1,11 +1,7 @@ - - globe - Created with Sketch. - - + diff --git a/client/src/assets/images/menu/go.html b/client/src/assets/images/menu/go.html new file mode 100644 index 000000000..b16e794ec --- /dev/null +++ b/client/src/assets/images/menu/go.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/home.svg b/client/src/assets/images/menu/home.html similarity index 84% rename from client/src/assets/images/menu/home.svg rename to client/src/assets/images/menu/home.html index bb95e949a..b7b8cb755 100644 --- a/client/src/assets/images/menu/home.svg +++ b/client/src/assets/images/menu/home.html @@ -1,11 +1,7 @@ - - home - Created with Sketch. - - + diff --git a/client/src/assets/images/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.html similarity index 73% rename from client/src/assets/images/menu/recently-added.svg rename to client/src/assets/images/menu/recently-added.html index 6473837f8..d551bfb69 100644 --- a/client/src/assets/images/menu/recently-added.svg +++ b/client/src/assets/images/menu/recently-added.html @@ -1,12 +1,11 @@ - - - - + + + diff --git a/client/src/assets/images/menu/subscriptions.svg b/client/src/assets/images/menu/subscriptions.html similarity index 82% rename from client/src/assets/images/menu/subscriptions.svg rename to client/src/assets/images/menu/subscriptions.html index cd6efc54e..08322e520 100644 --- a/client/src/assets/images/menu/subscriptions.svg +++ b/client/src/assets/images/menu/subscriptions.html @@ -1,25 +1,22 @@ - - podcasts - Created with Sketch. - - + + - - + + - + - + diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.html similarity index 78% rename from client/src/assets/images/menu/trending.svg rename to client/src/assets/images/menu/trending.html index ffc65cc04..f1ce11487 100644 --- a/client/src/assets/images/menu/trending.svg +++ b/client/src/assets/images/menu/trending.html @@ -1,11 +1,7 @@ - - graph - Created with Sketch. - - + diff --git a/client/src/assets/images/video/watch-later.html b/client/src/assets/images/video/watch-later.html deleted file mode 100644 index 927afebe4..000000000 --- a/client/src/assets/images/video/watch-later.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - Created by Yaroslav Samoylov - from the Noun Project diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 9b18f6354..37bd404dd 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -63,13 +63,25 @@ @mixin apply-svg-color ($color) { /deep/ svg { - path[fill="#000000"], g[fill="#000000"], rect[fill="#000000"], circle[fill="#000000"], polygon[fill="#000000"] { + path[fill="#000000"], + g[fill="#000000"], + rect[fill="#000000"], + circle[fill="#000000"], + polygon[fill="#000000"] { fill: $color; } - path[stroke="#000000"], g[stroke="#000000"], rect[stroke="#000000"], circle[stroke="#000000"], polygon[stroke="#000000"] { + path[stroke="#000000"], + g[stroke="#000000"], + rect[stroke="#000000"], + circle[stroke="#000000"], + polygon[stroke="#000000"] { stroke: $color; } + + stop[stop-color="#000000"] { + stop-color: $color; + } } } -- 2.41.0