diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 8fdced1c7..b82281c6c 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -48,11 +48,12 @@
@@ -60,11 +61,12 @@
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
index 9618100b5..f8f2d5fdc 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss
@@ -30,6 +30,10 @@ input[type=checkbox] {
@include peertube-select-container($form-base-input-width);
}
+my-select-checkbox {
+ @include ng-select($form-base-input-width);
+}
+
input[type=submit] {
@include peertube-button;
@include orange-button;
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
index 69629770f..00a0bfad2 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts
@@ -1,11 +1,16 @@
-import { SelectItem } from 'primeng/api'
import { forkJoin } from 'rxjs'
import { ViewportScroller } from '@angular/common'
import { AfterViewChecked, Component, OnInit, ViewChild } from '@angular/core'
import { ConfigService } from '@app/+admin/config/shared/config.service'
import { Notifier } from '@app/core'
import { ServerService } from '@app/core/server/server.service'
-import { CustomConfigValidatorsService, FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
+import {
+ CustomConfigValidatorsService,
+ FormReactive,
+ FormValidatorService,
+ SelectOptionsItem,
+ UserValidatorsService
+} from '@app/shared/shared-forms'
import { NgbNav } from '@ng-bootstrap/ng-bootstrap'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { CustomConfig, ServerConfig } from '@shared/models'
@@ -25,8 +30,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
resolutions: { id: string, label: string, description?: string }[] = []
transcodingThreadOptions: { label: string, value: number }[] = []
- languageItems: SelectItem[] = []
- categoryItems: SelectItem[] = []
+ languageItems: SelectOptionsItem[] = []
+ categoryItems: SelectOptionsItem[] = []
private serverConfig: ServerConfig
@@ -290,22 +295,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
)
}
- getSelectedLanguageLabel () {
- return this.i18n('{{\'{0} languages selected')
- }
-
- getDefaultLanguageLabel () {
- return this.i18n('No language')
- }
-
- getSelectedCategoryLabel () {
- return this.i18n('{{\'{0} categories selected')
- }
-
- getDefaultCategoryLabel () {
- return this.i18n('No category')
- }
-
gotoAnchor () {
const hashToNav = {
'customizations': 'advanced-configuration'
@@ -331,8 +320,8 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit, A
([ config, languages, categories ]) => {
this.customConfig = config
- this.languageItems = languages.map(l => ({ label: l.label, value: l.id }))
- this.categoryItems = categories.map(l => ({ label: l.label, value: l.id }))
+ this.languageItems = languages.map(l => ({ label: l.label, id: l.id }))
+ this.categoryItems = categories.map(l => ({ label: l.label, id: l.id + '' }))
this.updateForm()
// Force form validation
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html
index 3090247e5..d02f6526f 100644
--- a/client/src/app/+admin/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/users/user-list/user-list.component.html
@@ -57,12 +57,12 @@
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
index 430250b87..d6a17703a 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.scss
@@ -19,6 +19,10 @@ input[type=submit] {
margin-bottom: 30px;
}
+my-select-checkbox {
+ @include ng-select(340px);
+}
+
.form-group-select {
margin-bottom: 30px;
}
diff --git a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
index 4e4539936..eb340e24d 100644
--- a/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
+++ b/client/src/app/shared/shared-user-settings/user-video-settings.component.ts
@@ -1,10 +1,9 @@
import { pick } from 'lodash-es'
-import { SelectItem } from 'primeng/api'
import { forkJoin, Subject, Subscription } from 'rxjs'
import { first } from 'rxjs/operators'
import { Component, Input, OnDestroy, OnInit } from '@angular/core'
import { AuthService, Notifier, ServerService, User, UserService } from '@app/core'
-import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { FormReactive, FormValidatorService, ItemSelectCheckboxValue, SelectOptionsItem } from '@app/shared/shared-forms'
import { I18n } from '@ngx-translate/i18n-polyfill'
import { UserUpdateMe } from '@shared/models'
import { NSFWPolicyType } from '@shared/models/videos/nsfw-policy.type'
@@ -20,10 +19,12 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
@Input() notifyOnUpdate = true
@Input() userInformationLoaded: Subject
- languageItems: SelectItem[] = []
+ languageItems: SelectOptionsItem[] = []
defaultNSFWPolicy: NSFWPolicyType
formValuesWatcher: Subscription
+ private allLanguagesGroup: string
+
constructor (
protected formValidatorService: FormValidatorService,
private authService: AuthService,
@@ -36,6 +37,8 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
}
ngOnInit () {
+ this.allLanguagesGroup = this.i18n('All languages')
+
let oldForm: any
this.buildForm({
@@ -51,13 +54,15 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
this.serverService.getConfig(),
this.userInformationLoaded.pipe(first())
]).subscribe(([ languages, config ]) => {
- this.languageItems = [ { label: this.i18n('Unknown language'), value: '_unknown' } ]
- this.languageItems = this.languageItems
- .concat(languages.map(l => ({ label: l.label, value: l.id })))
+ const group = this.allLanguagesGroup
- const videoLanguages = this.user.videoLanguages
- ? this.user.videoLanguages
- : this.languageItems.map(l => l.value)
+ this.languageItems = [ { label: this.i18n('Unknown language'), id: '_unknown', group } ]
+ this.languageItems = this.languageItems
+ .concat(languages.map(l => ({ label: l.label, id: l.id, group })))
+
+ const videoLanguages: ItemSelectCheckboxValue[] = this.user.videoLanguages
+ ? this.user.videoLanguages.map(l => ({ id: l }))
+ : [ { group } ]
this.defaultNSFWPolicy = config.instance.defaultNSFWPolicy
@@ -71,10 +76,12 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
if (this.reactiveUpdate) {
oldForm = { ...this.form.value }
+
this.formValuesWatcher = this.form.valueChanges.subscribe((formValue: any) => {
const updatedKey = Object.keys(formValue).find(k => formValue[k] !== oldForm[k])
oldForm = { ...this.form.value }
- this.updateDetails([updatedKey])
+
+ this.updateDetails([ updatedKey ])
})
}
})
@@ -91,15 +98,23 @@ export class UserVideoSettingsComponent extends FormReactive implements OnInit,
const autoPlayNextVideo = this.form.value['autoPlayNextVideo']
let videoLanguages: string[] = this.form.value['videoLanguages']
+
if (Array.isArray(videoLanguages)) {
- if (videoLanguages.length === this.languageItems.length) {
+ if (videoLanguages.length > 20) {
+ this.notifier.error(this.i18n('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.'))
+ return
+ }
+
+ if (videoLanguages.length === 0) {
+ this.notifier.error(this.i18n('You need to enable at least 1 video language.'))
+ return
+ }
+
+ if (
+ videoLanguages.length === this.languageItems.length ||
+ (videoLanguages.length === 1 && videoLanguages[0] === this.allLanguagesGroup)
+ ) {
videoLanguages = null // null means "All"
- } else if (videoLanguages.length > 20) {
- this.notifier.error('Too many languages are enabled. Please enable them all or stay below 20 enabled languages.')
- return
- } else if (videoLanguages.length === 0) {
- this.notifier.error('You need to enabled at least 1 video language.')
- return
}
}
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ae2b99a5b..e6491b492 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -304,6 +304,17 @@
z-index: 100;
}
+
+@mixin ng-select ($width) {
+ ::ng-deep ng-select {
+ width: $width;
+
+ @media screen and (max-width: $width) {
+ width: 100%;
+ }
+ }
+}
+
@mixin peertube-select-container ($width) {
padding: 0;
margin: 0;
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index bf49639f5..750c433b5 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -303,67 +303,6 @@ p-table {
}
}
-// multiselect customizations
-p-multiselect {
- .ui-multiselect {
- border-color: #C6C6C6;
-
- &:not(.ui-state-disabled) {
- &:hover {
- border-color: #C6C6C6;
- }
-
- &:focus,
- &.ui-state-focus {
- box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
- }
- }
- }
-
- .ui-multiselect-label {
- font-size: 15px !important;
- padding: 4px 30px 4px 12px !important;
-
- $width: 338px;
- width: $width !important;
-
- @media screen and (max-width: $width) {
- width: 100% !important;
- }
- }
-
- .pi.pi-chevron-down {
- margin-left: 0 !important;
-
- &::after {
- @include select-arrow-down;
-
- right: 0;
- margin-top: 6px;
- }
- }
-
- .ui-chkbox-icon {
- //position: absolute !important;
- width: 18px;
- height: 18px;
- //left: 0;
-
- //&::after {
- // left: -2px !important;
- //}
- }
-
- .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
- background-color: pvar(--mainColorLighter);
- }
-
- .ui-inputtext:enabled:focus:not(.ui-state-error) {
- border-color: pvar(--mainColorLighter) !important;
- box-shadow: none;
- }
-}
-
// PrimeNG calendar tweaks
p-calendar .ui-datepicker {
a {