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/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 +++++++++++++++++++ 6 files changed, 346 insertions(+) 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/menu') 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 + } +} -- cgit v1.2.3