aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2017-12-20 14:29:55 +0100
committerChocobozzz <me@florianbigard.com>2017-12-20 14:29:55 +0100
commit15a7387da888492068e2ce3d1e39639d142f6c6e (patch)
tree8eaec71d11c19a97dc99e4d9812dfc0c646dd9e7
parenta4b8a4ddccc926e0670d3687cccd52496f6f8a8f (diff)
downloadPeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.tar.gz
PeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.tar.zst
PeerTube-15a7387da888492068e2ce3d1e39639d142f6c6e.zip
Customize select
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.html30
-rw-r--r--client/src/app/+admin/users/user-edit/user-edit.component.scss4
-rw-r--r--client/src/app/shared/misc/utils.ts24
-rw-r--r--client/src/app/shared/video/video-edit.model.ts2
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.html50
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.scss12
-rw-r--r--client/src/app/videos/+video-edit/shared/video-edit.component.ts5
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.html22
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.scss19
-rw-r--r--client/src/app/videos/+video-edit/video-add.component.ts18
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.html2
-rw-r--r--client/src/app/videos/+video-edit/video-update.component.ts13
-rw-r--r--client/src/sass/include/_mixins.scss71
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 @@
7 <div class="form-group" *ngIf="isCreation()"> 7 <div class="form-group" *ngIf="isCreation()">
8 <label for="username">Username</label> 8 <label for="username">Username</label>
9 <input 9 <input
10 type="text" class="form-control" id="username" placeholder="john" 10 type="text" id="username" placeholder="john"
11 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }" 11 formControlName="username" [ngClass]="{ 'input-error': formErrors['username'] }"
12 > 12 >
13 <div *ngIf="formErrors.username" class="form-error"> 13 <div *ngIf="formErrors.username" class="form-error">
@@ -18,7 +18,7 @@
18 <div class="form-group"> 18 <div class="form-group">
19 <label for="email">Email</label> 19 <label for="email">Email</label>
20 <input 20 <input
21 type="text" class="form-control" id="email" placeholder="mail@example.com" 21 type="text" id="email" placeholder="mail@example.com"
22 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }" 22 formControlName="email" [ngClass]="{ 'input-error': formErrors['email'] }"
23 > 23 >
24 <div *ngIf="formErrors.email" class="form-error"> 24 <div *ngIf="formErrors.email" class="form-error">
@@ -29,7 +29,7 @@
29 <div class="form-group" *ngIf="isCreation()"> 29 <div class="form-group" *ngIf="isCreation()">
30 <label for="password">Password</label> 30 <label for="password">Password</label>
31 <input 31 <input
32 type="password" class="form-control" id="password" 32 type="password" id="password"
33 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }" 33 formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
34 > 34 >
35 <div *ngIf="formErrors.password" class="form-error"> 35 <div *ngIf="formErrors.password" class="form-error">
@@ -39,11 +39,13 @@
39 39
40 <div class="form-group"> 40 <div class="form-group">
41 <label for="role">Role</label> 41 <label for="role">Role</label>
42 <select class="form-control" id="role" formControlName="role"> 42 <div class="peertube-select-container">
43 <option *ngFor="let role of roles" [value]="role.value"> 43 <select id="role" formControlName="role">
44 {{ role.label }} 44 <option *ngFor="let role of roles" [value]="role.value">
45 </option> 45 {{ role.label }}
46 </select> 46 </option>
47 </select>
48 </div>
47 49
48 <div *ngIf="formErrors.role" class="form-error"> 50 <div *ngIf="formErrors.role" class="form-error">
49 {{ formErrors.role }} 51 {{ formErrors.role }}
@@ -52,11 +54,13 @@
52 54
53 <div class="form-group"> 55 <div class="form-group">
54 <label for="videoQuota">Video quota</label> 56 <label for="videoQuota">Video quota</label>
55 <select class="form-control" id="videoQuota" formControlName="videoQuota"> 57 <div class="peertube-select-container">
56 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value"> 58 <select id="videoQuota" formControlName="videoQuota">
57 {{ videoQuotaOption.label }} 59 <option *ngFor="let videoQuotaOption of videoQuotaOptions" [value]="videoQuotaOption.value">
58 </option> 60 {{ videoQuotaOption.label }}
59 </select> 61 </option>
62 </select>
63 </div>
60 64
61 <div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()"> 65 <div class="transcoding-information" *ngIf="isTranscodingInformationDisplayed()">
62 Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br /> 66 Transcoding is enabled on server. The video quota only take in account <strong>original</strong> video. <br />
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]) {
10 display: block; 10 display: block;
11} 11}
12 12
13select { 13.peertube-select-container {
14 @include peertube-select(340px); 14 @include peertube-select-container(340px);
15} 15}
16 16
17input[type=submit] { 17input[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 @@
1// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript 1// Thanks: https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
2 2
3import { AuthService } from '../../core/auth'
4
3function getParameterByName (name: string, url: string) { 5function getParameterByName (name: string, url: string) {
4 if (!url) url = window.location.href 6 if (!url) url = window.location.href
5 name = name.replace(/[\[\]]/g, '\\$&') 7 name = name.replace(/[\[\]]/g, '\\$&')
@@ -17,7 +19,27 @@ function viewportHeight () {
17 return Math.max(document.documentElement.clientHeight, window.innerHeight || 0) 19 return Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
18} 20}
19 21
22function populateAsyncUserVideoChannels (authService: AuthService, channel: any[]) {
23 return new Promise(res => {
24 authService.userInformationLoaded
25 .subscribe(
26 () => {
27 const user = authService.getUser()
28 if (!user) return
29
30 const videoChannels = user.videoChannels
31 if (Array.isArray(videoChannels) === false) return
32
33 videoChannels.forEach(c => channel.push({ id: c.id, label: c.name }))
34
35 return res()
36 }
37 )
38 })
39}
40
20export { 41export {
21 viewportHeight, 42 viewportHeight,
22 getParameterByName 43 getParameterByName,
44 populateAsyncUserVideoChannels
23} 45}
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 {
45 name: this.name, 45 name: this.name,
46 tags: this.tags, 46 tags: this.tags,
47 nsfw: this.nsfw, 47 nsfw: this.nsfw,
48 channel: this.channel, 48 channelId: this.channel,
49 privacy: this.privacy 49 privacy: this.privacy
50 } 50 }
51 } 51 }
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
@@ -29,11 +29,22 @@
29 29
30 <div class="col-md-4"> 30 <div class="col-md-4">
31 <div class="form-group"> 31 <div class="form-group">
32 <label>Channel</label>
33 <div class="peertube-select-disabled-container">
34 <select formControlName="channelId">
35 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
36 </select>
37 </div>
38 </div>
39
40 <div class="form-group">
32 <label for="category">Category</label> 41 <label for="category">Category</label>
33 <select id="category" formControlName="category"> 42 <div class="peertube-select-container">
34 <option></option> 43 <select id="category" formControlName="category">
35 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option> 44 <option></option>
36 </select> 45 <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
46 </select>
47 </div>
37 48
38 <div *ngIf="formErrors.category" class="form-error"> 49 <div *ngIf="formErrors.category" class="form-error">
39 {{ formErrors.category }} 50 {{ formErrors.category }}
@@ -42,10 +53,12 @@
42 53
43 <div class="form-group"> 54 <div class="form-group">
44 <label for="licence">Licence</label> 55 <label for="licence">Licence</label>
45 <select id="licence" formControlName="licence"> 56 <div class="peertube-select-container">
46 <option></option> 57 <select id="licence" formControlName="licence">
47 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option> 58 <option></option>
48 </select> 59 <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
60 </select>
61 </div>
49 62
50 <div *ngIf="formErrors.licence" class="form-error"> 63 <div *ngIf="formErrors.licence" class="form-error">
51 {{ formErrors.licence }} 64 {{ formErrors.licence }}
@@ -54,10 +67,12 @@
54 67
55 <div class="form-group"> 68 <div class="form-group">
56 <label for="language">Language</label> 69 <label for="language">Language</label>
57 <select id="language" formControlName="language"> 70 <div class="peertube-select-container">
58 <option></option> 71 <select id="language" formControlName="language">
59 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option> 72 <option></option>
60 </select> 73 <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
74 </select>
75 </div>
61 76
62 <div *ngIf="formErrors.language" class="form-error"> 77 <div *ngIf="formErrors.language" class="form-error">
63 {{ formErrors.language }} 78 {{ formErrors.language }}
@@ -66,11 +81,12 @@
66 81
67 <div class="form-group"> 82 <div class="form-group">
68 <label for="privacy">Privacy</label> 83 <label for="privacy">Privacy</label>
69 <select id="privacy" formControlName="privacy"> 84 <div class="peertube-select-container">
70 85 <select id="privacy" formControlName="privacy">
71 <option></option> 86 <option></option>
72 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 87 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
73 </select> 88 </select>
89 </div>
74 90
75 <div *ngIf="formErrors.privacy" class="form-error"> 91 <div *ngIf="formErrors.privacy" class="form-error">
76 {{ formErrors.privacy }} 92 {{ 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 @@
1@import '_variables'; 1@import '_variables';
2@import '_mixins'; 2@import '_mixins';
3 3
4.peertube-select-container {
5 @include peertube-select-container(auto);
6}
7
8.peertube-select-disabled-container {
9 @include peertube-select-disabled-container(auto);
10}
11
4.video-edit { 12.video-edit {
5 height: 100%; 13 height: 100%;
6 14
@@ -17,10 +25,6 @@
17 } 25 }
18 } 26 }
19 27
20 select {
21 @include peertube-select(100%);
22 }
23
24 input, select { 28 input, select {
25 font-size: 15px 29 font-size: 15px
26 } 30 }
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'
4import { NotificationsService } from 'angular2-notifications' 4import { NotificationsService } from 'angular2-notifications'
5import 'rxjs/add/observable/forkJoin' 5import 'rxjs/add/observable/forkJoin'
6import { ServerService } from '../../../core/server' 6import { ServerService } from '../../../core/server'
7import { VIDEO_CHANNEL } from '../../../shared/forms/form-validators'
7import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message' 8import { ValidatorMessage } from '../../../shared/forms/form-validators/validator-message'
8import { 9import {
9 VIDEO_CATEGORY, 10 VIDEO_CATEGORY,
@@ -27,6 +28,7 @@ export class VideoEditComponent implements OnInit {
27 @Input() formErrors: { [ id: string ]: string } = {} 28 @Input() formErrors: { [ id: string ]: string } = {}
28 @Input() validationMessages: ValidatorMessage = {} 29 @Input() validationMessages: ValidatorMessage = {}
29 @Input() videoPrivacies = [] 30 @Input() videoPrivacies = []
31 @Input() userVideoChannels = []
30 32
31 tags: string[] = [] 33 tags: string[] = []
32 videoCategories = [] 34 videoCategories = []
@@ -50,6 +52,7 @@ export class VideoEditComponent implements OnInit {
50 updateForm () { 52 updateForm () {
51 this.formErrors['name'] = '' 53 this.formErrors['name'] = ''
52 this.formErrors['privacy'] = '' 54 this.formErrors['privacy'] = ''
55 this.formErrors['channelId'] = ''
53 this.formErrors['category'] = '' 56 this.formErrors['category'] = ''
54 this.formErrors['licence'] = '' 57 this.formErrors['licence'] = ''
55 this.formErrors['language'] = '' 58 this.formErrors['language'] = ''
@@ -57,6 +60,7 @@ export class VideoEditComponent implements OnInit {
57 60
58 this.validationMessages['name'] = VIDEO_NAME.MESSAGES 61 this.validationMessages['name'] = VIDEO_NAME.MESSAGES
59 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES 62 this.validationMessages['privacy'] = VIDEO_PRIVACY.MESSAGES
63 this.validationMessages['channelId'] = VIDEO_CHANNEL.MESSAGES
60 this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES 64 this.validationMessages['category'] = VIDEO_CATEGORY.MESSAGES
61 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES 65 this.validationMessages['licence'] = VIDEO_LICENCE.MESSAGES
62 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES 66 this.validationMessages['language'] = VIDEO_LANGUAGE.MESSAGES
@@ -64,6 +68,7 @@ export class VideoEditComponent implements OnInit {
64 68
65 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS)) 69 this.form.addControl('name', new FormControl('', VIDEO_NAME.VALIDATORS))
66 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS)) 70 this.form.addControl('privacy', new FormControl('', VIDEO_PRIVACY.VALIDATORS))
71 this.form.addControl('channelId', new FormControl({ value: '', disabled: true }))
67 this.form.addControl('nsfw', new FormControl(false)) 72 this.form.addControl('nsfw', new FormControl(false))
68 this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS)) 73 this.form.addControl('category', new FormControl('', VIDEO_CATEGORY.VALIDATORS))
69 this.form.addControl('licence', new FormControl('', VIDEO_LICENCE.VALIDATORS)) 74 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 @@
14 <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" /> 14 <input #videofileInput type="file" name="videofile" id="videofile" (change)="fileChange()" />
15 </div> 15 </div>
16 16
17 <div class="form-group"> 17 <div class="form-group form-group-channel">
18 <select [(ngModel)]="firstStepPrivacyId"> 18 <label for="first-step-channel">Channel</label>
19 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> 19 <div class="peertube-select-container">
20 </select> 20 <select id="first-step-channel" [(ngModel)]="firstStepChannelId">
21 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
22 </select>
23 </div>
21 </div> 24 </div>
22 25
23 <div class="form-group"> 26 <div class="form-group">
24 <select [(ngModel)]="firstStepChannelId"> 27 <label for="first-step-privacy">Privacy</label>
25 <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> 28 <div class="peertube-select-container">
26 </select> 29 <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId">
30 <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
31 </select>
32 </div>
27 </div> 33 </div>
28 </div> 34 </div>
29 </div> 35 </div>
@@ -37,7 +43,7 @@
37 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form"> 43 <form [hidden]="!isUploadingVideo" novalidate [formGroup]="form">
38 <my-video-edit 44 <my-video-edit
39 [form]="form" [formErrors]="formErrors" 45 [form]="form" [formErrors]="formErrors"
40 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 46 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
41 ></my-video-edit> 47 ></my-video-edit>
42 48
43 49
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 @@
7 border: 3px solid #EAEAEA; 7 border: 3px solid #EAEAEA;
8 width: 100%; 8 width: 100%;
9 height: 440px; 9 height: 440px;
10 text-align: center;
11 margin-top: 40px; 10 margin-top: 40px;
12 display: flex; 11 display: flex;
13 justify-content: center; 12 justify-content: center;
14 align-items: center; 13 align-items: center;
15 14
15 .peertube-select-container {
16 @include peertube-select-container(190px);
17 }
18
16 .upload-video { 19 .upload-video {
17 display: flex; 20 display: flex;
18 flex-direction: column; 21 flex-direction: column;
19 align-items: center; 22 align-items: center;
20 23
24 .form-group-channel {
25 margin-bottom: 20px;
26 }
27
21 .icon.icon-upload { 28 .icon.icon-upload {
22 @include icon(90px); 29 @include icon(90px);
23 margin-bottom: 25px; 30 margin-bottom: 25px;
@@ -30,7 +37,8 @@
30 position: relative; 37 position: relative;
31 overflow: hidden; 38 overflow: hidden;
32 display: inline-block; 39 display: inline-block;
33 margin-bottom: 70px; 40 margin-bottom: 45px;
41 width: 190px;
34 42
35 @include peertube-button; 43 @include peertube-button;
36 @include orange-button; 44 @include orange-button;
@@ -51,13 +59,6 @@
51 display: block; 59 display: block;
52 } 60 }
53 } 61 }
54
55 select {
56 @include peertube-select(auto);
57
58 display: inline-block;
59 font-size: 15px
60 }
61 } 62 }
62} 63}
63 64
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'
7import { AuthService, ServerService } from '../../core' 7import { AuthService, ServerService } from '../../core'
8import { FormReactive } from '../../shared' 8import { FormReactive } from '../../shared'
9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' 9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
10import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
10import { VideoEdit } from '../../shared/video/video-edit.model' 11import { VideoEdit } from '../../shared/video/video-edit.model'
11import { VideoService } from '../../shared/video/video.service' 12import { VideoService } from '../../shared/video/video.service'
12 13
@@ -59,6 +60,9 @@ export class VideoAddComponent extends FormReactive implements OnInit {
59 ngOnInit () { 60 ngOnInit () {
60 this.buildForm() 61 this.buildForm()
61 62
63 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
64 .then(() => this.firstStepChannelId = this.userVideoChannels[0].id)
65
62 this.serverService.videoPrivaciesLoaded 66 this.serverService.videoPrivaciesLoaded
63 .subscribe( 67 .subscribe(
64 () => { 68 () => {
@@ -67,20 +71,6 @@ export class VideoAddComponent extends FormReactive implements OnInit {
67 // Public by default 71 // Public by default
68 this.firstStepPrivacyId = VideoPrivacy.PUBLIC 72 this.firstStepPrivacyId = VideoPrivacy.PUBLIC
69 }) 73 })
70
71 this.authService.userInformationLoaded
72 .subscribe(
73 () => {
74 const user = this.authService.getUser()
75 if (!user) return
76
77 const videoChannels = user.videoChannels
78 if (Array.isArray(videoChannels) === false) return
79
80 this.userVideoChannels = videoChannels.map(v => ({ id: v.id, label: v.name }))
81 this.firstStepChannelId = this.userVideoChannels[0].id
82 }
83 )
84 } 74 }
85 75
86 fileChange () { 76 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 @@
7 7
8 <my-video-edit 8 <my-video-edit
9 [form]="form" [formErrors]="formErrors" 9 [form]="form" [formErrors]="formErrors"
10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" 10 [validationMessages]="validationMessages" [videoPrivacies]="videoPrivacies" [userVideoChannels]="userVideoChannels"
11 ></my-video-edit> 11 ></my-video-edit>
12 12
13 <div class="submit-container"> 13 <div class="submit-container">
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'
5import 'rxjs/add/observable/forkJoin' 5import 'rxjs/add/observable/forkJoin'
6import { VideoPrivacy } from '../../../../../shared/models/videos' 6import { VideoPrivacy } from '../../../../../shared/models/videos'
7import { ServerService } from '../../core' 7import { ServerService } from '../../core'
8import { AuthService } from '../../core/auth'
8import { FormReactive } from '../../shared' 9import { FormReactive } from '../../shared'
9import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message' 10import { ValidatorMessage } from '../../shared/forms/form-validators/validator-message'
11import { populateAsyncUserVideoChannels } from '../../shared/misc/utils'
10import { VideoEdit } from '../../shared/video/video-edit.model' 12import { VideoEdit } from '../../shared/video/video-edit.model'
11import { VideoService } from '../../shared/video/video.service' 13import { VideoService } from '../../shared/video/video.service'
12 14
@@ -24,6 +26,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
24 formErrors: { [ id: string ]: string } = {} 26 formErrors: { [ id: string ]: string } = {}
25 validationMessages: ValidatorMessage = {} 27 validationMessages: ValidatorMessage = {}
26 videoPrivacies = [] 28 videoPrivacies = []
29 userVideoChannels = []
27 30
28 constructor ( 31 constructor (
29 private formBuilder: FormBuilder, 32 private formBuilder: FormBuilder,
@@ -31,7 +34,8 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
31 private router: Router, 34 private router: Router,
32 private notificationsService: NotificationsService, 35 private notificationsService: NotificationsService,
33 private serverService: ServerService, 36 private serverService: ServerService,
34 private videoService: VideoService 37 private videoService: VideoService,
38 private authService: AuthService
35 ) { 39 ) {
36 super() 40 super()
37 } 41 }
@@ -44,7 +48,12 @@ export class VideoUpdateComponent extends FormReactive implements OnInit {
44 ngOnInit () { 48 ngOnInit () {
45 this.buildForm() 49 this.buildForm()
46 50
47 this.videoPrivacies = this.serverService.getVideoPrivacies() 51 this.serverService.videoPrivaciesLoaded
52 .subscribe(
53 () => this.videoPrivacies = this.serverService.getVideoPrivacies()
54 )
55
56 populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
48 57
49 const uuid: string = this.route.snapshot.params['uuid'] 58 const uuid: string = this.route.snapshot.params['uuid']
50 this.videoService.getVideo(uuid) 59 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 @@
23} 23}
24 24
25@mixin orange-button { 25@mixin orange-button {
26 color: #fff; 26 &, &:active, &:focus {
27 background-color: $orange-color; 27 color: #fff;
28 background-color: $orange-color;
29 }
28 30
29 &:hover, &:active, &:focus { 31 &:hover {
30 color: #fff; 32 color: #fff;
31 background-color: $orange-hoover-color; 33 background-color: $orange-hoover-color;
32 } 34 }
@@ -39,8 +41,10 @@
39} 41}
40 42
41@mixin grey-button { 43@mixin grey-button {
42 background-color: $grey-color; 44 &, &:active, &:focus {
43 color: #585858; 45 background-color: $grey-color;
46 color: #585858;
47 }
44 48
45 &:hover, &:active, &:focus, &[disabled], &.disabled { 49 &:hover, &:active, &:focus, &[disabled], &.disabled {
46 color: #585858; 50 color: #585858;
@@ -88,12 +92,59 @@
88} 92}
89 93
90 94
91@mixin peertube-select ($width) { 95@mixin peertube-select-container ($width) {
92 background-color: #fff; 96 padding: 0;
97 margin: 0;
93 border: 1px solid #C6C6C6; 98 border: 1px solid #C6C6C6;
94 height: $button-height;
95 width: $width; 99 width: $width;
96 border-radius: 3px; 100 border-radius: 3px;
97 padding-left: 15px; 101 overflow: hidden;
98 padding-right: 15px; 102 background: #fff;
103 position: relative;
104
105 &:after {
106 top: 50%;
107 right: calc(0% + 15px);
108 content: " ";
109 height: 0;
110 width: 0;
111 position: absolute;
112 pointer-events: none;
113 border: 5px solid rgba(0, 0, 0, 0);
114 border-top-color: #000000;
115 margin-top: -2px;
116 z-index: 100;
117 }
118
119 select {
120 padding: 0 12px;
121 width: calc(100% + 2px);
122 position: relative;
123 left: 1px;
124 border: none;
125 box-shadow: none;
126 background: transparent none;
127 appearance: none;
128 cursor: pointer;
129 height: $button-height;
130
131 &:focus {
132 outline: none;
133 }
134
135 &:-moz-focusring {
136 color: transparent;
137 text-shadow: 0 0 0 #000;
138 }
139 }
140}
141
142@mixin peertube-select-disabled-container ($width) {
143 @include peertube-select-container($width);
144
145 background-color: #E5E5E5;
146
147 select {
148 cursor: default;
149 }
99} 150}