Customize select

3 files changed, 46 insertions, 21 deletions

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 @@
 
   <div class="col-md-4">
     <div class="form-group">
+      <label>Channel</label>
+      <div class="peertube-select-disabled-container">
+        <select formControlName="channelId">
+          <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="form-group">
       <label for="category">Category</label>
-      <select id="category" formControlName="category">
-        <option></option>
-        <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
-      </select>
+      <div class="peertube-select-container">
+        <select id="category" formControlName="category">
+          <option></option>
+          <option *ngFor="let category of videoCategories" [value]="category.id">{{ category.label }}</option>
+        </select>
+      </div>
 
       <div *ngIf="formErrors.category" class="form-error">
         {{ formErrors.category }}
@@ -42,10 +53,12 @@
 
     <div class="form-group">
       <label for="licence">Licence</label>
-      <select id="licence" formControlName="licence">
-        <option></option>
-        <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
-      </select>
+      <div class="peertube-select-container">
+        <select id="licence" formControlName="licence">
+          <option></option>
+          <option *ngFor="let licence of videoLicences" [value]="licence.id">{{ licence.label }}</option>
+        </select>
+      </div>
 
       <div *ngIf="formErrors.licence" class="form-error">
         {{ formErrors.licence }}
@@ -54,10 +67,12 @@
 
     <div class="form-group">
       <label for="language">Language</label>
-      <select id="language" formControlName="language">
-        <option></option>
-        <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
-      </select>
+      <div class="peertube-select-container">
+        <select id="language" formControlName="language">
+          <option></option>
+          <option *ngFor="let language of videoLanguages" [value]="language.id">{{ language.label }}</option>
+        </select>
+      </div>
 
       <div *ngIf="formErrors.language" class="form-error">
         {{ formErrors.language }}
@@ -66,11 +81,12 @@
 
     <div class="form-group">
       <label for="privacy">Privacy</label>
-      <select id="privacy" formControlName="privacy">
-
-        <option></option>
-        <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
-      </select>
+      <div class="peertube-select-container">
+        <select id="privacy" formControlName="privacy">
+          <option></option>
+          <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option>
+        </select>
+      </div>
 
       <div *ngIf="formErrors.privacy" class="form-error">
         {{ 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))