diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2020-08-05 00:50:07 +0200 |
---|---|---|
committer | Chocobozzz <chocobozzz@cpy.re> | 2020-08-11 09:03:39 +0200 |
commit | 02c01341f4dae30ec6b81fcb644952393d73c4a8 (patch) | |
tree | aca3f2b118bb123457fd38724be68fe877504c75 /client/src/app/+videos/+video-edit/video-add-components | |
parent | 766d13b4470de02d3d7bec94188260b89a356399 (diff) | |
download | PeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.tar.gz PeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.tar.zst PeerTube-02c01341f4dae30ec6b81fcb644952393d73c4a8.zip |
add ng-select for templatable select options
- create select-tags component to replace ngx-chips
- create select-options to factorize option selection in forms
- create select-channel to simplify channel selection
- refactor tags validation
Diffstat (limited to 'client/src/app/+videos/+video-edit/video-add-components')
5 files changed, 27 insertions, 33 deletions
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html index 5678f548f..8db37a293 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html | |||
@@ -25,20 +25,16 @@ | |||
25 | 25 | ||
26 | <div class="form-group"> | 26 | <div class="form-group"> |
27 | <label i18n for="first-step-channel">Channel</label> | 27 | <label i18n for="first-step-channel">Channel</label> |
28 | <div class="peertube-select-container"> | 28 | <my-select-channel |
29 | <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control"> | 29 | labelForId="first-step-channel" [items]="userVideoChannels" [(ngModel)]="firstStepChannelId" |
30 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 30 | ></my-select-channel> |
31 | </select> | ||
32 | </div> | ||
33 | </div> | 31 | </div> |
34 | 32 | ||
35 | <div class="form-group"> | 33 | <div class="form-group"> |
36 | <label i18n for="first-step-privacy">Privacy</label> | 34 | <label i18n for="first-step-privacy">Privacy</label> |
37 | <div class="peertube-select-container"> | 35 | <my-select-options |
38 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control"> | 36 | labelForId="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId" |
39 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 37 | ></my-select-options> |
40 | </select> | ||
41 | </div> | ||
42 | </div> | 38 | </div> |
43 | 39 | ||
44 | <input | 40 | <input |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html index 2e434271e..9b5cc3361 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-url.component.html | |||
@@ -20,20 +20,16 @@ | |||
20 | 20 | ||
21 | <div class="form-group"> | 21 | <div class="form-group"> |
22 | <label i18n for="first-step-channel">Channel</label> | 22 | <label i18n for="first-step-channel">Channel</label> |
23 | <div class="peertube-select-container"> | 23 | <my-select-channel |
24 | <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control"> | 24 | labelForId="first-step-channel" [items]="userVideoChannels" [(ngModel)]="firstStepChannelId" |
25 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 25 | ></my-select-channel> |
26 | </select> | ||
27 | </div> | ||
28 | </div> | 26 | </div> |
29 | 27 | ||
30 | <div class="form-group"> | 28 | <div class="form-group"> |
31 | <label i18n for="first-step-privacy">Privacy</label> | 29 | <label i18n for="first-step-privacy">Privacy</label> |
32 | <div class="peertube-select-container"> | 30 | <my-select-options |
33 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control"> | 31 | labelForId="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId" |
34 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 32 | ></my-select-options> |
35 | </select> | ||
36 | </div> | ||
37 | </div> | 33 | </div> |
38 | 34 | ||
39 | <input | 35 | <input |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss index cdb7c8280..17c5f63e9 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-send.scss +++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.scss | |||
@@ -26,6 +26,13 @@ $width-size: 190px; | |||
26 | .peertube-select-container { | 26 | .peertube-select-container { |
27 | @include peertube-select-container($width-size); | 27 | @include peertube-select-container($width-size); |
28 | } | 28 | } |
29 | my-select-options ::ng-deep ng-select, | ||
30 | my-select-channel ::ng-deep ng-select { | ||
31 | width: $width-size; | ||
32 | @media screen and (max-width: $width-size) { | ||
33 | width: 100%; | ||
34 | } | ||
35 | } | ||
29 | 36 | ||
30 | input[type=text] { | 37 | input[type=text] { |
31 | @include peertube-input-text($width-size); | 38 | @include peertube-input-text($width-size); |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts index 2e658dfae..86f2b376f 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-send.ts +++ b/client/src/app/+videos/+video-edit/video-add-components/video-send.ts | |||
@@ -10,7 +10,7 @@ import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models' | |||
10 | @Directive() | 10 | @Directive() |
11 | // tslint:disable-next-line: directive-class-suffix | 11 | // tslint:disable-next-line: directive-class-suffix |
12 | export abstract class VideoSend extends FormReactive implements OnInit { | 12 | export abstract class VideoSend extends FormReactive implements OnInit { |
13 | userVideoChannels: { id: number, label: string, support: string }[] = [] | 13 | userVideoChannels: { id: number, label: string, support: string, avatarPath?: string }[] = [] |
14 | videoPrivacies: VideoConstant<VideoPrivacy>[] = [] | 14 | videoPrivacies: VideoConstant<VideoPrivacy>[] = [] |
15 | videoCaptions: VideoCaptionEdit[] = [] | 15 | videoCaptions: VideoCaptionEdit[] = [] |
16 | 16 | ||
@@ -44,7 +44,7 @@ export abstract class VideoSend extends FormReactive implements OnInit { | |||
44 | this.serverService.getVideoPrivacies() | 44 | this.serverService.getVideoPrivacies() |
45 | .subscribe( | 45 | .subscribe( |
46 | privacies => { | 46 | privacies => { |
47 | this.videoPrivacies = privacies | 47 | this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies) |
48 | 48 | ||
49 | this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY | 49 | this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY |
50 | }) | 50 | }) |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html index 95b6628f6..ed697c25b 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html | |||
@@ -9,21 +9,16 @@ | |||
9 | 9 | ||
10 | <div class="form-group form-group-channel"> | 10 | <div class="form-group form-group-channel"> |
11 | <label i18n for="first-step-channel">Channel</label> | 11 | <label i18n for="first-step-channel">Channel</label> |
12 | <div class="peertube-select-container"> | 12 | <my-select-channel |
13 | <select id="first-step-channel" [(ngModel)]="firstStepChannelId" class="form-control"> | 13 | labelForId="first-step-channel" [items]="userVideoChannels" [(ngModel)]="firstStepChannelId" |
14 | <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option> | 14 | ></my-select-channel> |
15 | </select> | ||
16 | </div> | ||
17 | </div> | 15 | </div> |
18 | 16 | ||
19 | <div class="form-group"> | 17 | <div class="form-group"> |
20 | <label i18n for="first-step-privacy">Privacy</label> | 18 | <label i18n for="first-step-privacy">Privacy</label> |
21 | <div class="peertube-select-container"> | 19 | <my-select-options |
22 | <select id="first-step-privacy" [(ngModel)]="firstStepPrivacyId" class="form-control"> | 20 | labelForId="first-step-privacy" [items]="videoPrivacies" [(ngModel)]="firstStepPrivacyId" |
23 | <option *ngFor="let privacy of videoPrivacies" [value]="privacy.id">{{ privacy.label }}</option> | 21 | ></my-select-options> |
24 | <option i18n [value]="SPECIAL_SCHEDULED_PRIVACY">Scheduled</option> | ||
25 | </select> | ||
26 | </div> | ||
27 | </div> | 22 | </div> |
28 | 23 | ||
29 | <ng-container *ngIf="isUploadingAudioFile"> | 24 | <ng-container *ngIf="isUploadingAudioFile"> |