From b33f657c304b77938c1f68164d8e754787f5aae5 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 09:20:19 +0100 Subject: Begin new menu design --- client/src/app/app.component.html | 18 +-- client/src/app/app.component.scss | 63 +++++----- client/src/app/app.component.ts | 17 +-- client/src/app/app.module.ts | 6 +- client/src/app/core/core.module.ts | 8 +- client/src/app/core/index.ts | 1 - client/src/app/core/menu/index.ts | 2 - client/src/app/core/menu/menu-admin.component.html | 35 ------ client/src/app/core/menu/menu-admin.component.ts | 33 ------ client/src/app/core/menu/menu.component.html | 55 --------- client/src/app/core/menu/menu.component.scss | 51 -------- client/src/app/core/menu/menu.component.ts | 92 --------------- client/src/app/menu/index.ts | 2 + client/src/app/menu/menu-admin.component.html | 35 ++++++ client/src/app/menu/menu-admin.component.ts | 33 ++++++ client/src/app/menu/menu.component.html | 48 ++++++++ client/src/app/menu/menu.component.scss | 131 +++++++++++++++++++++ client/src/app/menu/menu.component.ts | 97 +++++++++++++++ client/src/app/shared/search/search.component.html | 26 +--- client/src/app/shared/search/search.component.scss | 51 -------- 20 files changed, 396 insertions(+), 408 deletions(-) delete mode 100644 client/src/app/core/menu/index.ts delete mode 100644 client/src/app/core/menu/menu-admin.component.html delete mode 100644 client/src/app/core/menu/menu-admin.component.ts delete mode 100644 client/src/app/core/menu/menu.component.html delete mode 100644 client/src/app/core/menu/menu.component.scss delete mode 100644 client/src/app/core/menu/menu.component.ts create mode 100644 client/src/app/menu/index.ts create mode 100644 client/src/app/menu/menu-admin.component.html create mode 100644 client/src/app/menu/menu-admin.component.ts create mode 100644 client/src/app/menu/menu.component.html create mode 100644 client/src/app/menu/menu.component.scss create mode 100644 client/src/app/menu/menu.component.ts (limited to 'client/src/app') diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index 8a826e783..f4672c7ec 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -1,7 +1,7 @@
-
+
@@ -11,15 +11,13 @@
- -
- - - +
+ +
-
-
+
+
@@ -27,10 +25,6 @@
- -
-
-
diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index a656d5c29..28e86097c 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -2,10 +2,23 @@ min-height: calc(100vh - #{$header-height} - #{$footer-height} - #{$footer-margin}); } +.main-col { + margin-left: $menu-width; + + &.expanded { + margin-left: 0; + } +} + +.sub-header-container { + margin-top: $header-height; +} + .title-menu-left { position: fixed; height: calc(100vh - #{$header-height}); padding: 0; + width: $menu-width; .title-menu-left-block.menu { height: 100%; @@ -14,35 +27,28 @@ .header { height: $header-height; - - .fake-title-block { - display: inline-block; - } + position: fixed; + width: 100%; + background-color: #fff; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16); + display: flex; .top-left-block { - z-index: 100; - background-color: #fff; - border-right: 1px solid $header-border-color; + width: $menu-width; + z-index: 1001; height: $header-height; line-height: $header-height; margin-top: 0; margin-bottom: 0; display: flex; - position: fixed; padding: 0; - &.border-bottom { - border-bottom: 1px solid $header-border-color; - } - .hamburger-block { - margin-right: 15px; - margin-left: 15px; + margin-right: 10px; + margin-left: 25px; .glyphicon { cursor: pointer; - position: relative; - top: 4px; } } @@ -50,12 +56,9 @@ a { color: inherit !important; display: block; - background: url('../assets/logo.png') no-repeat; - background-size: contain; - background-position: center; - height: 100%; - margin: auto; - width: 135px; + background: url('../assets/logo.svg') no-repeat; + width: 24px; + height: 24px; &:hover { color: inherit !important; @@ -122,17 +125,11 @@ } } - my-search { - position: fixed; - z-index: 1000; - // Fix col-md-* padding - padding: 0; - } - - .search-col { - height: 100%; - margin-left: -15px; - padding: 0; + .header-right { + text-align: right; + height: $header-height; + margin-left: $menu-width; + flex-grow: 1; } } diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts index 9b699fafd..b1818c298 100644 --- a/client/src/app/app.component.ts +++ b/client/src/app/app.component.ts @@ -1,8 +1,6 @@ import { Component, OnInit } from '@angular/core' import { Router } from '@angular/router' - import { AuthService, ServerService } from './core' -import { UserService } from './shared' @Component({ selector: 'my-app', @@ -62,20 +60,9 @@ export class AppComponent implements OnInit { } getMainColClasses () { - const colSizes = { - md: 10, - sm: 9, - xs: 9 - } - // Take all width is the menu is not displayed - if (this.isMenuDisplayed === false) { - Object.keys(colSizes).forEach(col => colSizes[col] = 12) - } - - const classes = [] - Object.keys(colSizes).forEach(col => classes.push(`col-${col}-${colSizes[col]}`)) + if (this.isMenuDisplayed === false) return [ 'expanded' ] - return classes + return [] } } diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index e71641e0d..342589003 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -20,6 +20,7 @@ import { LoginModule } from './login' import { SignupModule } from './signup' import { SharedModule } from './shared' import { VideosModule } from './videos' +import { MenuComponent, MenuAdminComponent } from './menu' export function metaFactory (): MetaLoader { return new MetaStaticLoader({ @@ -47,7 +48,10 @@ const APP_PROVIDERS = [ @NgModule({ bootstrap: [ AppComponent ], declarations: [ - AppComponent + AppComponent, + + MenuComponent, + MenuAdminComponent ], imports: [ BrowserModule, diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index c4ce2b637..75262e6cf 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -26,17 +26,13 @@ import { throwIfAlreadyLoaded } from './module-import-guard' ], declarations: [ - ConfirmComponent, - MenuComponent, - MenuAdminComponent + ConfirmComponent ], exports: [ SimpleNotificationsModule, - ConfirmComponent, - MenuComponent, - MenuAdminComponent + ConfirmComponent ], providers: [ diff --git a/client/src/app/core/index.ts b/client/src/app/core/index.ts index 8358261ae..3c01e05aa 100644 --- a/client/src/app/core/index.ts +++ b/client/src/app/core/index.ts @@ -1,6 +1,5 @@ export * from './auth' export * from './server' export * from './confirm' -export * from './menu' export * from './routing' export * from './core.module' diff --git a/client/src/app/core/menu/index.ts b/client/src/app/core/menu/index.ts deleted file mode 100644 index c905ed20a..000000000 --- a/client/src/app/core/menu/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './menu.component' -export * from './menu-admin.component' diff --git a/client/src/app/core/menu/menu-admin.component.html b/client/src/app/core/menu/menu-admin.component.html deleted file mode 100644 index 9857b2e3e..000000000 --- a/client/src/app/core/menu/menu-admin.component.html +++ /dev/null @@ -1,35 +0,0 @@ - -
- - - List users - - - - - Manage follows - - - - - Video abuses - - - - - Video blacklist - - - - - Jobs - -
- -
- - - Quit admin. - -
- diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts deleted file mode 100644 index ea8d5f57c..000000000 --- a/client/src/app/core/menu/menu-admin.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Component } from '@angular/core' - -import { AuthService } from '../auth/auth.service' -import { UserRight } from '../../../../../shared' - -@Component({ - selector: 'my-menu-admin', - templateUrl: './menu-admin.component.html', - styleUrls: [ './menu.component.scss' ] -}) -export class MenuAdminComponent { - constructor (private auth: AuthService) {} - - hasUsersRight () { - return this.auth.getUser().hasRight(UserRight.MANAGE_USERS) - } - - hasServerFollowRight () { - return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW) - } - - hasVideoAbusesRight () { - return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES) - } - - hasVideoBlacklistRight () { - return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) - } - - hasJobsRight () { - return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS) - } -} diff --git a/client/src/app/core/menu/menu.component.html b/client/src/app/core/menu/menu.component.html deleted file mode 100644 index fcde23fdd..000000000 --- a/client/src/app/core/menu/menu.component.html +++ /dev/null @@ -1,55 +0,0 @@ - -
-
Account
- - - - - - Signup - - - - - My account - - - - - My videos - -
- -
-
Videos
- - - - See videos - - - - - Upload a video - -
- -
-
Other
- - - - Administration - -
- diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss deleted file mode 100644 index 45679c310..000000000 --- a/client/src/app/core/menu/menu.component.scss +++ /dev/null @@ -1,51 +0,0 @@ -menu { - background-color: $black-background; - padding: 15px; - margin: 0; - height: 100%; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; - z-index: 1000; - - @media screen and (max-width: 550px) { - font-size: 90%; - } - - @media screen and (min-width: 1200px) { - padding: 25px; - } - - .panel-block { - margin-bottom: 15px; - } - - .block-title { - text-transform: uppercase; - font-weight: bold; - color: $menu-color-block; - margin-bottom: 10px; - } - - a { - display: block; - margin-left: 5px; - height: 30px; - color: $menu-color-link; - cursor: pointer; - transition: color 0.3s; - - &:hover, &:focus { - text-decoration: none !important; - outline: none !important; - } - - .glyphicon { - margin-right: 15px; - } - - &:hover, &.active { - color: #fff; - } - } -} diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts deleted file mode 100644 index d2bd71534..000000000 --- a/client/src/app/core/menu/menu.component.ts +++ /dev/null @@ -1,92 +0,0 @@ -import { Component, OnInit } from '@angular/core' -import { Router } from '@angular/router' - -import { AuthService, AuthStatus } from '../auth' -import { ServerService } from '../server' -import { UserRight } from '../../../../../shared/models/users/user-right.enum' - -@Component({ - selector: 'my-menu', - templateUrl: './menu.component.html', - styleUrls: [ './menu.component.scss' ] -}) -export class MenuComponent implements OnInit { - isLoggedIn: boolean - userHasAdminAccess = false - - private routesPerRight = { - [UserRight.MANAGE_USERS]: '/admin/users', - [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', - [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', - [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' - } - - constructor ( - private authService: AuthService, - private serverService: ServerService, - private router: Router - ) {} - - ngOnInit () { - this.isLoggedIn = this.authService.isLoggedIn() - this.computeIsUserHasAdminAccess() - - this.authService.loginChangedSource.subscribe( - status => { - if (status === AuthStatus.LoggedIn) { - this.isLoggedIn = true - this.computeIsUserHasAdminAccess() - console.log('Logged in.') - } else if (status === AuthStatus.LoggedOut) { - this.isLoggedIn = false - this.computeIsUserHasAdminAccess() - console.log('Logged out.') - } else { - console.error('Unknown auth status: ' + status) - } - } - ) - } - - isRegistrationAllowed () { - return this.serverService.getConfig().signup.allowed - } - - getFirstAdminRightAvailable () { - const user = this.authService.getUser() - if (!user) return undefined - - const adminRights = [ - UserRight.MANAGE_USERS, - UserRight.MANAGE_SERVER_FOLLOW, - UserRight.MANAGE_VIDEO_ABUSES, - UserRight.MANAGE_VIDEO_BLACKLIST - ] - - for (const adminRight of adminRights) { - if (user.hasRight(adminRight)) { - return adminRight - } - } - - return undefined - } - - getFirstAdminRouteAvailable () { - const right = this.getFirstAdminRightAvailable() - - return this.routesPerRight[right] - } - - logout () { - this.authService.logout() - // Redirect to home page - this.router.navigate(['/videos/list']) - } - - private computeIsUserHasAdminAccess () { - const right = this.getFirstAdminRightAvailable() - - this.userHasAdminAccess = right !== undefined - } -} diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts new file mode 100644 index 000000000..c905ed20a --- /dev/null +++ b/client/src/app/menu/index.ts @@ -0,0 +1,2 @@ +export * from './menu.component' +export * from './menu-admin.component' diff --git a/client/src/app/menu/menu-admin.component.html b/client/src/app/menu/menu-admin.component.html new file mode 100644 index 000000000..9857b2e3e --- /dev/null +++ b/client/src/app/menu/menu-admin.component.html @@ -0,0 +1,35 @@ + +
+ + + List users + + + + + Manage follows + + + + + Video abuses + + + + + Video blacklist + + + + + Jobs + +
+ +
+ + + Quit admin. + +
+ diff --git a/client/src/app/menu/menu-admin.component.ts b/client/src/app/menu/menu-admin.component.ts new file mode 100644 index 000000000..1babf5eb6 --- /dev/null +++ b/client/src/app/menu/menu-admin.component.ts @@ -0,0 +1,33 @@ +import { Component } from '@angular/core' + +import { AuthService } from '../core/auth/auth.service' +import { UserRight } from '../../../../shared' + +@Component({ + selector: 'my-menu-admin', + templateUrl: './menu-admin.component.html', + styleUrls: [ './menu.component.scss' ] +}) +export class MenuAdminComponent { + constructor (private auth: AuthService) {} + + hasUsersRight () { + return this.auth.getUser().hasRight(UserRight.MANAGE_USERS) + } + + hasServerFollowRight () { + return this.auth.getUser().hasRight(UserRight.MANAGE_SERVER_FOLLOW) + } + + hasVideoAbusesRight () { + return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_ABUSES) + } + + hasVideoBlacklistRight () { + return this.auth.getUser().hasRight(UserRight.MANAGE_VIDEO_BLACKLIST) + } + + hasJobsRight () { + return this.auth.getUser().hasRight(UserRight.MANAGE_JOBS) + } +} diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html new file mode 100644 index 000000000..bb0caaef5 --- /dev/null +++ b/client/src/app/menu/menu.component.html @@ -0,0 +1,48 @@ + +
+
+
{{ user.username }}
+
{{ user.email }}
+
+ +
+ + + +
+
+ +
+ + +
+ +
+
Videos
+ + + + Trending + + + + + Recently added + +
+ +
+
More
+ + + + Administration + +
+ diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss new file mode 100644 index 000000000..8a4910605 --- /dev/null +++ b/client/src/app/menu/menu.component.scss @@ -0,0 +1,131 @@ +menu { + background-color: $black-background; + margin: 0; + padding: 0; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + z-index: 1000; + color: $menu-color; + + @media screen and (max-width: 550px) { + font-size: 90%; + } + + .logged-in-block { + height: 100px; + background-color: rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 35px; + + .logged-in-info { + flex-grow: 1; + margin-left: 40px; + + .logged-in-username { + font-size: 16px; + font-weight: $font-semibold; + } + + .logged-in-email { + font-size: 13px; + color: #C6C6C6; + } + } + + .logged-in-more { + margin-right: 20px; + + .glyphicon { + cursor: pointer; + font-size: 18px; + } + } + } + + .button-block { + margin: 30px 25px 35px 25px; + + .login-button, .create-account-button { + font-weight: $font-semibold; + font-size: 15px; + height: $button-height; + line-height: $button-height; + width: 190px; + border-radius: 3px; + text-align: center; + + &.login-button { + background-color: $orange-color; + margin-bottom: 10px; + } + + &.create-account-button { + background-color: rgba(255, 255, 255, 0.25); + } + } + } + + .block-title { + text-transform: uppercase; + font-weight: $font-bold; // Bold + font-size: 13px; + margin-bottom: 25px; + } + + .panel-block { + margin-bottom: 45px; + margin-left: 26px; + + a { + display: flex; + + .icon { + width: 22px; + height: 22px; + display: inline-block; + margin-right: 18px; + background-size: contain; + + &.icon-videos-trending { + position: relative; + top: -2px; + background-image: url('../../assets/menu/trending.svg'); + } + + &.icon-videos-recently-added { + width: 23px; + height: 23px; + position: relative; + top: -1px; + background-image: url('../../assets/menu/recently-added.svg'); + } + + &.icon-administration { + width: 23px; + height: 23px; + + background-image: url('../../assets/menu/administration.svg'); + } + } + } + } + + a { + color: $menu-color; + height: 22px; + line-height: 22px; + display: block; + font-size: 16px; + cursor: pointer; + margin-bottom: 15px; + + &:hover, &:focus { + text-decoration: none !important; + outline: none !important; + } + } +} diff --git a/client/src/app/menu/menu.component.ts b/client/src/app/menu/menu.component.ts new file mode 100644 index 000000000..4c35bb3a5 --- /dev/null +++ b/client/src/app/menu/menu.component.ts @@ -0,0 +1,97 @@ +import { Component, OnInit } from '@angular/core' +import { Router } from '@angular/router' +import { UserRight } from '../../../../shared/models/users/user-right.enum' +import { AuthService, AuthStatus, ServerService } from '../core' +import { User } from '../shared/users/user.model' + +@Component({ + selector: 'my-menu', + templateUrl: './menu.component.html', + styleUrls: [ './menu.component.scss' ] +}) +export class MenuComponent implements OnInit { + user: User + isLoggedIn: boolean + userHasAdminAccess = false + + private routesPerRight = { + [UserRight.MANAGE_USERS]: '/admin/users', + [UserRight.MANAGE_SERVER_FOLLOW]: '/admin/friends', + [UserRight.MANAGE_VIDEO_ABUSES]: '/admin/video-abuses', + [UserRight.MANAGE_VIDEO_BLACKLIST]: '/admin/video-blacklist' + } + + constructor ( + private authService: AuthService, + private serverService: ServerService, + private router: Router + ) {} + + ngOnInit () { + this.isLoggedIn = this.authService.isLoggedIn() + if (this.isLoggedIn === true) this.user = this.authService.getUser() + this.computeIsUserHasAdminAccess() + + this.authService.loginChangedSource.subscribe( + status => { + if (status === AuthStatus.LoggedIn) { + this.isLoggedIn = true + this.user = this.authService.getUser() + this.computeIsUserHasAdminAccess() + console.log('Logged in.') + } else if (status === AuthStatus.LoggedOut) { + this.isLoggedIn = false + this.user = undefined + this.computeIsUserHasAdminAccess() + console.log('Logged out.') + } else { + console.error('Unknown auth status: ' + status) + } + } + ) + } + + isRegistrationAllowed () { + return this.serverService.getConfig().signup.allowed + } + + getFirstAdminRightAvailable () { + const user = this.authService.getUser() + if (!user) return undefined + + const adminRights = [ + UserRight.MANAGE_USERS, + UserRight.MANAGE_SERVER_FOLLOW, + UserRight.MANAGE_VIDEO_ABUSES, + UserRight.MANAGE_VIDEO_BLACKLIST + ] + + for (const adminRight of adminRights) { + if (user.hasRight(adminRight)) { + return adminRight + } + } + + return undefined + } + + getFirstAdminRouteAvailable () { + const right = this.getFirstAdminRightAvailable() + + return this.routesPerRight[right] + } + + logout (event: Event) { + event.preventDefault() + + this.authService.logout() + // Redirect to home page + this.router.navigate(['/videos/list']) + } + + private computeIsUserHasAdminAccess () { + const right = this.getFirstAdminRightAvailable() + + this.userHasAdminAccess = right !== undefined + } +} diff --git a/client/src/app/shared/search/search.component.html b/client/src/app/shared/search/search.component.html index 75e9dfa59..0e3de150c 100644 --- a/client/src/app/shared/search/search.component.html +++ b/client/src/app/shared/search/search.component.html @@ -1,22 +1,6 @@ -
+ - - - - -
- - -
-
+Upload diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss index 583f9586f..e69de29bb 100644 --- a/client/src/app/shared/search/search.component.scss +++ b/client/src/app/shared/search/search.component.scss @@ -1,51 +0,0 @@ -.icon-addon { - background-color: #fff; - border-radius: 0; - border-color: $header-border-color; - border-width: 0 0 1px 0; - text-align: right; - - .glyphicon-search { - width: 30px; - font-size: 20px; - } -} - -input, button, .input-group { - height: 100%; -} - -input, .input-group-btn { - border-radius: 0; - border-top: none; - border-left: none; -} - -input { - height: $header-height; - border-right: none; - font-weight: bold; - box-shadow: none; - - &, &:focus { - border-bottom: 1px solid $header-border-color !important; - outline: none !important; - box-shadow: none !important; - } -} - -button { - - &, &:hover, &:focus, &:active, &:visited { - background-color: #fff !important; - border-color: $header-border-color !important; - color: #858585 !important; - outline: none !important; - - height: $header-height; - border-width: 0 0 1px 0; - font-weight: bold; - text-decoration: none; - box-shadow: none; - } -} -- cgit v1.2.3