From 639feb2306f871ffbc42a731905839d24bf0438e Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Fri, 27 Sep 2024 16:34:58 +0200 Subject: [PATCH] Fix channel sync edit/list * Edit -> prefer to use reactive forms for required inputs * List -> use chip class to fix the channel display --- .../my-video-channel-syncs.component.html | 24 ++++++------ .../my-video-channel-syncs.component.scss | 11 ------ .../my-video-channel-syncs.component.ts | 1 - .../video-channel-sync-edit.component.html | 8 ++-- .../video-channel-sync-edit.component.ts | 5 ++- .../my-video-playlist-edit.component.html | 6 +-- .../video-go-live.component.html | 4 +- .../video-import-torrent.component.html | 4 +- .../video-import-url.component.html | 4 +- .../video-upload.component.html | 4 +- .../form-validators/common-validators.ts | 9 +++++ .../select/select-channel.component.html | 1 + .../select/select-channel.component.ts | 1 + client/src/sass/class-helpers/_common.scss | 38 +++++++++++++++++- client/src/sass/include/_mixins.scss | 39 ------------------- 15 files changed, 72 insertions(+), 87 deletions(-) delete mode 100644 client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss create mode 100644 client/src/app/shared/form-validators/common-validators.ts diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html index f3d95ea6e..082f8e34f 100644 --- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html +++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html @@ -54,21 +54,19 @@ -
- + +
+ -
- -
{{ videoChannelSync.channel.displayName }}
-
{{ videoChannelSync.channel.name }}
- +
+ {{ videoChannelSync.channel.displayName }} + {{ videoChannelSync.channel.name }} +
-
+ diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss deleted file mode 100644 index 783ba0ecb..000000000 --- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '_variables' as *; -@use '_mixins' as *; -@use '_actor' as *; - -.actor { - margin-bottom: 0; - padding-bottom: 0; - border: 0; - - @include actor-row($min-height: auto, $separator: true); -} diff --git a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts index f960aedea..1724d113f 100644 --- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts +++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.ts @@ -16,7 +16,6 @@ import { ActionDropdownComponent, DropdownAction } from '../../shared/shared-mai @Component({ templateUrl: './my-video-channel-syncs.component.html', - styleUrls: [ './my-video-channel-syncs.component.scss' ], standalone: true, imports: [ NgIf, 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 1684edef7..191db638c 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 @@ -30,8 +30,8 @@
- - + + diff --git a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts index db73bc8f1..4816cc242 100644 --- a/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts +++ b/client/src/app/+my-library/my-video-channel-syncs/video-channel-sync-edit/video-channel-sync-edit.component.ts @@ -14,6 +14,7 @@ import { VideoChannelSyncCreate } from '@peertube/peertube-models' import { mergeMap } from 'rxjs' import { SelectChannelItem } from 'src/types' import { SelectChannelComponent } from '../../../shared/shared-forms/select/select-channel.component' +import { REQUIRED_VALIDATOR } from '@app/shared/form-validators/common-validators' @Component({ selector: 'my-video-channel-sync-edit', @@ -41,8 +42,8 @@ export class VideoChannelSyncEditComponent extends FormReactive implements OnIni ngOnInit () { this.buildForm({ externalChannelUrl: VIDEO_CHANNEL_EXTERNAL_URL_VALIDATOR, - videoChannel: null, - existingVideoStrategy: null + videoChannel: REQUIRED_VALIDATOR, + existingVideoStrategy: REQUIRED_VALIDATOR }) listUserChannelsForSelect(this.authService) diff --git a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html index ada4f34c6..2ffa23d96 100644 --- a/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html +++ b/client/src/app/+my-library/my-video-playlists/my-video-playlist-edit.component.html @@ -69,11 +69,9 @@
- + - +
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html index 0f6db8263..ba2d7df2b 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-go-live.component.html @@ -4,9 +4,7 @@
- +
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 3de7b771b..dc9b464b4 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 @@ -28,9 +28,7 @@
- +
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 5c1c0bff0..131528086 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 @@ -24,9 +24,7 @@
- +
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 85a28e336..cd3e78586 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 @@ -17,9 +17,7 @@
- +
diff --git a/client/src/app/shared/form-validators/common-validators.ts b/client/src/app/shared/form-validators/common-validators.ts new file mode 100644 index 000000000..43a0ccb1b --- /dev/null +++ b/client/src/app/shared/form-validators/common-validators.ts @@ -0,0 +1,9 @@ +import { Validators } from '@angular/forms' +import { BuildFormValidator } from './form-validator.model' + +export const REQUIRED_VALIDATOR: BuildFormValidator = { + VALIDATORS: [ Validators.required ], + MESSAGES: { + required: $localize`This field is required.` + } +} diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html index b49fd36fa..00c84ef3a 100644 --- a/client/src/app/shared/shared-forms/select/select-channel.component.html +++ b/client/src/app/shared/shared-forms/select/select-channel.component.html @@ -5,6 +5,7 @@ [bindValue]="bindValue" [clearable]="clearable" [searchable]="searchable" + [labelForId]="labelForId" > diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.ts b/client/src/app/shared/shared-forms/select/select-channel.component.ts index c1cc72fab..c9ecfc15b 100644 --- a/client/src/app/shared/shared-forms/select/select-channel.component.ts +++ b/client/src/app/shared/shared-forms/select/select-channel.component.ts @@ -20,6 +20,7 @@ import { VideoChannel } from '@app/shared/shared-main/channel/video-channel.mode imports: [ NgSelectModule, FormsModule, NgFor ] }) export class SelectChannelComponent implements ControlValueAccessor, OnChanges { + @Input({ required: true }) labelForId: string @Input() items: SelectChannelItem[] = [] channels: SelectChannelItem[] = [] diff --git a/client/src/sass/class-helpers/_common.scss b/client/src/sass/class-helpers/_common.scss index be0e77abb..327e5b678 100644 --- a/client/src/sass/class-helpers/_common.scss +++ b/client/src/sass/class-helpers/_common.scss @@ -99,7 +99,43 @@ // --------------------------------------------------------------------------- .chip { - @include chip; + --avatarSize: 1.2rem; + + display: inline-flex; + color: pvar(--mainForegroundColor); + height: var(--avatarSize); + max-width: 320px; + overflow: hidden; + text-decoration: none; + text-overflow: ellipsis; + vertical-align: middle; + white-space: nowrap; + align-items: center; + + my-actor-avatar { + border-radius: 5rem; + width: var(--avatarSize); + height: var(--avatarSize); + + @include margin-right(0.5rem); + } + + &.two-lines { + --avatarSize: 2rem; + + font-size: 14px; + line-height: 1rem; + + my-actor-avatar { + display: inline-block; + } + + > div { + display: flex; + flex-direction: column; + justify-content: center; + } + } } // --------------------------------------------------------------------------- diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index d124625ca..737eeb4c5 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -620,45 +620,6 @@ } } -@mixin chip { - --avatar-size: 1.2rem; - - display: inline-flex; - color: pvar(--mainForegroundColor); - height: var(--avatar-size); - max-width: 320px; - overflow: hidden; - text-decoration: none; - text-overflow: ellipsis; - vertical-align: middle; - white-space: nowrap; - - my-actor-avatar { - border-radius: 5rem; - width: var(--avatar-size); - height: var(--avatar-size); - - @include margin-right(.2rem); - } - - &.two-lines { - --avatar-size: 2rem; - - font-size: 14px; - line-height: 1rem; - - my-actor-avatar { - display: inline-block; - } - - > div { - display: flex; - flex-direction: column; - justify-content: center; - } - } -} - // applies ratio (default to 16:9) to a child element (using $selector) only using // an immediate's parent size. This allows to set a ratio without explicit // dimensions, as width/height cannot be computed from each other.