From 02c01341f4dae30ec6b81fcb644952393d73c4a8 Mon Sep 17 00:00:00 2001 From: Rigel Kent Date: Wed, 5 Aug 2020 00:50:07 +0200 Subject: [PATCH] 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 --- client/package.json | 5 +- .../app/+search/search-filters.component.html | 14 +--- .../app/+search/search-filters.component.scss | 2 - .../app/+search/search-filters.component.ts | 6 -- client/src/app/+search/search.module.ts | 4 -- .../video-caption-add-modal.component.html | 10 +-- .../video-caption-add-modal.component.scss | 5 +- .../shared/video-edit.component.html | 59 ++++++---------- .../shared/video-edit.component.scss | 2 - .../shared/video-edit.component.ts | 38 +++++++--- .../+video-edit/shared/video-edit.module.ts | 3 - .../video-import-torrent.component.html | 16 ++--- .../video-import-url.component.html | 16 ++--- .../video-add-components/video-send.scss | 7 ++ .../video-add-components/video-send.ts | 4 +- .../video-upload.component.html | 17 ++--- .../+video-edit/video-update.component.ts | 2 +- .../+video-edit/video-update.resolver.ts | 7 +- client/src/app/helpers/utils.ts | 12 +++- .../video-validators.service.ts | 27 +++++++- .../select-channel.component.html | 16 +++++ .../shared-forms/select-channel.component.ts | 51 ++++++++++++++ .../select-options.component.html | 18 +++++ .../shared-forms/select-options.component.ts | 47 +++++++++++++ .../shared-forms/select-shared.component.scss | 20 ++++++ .../shared-forms/select-tags.component.html | 13 ++++ .../shared-forms/select-tags.component.scss | 3 + .../shared-forms/select-tags.component.ts | 38 ++++++++++ .../shared/shared-forms/shared-form.module.ts | 13 +++- .../shared/shared-main/shared-main.module.ts | 7 +- .../shared/shared-main/video/video.service.ts | 12 ++-- client/src/sass/application.scss | 1 + client/src/sass/include/_mixins.scss | 69 ------------------- client/src/sass/ng-select.scss | 29 ++++++++ client/yarn.lock | 22 ++---- shared/models/videos/video-constant.model.ts | 1 + 36 files changed, 399 insertions(+), 217 deletions(-) create mode 100644 client/src/app/shared/shared-forms/select-channel.component.html create mode 100644 client/src/app/shared/shared-forms/select-channel.component.ts create mode 100644 client/src/app/shared/shared-forms/select-options.component.html create mode 100644 client/src/app/shared/shared-forms/select-options.component.ts create mode 100644 client/src/app/shared/shared-forms/select-shared.component.scss create mode 100644 client/src/app/shared/shared-forms/select-tags.component.html create mode 100644 client/src/app/shared/shared-forms/select-tags.component.scss create mode 100644 client/src/app/shared/shared-forms/select-tags.component.ts create mode 100644 client/src/sass/ng-select.scss diff --git a/client/package.json b/client/package.json index 946cd109c..50b33d7c3 100644 --- a/client/package.json +++ b/client/package.json @@ -44,6 +44,7 @@ "@angularclass/hmr": "^2.1.3", "@neos21/bootstrap3-glyphicons": "^1.0.1", "@ng-bootstrap/ng-bootstrap": "^7.0.0", + "@ng-select/ng-select": "^5.0.0", "@ngx-i18nsupport/ngx-i18nsupport": "^1.1.6", "@ngx-i18nsupport/tooling": "^8.0.3", "@ngx-loading-bar/core": "^5.0.0", @@ -95,7 +96,6 @@ "linkifyjs": "^2.1.5", "lodash-es": "^4.17.4", "markdown-it": "^11.0.0", - "ngx-chips": "2.1.0", "ngx-pipes": "^2.6.0", "node-sass": "^4.9.3", "npm-font-source-sans-pro": "^1.0.2", @@ -133,6 +133,5 @@ "webtorrent": "^0.108.1", "whatwg-fetch": "^3.0.0", "zone.js": "~0.10.2" - }, - "dependencies": {} + } } diff --git a/client/src/app/+search/search-filters.component.html b/client/src/app/+search/search-filters.component.html index e20aef8fb..b36b1d2ae 100644 --- a/client/src/app/+search/search-filters.component.html +++ b/client/src/app/+search/search-filters.component.html @@ -144,12 +144,7 @@ - +
@@ -157,12 +152,7 @@ - +
diff --git a/client/src/app/+search/search-filters.component.scss b/client/src/app/+search/search-filters.component.scss index a88a1c0b0..68ac6d021 100644 --- a/client/src/app/+search/search-filters.component.scss +++ b/client/src/app/+search/search-filters.component.scss @@ -65,5 +65,3 @@ input[type=submit] { display: flex; white-space: nowrap; } - -@include ng2-tags; diff --git a/client/src/app/+search/search-filters.component.ts b/client/src/app/+search/search-filters.component.ts index fc1db3258..13ad61647 100644 --- a/client/src/app/+search/search-filters.component.ts +++ b/client/src/app/+search/search-filters.component.ts @@ -1,5 +1,4 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' -import { ValidatorFn } from '@angular/forms' import { ServerService } from '@app/core' import { VideoValidatorsService } from '@app/shared/shared-forms' import { AdvancedSearch } from '@app/shared/shared-search' @@ -20,9 +19,6 @@ export class SearchFiltersComponent implements OnInit { videoLicences: VideoConstant[] = [] videoLanguages: VideoConstant[] = [] - tagValidators: ValidatorFn[] - tagValidatorsMessages: { [ name: string ]: string } - publishedDateRanges: { id: string, label: string }[] = [] sorts: { id: string, label: string }[] = [] durationRanges: { id: string, label: string }[] = [] @@ -40,8 +36,6 @@ export class SearchFiltersComponent implements OnInit { private videoValidatorsService: VideoValidatorsService, private serverService: ServerService ) { - this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS - this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES this.publishedDateRanges = [ { id: 'any_published_date', diff --git a/client/src/app/+search/search.module.ts b/client/src/app/+search/search.module.ts index ee4f07ad1..e85ae07d0 100644 --- a/client/src/app/+search/search.module.ts +++ b/client/src/app/+search/search.module.ts @@ -1,4 +1,3 @@ -import { TagInputModule } from 'ngx-chips' import { NgModule } from '@angular/core' import { SharedFormModule } from '@app/shared/shared-forms' import { SharedMainModule } from '@app/shared/shared-main' @@ -14,8 +13,6 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver' @NgModule({ imports: [ - TagInputModule, - SearchRoutingModule, SharedMainModule, @@ -31,7 +28,6 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver' ], exports: [ - TagInputModule, SearchComponent ], diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html index 6a9e31b5a..6a07dafa7 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html @@ -8,11 +8,11 @@
-
- +
+
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss index b257a16a9..0958b5f80 100644 --- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss +++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.scss @@ -1,8 +1,9 @@ @import '_variables'; @import '_mixins'; -.peertube-select-container { - @include peertube-select-container(auto); +label { + font-weight: $font-regular; + font-size: 100%; } .caption-file { 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 4d3b84626..ae3413e79 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,11 +28,10 @@ - + +
+ {{ formErrors.tags }} +
@@ -56,22 +55,15 @@
- -
- -
+ +
-
- -
+
{{ formErrors.category }} @@ -80,12 +72,9 @@
-
- -
+
{{ formErrors.licence }} @@ -94,12 +83,10 @@
-
- -
+
{{ formErrors.language }} @@ -108,13 +95,9 @@
-
- -
+
{{ formErrors.privacy }} @@ -136,7 +119,7 @@ - This video contains mature or explicit content + Contains sensitive content @@ -146,7 +129,7 @@ - Wait transcoding before publishing the video + Publish after transcoding 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 69b907288..9caf009c5 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 @@ -161,8 +161,6 @@ p-calendar { } } -@include ng2-tags; - // columns for the video .col-video-edit { @include make-col-ready(); 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 239e453ad..4cd3838de 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 @@ -8,6 +8,11 @@ import { VideoCaptionEdit, VideoEdit, VideoService } from '@app/shared/shared-ma import { ServerConfig, VideoConstant, VideoPrivacy } from '@shared/models' import { I18nPrimengCalendarService } from './i18n-primeng-calendar.service' import { VideoCaptionAddModalComponent } from './video-caption-add-modal.component' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { forkJoin } from 'rxjs' +import { InstanceService } from '@app/shared/shared-instance' + +type VideoLanguages = VideoConstant & { group?: string } @Component({ selector: 'my-video-edit', @@ -31,7 +36,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { videoPrivacies: VideoConstant[] = [] videoCategories: VideoConstant[] = [] videoLicences: VideoConstant[] = [] - videoLanguages: VideoConstant[] = [] + videoLanguages: VideoLanguages[] = [] tagValidators: ValidatorFn[] tagValidatorsMessages: { [ name: string ]: string } @@ -56,12 +61,11 @@ export class VideoEditComponent implements OnInit, OnDestroy { private videoValidatorsService: VideoValidatorsService, private videoService: VideoService, private serverService: ServerService, + private instanceService: InstanceService, private i18nPrimengCalendarService: I18nPrimengCalendarService, + private i18n: I18n, private ngZone: NgZone ) { - this.tagValidators = this.videoValidatorsService.VIDEO_TAGS.VALIDATORS - this.tagValidatorsMessages = this.videoValidatorsService.VIDEO_TAGS.MESSAGES - this.calendarLocale = this.i18nPrimengCalendarService.getCalendarLocale() this.calendarTimezone = this.i18nPrimengCalendarService.getTimezone() this.calendarDateFormat = this.i18nPrimengCalendarService.getDateFormat() @@ -93,7 +97,7 @@ export class VideoEditComponent implements OnInit, OnDestroy { licence: this.videoValidatorsService.VIDEO_LICENCE, language: this.videoValidatorsService.VIDEO_LANGUAGE, description: this.videoValidatorsService.VIDEO_DESCRIPTION, - tags: null, + tags: this.videoValidatorsService.VIDEO_TAGS_ARRAY, previewfile: null, support: this.videoValidatorsService.VIDEO_SUPPORT, schedulePublicationAt: this.videoValidatorsService.VIDEO_SCHEDULE_PUBLICATION_AT, @@ -126,11 +130,29 @@ export class VideoEditComponent implements OnInit, OnDestroy { .subscribe(res => this.videoCategories = res) this.serverService.getVideoLicences() .subscribe(res => this.videoLicences = res) - this.serverService.getVideoLanguages() - .subscribe(res => this.videoLanguages = res) + forkJoin([ + this.instanceService.getAbout(), + this.serverService.getVideoLanguages() + ]).pipe(map(([ about, languages ]) => ({ about, languages }))) + .subscribe(res => { + this.videoLanguages = res.languages + .map(l => res.about.instance.languages.includes(l.id) + ? { ...l, group: this.i18n('Instance languages'), groupOrder: 0 } + : { ...l, group: this.i18n('All languages'), groupOrder: 1 }) + .sort((a, b) => a.groupOrder - b.groupOrder) + }) this.serverService.getVideoPrivacies() - .subscribe(privacies => this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies)) + .subscribe(privacies => { + this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies) + if (this.schedulePublicationPossible) { + this.videoPrivacies.push({ + id: this.SPECIAL_SCHEDULED_PRIVACY, + label: this.i18n('Scheduled'), + description: this.i18n('Hide the video until a specific date') + }) + } + }) this.serverConfig = this.serverService.getTmpConfig() this.serverService.getConfig() diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts index d1bbbafe9..593114181 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.module.ts +++ b/client/src/app/+videos/+video-edit/shared/video-edit.module.ts @@ -1,4 +1,3 @@ -import { TagInputModule } from 'ngx-chips' import { CalendarModule } from 'primeng/calendar' import { NgModule } from '@angular/core' import { SharedFormModule } from '@app/shared/shared-forms' @@ -10,7 +9,6 @@ import { VideoEditComponent } from './video-edit.component' @NgModule({ imports: [ - TagInputModule, CalendarModule, SharedMainModule, @@ -24,7 +22,6 @@ import { VideoEditComponent } from './video-edit.component' ], exports: [ - TagInputModule, CalendarModule, SharedMainModule, 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 @@
-
- -
+
-
- -
+
-
- -
+
-
- -
+
[] = [] videoCaptions: VideoCaptionEdit[] = [] @@ -44,7 +44,7 @@ export abstract class VideoSend extends FormReactive implements OnInit { this.serverService.getVideoPrivacies() .subscribe( privacies => { - this.videoPrivacies = privacies + this.videoPrivacies = this.videoService.explainedPrivacyLabels(privacies) this.firstStepPrivacyId = this.DEFAULT_VIDEO_PRIVACY }) 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 @@
-
- -
+
-
- -
+
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 581199d65..de4f65df3 100644 --- a/client/src/app/+videos/+video-edit/video-update.component.ts +++ b/client/src/app/+videos/+video-edit/video-update.component.ts @@ -17,7 +17,7 @@ export class VideoUpdateComponent extends FormReactive implements OnInit { video: VideoEdit isUpdatingVideo = false - userVideoChannels: { id: number, label: string, support: string }[] = [] + userVideoChannels: { id: number, label: string, support: string, avatar?: string }[] = [] schedulePublicationPossible = false videoCaptions: VideoCaptionEdit[] = [] waitTranscodingEnabled = true diff --git a/client/src/app/+videos/+video-edit/video-update.resolver.ts b/client/src/app/+videos/+video-edit/video-update.resolver.ts index 30bcf4d74..a391913d8 100644 --- a/client/src/app/+videos/+video-edit/video-update.resolver.ts +++ b/client/src/app/+videos/+video-edit/video-update.resolver.ts @@ -28,7 +28,12 @@ export class VideoUpdateResolver implements Resolve { .listAccountVideoChannels(video.account) .pipe( map(result => result.data), - map(videoChannels => videoChannels.map(c => ({ id: c.id, label: c.displayName, support: c.support }))) + map(videoChannels => videoChannels.map(c => ({ + id: c.id, + label: c.displayName, + support: c.support, + avatarPath: c.avatar?.path + }))) ), this.videoCaptionService diff --git a/client/src/app/helpers/utils.ts b/client/src/app/helpers/utils.ts index 825b6ca96..aa37fdd46 100644 --- a/client/src/app/helpers/utils.ts +++ b/client/src/app/helpers/utils.ts @@ -16,7 +16,10 @@ function getParameterByName (name: string, url: string) { return decodeURIComponent(results[2].replace(/\+/g, ' ')) } -function populateAsyncUserVideoChannels (authService: AuthService, channel: { id: number, label: string, support?: string }[]) { +function populateAsyncUserVideoChannels ( + authService: AuthService, + channel: { id: number, label: string, support?: string, avatarPath?: string, recent?: boolean }[] +) { return new Promise(res => { authService.userInformationLoaded .subscribe( @@ -27,7 +30,12 @@ function populateAsyncUserVideoChannels (authService: AuthService, channel: { id const videoChannels = user.videoChannels if (Array.isArray(videoChannels) === false) return - videoChannels.forEach(c => channel.push({ id: c.id, label: c.displayName, support: c.support })) + videoChannels.forEach(c => channel.push({ + id: c.id, + label: c.displayName, + support: c.support, + avatarPath: c.avatar?.path + })) return res() } diff --git a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts index 9b24e4f62..c96e4ef66 100644 --- a/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts +++ b/client/src/app/shared/shared-forms/form-validators/video-validators.service.ts @@ -1,5 +1,5 @@ import { I18n } from '@ngx-translate/i18n-polyfill' -import { Validators } from '@angular/forms' +import { Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms' import { Injectable } from '@angular/core' import { BuildFormValidator } from './form-validator.service' @@ -13,7 +13,8 @@ export class VideoValidatorsService { readonly VIDEO_IMAGE: BuildFormValidator readonly VIDEO_CHANNEL: BuildFormValidator readonly VIDEO_DESCRIPTION: BuildFormValidator - readonly VIDEO_TAGS: BuildFormValidator + readonly VIDEO_TAGS_ARRAY: BuildFormValidator + readonly VIDEO_TAG: BuildFormValidator readonly VIDEO_SUPPORT: BuildFormValidator readonly VIDEO_SCHEDULE_PUBLICATION_AT: BuildFormValidator readonly VIDEO_ORIGINALLY_PUBLISHED_AT: BuildFormValidator @@ -71,7 +72,7 @@ export class VideoValidatorsService { } } - this.VIDEO_TAGS = { + this.VIDEO_TAG = { VALIDATORS: [ Validators.minLength(2), Validators.maxLength(30) ], MESSAGES: { 'minlength': this.i18n('A tag should be more than 2 characters long.'), @@ -79,6 +80,14 @@ export class VideoValidatorsService { } } + this.VIDEO_TAGS_ARRAY = { + VALIDATORS: [ Validators.maxLength(5), this.arrayTagLengthValidator() ], + MESSAGES: { + 'maxlength': this.i18n('A maximum of 5 tags can be used on a video.'), + 'arrayTagLength': this.i18n('A tag should be more than 2, and less than 30 characters long.') + } + } + this.VIDEO_SUPPORT = { VALIDATORS: [ Validators.minLength(3), Validators.maxLength(1000) ], MESSAGES: { @@ -99,4 +108,16 @@ export class VideoValidatorsService { MESSAGES: {} } } + + arrayTagLengthValidator (min = 2, max = 30): ValidatorFn { + return (control: AbstractControl): ValidationErrors => { + const array = control.value as Array + + if (array.every(e => e.length > min && e.length < max)) { + return null + } + + return { 'arrayTagLength': true } + } + } } diff --git a/client/src/app/shared/shared-forms/select-channel.component.html b/client/src/app/shared/shared-forms/select-channel.component.html new file mode 100644 index 000000000..897d13ee7 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-channel.component.html @@ -0,0 +1,16 @@ + + + + {{ channel.label }} + + diff --git a/client/src/app/shared/shared-forms/select-channel.component.ts b/client/src/app/shared/shared-forms/select-channel.component.ts new file mode 100644 index 000000000..de98c8c0a --- /dev/null +++ b/client/src/app/shared/shared-forms/select-channel.component.ts @@ -0,0 +1,51 @@ +import { Component, Input, forwardRef, ViewChild } from '@angular/core' +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms' +import { Actor } from '../shared-main' + +@Component({ + selector: 'my-select-channel', + styleUrls: [ './select-shared.component.scss' ], + templateUrl: './select-channel.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectChannelComponent), + multi: true + } + ] +}) +export class SelectChannelComponent implements ControlValueAccessor { + @Input() items: { id: number, label: string, support: string, avatarPath?: string }[] = [] + + selectedId: number + + // ng-select options + bindLabel = 'label' + bindValue = 'id' + clearable = false + searchable = false + + get channels () { + return this.items.map(c => Object.assign(c, { + avatarPath: c.avatarPath ? c.avatarPath : Actor.GET_DEFAULT_AVATAR_URL() + })) + } + + propagateChange = (_: any) => { /* empty */ } + + writeValue (id: number) { + this.selectedId = id + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this.selectedId) + } +} diff --git a/client/src/app/shared/shared-forms/select-options.component.html b/client/src/app/shared/shared-forms/select-options.component.html new file mode 100644 index 000000000..fda0c2c56 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-options.component.html @@ -0,0 +1,18 @@ + + + {{ item.label }} + +
+ {{ item.description }} + + + diff --git a/client/src/app/shared/shared-forms/select-options.component.ts b/client/src/app/shared/shared-forms/select-options.component.ts new file mode 100644 index 000000000..09f7df53b --- /dev/null +++ b/client/src/app/shared/shared-forms/select-options.component.ts @@ -0,0 +1,47 @@ +import { Component, Input, forwardRef } from '@angular/core' +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms' + +export type SelectOptionsItem = { id: number | string, label: string, description?: string } + +@Component({ + selector: 'my-select-options', + styleUrls: [ './select-shared.component.scss' ], + templateUrl: './select-options.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectOptionsComponent), + multi: true + } + ] +}) +export class SelectOptionsComponent implements ControlValueAccessor { + @Input() items: SelectOptionsItem[] = [] + @Input() clearable = false + @Input() searchable = false + @Input() bindValue = 'id' + @Input() groupBy: string + + selectedId: number | string + + // ng-select options + bindLabel = 'label' + + propagateChange = (_: any) => { /* empty */ } + + writeValue (id: number | string) { + this.selectedId = id + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this.selectedId) + } +} diff --git a/client/src/app/shared/shared-forms/select-shared.component.scss b/client/src/app/shared/shared-forms/select-shared.component.scss new file mode 100644 index 000000000..4f231d28a --- /dev/null +++ b/client/src/app/shared/shared-forms/select-shared.component.scss @@ -0,0 +1,20 @@ +$width-size: auto; + +ng-select { + width: $width-size; + @media screen and (max-width: $width-size) { + width: 100%; + } +} + +// make sure the image is vertically adjusted +ng-select ::ng-deep .ng-value-label img { + position: relative; + top: -1px; +} + +ng-select ::ng-deep img { + border-radius: 50%; + height: 20px; + width: 20px; +} diff --git a/client/src/app/shared/shared-forms/select-tags.component.html b/client/src/app/shared/shared-forms/select-tags.component.html new file mode 100644 index 000000000..0609c9d20 --- /dev/null +++ b/client/src/app/shared/shared-forms/select-tags.component.html @@ -0,0 +1,13 @@ + + diff --git a/client/src/app/shared/shared-forms/select-tags.component.scss b/client/src/app/shared/shared-forms/select-tags.component.scss new file mode 100644 index 000000000..ad76bc7ee --- /dev/null +++ b/client/src/app/shared/shared-forms/select-tags.component.scss @@ -0,0 +1,3 @@ +ng-select ::ng-deep .ng-arrow-wrapper { + display: none; +} diff --git a/client/src/app/shared/shared-forms/select-tags.component.ts b/client/src/app/shared/shared-forms/select-tags.component.ts new file mode 100644 index 000000000..2e07d7e8f --- /dev/null +++ b/client/src/app/shared/shared-forms/select-tags.component.ts @@ -0,0 +1,38 @@ +import { Component, Input, forwardRef } from '@angular/core' +import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms' + +@Component({ + selector: 'my-select-tags', + styleUrls: [ './select-shared.component.scss', './select-tags.component.scss' ], + templateUrl: './select-tags.component.html', + providers: [ + { + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => SelectTagsComponent), + multi: true + } + ] +}) +export class SelectTagsComponent implements ControlValueAccessor { + @Input() items: string[] = [] + @Input() _items: string[] = [] + + propagateChange = (_: any) => { /* empty */ } + + writeValue (items: string[]) { + this._items = items + this.propagateChange(this._items) + } + + registerOnChange (fn: (_: any) => void) { + this.propagateChange = fn + } + + registerOnTouched () { + // Unused + } + + onModelChange () { + this.propagateChange(this._items) + } +} diff --git a/client/src/app/shared/shared-forms/shared-form.module.ts b/client/src/app/shared/shared-forms/shared-form.module.ts index ba33704cf..19d812948 100644 --- a/client/src/app/shared/shared-forms/shared-form.module.ts +++ b/client/src/app/shared/shared-forms/shared-form.module.ts @@ -28,6 +28,9 @@ import { PreviewUploadComponent } from './preview-upload.component' import { ReactiveFileComponent } from './reactive-file.component' import { TextareaAutoResizeDirective } from './textarea-autoresize.directive' import { TimestampInputComponent } from './timestamp-input.component' +import { SelectChannelComponent } from './select-channel.component' +import { SelectOptionsComponent } from './select-options.component' +import { SelectTagsComponent } from './select-tags.component' @NgModule({ imports: [ @@ -45,7 +48,10 @@ import { TimestampInputComponent } from './timestamp-input.component' PreviewUploadComponent, ReactiveFileComponent, TextareaAutoResizeDirective, - TimestampInputComponent + TimestampInputComponent, + SelectChannelComponent, + SelectOptionsComponent, + SelectTagsComponent ], exports: [ @@ -58,7 +64,10 @@ import { TimestampInputComponent } from './timestamp-input.component' PreviewUploadComponent, ReactiveFileComponent, TextareaAutoResizeDirective, - TimestampInputComponent + TimestampInputComponent, + SelectChannelComponent, + SelectOptionsComponent, + SelectTagsComponent ], providers: [ diff --git a/client/src/app/shared/shared-main/shared-main.module.ts b/client/src/app/shared/shared-main/shared-main.module.ts index 22a207e51..a4d18d562 100644 --- a/client/src/app/shared/shared-main/shared-main.module.ts +++ b/client/src/app/shared/shared-main/shared-main.module.ts @@ -17,6 +17,7 @@ import { NgbPopoverModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap' +import { NgSelectModule } from '@ng-select/ng-select' import { I18n } from '@ngx-translate/i18n-polyfill' import { SharedGlobalIconModule } from '../shared-icons' import { AccountService, ActorAvatarInfoComponent, AvatarComponent } from './account' @@ -55,6 +56,8 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' MultiSelectModule, InputSwitchModule, + NgSelectModule, + SharedGlobalIconModule ], @@ -134,7 +137,9 @@ import { AUTH_INTERCEPTOR_PROVIDER } from './auth' TopMenuDropdownComponent, UserQuotaComponent, - UserNotificationsComponent + UserNotificationsComponent, + + NgSelectModule ], providers: [ diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts index edaefa9f2..978f775bf 100644 --- a/client/src/app/shared/shared-main/video/video.service.ts +++ b/client/src/app/shared/shared-main/video/video.service.ts @@ -339,23 +339,25 @@ export class VideoService implements VideosProvider { const base = [ { id: VideoPrivacy.PRIVATE, - label: this.i18n('Only I can see this video') + description: this.i18n('Only I can see this video') }, { id: VideoPrivacy.UNLISTED, - label: this.i18n('Only people with the private link can see this video') + description: this.i18n('Only shareable via a private link') }, { id: VideoPrivacy.PUBLIC, - label: this.i18n('Anyone can see this video') + description: this.i18n('Anyone can see this video') }, { id: VideoPrivacy.INTERNAL, - label: this.i18n('Only users of this instance can see this video') + description: this.i18n('Only users of this instance can see this video') } ] - return base.filter(o => !!privacies.find(p => p.id === o.id)) + return base + .filter(o => !!privacies.find(p => p.id === o.id)) // filter down to privacies that where in the input + .map(o => ({ ...privacies[o.id - 1], ...o })) // merge the input privacies that contain a label, and extend them with a description } nsfwPolicyToParam (nsfwPolicy: NSFWPolicyType) { diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss index 30960393f..d2811d24a 100644 --- a/client/src/sass/application.scss +++ b/client/src/sass/application.scss @@ -13,6 +13,7 @@ $assets-path: '../../assets/'; @import './bootstrap'; @import './primeng-custom'; +@import './ng-select.scss'; [hidden] { display: none !important; diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index e4c2dffa0..ae2b99a5b 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -807,75 +807,6 @@ } } -@mixin ng2-tags { - ::ng-deep { - .ng2-tag-input { - border: none !important; - } - - .ng2-tags-container { - display: flex; - align-items: center; - border: 1px solid #C6C6C6; - border-radius: 3px; - padding: 5px !important; - height: max-content; - - &:focus-within { - box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); - } - } - - tag-input-form { - input { - height: 30px !important; - font-size: 12px !important; - - background-color: pvar(--mainBackgroundColor) !important; - color: pvar(--mainForegroundColor) !important; - } - } - - tag { - background-color: $grey-background-color !important; - color: #000 !important; - border-radius: 3px !important; - font-size: 12px !important; - height: 30px !important; - line-height: 30px !important; - margin: 0 5px 0 0 !important; - cursor: default !important; - padding: 0 8px 0 10px !important; - - div { - height: 100% !important; - } - } - - delete-icon { - cursor: pointer !important; - height: auto !important; - vertical-align: middle !important; - padding-left: 6px !important; - - svg { - position: relative; - top: -1px; - height: auto !important; - vertical-align: middle !important; - - path { - fill: pvar(--greyForegroundColor) !important; - } - } - - &:hover { - transform: none !important; - } - } - } -} - @mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) { width: 95%; border-top: .05rem solid $color; diff --git a/client/src/sass/ng-select.scss b/client/src/sass/ng-select.scss new file mode 100644 index 000000000..f836e203c --- /dev/null +++ b/client/src/sass/ng-select.scss @@ -0,0 +1,29 @@ +@import '_variables'; + +$ng-select-highlight: #f2690d; +// $ng-select-primary-text: #333 !default; +// $ng-select-disabled-text: #f9f9f9 !default; +// $ng-select-border: #ccc !default; +// $ng-select-border-radius: 4px !default; +// $ng-select-bg: #ffffff !default; +// $ng-select-selected: lighten($ng-select-highlight, 46) !default; +// $ng-select-marke d: lighten($ng-select-highlight, 48) !default; +$ng-select-box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest); +// $ng-select-placeholder: lighten($ng-select-primary-text, 40) !default; +$ng-select-height: 30px; +// $ng-select-value-padding-left: 10px !default; +// $ng-select-value-font-size: 0.9em !default; + +@import "~@ng-select/ng-select/scss/default.theme.scss"; + +.ng-input { + font-size: .9em; +} + +.ng-select { + &.ng-select-focused { + &:not(.ng-select-opened) > .ng-select-container { + border-color: #ccc !important; + } + } +} diff --git a/client/yarn.lock b/client/yarn.lock index 843ca4f10..38aea725e 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -1344,6 +1344,13 @@ dependencies: tslib "^2.0.0" +"@ng-select/ng-select@^5.0.0": + version "5.0.0" + resolved "https://registry.yarnpkg.com/@ng-select/ng-select/-/ng-select-5.0.0.tgz#db021e5ca7be3fe6be346c3b63b3f2e109afa0f0" + integrity sha512-1mdGNh5xGriSnCLcLF/GWxqCgCehB3Stu7mxhB9K/+BxNCRE365Q1MgpzO61XQBgL0L6ktxiXRhCQWXXtFoq9w== + dependencies: + tslib "^2.0.0" + "@ngtools/webpack@10.1.0-next.4": version "10.1.0-next.4" resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-10.1.0-next.4.tgz#5397417820d110e29c7dc99db8adb538de98676e" @@ -7866,21 +7873,6 @@ next-tick@~1.0.0: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" integrity sha1-yobR/ogoFpsBICCOPchCS524NCw= -ng2-material-dropdown@0.11.0: - version "0.11.0" - resolved "https://registry.yarnpkg.com/ng2-material-dropdown/-/ng2-material-dropdown-0.11.0.tgz#27a402ef3cbdcaf6791ef4cfd4b257e31db7546f" - integrity sha512-wptBo09qKecY0QPTProAThrc4A3ajJTcHE9LTpCG5XZZUhXLBzhnGK8OW33TN8A+K/jqcs7OB74ppYJiqs3nhQ== - dependencies: - tslib "^1.9.0" - -ngx-chips@2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/ngx-chips/-/ngx-chips-2.1.0.tgz#aa299bcf40dc3e1f6288bf1d29e2fdfe9a132ed3" - integrity sha512-OQV4dTfD3nXm5d2mGKUSgwOtJOaMnZ4F+lwXOtd7DWRSUne0JQWwoZNHdOpuS6saBGhqCPDAwq6KxdR5XSgZUQ== - dependencies: - ng2-material-dropdown "0.11.0" - tslib "^1.9.0" - ngx-pipes@^2.6.0: version "2.7.5" resolved "https://registry.yarnpkg.com/ngx-pipes/-/ngx-pipes-2.7.5.tgz#22e2e4b7015ae9103210dfa2dacd6f4ae4411639" diff --git a/shared/models/videos/video-constant.model.ts b/shared/models/videos/video-constant.model.ts index 342a7c0cf..353a29535 100644 --- a/shared/models/videos/video-constant.model.ts +++ b/shared/models/videos/video-constant.model.ts @@ -1,4 +1,5 @@ export interface VideoConstant { id: T label: string + description?: string } -- 2.41.0