From 04e0fc488826f505a8de3ce99113f3cb2fcec147 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 8 Dec 2017 10:41:49 +0100 Subject: Begin admin design --- client/src/app/+admin/admin.component.html | 27 +++++ client/src/app/+admin/admin.component.scss | 0 client/src/app/+admin/admin.component.ts | 26 ++++- .../followers-list/followers-list.component.html | 26 ++--- .../following-add/following-add.component.html | 53 ++++----- .../following-list/following-list.component.html | 34 +++--- .../src/app/+admin/follows/follows.component.scss | 18 --- .../users/user-edit/user-edit.component.html | 123 ++++++++++----------- .../users/user-edit/user-edit.component.scss | 18 +++ .../users/user-list/user-list.component.html | 63 +++++------ .../users/user-list/user-list.component.scss | 22 +++- client/src/app/app.component.html | 3 +- client/src/app/app.module.ts | 3 +- client/src/app/header/header.component.scss | 7 +- client/src/app/menu/index.ts | 1 - client/src/app/menu/menu-admin.component.html | 35 ------ client/src/app/menu/menu-admin.component.ts | 33 ------ .../shared/video-description.component.scss | 34 ------ client/src/assets/images/admin/add.svg | 13 +++ client/src/sass/application.scss | 42 ++++++- 20 files changed, 288 insertions(+), 293 deletions(-) create mode 100644 client/src/app/+admin/admin.component.html create mode 100644 client/src/app/+admin/admin.component.scss delete mode 100644 client/src/app/menu/menu-admin.component.html delete mode 100644 client/src/app/menu/menu-admin.component.ts create mode 100644 client/src/assets/images/admin/add.svg (limited to 'client') diff --git a/client/src/app/+admin/admin.component.html b/client/src/app/+admin/admin.component.html new file mode 100644 index 000000000..0bf4c8aac --- /dev/null +++ b/client/src/app/+admin/admin.component.html @@ -0,0 +1,27 @@ +
+
+ + Users + + + + Manage follows + + + + Video abuses + + + + Video blacklist + + + + Jobs + +
+ +
+ +
+
diff --git a/client/src/app/+admin/admin.component.scss b/client/src/app/+admin/admin.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/client/src/app/+admin/admin.component.ts b/client/src/app/+admin/admin.component.ts index ecd62ee61..75cd50cc7 100644 --- a/client/src/app/+admin/admin.component.ts +++ b/client/src/app/+admin/admin.component.ts @@ -1,7 +1,31 @@ import { Component } from '@angular/core' +import { UserRight } from '../../../../shared' +import { AuthService } from '../core/auth/auth.service' @Component({ - template: '' + templateUrl: './admin.component.html', + styleUrls: [ './admin.component.scss' ] }) export class AdminComponent { + 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/+admin/follows/followers-list/followers-list.component.html b/client/src/app/+admin/follows/followers-list/followers-list.component.html index 473801822..ea5380ff7 100644 --- a/client/src/app/+admin/follows/followers-list/followers-list.component.html +++ b/client/src/app/+admin/follows/followers-list/followers-list.component.html @@ -1,16 +1,12 @@ -
-
-

Followers list

+

Followers list

- - - - - - - -
-
+ + + + + + + diff --git a/client/src/app/+admin/follows/following-add/following-add.component.html b/client/src/app/+admin/follows/following-add/following-add.component.html index 8e7dddc11..65c1eda0c 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.html +++ b/client/src/app/+admin/follows/following-add/following-add.component.html @@ -1,35 +1,30 @@ -
-
+

Add following

-

Add following

+
{{ error }}
-
{{ error }}
+
+
+ - -
- +
+ + + + + +
-
- - - - - -
- -
- It should be a valid host. -
-
- -
- It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers. -
+
+ It should be a valid host. +
+
- -
+
+ It seems that you are not on a HTTPS server. Your webserver need to have TLS activated in order to follow servers.
-
+ + + diff --git a/client/src/app/+admin/follows/following-list/following-list.component.html b/client/src/app/+admin/follows/following-list/following-list.component.html index a73084312..85c7c3af1 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.html +++ b/client/src/app/+admin/follows/following-list/following-list.component.html @@ -1,20 +1,16 @@ -
-
-

Following list

+

Following list

- - - - - - - - - - - -
-
+ + + + + + + + + + + diff --git a/client/src/app/+admin/follows/follows.component.scss b/client/src/app/+admin/follows/follows.component.scss index d8ab41975..242effd85 100644 --- a/client/src/app/+admin/follows/follows.component.scss +++ b/client/src/app/+admin/follows/follows.component.scss @@ -1,21 +1,3 @@ .follows-menu { margin-top: 20px; } - -tabset /deep/ { - .nav-link { - padding: 0; - } - - .tab-link { - display: block; - text-align: center; - height: 40px; - width: 120px; - line-height: 40px; - - &:hover, &:active, &:focus { - text-decoration: none !important; - } - } -} diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index 349be13c1..ed27ea745 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html @@ -1,73 +1,68 @@ -
-
+
Add user
+
Edit user {{ username }}
-

Add user

-

Edit user {{ username }}

+
{{ error }}
-
{{ error }}
- -
-
- - -
- {{ formErrors.username }} -
-
- -
- - -
- {{ formErrors.email }} -
-
+ +
+ + +
+ {{ formErrors.username }} +
+
-
- - -
- {{ formErrors.password }} -
-
+
+ + +
+ {{ formErrors.email }} +
+
-
- - +
+ + +
+ {{ formErrors.password }} +
+
-
- {{ formErrors.role }} -
-
+
+ + -
- - +
+ {{ formErrors.role }} +
+
-
- Transcoding is enabled on server. The video quota only take in account original video.
- In maximum, this user could use ~ {{ computeQuotaWithTranscoding() | bytes }}. -
-
+
+ + - - +
+ Transcoding is enabled on server. The video quota only take in account original video.
+ In maximum, this user could use ~ {{ computeQuotaWithTranscoding() | bytes }}. +
-
+ + + diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.scss b/client/src/app/+admin/users/user-edit/user-edit.component.scss index 401caa0c6..68d270c19 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.scss +++ b/client/src/app/+admin/users/user-edit/user-edit.component.scss @@ -1,3 +1,21 @@ +.admin-sub-title { + margin-bottom: 30px; +} + +input:not([type=submit]) { + @include peertube-input-text(340px); + display: block; +} + +select { + @include peertube-select(340px); +} + +input[type=submit] { + @include peertube-button; + @include orange-button; +} + .transcoding-information { margin-top: 5px; font-size: 11px; diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 16a8a8033..a100ddfaa 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html @@ -1,35 +1,32 @@ -
-
+
+
Users list
-

Users list

- - - - - - - - - - - - - - - - - - - - - - - - - Add user - -
+ + + Add user +
+ + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/app/+admin/users/user-list/user-list.component.scss b/client/src/app/+admin/users/user-list/user-list.component.scss index 71adef653..54ecb61b4 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.scss +++ b/client/src/app/+admin/users/user-list/user-list.component.scss @@ -1,3 +1,21 @@ -.add-user { - margin-top: 10px; +.sub-header { + display: flex; + align-items: center; + margin-bottom: 30px; + + .admin-sub-title { + flex-grow: 1; + } + + .add-button { + @include peertube-button-link; + @include orange-button; + + .icon.icon-add { + @include icon(22px); + + margin-right: 3px; + background-image: url('../../../../assets/images/admin/add.svg'); + } + } } diff --git a/client/src/app/app.component.html b/client/src/app/app.component.html index b095e44d6..cb1f4e4ef 100644 --- a/client/src/app/app.component.html +++ b/client/src/app/app.component.html @@ -19,8 +19,7 @@
- - +
diff --git a/client/src/app/app.module.ts b/client/src/app/app.module.ts index ee7cb0c8a..1326e3411 100644 --- a/client/src/app/app.module.ts +++ b/client/src/app/app.module.ts @@ -20,7 +20,7 @@ import { LoginModule } from './login' import { SignupModule } from './signup' import { SharedModule } from './shared' import { VideosModule } from './videos' -import { MenuComponent, MenuAdminComponent } from './menu' +import { MenuComponent } from './menu' import { HeaderComponent } from './header' export function metaFactory (): MetaLoader { @@ -52,7 +52,6 @@ const APP_PROVIDERS = [ AppComponent, MenuComponent, - MenuAdminComponent, HeaderComponent ], imports: [ diff --git a/client/src/app/header/header.component.scss b/client/src/app/header/header.component.scss index d1c59e8d1..ed8695eab 100644 --- a/client/src/app/header/header.component.scss +++ b/client/src/app/header/header.component.scss @@ -27,10 +27,9 @@ margin-right: 25px; .icon.icon-upload { - display: inline-block; - background: url('../../assets/images/header/upload.svg') no-repeat; - background-size: contain; - width: 22px; + @include icon(22px); + + background-image: url('../../assets/images/header/upload.svg'); height: 24px; vertical-align: middle; margin-right: 6px; diff --git a/client/src/app/menu/index.ts b/client/src/app/menu/index.ts index c905ed20a..421271c12 100644 --- a/client/src/app/menu/index.ts +++ b/client/src/app/menu/index.ts @@ -1,2 +1 @@ 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 deleted file mode 100644 index 9857b2e3e..000000000 --- a/client/src/app/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/menu/menu-admin.component.ts b/client/src/app/menu/menu-admin.component.ts deleted file mode 100644 index 1babf5eb6..000000000 --- a/client/src/app/menu/menu-admin.component.ts +++ /dev/null @@ -1,33 +0,0 @@ -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/videos/+video-edit/shared/video-description.component.scss b/client/src/app/videos/+video-edit/shared/video-description.component.scss index 38506bb46..8155cbca7 100644 --- a/client/src/app/videos/+video-edit/shared/video-description.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-description.component.scss @@ -5,37 +5,3 @@ textarea { font-size: 15px; height: 150px; } - -.previews /deep/ { - font-size: 15px !important; - - .nav { - margin-top: 10px; - font-size: 16px !important; - border: none !important; - - .nav-item .nav-link { - color: #000 !important; - height: 30px !important; - margin-right: 30px; - padding: 0 15px; - display: flex; - align-items: center; - border-radius: 3px; - border: none !important; - - &.active, &:hover { - background-color: #F0F0F0; - } - - &.active { - font-weight: $font-semibold !important; - } - } - } - - .tab-content { - min-height: 75px; - padding: 15px; - } -} diff --git a/client/src/assets/images/admin/add.svg b/client/src/assets/images/admin/add.svg new file mode 100644 index 000000000..42b269c43 --- /dev/null +++ b/client/src/assets/images/admin/add.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 3c5a00309..e7b4024a7 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -89,7 +89,12 @@ label { &:hover, &:active, &:focus { color: #000; + } } + +.admin-sub-title { + font-size: 20px; + font-weight: bold; } // On small screen, menu is absolute and displayed over the page @@ -132,7 +137,7 @@ label { to { -moz-transform: rotate(360deg);} } -/* ngprime data table customizations */ +// ngprime data table customizations p-datatable { .action-cell { text-align: center; @@ -143,6 +148,7 @@ p-datatable { } } +// Bootstrap customizations .dropdown-menu { border-radius: 3px; box-shadow: 0 3px 6px; @@ -167,6 +173,40 @@ p-datatable { } } +.nav { + margin-top: 10px; + font-size: 16px !important; + border: none !important; + + .nav-item .nav-link { + height: 30px !important; + margin-right: 30px; + padding: 0 15px; + display: flex; + align-items: center; + border-radius: 3px; + border: none !important; + + &, & a { + color: #000 !important; + } + + &.active, &:hover { + background-color: #F0F0F0; + } + + &.active { + font-weight: $font-semibold !important; + } + } + + .tab-content { + min-height: 75px; + padding: 15px; + } +} + + .orange-button { @include peertube-button; @include orange-button; -- cgit v1.2.3