From a55052c9baf2952795685d3b4e5348c8cb9da70d Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Mar 2019 13:53:51 +0100 Subject: Add my library section in menu --- CREDITS.md | 1 + client/src/app/+my-account/my-account.component.ts | 27 ++++--- client/src/app/menu/menu.component.html | 58 +++++++++------ client/src/app/menu/menu.component.scss | 86 +++++++++++----------- .../src/app/shared/images/global-icon.component.ts | 17 ++++- .../shared/menu/top-menu-dropdown.component.html | 6 +- .../shared/menu/top-menu-dropdown.component.scss | 9 +++ .../app/shared/menu/top-menu-dropdown.component.ts | 10 ++- client/src/assets/images/global/folder.html | 10 +++ client/src/assets/images/global/history.html | 11 +++ client/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 ++++ client/src/assets/images/menu/about.html | 11 +++ client/src/assets/images/menu/about.svg | 12 --- client/src/assets/images/menu/administration.html | 10 +++ client/src/assets/images/menu/administration.svg | 14 ---- client/src/assets/images/menu/globe.html | 14 ++++ client/src/assets/images/menu/globe.svg | 18 ----- client/src/assets/images/menu/go.html | 12 +++ client/src/assets/images/menu/home.html | 11 +++ client/src/assets/images/menu/home.svg | 15 ---- client/src/assets/images/menu/recently-added.html | 12 +++ client/src/assets/images/menu/recently-added.svg | 13 ---- client/src/assets/images/menu/subscriptions.html | 23 ++++++ client/src/assets/images/menu/subscriptions.svg | 26 ------- client/src/assets/images/menu/trending.html | 12 +++ client/src/assets/images/menu/trending.svg | 16 ---- client/src/assets/images/video/watch-later.html | 11 --- client/src/sass/include/_mixins.scss | 16 +++- 33 files changed, 344 insertions(+), 202 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 create mode 100644 client/src/assets/images/menu/about.html delete mode 100644 client/src/assets/images/menu/about.svg create mode 100644 client/src/assets/images/menu/administration.html delete mode 100644 client/src/assets/images/menu/administration.svg create mode 100644 client/src/assets/images/menu/globe.html delete mode 100644 client/src/assets/images/menu/globe.svg create mode 100644 client/src/assets/images/menu/go.html create mode 100644 client/src/assets/images/menu/home.html delete mode 100644 client/src/assets/images/menu/home.svg create mode 100644 client/src/assets/images/menu/recently-added.html delete mode 100644 client/src/assets/images/menu/recently-added.svg create mode 100644 client/src/assets/images/menu/subscriptions.html delete mode 100644 client/src/assets/images/menu/subscriptions.svg create mode 100644 client/src/assets/images/menu/trending.html delete mode 100644 client/src/assets/images/menu/trending.svg 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.html b/client/src/assets/images/menu/about.html new file mode 100644 index 000000000..bea602aac --- /dev/null +++ b/client/src/assets/images/menu/about.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/menu/about.svg b/client/src/assets/images/menu/about.svg deleted file mode 100644 index eac2932a9..000000000 --- a/client/src/assets/images/menu/about.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/client/src/assets/images/menu/administration.html b/client/src/assets/images/menu/administration.html new file mode 100644 index 000000000..0dceda082 --- /dev/null +++ b/client/src/assets/images/menu/administration.html @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/src/assets/images/menu/administration.svg b/client/src/assets/images/menu/administration.svg deleted file mode 100644 index b6da837d2..000000000 --- a/client/src/assets/images/menu/administration.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - filter - Created with Sketch. - - - - - - - - - diff --git a/client/src/assets/images/menu/globe.html b/client/src/assets/images/menu/globe.html new file mode 100644 index 000000000..cf8331256 --- /dev/null +++ b/client/src/assets/images/menu/globe.html @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/globe.svg b/client/src/assets/images/menu/globe.svg deleted file mode 100644 index a4b3db9c5..000000000 --- a/client/src/assets/images/menu/globe.svg +++ /dev/null @@ -1,18 +0,0 @@ - - - - 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.html b/client/src/assets/images/menu/home.html new file mode 100644 index 000000000..b7b8cb755 --- /dev/null +++ b/client/src/assets/images/menu/home.html @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/client/src/assets/images/menu/home.svg b/client/src/assets/images/menu/home.svg deleted file mode 100644 index bb95e949a..000000000 --- a/client/src/assets/images/menu/home.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - home - Created with Sketch. - - - - - - - - - - diff --git a/client/src/assets/images/menu/recently-added.html b/client/src/assets/images/menu/recently-added.html new file mode 100644 index 000000000..d551bfb69 --- /dev/null +++ b/client/src/assets/images/menu/recently-added.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/recently-added.svg b/client/src/assets/images/menu/recently-added.svg deleted file mode 100644 index 6473837f8..000000000 --- a/client/src/assets/images/menu/recently-added.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - - - - - diff --git a/client/src/assets/images/menu/subscriptions.html b/client/src/assets/images/menu/subscriptions.html new file mode 100644 index 000000000..08322e520 --- /dev/null +++ b/client/src/assets/images/menu/subscriptions.html @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/subscriptions.svg b/client/src/assets/images/menu/subscriptions.svg deleted file mode 100644 index cd6efc54e..000000000 --- a/client/src/assets/images/menu/subscriptions.svg +++ /dev/null @@ -1,26 +0,0 @@ - - - - podcasts - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - diff --git a/client/src/assets/images/menu/trending.html b/client/src/assets/images/menu/trending.html new file mode 100644 index 000000000..f1ce11487 --- /dev/null +++ b/client/src/assets/images/menu/trending.html @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/client/src/assets/images/menu/trending.svg b/client/src/assets/images/menu/trending.svg deleted file mode 100644 index ffc65cc04..000000000 --- a/client/src/assets/images/menu/trending.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - 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; + } } } -- cgit v1.2.3