From c30745f342480b59fb0856a059c8c2fbffbcfc6a Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 1 Dec 2017 17:38:26 +0100 Subject: Add account settings new design --- client/src/app/+admin/users/shared/user.service.ts | 14 ++--- .../account-change-password.component.html | 24 -------- .../account-change-password.component.ts | 65 --------------------- .../app/account/account-change-password/index.ts | 1 - .../account-details/account-details.component.html | 16 ----- .../account-details/account-details.component.ts | 68 ---------------------- client/src/app/account/account-details/index.ts | 1 - client/src/app/account/account-routing.module.ts | 28 +++++++-- .../account-change-password.component.html | 18 ++++++ .../account-change-password.component.scss | 9 +++ .../account-change-password.component.ts | 62 ++++++++++++++++++++ .../account-change-password/index.ts | 1 + .../account-details/account-details.component.html | 14 +++++ .../account-details/account-details.component.scss | 11 ++++ .../account-details/account-details.component.ts | 61 +++++++++++++++++++ .../account-settings/account-details/index.ts | 1 + .../account-settings.component.html | 9 +++ .../account-settings.component.scss | 13 +++++ .../account-settings/account-settings.component.ts | 18 ++++++ client/src/app/account/account.component.html | 26 ++------- client/src/app/account/account.component.scss | 3 - client/src/app/account/account.component.ts | 24 +------- client/src/app/account/account.module.ts | 9 +-- client/src/app/app.component.scss | 8 --- client/src/app/menu/menu.component.html | 2 +- client/src/app/menu/menu.component.scss | 29 +++++---- client/src/app/shared/search/search.component.scss | 22 +------ client/src/app/videos/video-list/index.ts | 1 - .../app/videos/video-list/my-videos.component.ts | 36 ------------ .../video-list/shared/abstract-video-list.html | 31 +++++----- .../video-list/shared/abstract-video-list.scss | 23 -------- .../video-list/shared/abstract-video-list.ts | 4 +- client/src/app/videos/videos-routing.module.ts | 10 ---- client/src/app/videos/videos.module.ts | 3 +- client/src/sass/_mixins.scss | 35 +++++++++++ client/src/sass/_variables.scss | 2 + client/src/sass/application.scss | 44 ++++++++++++-- client/src/sass/pre-customizations.scss | 1 + 38 files changed, 377 insertions(+), 370 deletions(-) delete mode 100644 client/src/app/account/account-change-password/account-change-password.component.html delete mode 100644 client/src/app/account/account-change-password/account-change-password.component.ts delete mode 100644 client/src/app/account/account-change-password/index.ts delete mode 100644 client/src/app/account/account-details/account-details.component.html delete mode 100644 client/src/app/account/account-details/account-details.component.ts delete mode 100644 client/src/app/account/account-details/index.ts create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.html create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.scss create mode 100644 client/src/app/account/account-settings/account-change-password/account-change-password.component.ts create mode 100644 client/src/app/account/account-settings/account-change-password/index.ts create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.html create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.scss create mode 100644 client/src/app/account/account-settings/account-details/account-details.component.ts create mode 100644 client/src/app/account/account-settings/account-details/index.ts create mode 100644 client/src/app/account/account-settings/account-settings.component.html create mode 100644 client/src/app/account/account-settings/account-settings.component.scss create mode 100644 client/src/app/account/account-settings/account-settings.component.ts delete mode 100644 client/src/app/videos/video-list/my-videos.component.ts (limited to 'client') diff --git a/client/src/app/+admin/users/shared/user.service.ts b/client/src/app/+admin/users/shared/user.service.ts index e4bd5df37..dc77cc1d8 100644 --- a/client/src/app/+admin/users/shared/user.service.ts +++ b/client/src/app/+admin/users/shared/user.service.ts @@ -1,14 +1,12 @@ -import { Injectable } from '@angular/core' import { HttpClient, HttpParams } from '@angular/common/http' -import { Observable } from 'rxjs/Observable' +import { Injectable } from '@angular/core' +import { BytesPipe } from 'ngx-pipes' +import { SortMeta } from 'primeng/components/common/sortmeta' import 'rxjs/add/operator/catch' import 'rxjs/add/operator/map' - -import { SortMeta } from 'primeng/components/common/sortmeta' -import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe' - -import { RestExtractor, User, RestPagination, RestService } from '../../../shared' -import { UserCreate, UserUpdate, ResultList } from '../../../../../../shared' +import { Observable } from 'rxjs/Observable' +import { ResultList, UserCreate, UserUpdate } from '../../../../../../shared' +import { RestExtractor, RestPagination, RestService, User } from '../../../shared' @Injectable() export class UserService { diff --git a/client/src/app/account/account-change-password/account-change-password.component.html b/client/src/app/account/account-change-password/account-change-password.component.html deleted file mode 100644 index 92d9f900a..000000000 --- a/client/src/app/account/account-change-password/account-change-password.component.html +++ /dev/null @@ -1,24 +0,0 @@ -
{{ error }}
- -
-
- - -
- {{ formErrors['new-password'] }} -
-
- -
- - -
- - -
diff --git a/client/src/app/account/account-change-password/account-change-password.component.ts b/client/src/app/account/account-change-password/account-change-password.component.ts deleted file mode 100644 index 69edec54b..000000000 --- a/client/src/app/account/account-change-password/account-change-password.component.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { Component, OnInit } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' -import { Router } from '@angular/router' - -import { NotificationsService } from 'angular2-notifications' - -import { FormReactive, UserService, USER_PASSWORD } from '../../shared' - -@Component({ - selector: 'my-account-change-password', - templateUrl: './account-change-password.component.html' -}) - -export class AccountChangePasswordComponent extends FormReactive implements OnInit { - error: string = null - - form: FormGroup - formErrors = { - 'new-password': '', - 'new-confirmed-password': '' - } - validationMessages = { - 'new-password': USER_PASSWORD.MESSAGES, - 'new-confirmed-password': USER_PASSWORD.MESSAGES - } - - constructor ( - private formBuilder: FormBuilder, - private notificationsService: NotificationsService, - private userService: UserService - ) { - super() - } - - buildForm () { - this.form = this.formBuilder.group({ - 'new-password': [ '', USER_PASSWORD.VALIDATORS ], - 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ] - }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - - ngOnInit () { - this.buildForm() - } - - changePassword () { - const newPassword = this.form.value['new-password'] - const newConfirmedPassword = this.form.value['new-confirmed-password'] - - this.error = null - - if (newPassword !== newConfirmedPassword) { - this.error = 'The new password and the confirmed password do not correspond.' - return - } - - this.userService.changePassword(newPassword).subscribe( - () => this.notificationsService.success('Success', 'Password updated.'), - - err => this.error = err.message - ) - } -} diff --git a/client/src/app/account/account-change-password/index.ts b/client/src/app/account/account-change-password/index.ts deleted file mode 100644 index 44c330b66..000000000 --- a/client/src/app/account/account-change-password/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './account-change-password.component' diff --git a/client/src/app/account/account-details/account-details.component.html b/client/src/app/account/account-details/account-details.component.html deleted file mode 100644 index 8f4f176af..000000000 --- a/client/src/app/account/account-details/account-details.component.html +++ /dev/null @@ -1,16 +0,0 @@ -
{{ error }}
- -
-
- - -
- {{ formErrors['displayNSFW'] }} -
-
- - -
diff --git a/client/src/app/account/account-details/account-details.component.ts b/client/src/app/account/account-details/account-details.component.ts deleted file mode 100644 index d7a6e6871..000000000 --- a/client/src/app/account/account-details/account-details.component.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { Component, OnInit, Input } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' -import { Router } from '@angular/router' - -import { NotificationsService } from 'angular2-notifications' - -import { AuthService } from '../../core' -import { - FormReactive, - User, - UserService, - USER_PASSWORD -} from '../../shared' -import { UserUpdateMe } from '../../../../../shared' - -@Component({ - selector: 'my-account-details', - templateUrl: './account-details.component.html' -}) - -export class AccountDetailsComponent extends FormReactive implements OnInit { - @Input() user: User = null - - error: string = null - - form: FormGroup - formErrors = {} - validationMessages = {} - - constructor ( - private authService: AuthService, - private formBuilder: FormBuilder, - private notificationsService: NotificationsService, - private userService: UserService - ) { - super() - } - - buildForm () { - this.form = this.formBuilder.group({ - displayNSFW: [ this.user.displayNSFW ] - }) - - this.form.valueChanges.subscribe(data => this.onValueChanged(data)) - } - - ngOnInit () { - this.buildForm() - } - - updateDetails () { - const displayNSFW = this.form.value['displayNSFW'] - const details: UserUpdateMe = { - displayNSFW - } - - this.error = null - this.userService.updateMyDetails(details).subscribe( - () => { - this.notificationsService.success('Success', 'Information updated.') - - this.authService.refreshUserInformation() - }, - - err => this.error = err.message - ) - } -} diff --git a/client/src/app/account/account-details/index.ts b/client/src/app/account/account-details/index.ts deleted file mode 100644 index 4829f608a..000000000 --- a/client/src/app/account/account-details/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './account-details.component' diff --git a/client/src/app/account/account-routing.module.ts b/client/src/app/account/account-routing.module.ts index 74d9aa03e..2e9de1cfb 100644 --- a/client/src/app/account/account-routing.module.ts +++ b/client/src/app/account/account-routing.module.ts @@ -5,17 +5,33 @@ import { MetaGuard } from '@ngx-meta/core' import { LoginGuard } from '../core' import { AccountComponent } from './account.component' +import { AccountSettingsComponent } from './account-settings/account-settings.component' const accountRoutes: Routes = [ { path: 'account', component: AccountComponent, - canActivate: [ MetaGuard, LoginGuard ], - data: { - meta: { - title: 'My account' - } - } + canActivateChild: [ MetaGuard, LoginGuard ], + children: [ + { + path: 'settings', + component: AccountSettingsComponent, + data: { + meta: { + title: 'Account settings' + } + } + }, + // { + // path: 'videos', + // component: AccountVideosComponent, + // data: { + // meta: { + // title: 'Account videos' + // } + // } + // } + ] } ] diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.html b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html new file mode 100644 index 000000000..bfb55218f --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.html @@ -0,0 +1,18 @@ +
{{ error }}
+ +
+ +
+ {{ formErrors['new-password'] }} +
+ + + + +
diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss new file mode 100644 index 000000000..593355b70 --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.scss @@ -0,0 +1,9 @@ +input[type=password] { + @include peertube-input-text(340px); + display: block; + margin-bottom: 10px; +} + +input[type=submit] { + @include peertube-button; +} diff --git a/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts new file mode 100644 index 000000000..8979e1734 --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/account-change-password.component.ts @@ -0,0 +1,62 @@ +import { Component, OnInit } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { NotificationsService } from 'angular2-notifications' +import { FormReactive, USER_PASSWORD, UserService } from '../../../shared' + +@Component({ + selector: 'my-account-change-password', + templateUrl: './account-change-password.component.html', + styleUrls: [ './account-change-password.component.scss' ] +}) +export class AccountChangePasswordComponent extends FormReactive implements OnInit { + error: string = null + + form: FormGroup + formErrors = { + 'new-password': '', + 'new-confirmed-password': '' + } + validationMessages = { + 'new-password': USER_PASSWORD.MESSAGES, + 'new-confirmed-password': USER_PASSWORD.MESSAGES + } + + constructor ( + private formBuilder: FormBuilder, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + 'new-password': [ '', USER_PASSWORD.VALIDATORS ], + 'new-confirmed-password': [ '', USER_PASSWORD.VALIDATORS ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + } + + changePassword () { + const newPassword = this.form.value['new-password'] + const newConfirmedPassword = this.form.value['new-confirmed-password'] + + this.error = null + + if (newPassword !== newConfirmedPassword) { + this.error = 'The new password and the confirmed password do not correspond.' + return + } + + this.userService.changePassword(newPassword).subscribe( + () => this.notificationsService.success('Success', 'Password updated.'), + + err => this.error = err.message + ) + } +} diff --git a/client/src/app/account/account-settings/account-change-password/index.ts b/client/src/app/account/account-settings/account-change-password/index.ts new file mode 100644 index 000000000..44c330b66 --- /dev/null +++ b/client/src/app/account/account-settings/account-change-password/index.ts @@ -0,0 +1 @@ +export * from './account-change-password.component' diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html new file mode 100644 index 000000000..c3cf6b629 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.html @@ -0,0 +1,14 @@ +
{{ error }}
+ +
+ + +
+ {{ formErrors['displayNSFW'] }} +
+ + +
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss new file mode 100644 index 000000000..b1810d4f9 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.scss @@ -0,0 +1,11 @@ +label { + font-size: 15px; + font-weight: $font-regular; + margin-left: 5px; +} + +input[type=submit] { + @include peertube-button; + + display: block; +} diff --git a/client/src/app/account/account-settings/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts new file mode 100644 index 000000000..d835c53e5 --- /dev/null +++ b/client/src/app/account/account-settings/account-details/account-details.component.ts @@ -0,0 +1,61 @@ +import { Component, Input, OnInit } from '@angular/core' +import { FormBuilder, FormGroup } from '@angular/forms' +import { NotificationsService } from 'angular2-notifications' +import { UserUpdateMe } from '../../../../../../shared' +import { AuthService } from '../../../core' +import { FormReactive, User, UserService } from '../../../shared' + +@Component({ + selector: 'my-account-details', + templateUrl: './account-details.component.html', + styleUrls: [ './account-details.component.scss' ] +}) + +export class AccountDetailsComponent extends FormReactive implements OnInit { + @Input() user: User = null + + error: string = null + + form: FormGroup + formErrors = {} + validationMessages = {} + + constructor ( + private authService: AuthService, + private formBuilder: FormBuilder, + private notificationsService: NotificationsService, + private userService: UserService + ) { + super() + } + + buildForm () { + this.form = this.formBuilder.group({ + displayNSFW: [ this.user.displayNSFW ] + }) + + this.form.valueChanges.subscribe(data => this.onValueChanged(data)) + } + + ngOnInit () { + this.buildForm() + } + + updateDetails () { + const displayNSFW = this.form.value['displayNSFW'] + const details: UserUpdateMe = { + displayNSFW + } + + this.error = null + this.userService.updateMyDetails(details).subscribe( + () => { + this.notificationsService.success('Success', 'Information updated.') + + this.authService.refreshUserInformation() + }, + + err => this.error = err.message + ) + } +} diff --git a/client/src/app/account/account-settings/account-details/index.ts b/client/src/app/account/account-settings/account-details/index.ts new file mode 100644 index 000000000..4829f608a --- /dev/null +++ b/client/src/app/account/account-settings/account-details/index.ts @@ -0,0 +1 @@ +export * from './account-details.component' diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html new file mode 100644 index 000000000..2509eb5aa --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.html @@ -0,0 +1,9 @@ +
+ {{ user.username }} +
+ +
Account settings
+ + +
Filtering
+ diff --git a/client/src/app/account/account-settings/account-settings.component.scss b/client/src/app/account/account-settings/account-settings.component.scss new file mode 100644 index 000000000..a0822631d --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.scss @@ -0,0 +1,13 @@ +.user-info { + font-size: 20px; + font-weight: $font-bold; +} + +.account-title { + text-transform: uppercase; + color: $orange-color; + font-weight: $font-bold; + font-size: 13px; + margin-top: 55px; + margin-bottom: 30px; +} diff --git a/client/src/app/account/account-settings/account-settings.component.ts b/client/src/app/account/account-settings/account-settings.component.ts new file mode 100644 index 000000000..c3b670e02 --- /dev/null +++ b/client/src/app/account/account-settings/account-settings.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core' +import { User } from '../../shared' +import { AuthService } from '../../core' + +@Component({ + selector: 'my-account-settings', + templateUrl: './account-settings.component.html', + styleUrls: [ './account-settings.component.scss' ] +}) +export class AccountSettingsComponent implements OnInit { + user: User = null + + constructor (private authService: AuthService) {} + + ngOnInit () { + this.user = this.authService.getUser() + } +} diff --git a/client/src/app/account/account.component.html b/client/src/app/account/account.component.html index 177e54999..d82a4ca4d 100644 --- a/client/src/app/account/account.component.html +++ b/client/src/app/account/account.component.html @@ -1,25 +1,11 @@
-
-

Account

+
+ My account -
-
-
Change password
- -
- -
-
-
- -
-
-
Update my informations
+ My videos +
-
- -
-
-
+
+
diff --git a/client/src/app/account/account.component.scss b/client/src/app/account/account.component.scss index 61b80d0a7..e69de29bb 100644 --- a/client/src/app/account/account.component.scss +++ b/client/src/app/account/account.component.scss @@ -1,3 +0,0 @@ -.panel { - margin-top: 40px; -} diff --git a/client/src/app/account/account.component.ts b/client/src/app/account/account.component.ts index 929934f67..3d3677ab0 100644 --- a/client/src/app/account/account.component.ts +++ b/client/src/app/account/account.component.ts @@ -1,28 +1,8 @@ -import { Component, OnInit } from '@angular/core' -import { FormBuilder, FormGroup } from '@angular/forms' -import { Router } from '@angular/router' - -import { NotificationsService } from 'angular2-notifications' - -import { AuthService } from '../core' -import { - FormReactive, - User, - UserService, - USER_PASSWORD -} from '../shared' +import { Component } from '@angular/core' @Component({ selector: 'my-account', templateUrl: './account.component.html', styleUrls: [ './account.component.scss' ] }) -export class AccountComponent implements OnInit { - user: User = null - - constructor (private authService: AuthService) {} - - ngOnInit () { - this.user = this.authService.getUser() - } -} +export class AccountComponent {} diff --git a/client/src/app/account/account.module.ts b/client/src/app/account/account.module.ts index 380e9d235..ff444ddeb 100644 --- a/client/src/app/account/account.module.ts +++ b/client/src/app/account/account.module.ts @@ -1,11 +1,11 @@ import { NgModule } from '@angular/core' - +import { SharedModule } from '../shared' import { AccountRoutingModule } from './account-routing.module' +import { AccountChangePasswordComponent } from './account-settings/account-change-password/account-change-password.component' +import { AccountDetailsComponent } from './account-settings/account-details/account-details.component' +import { AccountSettingsComponent } from './account-settings/account-settings.component' import { AccountComponent } from './account.component' -import { AccountChangePasswordComponent } from './account-change-password' -import { AccountDetailsComponent } from './account-details' import { AccountService } from './account.service' -import { SharedModule } from '../shared' @NgModule({ imports: [ @@ -15,6 +15,7 @@ import { SharedModule } from '../shared' declarations: [ AccountComponent, + AccountSettingsComponent, AccountChangePasswordComponent, AccountDetailsComponent ], diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss index f245d0563..1baffa5c8 100644 --- a/client/src/app/app.component.scss +++ b/client/src/app/app.component.scss @@ -2,14 +2,6 @@ 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; } diff --git a/client/src/app/menu/menu.component.html b/client/src/app/menu/menu.component.html index 21f8d8ba4..0ed8ec518 100644 --- a/client/src/app/menu/menu.component.html +++ b/client/src/app/menu/menu.component.html @@ -1,7 +1,7 @@
-
{{ user.username }}
+ {{ user.username }}
{{ user.email }}
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss index 2c2106733..9d67ca66c 100644 --- a/client/src/app/menu/menu.component.scss +++ b/client/src/app/menu/menu.component.scss @@ -28,6 +28,10 @@ menu { .logged-in-username { font-size: 16px; font-weight: $font-semibold; + color: $menu-color; + cursor: pointer; + + @include disable-default-a-behaviour; } .logged-in-email { @@ -57,6 +61,12 @@ menu { width: 190px; border-radius: 3px; text-align: center; + color: $menu-color; + display: block; + cursor: pointer; + margin-bottom: 15px; + + @include disable-default-a-behaviour; &.login-button { background-color: $orange-color; @@ -82,6 +92,13 @@ menu { a { display: flex; + color: $menu-color; + cursor: pointer; + height: 22px; + line-height: 22px; + font-size: 16px; + margin-bottom: 15px; + @include disable-default-a-behaviour; .icon { width: 22px; @@ -113,16 +130,4 @@ menu { } } } - - a { - color: $menu-color; - height: 22px; - line-height: 22px; - display: block; - font-size: 16px; - cursor: pointer; - margin-bottom: 15px; - - @include disable-default-a-behaviour; - } } diff --git a/client/src/app/shared/search/search.component.scss b/client/src/app/shared/search/search.component.scss index ffd891904..191d3d597 100644 --- a/client/src/app/shared/search/search.component.scss +++ b/client/src/app/shared/search/search.component.scss @@ -1,13 +1,7 @@ #search-video { - display: inline-block; - height: $button-height; - width: $search-input-width; + @include peertube-input-text($search-input-width); margin-right: 15px; padding-right: 25px; // For the search icon - background: #fff; - border: 1px solid #C6C6C6; - border-radius: 3px; - padding-left: 15px; &::placeholder { color: #000; @@ -29,19 +23,9 @@ } .upload-button { - display: inline-block; - color: #fff; - font-weight: $font-semibold; - font-size: 15px; - height: $button-height; - line-height: $button-height; - border-radius: 3px; - text-align: center; - margin-right: 25px; - background-color: $orange-color; - padding: 0 17px 0 13px; + @include peertube-button-link; - @include disable-default-a-behaviour; + margin-right: 25px; .icon.icon-upload { display: inline-block; diff --git a/client/src/app/videos/video-list/index.ts b/client/src/app/videos/video-list/index.ts index a5a60364a..594e31984 100644 --- a/client/src/app/videos/video-list/index.ts +++ b/client/src/app/videos/video-list/index.ts @@ -1,4 +1,3 @@ -export * from './my-videos.component' export * from './video-recently-added.component' export * from './video-trending.component' export * from './shared' diff --git a/client/src/app/videos/video-list/my-videos.component.ts b/client/src/app/videos/video-list/my-videos.component.ts deleted file mode 100644 index 146db8262..000000000 --- a/client/src/app/videos/video-list/my-videos.component.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { Component, OnDestroy, OnInit } from '@angular/core' -import { ActivatedRoute, Router } from '@angular/router' - -import { NotificationsService } from 'angular2-notifications' - -import { AbstractVideoList } from './shared' -import { VideoService } from '../shared' - -@Component({ - selector: 'my-videos', - styleUrls: [ './shared/abstract-video-list.scss' ], - templateUrl: './shared/abstract-video-list.html' -}) -export class MyVideosComponent extends AbstractVideoList implements OnInit, OnDestroy { - - constructor ( - protected router: Router, - protected route: ActivatedRoute, - protected notificationsService: NotificationsService, - private videoService: VideoService - ) { - super() - } - - ngOnInit () { - super.ngOnInit() - } - - ngOnDestroy () { - super.ngOnDestroy() - } - - getVideosObservable () { - return this.videoService.getMyVideos(this.pagination, this.sort) - } -} diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.html b/client/src/app/videos/video-list/shared/abstract-video-list.html index 69e16319e..bd4f6b1f8 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.html +++ b/client/src/app/videos/video-list/shared/abstract-video-list.html @@ -1,18 +1,19 @@ -
- {{ titlePage }} -
+
+
+ {{ titlePage }} +
-
- - + + +
diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.scss b/client/src/app/videos/video-list/shared/abstract-video-list.scss index de174802b..e69de29bb 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.scss +++ b/client/src/app/videos/video-list/shared/abstract-video-list.scss @@ -1,23 +0,0 @@ -.videos-info { - @media screen and (max-width: 400px) { - margin-left: 0; - } - - border-bottom: 1px solid #f1f1f1; - height: 40px; - line-height: 40px; - - .videos-total-results { - font-size: 13px; - } - - my-loader { - display: inline-block; - margin-left: 5px; - } -} - -pagination { - display: block; - text-align: center; -} diff --git a/client/src/app/videos/video-list/shared/abstract-video-list.ts b/client/src/app/videos/video-list/shared/abstract-video-list.ts index 44cdc1d9f..a684ffef4 100644 --- a/client/src/app/videos/video-list/shared/abstract-video-list.ts +++ b/client/src/app/videos/video-list/shared/abstract-video-list.ts @@ -36,7 +36,9 @@ export abstract class AbstractVideoList implements OnInit, OnDestroy { } ngOnDestroy () { - this.subActivatedRoute.unsubscribe() + if (this.subActivatedRoute) { + this.subActivatedRoute.unsubscribe() + } } onNearOfTop () { diff --git a/client/src/app/videos/videos-routing.module.ts b/client/src/app/videos/videos-routing.module.ts index 1f894df7a..204851c81 100644 --- a/client/src/app/videos/videos-routing.module.ts +++ b/client/src/app/videos/videos-routing.module.ts @@ -1,7 +1,6 @@ import { NgModule } from '@angular/core' import { RouterModule, Routes } from '@angular/router' import { MetaGuard } from '@ngx-meta/core' -import { MyVideosComponent } from './video-list' import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosComponent } from './videos.component' @@ -17,15 +16,6 @@ const videosRoutes: Routes = [ pathMatch: 'full', redirectTo: 'recently-added' }, - { - path: 'mine', - component: MyVideosComponent, - data: { - meta: { - title: 'My videos' - } - } - }, { path: 'trending', component: VideoTrendingComponent, diff --git a/client/src/app/videos/videos.module.ts b/client/src/app/videos/videos.module.ts index f3981d275..1d6194158 100644 --- a/client/src/app/videos/videos.module.ts +++ b/client/src/app/videos/videos.module.ts @@ -2,7 +2,7 @@ import { NgModule } from '@angular/core' import { InfiniteScrollModule } from 'ngx-infinite-scroll' import { SharedModule } from '../shared' import { VideoService } from './shared' -import { MyVideosComponent, VideoMiniatureComponent } from './video-list' +import { VideoMiniatureComponent } from './video-list' import { VideoRecentlyAddedComponent } from './video-list/video-recently-added.component' import { VideoTrendingComponent } from './video-list/video-trending.component' import { VideosRoutingModule } from './videos-routing.module' @@ -20,7 +20,6 @@ import { VideosComponent } from './videos.component' VideoTrendingComponent, VideoRecentlyAddedComponent, - MyVideosComponent, VideoMiniatureComponent ], diff --git a/client/src/sass/_mixins.scss b/client/src/sass/_mixins.scss index 681657d90..5798b8f6e 100644 --- a/client/src/sass/_mixins.scss +++ b/client/src/sass/_mixins.scss @@ -4,3 +4,38 @@ outline: none !important; } } + +@mixin peertube-input-text($width) { + display: inline-block; + height: $button-height; + width: $width; + background: #fff; + border: 1px solid #C6C6C6; + border-radius: 3px; + padding-left: 15px; + + &::placeholder { + color: #585858; + } +} + +@mixin peertube-button { + border: none; + color: #fff; + font-weight: $font-semibold; + font-size: 15px; + height: $button-height; + line-height: $button-height; + border-radius: 3px; + text-align: center; + background-color: $orange-color; + padding: 0 17px 0 13px; + cursor: pointer; +} + +@mixin peertube-button-link { + display: inline-block; + + @include peertube-button; + @include disable-default-a-behaviour; +} diff --git a/client/src/sass/_variables.scss b/client/src/sass/_variables.scss index e32b37462..d05452367 100644 --- a/client/src/sass/_variables.scss +++ b/client/src/sass/_variables.scss @@ -8,6 +8,8 @@ $orange-color: #F1680D; $black-background: #000; $grey-background: #f6f2f2; +$expanded-horizontal-margins: 150px; + $button-height: 30px; $header-height: 50px; diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index fc61a22da..db63db5f5 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -33,14 +33,50 @@ input.readonly { } .main-col { - padding: 30px; + margin-left: $menu-width; .title-page { + color: #000; font-size: 16px; - font-weight: $font-bold; display: inline-block; - border-bottom: 2px solid $orange-color; - margin-bottom: 25px; + margin-right: 55px; + font-weight: $font-semibold; + @include disable-default-a-behaviour; + + &.active, &.title-page-single { + border-bottom: 2px solid $orange-color; + font-weight: $font-bold; + margin-top: 30px; + margin-bottom: 25px; + } + } + + .margin-content { + margin-left: 10px; + margin-right: 10px; + } + + .sub-menu { + background-color: #F7F7F7; + width: 100%; + height: 81px; + margin-bottom: 30px; + display: flex; + align-items: center; + } + + // Override some properties if the main content is expanded (no menu on the left) + &.expanded { + margin-left: 0; + + .margin-content { + margin-left: $expanded-horizontal-margins; + margin-right: $expanded-horizontal-margins; + } + + .sub-menu { + padding-left: $expanded-horizontal-margins; + } } } diff --git a/client/src/sass/pre-customizations.scss b/client/src/sass/pre-customizations.scss index 693489828..52eef50f2 100644 --- a/client/src/sass/pre-customizations.scss +++ b/client/src/sass/pre-customizations.scss @@ -1,4 +1,5 @@ @import '_variables.scss'; +@import '_mixins.scss'; $bootstrap-sass-asset-helper: false !default; // -- cgit v1.2.3