From 179249d353bee70fbbd2480a4025b2bb3a9bf802 Mon Sep 17 00:00:00 2001 From: Adrian Molina Date: Mon, 11 May 2026 16:54:29 -0400 Subject: [PATCH 1/8] feat(edit-content): enhance sidebar with tooltips and update content state model - Updated `DotContentState` model to make `hasLiveVersion` optional. - Added tooltips to sidebar tabs in `dot-edit-content-sidebar.component.html` for better user guidance. - Integrated `TooltipModule` in the sidebar component to support the new tooltip functionality. - Replaced the status tag with a contentlet status chip in `dot-edit-content-sidebar-information.component.html` for improved visual representation. - Updated tests to reflect changes in the sidebar component and its interactions. This commit improves the user experience in the edit content sidebar by providing additional context through tooltips and enhancing the content state model. --- .../src/lib/dot-content-state.model.ts | 2 +- ...content-sidebar-information.component.html | 4 ++-- ...tent-sidebar-information.component.spec.ts | 14 ++++++------- ...t-content-sidebar-information.component.ts | 13 ++++++------ .../dot-edit-content-sidebar.component.html | 20 +++++++++++++++---- .../dot-edit-content-sidebar.component.ts | 2 ++ .../dot-copy-button.component.html | 2 +- .../dot-copy-button.component.spec.ts | 18 +++++++++++++++-- .../dot-copy-button.component.ts | 9 ++++++++- .../WEB-INF/messages/Language.properties | 4 ++++ 10 files changed, 62 insertions(+), 26 deletions(-) diff --git a/core-web/libs/dotcms-models/src/lib/dot-content-state.model.ts b/core-web/libs/dotcms-models/src/lib/dot-content-state.model.ts index e9941fdfd2cd..5331577a9db0 100644 --- a/core-web/libs/dotcms-models/src/lib/dot-content-state.model.ts +++ b/core-web/libs/dotcms-models/src/lib/dot-content-state.model.ts @@ -6,5 +6,5 @@ export interface DotContentState { deleted?: string | boolean; live: string | boolean; working: string | boolean; - hasLiveVersion: string | boolean; + hasLiveVersion?: string | boolean; } diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.html index dc2af9807517..ac4569c5eff4 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.html +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.html @@ -6,8 +6,8 @@
- @if (contentlet | contentletStatusTag; as status) { - + @if (contentlet) { + } @if (contentlet?.inode) { { const mockContentlet = { inode: '123', + identifier: 'id-123', + hasLiveVersion: true, live: true, working: false, archived: false, @@ -49,11 +49,10 @@ describe('DotEditContentSidebarInformationComponent', () => { component: DotEditContentSidebarInformationComponent, imports: [ RouterTestingModule, - TagModule, SkeletonModule, TooltipModule, DotNameFormatPipe, - ContentletStatusTagPipe, + DotContentletStatusChipComponent, DotRelativeDatePipe, DotMessagePipe ], @@ -90,9 +89,8 @@ describe('DotEditContentSidebarInformationComponent', () => { spectator.detectChanges(); }); - it('should show status tag', () => { - const tag = spectator.query('p-tag'); - expect(tag).toBeTruthy(); + it('should show contentlet status chip', () => { + expect(spectator.query('dot-contentlet-status-chip')).toBeTruthy(); }); it('should show json link', () => { diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.ts index 449fbff09371..3f3cbab48807 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.ts +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-information/dot-edit-content-sidebar-information.component.ts @@ -12,21 +12,19 @@ import { RouterLink } from '@angular/router'; import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog'; import { SkeletonModule } from 'primeng/skeleton'; -import { TagModule } from 'primeng/tag'; import { TooltipModule } from 'primeng/tooltip'; import { DotMessageService } from '@dotcms/data-access'; import { DotCMSContentlet, DotCMSContentType } from '@dotcms/dotcms-models'; -import { DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui'; +import { DotContentletStatusChipComponent, DotMessagePipe, DotRelativeDatePipe } from '@dotcms/ui'; import { DotEditContentSidebarReferencesDialogComponent } from './dot-edit-content-sidebar-references-dialog/dot-edit-content-sidebar-references-dialog.component'; import { DotReferencesDialogData } from '../../../../models/dot-edit-content.model'; -import { ContentletStatusTagPipe } from '../../../../pipes/contentlet-status-tag.pipe'; import { DotNameFormatPipe } from '../../../../pipes/name-format.pipe'; interface ContentSidebarInformation { - contentlet: DotCMSContentlet; + contentlet: DotCMSContentlet | null; contentType: DotCMSContentType; loading: boolean; referencesPageCount: string; @@ -41,8 +39,7 @@ interface ContentSidebarInformation { RouterLink, TooltipModule, SkeletonModule, - TagModule, - ContentletStatusTagPipe, + DotContentletStatusChipComponent, DotRelativeDatePipe, DotMessagePipe, DotNameFormatPipe, @@ -66,7 +63,9 @@ export class DotEditContentSidebarInformationComponent { readonly $data = input.required({ alias: 'data' }); /** URL to fetch the contentlet as JSON via the REST API. */ - readonly $jsonUrl = computed(() => `/api/v1/content/${this.$data().contentlet.identifier}`); + readonly $jsonUrl = computed( + () => `/api/v1/content/${this.$data().contentlet?.identifier ?? ''}` + ); /** Tooltip message shown when the contentlet has no creation date yet. */ readonly $createdTooltipMessage = computed(() => { diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html index 259ca35f5d1a..21bd0e2fe808 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.html @@ -16,17 +16,29 @@ data-testId="sidebar-tabs"> - + - + - + @if (!isNew) { - + } diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.ts index 816cf0e0dba1..99f82cc357b2 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.ts +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/dot-edit-content-sidebar.component.ts @@ -14,6 +14,7 @@ import { ConfirmDialogModule } from 'primeng/confirmdialog'; import { DialogModule } from 'primeng/dialog'; import { SelectModule } from 'primeng/select'; import { TabsModule } from 'primeng/tabs'; +import { TooltipModule } from 'primeng/tooltip'; import { DotCMSBaseTypesContentTypes } from '@dotcms/dotcms-models'; import { DotCopyButtonComponent, DotMessagePipe } from '@dotcms/ui'; @@ -46,6 +47,7 @@ import { DotEditContentStore } from '../../store/edit-content.store'; DotEditContentSidebarInformationComponent, DotEditContentSidebarWorkflowComponent, TabsModule, + TooltipModule, DotEditContentSidebarSectionComponent, DotCopyButtonComponent, ConfirmDialogModule, diff --git a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.html b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.html index e85b44f84c08..8ed891d123fb 100644 --- a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.html +++ b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.html @@ -13,7 +13,7 @@ appendTo: 'body' }" size="small" - icon="pi pi-copy" + [icon]="$icon()" data-testid="copy-to-clipboard" variant="text" /> diff --git a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.spec.ts index 9e8f084a534e..9d448684c386 100644 --- a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.spec.ts +++ b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.spec.ts @@ -89,14 +89,28 @@ describe('DotCopyButtonComponent', () => { discardPeriodicTasks(); })); - it('should show "Copied" in tooltip after clicking the button', fakeAsync(() => { + it('should show "Copied" in tooltip and checkmark icon after clicking', fakeAsync(() => { const event = { stopPropagation: jest.fn() } as unknown as MouseEvent; spectator.component.copyUrlToClipboard(event); - tick(0); // run promise microtask so .then() runs and sets $tempTooltipText + tick(0); // flush promise .then() spectator.detectChanges(); expect(spectator.component.$tooltipText()).toBe('Copied'); + expect(spectator.component.$icon()).toBe('pi pi-check'); discardPeriodicTasks(); })); + + it('should reset feedback after 1 second', fakeAsync(() => { + const event = { stopPropagation: jest.fn() } as unknown as MouseEvent; + spectator.component.copyUrlToClipboard(event); + tick(0); // flush promise .then() + spectator.detectChanges(); + + tick(1000); + spectator.detectChanges(); + + expect(spectator.component.$tooltipText()).toBe('Tooltip text'); + expect(spectator.component.$icon()).toBe('pi pi-copy'); + })); }); }); diff --git a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.ts b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.ts index 2ded4424f43d..d10b7b275fbc 100644 --- a/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.ts +++ b/core-web/libs/ui/src/lib/components/dot-copy-button/dot-copy-button.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ViewChild, computed, inject, input, signal } from '@angular/core'; import { Button } from 'primeng/button'; import { Tooltip } from 'primeng/tooltip'; @@ -56,10 +56,14 @@ export class DotCopyButtonComponent { return `w-8 h-8 min-w-8 p-0 ${this.customClass()}`.trim(); }); + @ViewChild(Tooltip) private tooltipRef?: Tooltip; + private dotClipboardUtil: DotClipboardUtil = inject(DotClipboardUtil); private dotMessageService: DotMessageService = inject(DotMessageService); private $tempTooltipText = signal(''); + $icon = computed(() => (this.$tempTooltipText() === this.dotMessageService.get('Copied') ? 'pi pi-check' : 'pi pi-copy')); + // Final tooltip text to be displayed $tooltipText = computed(() => { if (this.$tempTooltipText()) { @@ -81,10 +85,13 @@ export class DotCopyButtonComponent { .copy(this.copy()) .then(() => { this.$tempTooltipText.set(this.dotMessageService.get('Copied')); + this.tooltipRef?.show(); setTimeout(() => this.$tempTooltipText.set(''), 1000); }) .catch((error) => { this.$tempTooltipText.set('Error'); + this.tooltipRef?.show(); + setTimeout(() => this.$tempTooltipText.set(''), 1000); console.error('[DotCopyButtonComponent] Error copying to clipboard: ', error); }); } diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index 1c0d0ce3e5e7..10b32f7e52dd 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -6223,6 +6223,10 @@ edit.content.layout.select.workflow.warning.switch=Select a Workflow edit.content.layout.select.workflow.warning.subtitle=to take action on this content. edit.content.sidebar.open=Open sidebar edit.content.sidebar.close=Close sidebar +edit.content.sidebar.tab.information=Information +edit.content.sidebar.tab.history=History +edit.content.sidebar.tab.comments=Comments +edit.content.sidebar.tab.settings=Settings edit.content.sidebar.general.title=General edit.content.sidebar.workflow.dialog.title=Select the workflow you want to work on. edit.content.sidebar.workflow.dialog.dropdown.placeholder=Select a Workflow From 853573425918eb0a78e97fa337c5785c238a4700 Mon Sep 17 00:00:00 2001 From: Adrian Molina Date: Tue, 12 May 2026 12:55:32 -0400 Subject: [PATCH 2/8] refactor(edit-content): remove untranslated locale component and integrate binary option selector - Deleted the `DotEditContentSidebarUntranslatedLocaleComponent` and its associated HTML, SCSS, and spec files. - Updated the `locales.feature.ts` to utilize `DotBinaryOptionSelectorComponent` for handling untranslated locales. - Enhanced the language properties for better user guidance on untranslated content. - Adjusted the binary option selector to include descriptions and improved handling of locale options. This refactor streamlines the handling of untranslated locales by replacing the previous component with a more flexible binary option selector, improving the user experience in the edit content sidebar. --- ...sidebar-untranslated-locale.component.html | 30 --------- ...sidebar-untranslated-locale.component.scss | 16 ----- ...ebar-untranslated-locale.component.spec.ts | 65 ------------------- ...t-sidebar-untranslated-locale.component.ts | 22 ------- .../store/features/locales/locales.feature.ts | 59 +++++++++++++---- .../dot-binary-option-selector.component.html | 19 ++++-- .../dot-binary-option-selector.component.ts | 7 +- .../dot-copy-button.component.ts | 16 ++++- .../WEB-INF/messages/Language.properties | 10 +-- 9 files changed, 85 insertions(+), 159 deletions(-) delete mode 100644 core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.html delete mode 100644 core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.scss delete mode 100644 core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.spec.ts delete mode 100644 core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.ts diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.html deleted file mode 100644 index 5b43d14b5718..000000000000 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.html +++ /dev/null @@ -1,30 +0,0 @@ -

{{ 'edit.content.sidebar.locales.untranslated.text' | dm }}

-
- - -
-
- - -
- -
- - -
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.scss b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.scss deleted file mode 100644 index 157e54695030..000000000000 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.scss +++ /dev/null @@ -1,16 +0,0 @@ -@use "../../../../../../../dotcms-scss/shared/spacing"; - -@use "variables" as *; - -:host { - display: flex; - flex-direction: column; - gap: spacing.$spacing-1; - - .untranslated-locale__actions { - margin-top: spacing.$spacing-3; - display: flex; - gap: spacing.$spacing-2; - justify-content: flex-end; - } -} diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.spec.ts deleted file mode 100644 index 44e22bb48876..000000000000 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.spec.ts +++ /dev/null @@ -1,65 +0,0 @@ -import { Spectator, createComponentFactory, byTestId } from '@ngneat/spectator/jest'; - -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; - -import { ButtonDirective } from 'primeng/button'; -import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { RadioButtonModule } from 'primeng/radiobutton'; - -import { DotMessageService } from '@dotcms/data-access'; -import { DotMessagePipe } from '@dotcms/ui'; -import { MockDotMessageService } from '@dotcms/utils-testing'; - -import { DotEditContentSidebarUntranslatedLocaleComponent } from './dot-edit-content-sidebar-untranslated-locale.component'; - -const messageServiceMock = new MockDotMessageService({ - 'edit.content.sidebar.locales.untranslated.populate': 'Populate from Current Locale' -}); - -describe('DotEditContentSidebarUntranslatedLocaleComponent', () => { - let spectator: Spectator; - const createComponent = createComponentFactory({ - component: DotEditContentSidebarUntranslatedLocaleComponent, - imports: [CommonModule, RadioButtonModule, FormsModule, ButtonDirective, DotMessagePipe], - providers: [ - { provide: DynamicDialogRef, useValue: { close: jest.fn() } }, - { - provide: DynamicDialogConfig, - useValue: { data: { currentLocale: { isoCode: 'en-us' } } } - }, - { - provide: DotMessageService, - useValue: messageServiceMock - } - ] - }); - - beforeEach(() => { - spectator = createComponent(); - }); - - it('should close dialog with selected option on continue button click', () => { - const continueButton = spectator.query(byTestId('continue-button')); - const dialogRefCloseSpy = jest.spyOn(spectator.component.dialogRef, 'close'); - - spectator.click(continueButton); - - expect(dialogRefCloseSpy).toHaveBeenCalledWith(spectator.component.selectedOption); - }); - - it('should close dialog on cancel button click', () => { - const cancelButton = spectator.query(byTestId('cancel-button')); - const dialogRefCloseSpy = jest.spyOn(spectator.component.dialogRef, 'close'); - - spectator.click(cancelButton); - - expect(dialogRefCloseSpy).toHaveBeenCalledWith(); - }); - - it('should display the correct label for the populate radio button', () => { - expect(spectator.query(byTestId('populate-label')).textContent).toContain( - 'Populate from Current Locale en-US' - ); - }); -}); diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.ts deleted file mode 100644 index ad8406608dad..000000000000 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { ChangeDetectionStrategy, Component, inject } from '@angular/core'; -import { FormsModule } from '@angular/forms'; - -import { ButtonDirective } from 'primeng/button'; -import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog'; -import { RadioButtonModule } from 'primeng/radiobutton'; - -import { DotIsoCodePipe, DotMessagePipe } from '@dotcms/ui'; - -@Component({ - selector: 'dot-edit-content-sidebar-untranslated-locale', - imports: [RadioButtonModule, DotMessagePipe, FormsModule, ButtonDirective, DotIsoCodePipe], - templateUrl: './dot-edit-content-sidebar-untranslated-locale.component.html', - styleUrl: './dot-edit-content-sidebar-untranslated-locale.component.scss', - changeDetection: ChangeDetectionStrategy.OnPush -}) -export class DotEditContentSidebarUntranslatedLocaleComponent { - selectedOption = 'populate'; - - dialogRef = inject(DynamicDialogRef); - config = inject(DynamicDialogConfig); -} diff --git a/core-web/libs/edit-content/src/lib/store/features/locales/locales.feature.ts b/core-web/libs/edit-content/src/lib/store/features/locales/locales.feature.ts index a7a51e347559..c96c8bcabe07 100644 --- a/core-web/libs/edit-content/src/lib/store/features/locales/locales.feature.ts +++ b/core-web/libs/edit-content/src/lib/store/features/locales/locales.feature.ts @@ -26,8 +26,8 @@ import { DotWorkflowsActionsService } from '@dotcms/data-access'; import { ComponentStatus, DotCMSContentlet, DotLanguage } from '@dotcms/dotcms-models'; +import { BINARY_OPTION, DotBinaryOptionSelectorComponent, DotIsoCodePipe } from '@dotcms/ui'; -import { DotEditContentSidebarUntranslatedLocaleComponent } from '../../../components/dot-edit-content-sidebar/components/dot-edit-content-sidebar-untranslated-locale/dot-edit-content-sidebar-untranslated-locale.component'; import { DotEditContentService } from '../../../services/dot-edit-content.service'; import { prepareContentletForCopy, @@ -194,19 +194,54 @@ export function withLocales() { }) ); } else { - const ref = dialogService.open( - DotEditContentSidebarUntranslatedLocaleComponent, - { - header: dotMessageService.get( - 'edit.content.sidebar.locales.untranslated.locale' + const currentLocale = store.currentLocale(); + const isoCode = new DotIsoCodePipe().transform( + currentLocale.isoCode + ); + const languageLabel = currentLocale.country + ? `${currentLocale.language} (${currentLocale.countryCode})` + : currentLocale.language; + + const options: BINARY_OPTION = { + option1: { + value: 'populate', + label: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.populate', + isoCode + ), + message: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.populate.message', + languageLabel + ), + buttonLabel: 'edit.content.sidebar.locales.continue' + }, + option2: { + value: 'manual', + label: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.manually' ), - width: '35rem', - data: { - currentLocale: store.currentLocale() - }, - modal: true + message: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.manually.message' + ), + buttonLabel: 'edit.content.sidebar.locales.continue' } - ); + }; + + const ref = dialogService.open(DotBinaryOptionSelectorComponent, { + header: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.locale' + ), + width: '35rem', + contentStyle: { padding: '0' }, + closable: true, + modal: true, + data: { + options, + description: dotMessageService.get( + 'edit.content.sidebar.locales.untranslated.text' + ) + } + }); ref.onClose .pipe( diff --git a/core-web/libs/ui/src/lib/components/dot-binary-option-selector/dot-binary-option-selector.component.html b/core-web/libs/ui/src/lib/components/dot-binary-option-selector/dot-binary-option-selector.component.html index a4cb0c976067..78e9c4ea9f42 100644 --- a/core-web/libs/ui/src/lib/components/dot-binary-option-selector/dot-binary-option-selector.component.html +++ b/core-web/libs/ui/src/lib/components/dot-binary-option-selector/dot-binary-option-selector.component.html @@ -1,3 +1,6 @@ +@if (description) { +

{{ description | dm }}

+}