From d54e5178bc9263bc3b4c8bacd3cb9fe733b682d6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Tue, 1 Oct 2024 15:19:04 +0200 Subject: [PATCH] Remove ng-select Component is too complex and causes accessibility issues --- client/package.json | 1 - .../edit-basic-configuration.component.html | 13 +- .../edit-custom-config.component.scss | 3 +- .../edit-instance-information.component.html | 4 +- .../edit-live-configuration.component.html | 15 +- .../edit-vod-transcoding.component.html | 9 +- .../users/user-edit/user-edit.component.html | 4 +- .../users/user-list/user-list.component.html | 2 +- .../+admin/system/jobs/jobs.component.html | 67 ++--- .../+admin/system/jobs/jobs.component.scss | 12 +- .../app/+admin/system/jobs/jobs.component.ts | 65 ++--- .../+admin/system/logs/logs.component.html | 32 +- .../+admin/system/logs/logs.component.scss | 12 +- .../app/+admin/system/logs/logs.component.ts | 8 +- .../my-accept-ownership.component.html | 2 +- .../video-channel-sync-edit.component.html | 2 +- .../my-video-playlist-edit.component.html | 8 +- .../my-video-playlist-edit.component.scss | 3 +- .../+stats/video/video-stats.component.html | 10 +- .../video-caption-add-modal.component.html | 11 +- .../video-caption-add-modal.component.ts | 10 +- .../shared/video-edit.component.html | 28 +- .../shared/video-edit.component.ts | 19 +- .../video-go-live.component.html | 6 +- .../video-import-torrent.component.html | 6 +- .../video-import-url.component.html | 6 +- .../video-add-components/video-send.scss | 6 +- .../video-upload.component.html | 6 +- .../video-transcription.component.html | 4 +- .../src/app/core/hotkeys/hotkeys.service.ts | 5 +- .../select/select-categories.component.html | 9 - .../select/select-categories.component.ts | 52 ++-- .../select/select-channel.component.html | 14 - .../select/select-channel.component.ts | 43 +-- .../select/select-checkbox-all.component.ts | 123 -------- .../select-checkbox-default-all.component.ts | 136 +++++++++ .../select/select-checkbox.component.html | 47 +-- .../select/select-checkbox.component.scss | 18 -- .../select/select-checkbox.component.ts | 69 ++--- .../select/select-custom-value.component.html | 22 +- .../select/select-custom-value.component.ts | 5 +- .../select/select-languages.component.html | 10 - .../select/select-languages.component.ts | 75 ++--- .../select/select-options.component.html | 56 ++-- .../select/select-options.component.scss | 13 + .../select/select-options.component.ts | 66 ++++- .../select/select-shared.component.scss | 56 ---- .../select/select-tags.component.ts | 1 - .../user-video-settings.component.html | 2 +- .../video-filters-header.component.html | 37 +-- .../video-filters-header.component.scss | 10 - .../video-filters-header.component.ts | 37 ++- .../video-filters.model.ts | 25 +- client/src/sass/application.scss | 1 - client/src/sass/class-helpers/_forms.scss | 4 + client/src/sass/ng-select.scss | 99 ------- client/src/sass/primeng-custom.scss | 273 ++++++++++++++++-- client/src/types/job-state-client.type.ts | 2 +- client/src/types/select-options-item.model.ts | 9 +- client/yarn.lock | 9 +- 60 files changed, 850 insertions(+), 852 deletions(-) delete mode 100644 client/src/app/shared/shared-forms/select/select-categories.component.html delete mode 100644 client/src/app/shared/shared-forms/select/select-channel.component.html delete mode 100644 client/src/app/shared/shared-forms/select/select-checkbox-all.component.ts create mode 100644 client/src/app/shared/shared-forms/select/select-checkbox-default-all.component.ts delete mode 100644 client/src/app/shared/shared-forms/select/select-checkbox.component.scss delete mode 100644 client/src/app/shared/shared-forms/select/select-languages.component.html create mode 100644 client/src/app/shared/shared-forms/select/select-options.component.scss delete mode 100644 client/src/app/shared/shared-forms/select/select-shared.component.scss delete mode 100644 client/src/sass/ng-select.scss diff --git a/client/package.json b/client/package.json index 96c18a0b3..a5ee9cc94 100644 --- a/client/package.json +++ b/client/package.json @@ -56,7 +56,6 @@ "@formatjs/intl-locale": "^4.0.0", "@formatjs/intl-pluralrules": "^5.2.2", "@ng-bootstrap/ng-bootstrap": "^17.0.0", - "@ng-select/ng-select": "^13.8.1", "@ngx-loading-bar/core": "^6.0.0", "@ngx-loading-bar/http-client": "^6.0.0", "@ngx-loading-bar/router": "^6.0.0", diff --git a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html index 722852d5e..5640f6a53 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-basic-configuration.component.html @@ -29,7 +29,7 @@ - +
The archive file is deleted after this period.
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 c3b18a867..01fb2c535 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 @@ -56,8 +56,7 @@ input[type=checkbox] { } my-select-options, -my-select-custom-value, -my-select-checkbox { +my-select-custom-value { display: block; @include responsive-width($form-base-input-width); diff --git a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html index de9df8b56..71cb05491 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-instance-information.component.html @@ -76,7 +76,7 @@
- +
@@ -178,7 +175,7 @@ Live transcoding profile new live transcoding profiles can be added by PeerTube plugins - - + diff --git a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html index d0707fce5..dbaabd027 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-vod-transcoding.component.html @@ -201,7 +201,7 @@ Transcoding profile new transcoding profiles can be added by PeerTube plugins - + diff --git a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html index 90d3cb2d0..dd307b267 100644 --- a/client/src/app/+admin/overview/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/overview/users/user-edit/user-edit.component.html @@ -154,7 +154,7 @@ Select the columns to display - - {{ jobType }} - +
- - - any - - - {{ state }} - - + +
@@ -78,7 +63,7 @@ {{ job.priority }} - {{ job.state }} + {{ job.state }} @@ -96,7 +81,7 @@ - + 
{{ [
           'Job: ' + job.id,
           'Type: ' + job.type,
@@ -105,13 +90,15 @@
         ].join('\n') }}
+ - + 
{{ job.data }}
+ - + 
{{ job.error }}
@@ -119,18 +106,22 @@ - +
- - No jobs found. - No {{ jobType }} jobs found. - - - - No {{ jobState }} jobs found. - No {{ jobType }} jobs found that are {{ jobState }}. - + @if (jobState === 'all') { + @if (jobType === 'all') { + No jobs found. + } @else { + No {{ jobType }} jobs found. + } + } @else { + @if (jobType === 'all') { + No {{ jobState }} jobs found. + } @else { + No {{ jobType }} jobs found that are {{ jobState }}. + } + }
diff --git a/client/src/app/+admin/system/jobs/jobs.component.scss b/client/src/app/+admin/system/jobs/jobs.component.scss index 4305eea06..94a5fd53a 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.scss +++ b/client/src/app/+admin/system/jobs/jobs.component.scss @@ -2,17 +2,17 @@ @use '_mixins' as *; .select-job-state { + display: block; min-width: 120px; + + ::ng-deep .pt-badge { + font-size: 13px; + } } .select-job-type { + display: block; min-width: 240px; - - ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items { - @media screen and (min-height: 500px) { - max-height: calc(90vh - 250px); - } - } } @media screen and (min-width: $primeng-breakpoint) { diff --git a/client/src/app/+admin/system/jobs/jobs.component.ts b/client/src/app/+admin/system/jobs/jobs.component.ts index 76fbee782..3f1f67ae3 100644 --- a/client/src/app/+admin/system/jobs/jobs.component.ts +++ b/client/src/app/+admin/system/jobs/jobs.component.ts @@ -1,20 +1,21 @@ -import { SortMeta, SharedModule } from 'primeng/api' +import { NgClass, NgFor, NgIf } from '@angular/common' import { Component, OnInit } from '@angular/core' +import { FormsModule } from '@angular/forms' import { Notifier, RestPagination, RestTable } from '@app/core' -import { escapeHTML } from '@peertube/peertube-core-utils' +import { SelectOptionsComponent } from '@app/shared/shared-forms/select/select-options.component' +import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component' +import { AutoColspanDirective } from '@app/shared/shared-main/common/auto-colspan.directive' +import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' import { Job, JobState, JobType } from '@peertube/peertube-models' import { peertubeLocalStorage } from '@root-helpers/peertube-web-storage' +import { SharedModule, SortMeta } from 'primeng/api' +import { TableModule } from 'primeng/table' +import { SelectOptionsItem } from 'src/types' import { JobStateClient } from '../../../../types/job-state-client.type' import { JobTypeClient } from '../../../../types/job-type-client.type' -import { JobService } from './job.service' -import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component' -import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap' -import { TableModule } from 'primeng/table' import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component' -import { NgSelectModule } from '@ng-select/ng-select' -import { NgFor, NgClass, NgIf } from '@angular/common' -import { FormsModule } from '@angular/forms' -import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component' +import { TableExpanderIconComponent } from '../../../shared/shared-tables/table-expander-icon.component' +import { JobService } from './job.service' @Component({ selector: 'my-jobs', @@ -24,7 +25,6 @@ import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.compon imports: [ FormsModule, NgFor, - NgSelectModule, NgClass, ButtonComponent, TableModule, @@ -32,15 +32,22 @@ import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.compon NgIf, NgbTooltip, TableExpanderIconComponent, - GlobalIconComponent + GlobalIconComponent, + SelectOptionsComponent, + AutoColspanDirective ] }) export class JobsComponent extends RestTable implements OnInit { private static LOCAL_STORAGE_STATE = 'jobs-list-state' private static LOCAL_STORAGE_TYPE = 'jobs-list-type' - jobState?: JobStateClient | 'all' - jobStates: JobStateClient[] = [ 'active', 'completed', 'failed', 'waiting', 'delayed' ] + jobState?: JobStateClient + jobStates: JobStateClient[] = [ 'all', 'active', 'completed', 'failed', 'waiting', 'delayed' ] + jobStateItems: SelectOptionsItem[] = this.jobStates.map(s => ({ + id: s, + label: s, + classes: this.getJobStateClasses(s) + })) jobType: JobTypeClient = 'all' jobTypes: JobTypeClient[] = [ @@ -74,6 +81,7 @@ export class JobsComponent extends RestTable implements OnInit { 'video-transcription', 'videos-views-stats' ] + jobTypeItems: SelectOptionsItem[] = this.jobTypes.map(i => ({ id: i, label: i })) jobs: Job[] = [] totalRecords: number @@ -96,27 +104,21 @@ export class JobsComponent extends RestTable implements OnInit { return 'JobsComponent' } - getJobStateClass (state: JobStateClient) { + getJobStateClasses (state: JobStateClient) { switch (state) { case 'active': - return 'badge-blue' + return [ 'pt-badge', 'badge-blue' ] case 'completed': - return 'badge-green' + return [ 'pt-badge', 'badge-green' ] case 'delayed': - return 'badge-brown' + return [ 'pt-badge', 'badge-brown' ] case 'failed': - return 'badge-red' + return [ 'pt-badge', 'badge-red' ] case 'waiting': - return 'badge-yellow' + return [ 'pt-badge', 'badge-yellow' ] } - } - getColspan () { - if (this.jobState === 'all' && this.hasGlobalProgress()) return 7 - - if (this.jobState === 'all' || this.hasGlobalProgress()) return 6 - - return 5 + return [] } onJobStateOrTypeChanged () { @@ -174,13 +176,10 @@ export class JobsComponent extends RestTable implements OnInit { private loadJobStateAndType () { const state = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_STATE) + if (state) this.jobState = state as JobState - // FIXME: We use that doesn't escape HTML - // https://github.com/ng-select/ng-select/issues/1363 - if (state) this.jobState = escapeHTML(state) as JobState - - const type = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_TYPE) - if (type) this.jobType = type as JobType + const jobType = peertubeLocalStorage.getItem(JobsComponent.LOCAL_STORAGE_TYPE) + if (jobType) this.jobType = jobType as JobType } private saveJobStateAndType () { diff --git a/client/src/app/+admin/system/logs/logs.component.html b/client/src/app/+admin/system/logs/logs.component.html index 7ec0bc63f..28e8fde26 100644 --- a/client/src/app/+admin/system/logs/logs.component.html +++ b/client/src/app/+admin/system/logs/logs.component.html @@ -19,33 +19,21 @@
- - - {{ time.label }} ({{ time.id | date: time.dateFormat }} - now) - - + + + {{ item.label }} ({{ item.id | date: item.dateFormat }} - now) + +
- - - ⬤ {{ levelChoice.label }} - - + + + ⬤ {{ item.label }} + +
diff --git a/client/src/app/+admin/system/logs/logs.component.scss b/client/src/app/+admin/system/logs/logs.component.scss index fb2a47a00..364a1a817 100644 --- a/client/src/app/+admin/system/logs/logs.component.scss +++ b/client/src/app/+admin/system/logs/logs.component.scss @@ -6,6 +6,7 @@ font-size: 13px; max-height: 500px; overflow-y: auto; + color: #000; background: rgb(250, 250, 250); padding: 20px; @@ -67,8 +68,9 @@ } .level-choice { - font-size: 80%; - vertical-align: text-top; + font-size: 14px; + position: relative; + top: -1px; &.debug { color: rgb(197, 197, 197); @@ -83,7 +85,7 @@ } &.error { - color: #DC262B; + color: pvar(--red); } } @@ -97,9 +99,7 @@ my-copy-button { .header { flex-direction: column; - .peertube-select-container, - ng-select, - my-button { + > * { width: 100% !important; margin-bottom: 10px !important; diff --git a/client/src/app/+admin/system/logs/logs.component.ts b/client/src/app/+admin/system/logs/logs.component.ts index 2ff9846a1..e98750937 100644 --- a/client/src/app/+admin/system/logs/logs.component.ts +++ b/client/src/app/+admin/system/logs/logs.component.ts @@ -2,8 +2,9 @@ import { DatePipe, NgClass, NgFor, NgIf } from '@angular/common' import { Component, ElementRef, OnInit, ViewChild } from '@angular/core' import { FormsModule } from '@angular/forms' import { LocalStorageService, Notifier } from '@app/core' +import { SelectOptionsComponent } from '@app/shared/shared-forms/select/select-options.component' import { GlobalIconComponent } from '@app/shared/shared-icons/global-icon.component' -import { NgSelectModule } from '@ng-select/ng-select' +import { PeerTubeTemplateDirective } from '@app/shared/shared-main/common/peertube-template.directive' import { ServerLogLevel } from '@peertube/peertube-models' import { SelectTagsComponent } from '../../../shared/shared-forms/select/select-tags.component' import { ButtonComponent } from '../../../shared/shared-main/buttons/button.component' @@ -18,14 +19,15 @@ import { LogsService } from './logs.service' imports: [ FormsModule, NgFor, - NgSelectModule, NgIf, NgClass, SelectTagsComponent, ButtonComponent, DatePipe, CopyButtonComponent, - GlobalIconComponent + GlobalIconComponent, + SelectOptionsComponent, + PeerTubeTemplateDirective ] }) export class LogsComponent implements OnInit { diff --git a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html index f75b166f9..abbde552c 100644 --- a/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html +++ b/client/src/app/+my-library/my-ownership/my-accept-ownership/my-accept-ownership.component.html @@ -10,7 +10,7 @@
- +
diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html index 191db638c..77a06f31a 100644 --- a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html +++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.html @@ -31,7 +31,7 @@
- +
-
-
-

{{ getViewersStatsTitle() }}

- +
+

{{ getViewersStatsTitle() }}

+ +
+ +
diff --git a/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html index a8938abec..067ab8343 100644 --- a/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html +++ b/client/src/app/+videos/+video-edit/shared/caption/video-caption-add-modal.component.html @@ -11,12 +11,11 @@
-
- -
+ +