From 15a7387da888492068e2ce3d1e39639d142f6c6e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Wed, 20 Dec 2017 14:29:55 +0100 Subject: [PATCH] Customize select --- .../users/user-edit/user-edit.component.html | 30 ++++---- .../users/user-edit/user-edit.component.scss | 4 +- client/src/app/shared/misc/utils.ts | 24 ++++++- .../src/app/shared/video/video-edit.model.ts | 2 +- .../shared/video-edit.component.html | 50 ++++++++----- .../shared/video-edit.component.scss | 12 ++-- .../shared/video-edit.component.ts | 5 ++ .../+video-edit/video-add.component.html | 22 +++--- .../+video-edit/video-add.component.scss | 19 ++--- .../videos/+video-edit/video-add.component.ts | 18 ++--- .../+video-edit/video-update.component.html | 2 +- .../+video-edit/video-update.component.ts | 13 +++- client/src/sass/include/_mixins.scss | 71 ++++++++++++++++--- 13 files changed, 190 insertions(+), 82 deletions(-) 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 963e2f39a..77aa613a1 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 @@ -7,7 +7,7 @@
@@ -18,7 +18,7 @@
@@ -29,7 +29,7 @@
@@ -39,11 +39,13 @@
- +
+ +
{{ formErrors.role }} @@ -52,11 +54,13 @@
- +
+ +
Transcoding is enabled on server. The video quota only take in account original video.
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 1bb1c5f0f..59bb8e3e4 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 @@ -10,8 +10,8 @@ input:not([type=submit]) { display: block; } -select { - @include peertube-select(340px); +.peertube-select-container { + @include peertube-select-container(340px); } input[type=submit] { diff --git a/client/src/app/shared/misc/utils.ts b/client/src/app/shared/misc/utils.ts index df9e0381a..5525e4efb 100644 --- a/client/src/app/shared/misc/utils.ts +++ b/client/src/app/shared/misc/utils.ts @@ -1,5 +1,7 @@ // Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript +import { AuthService } from '../../core/auth' + function getParameterByName (name: string, url: string) { if (!url) url = window.location.href name = name.replace(/[\[\]]/g, '\\$&') @@ -17,7 +19,27 @@ function viewportHeight () { return Math.max(document.documentElement.clientHeight, window.innerHeight || 0) } +function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) { + return new Promise(res => { + authService.userInformationLoaded + .subscribe( + () => { + const user = authService.getUser() + if (!user) return + + const videoChannels = user.videoChannels + if (Array.isArray(videoChannels) === false) return + + videoChannels.forEach(c => channel.push({ id: c.id, label: c.name })) + + return res() + } + ) + }) +} + export { viewportHeight, - getParameterByName + getParameterByName, + populateAsyncUserVideoChannels } diff --git a/client/src/app/shared/video/video-edit.model.ts b/client/src/app/shared/video/video-edit.model.ts index 955255bfa..47c63d976 100644 --- a/client/src/app/shared/video/video-edit.model.ts +++ b/client/src/app/shared/video/video-edit.model.ts @@ -45,7 +45,7 @@ export class VideoEdit { name: this.name, tags: this.tags, nsfw: this.nsfw, - channel: this.channel, + channelId: this.channel, privacy: this.privacy } } diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.html b/client/src/app/videos/+video-edit/shared/video-edit.component.html index 8c071ce12..e728d8ea2 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.html @@ -28,12 +28,23 @@
+
+ +
+ +
+
+
- +
+ +
{{ formErrors.category }} @@ -42,10 +53,12 @@
- +
+ +
{{ formErrors.licence }} @@ -54,10 +67,12 @@
- +
+ +
{{ formErrors.language }} @@ -66,11 +81,12 @@
- +
+ +
{{ formErrors.privacy }} diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.scss b/client/src/app/videos/+video-edit/shared/video-edit.component.scss index f4466bdde..ba0ca1e21 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.scss +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.scss @@ -1,6 +1,14 @@ @import '_variables'; @import '_mixins'; +.peertube-select-container { + @include peertube-select-container(auto); +} + +.peertube-select-disabled-container { + @include peertube-select-disabled-container(auto); +} + .video-edit { height: 100%; @@ -17,10 +25,6 @@ } } - select { - @include peertube-select(100%); - } - input, select { font-size: 15px } diff --git a/client/src/app/videos/+video-edit/shared/video-edit.component.ts b/client/src/app/videos/+video-edit/shared/video-edit.component.ts index 28c9134a7..7fe265284 100644 --- a/client/src/app/videos/+video-edit/shared/video-edit.component.ts +++ b/client/src/app/videos/+video-edit/shared/video-edit.component.ts @@ -4,6 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router' import { NotificationsService } from 'angular2-notifications' import 'rxjs/add/observable/forkJoin' import { ServerService } from '../../../core/server' +import { VIDEO_CHANNEL } from '../../../shared/forms/form-validators' import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message' import { VIDEO_CATEGORY, @@ -27,6 +28,7 @@ export class VideoEditComponent implements OnInit { @Input() formErrors: { [ id: string ]: string } = {} @Input() validationMessages: ValidatorMessage = {} @Input() videoPrivacies = [] + @Input() userVideoChannels = [] tags: string[] = [] videoCategories = [] @@ -50,6 +52,7 @@ export class VideoEditComponent implements OnInit { updateForm () { this.formErrors['name'] = '' this.formErrors['privacy'] = '' + this.formErrors['channelId'] = '' this.formErrors['category'] = '' this.formErrors['licence'] = '' this.formErrors['language'] = '' @@ -57,6 +60,7 @@ export class VideoEditComponent implements OnInit { this.validationMessages['name'] = VIDEO_NAME.MESSAGES this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES + this.validationMessages['channelId'] = VIDEO_CHANNEL.MESSAGES this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES @@ -64,6 +68,7 @@ export class VideoEditComponent implements OnInit { this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) + this.form.addControl('channelId', new FormControl({ value: '', disabled: true })) this.form.addControl('nsfw', new FormControl(false)) this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS)) this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS)) diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html index a6f2bf6f2..20277423c 100644 --- a/client/src/app/videos/+video-edit/video-add.component.html +++ b/client/src/app/videos/+video-edit/video-add.component.html @@ -14,16 +14,22 @@
-
- +
+ +
+ +
- + +
+ +
@@ -37,7 +43,7 @@
diff --git a/client/src/app/videos/+video-edit/video-add.component.scss b/client/src/app/videos/+video-edit/video-add.component.scss index 78140e0e9..891f38819 100644 --- a/client/src/app/videos/+video-edit/video-add.component.scss +++ b/client/src/app/videos/+video-edit/video-add.component.scss @@ -7,17 +7,24 @@ border: 3px solid #EAEAEA; width: 100%; height: 440px; - text-align: center; margin-top: 40px; display: flex; justify-content: center; align-items: center; + .peertube-select-container { + @include peertube-select-container(190px); + } + .upload-video { display: flex; flex-direction: column; align-items: center; + .form-group-channel { + margin-bottom: 20px; + } + .icon.icon-upload { @include icon(90px); margin-bottom: 25px; @@ -30,7 +37,8 @@ position: relative; overflow: hidden; display: inline-block; - margin-bottom: 70px; + margin-bottom: 45px; + width: 190px; @include peertube-button; @include orange-button; @@ -51,13 +59,6 @@ display: block; } } - - select { - @include peertube-select(auto); - - display: inline-block; - font-size: 15px - } } } diff --git a/client/src/app/videos/+video-edit/video-add.component.ts b/client/src/app/videos/+video-edit/video-add.component.ts index 90510d0dc..9bbee58d8 100644 --- a/client/src/app/videos/+video-edit/video-add.component.ts +++ b/client/src/app/videos/+video-edit/video-add.component.ts @@ -7,6 +7,7 @@ import { VideoPrivacy } from '../../../../../shared/models/videos' import { AuthService, ServerService } from '../../core' import { FormReactive } from '../../shared' import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' +import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' @@ -59,6 +60,9 @@ export class VideoAddComponent extends FormReactive implements OnInit { ngOnInit () { this.buildForm() + populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) + .then(() => this.firstStepChannelId = this.userVideoChannels[0].id) + this.serverService.videoPrivaciesLoaded .subscribe( () => { @@ -67,20 +71,6 @@ export class VideoAddComponent extends FormReactive implements OnInit { // Public by default this.firstStepPrivacyId = VideoPrivacy.PUBLIC }) - - this.authService.userInformationLoaded - .subscribe( - () => { - const user = this.authService.getUser() - if (!user) return - - const videoChannels = user.videoChannels - if (Array.isArray(videoChannels) === false) return - - this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name })) - this.firstStepChannelId = this.userVideoChannels[0].id - } - ) } fileChange () { diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html index 261b8a130..158138bb3 100644 --- a/client/src/app/videos/+video-edit/video-update.component.html +++ b/client/src/app/videos/+video-edit/video-update.component.html @@ -7,7 +7,7 @@
diff --git a/client/src/app/videos/+video-edit/video-update.component.ts b/client/src/app/videos/+video-edit/video-update.component.ts index 08b74f4c3..941ef2478 100644 --- a/client/src/app/videos/+video-edit/video-update.component.ts +++ b/client/src/app/videos/+video-edit/video-update.component.ts @@ -5,8 +5,10 @@ import { NotificationsService } from 'angular2-notifications' import 'rxjs/add/observable/forkJoin' import { VideoPrivacy } from '../../../../../shared/models/videos' import { ServerService } from '../../core' +import { AuthService } from '../../core/auth' import { FormReactive } from '../../shared' import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' +import { populateAsyncUserVideoChannels } from '../../shared/misc/utils' import { VideoEdit } from '../../shared/video/video-edit.model' import { VideoService } from '../../shared/video/video.service' @@ -24,6 +26,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { formErrors: { [ id: string ]: string } = {} validationMessages: ValidatorMessage = {} videoPrivacies = [] + userVideoChannels = [] constructor ( private formBuilder: FormBuilder, @@ -31,7 +34,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { private router: Router, private notificationsService: NotificationsService, private serverService: ServerService, - private videoService: VideoService + private videoService: VideoService, + private authService: AuthService ) { super() } @@ -44,7 +48,12 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { ngOnInit () { this.buildForm() - this.videoPrivacies = this.serverService.getVideoPrivacies() + this.serverService.videoPrivaciesLoaded + .subscribe( + () => this.videoPrivacies = this.serverService.getVideoPrivacies() + ) + + populateAsyncUserVideoChannels(this.authService, this.userVideoChannels) const uuid: string = this.route.snapshot.params['uuid'] this.videoService.getVideo(uuid) diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index fdf5e3f67..4a709404d 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -23,10 +23,12 @@ } @mixin orange-button { - color: #fff; - background-color: $orange-color; + &, &:active, &:focus { + color: #fff; + background-color: $orange-color; + } - &:hover, &:active, &:focus { + &:hover { color: #fff; background-color: $orange-hoover-color; } @@ -39,8 +41,10 @@ } @mixin grey-button { - background-color: $grey-color; - color: #585858; + &, &:active, &:focus { + background-color: $grey-color; + color: #585858; + } &:hover, &:active, &:focus, &[disabled], &.disabled { color: #585858; @@ -88,12 +92,59 @@ } -@mixin peertube-select ($width) { - background-color: #fff; +@mixin peertube-select-container ($width) { + padding: 0; + margin: 0; border: 1px solid #C6C6C6; - height: $button-height; width: $width; border-radius: 3px; - padding-left: 15px; - padding-right: 15px; + overflow: hidden; + background: #fff; + position: relative; + + &:after { + top: 50%; + right: calc(0% + 15px); + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border: 5px solid rgba(0, 0, 0, 0); + border-top-color: #000000; + margin-top: -2px; + z-index: 100; + } + + select { + padding: 0 12px; + width: calc(100% + 2px); + position: relative; + left: 1px; + border: none; + box-shadow: none; + background: transparent none; + appearance: none; + cursor: pointer; + height: $button-height; + + &:focus { + outline: none; + } + + &:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; + } + } +} + +@mixin peertube-select-disabled-container ($width) { + @include peertube-select-container($width); + + background-color: #E5E5E5; + + select { + cursor: default; + } } -- 2.41.0