diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html index ab30a0238c6..4edee3cdc4b 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.html @@ -32,8 +32,10 @@ diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss index 978c3108844..7ff968c4c09 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.scss @@ -28,6 +28,7 @@ ::ng-deep { .p-button { + max-width: 124px; // To avoid overflow on the more button use { color: $color-palette-primary; } @@ -55,10 +56,11 @@ ::ng-deep { .more-menu { padding: $spacing-1; + max-width: 15.625rem; // To avoid overflow on the more menu } .p-submenu-header { - border-bottom: 1px solid $color-palette-gray-300; + border-bottom: 0.0625rem solid $color-palette-gray-300; } } } diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts index c65f5560f12..90bafee35f5 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.spec.ts @@ -384,6 +384,63 @@ describe('DotUveDeviceSelectorComponent', () => { expect(menuList).toBeDefined(); }); }); + + describe('More button label', () => { + it('should show "more" as default label', () => { + // Simulate the default device and social media not being set + baseUVEState.device.set(DEFAULT_DEVICE); + baseUVEState.socialMedia.set(null); + + baseUVEState.viewParams.set({ + device: undefined, + orientation: undefined, + seo: undefined + }); + + spectator.detectChanges(); + const moreButton = spectator.query('[data-testid="more-button"]'); + + expect(moreButton.textContent.trim()).toBe('more'); + }); + + it('should show custom device name when selected', () => { + const customDevice = mockDotDevices[0]; + + // Simulate the custom device selection + + baseUVEState.device.set(customDevice); + baseUVEState.socialMedia.set(null); + + baseUVEState.viewParams.set({ + device: customDevice.inode, + orientation: undefined, + seo: undefined + }); + + spectator.detectChanges(); + const moreButton = spectator.query('[data-testid="more-button"]'); + + expect(moreButton.textContent.trim()).toBe(customDevice.name); + }); + + it('should show social media name when selected', () => { + // Simulate the social media selection + const socialMedia = 'Facebook'; + baseUVEState.socialMedia.set(socialMedia); + baseUVEState.device.set(DEFAULT_DEVICE); + + baseUVEState.viewParams.set({ + device: undefined, + orientation: undefined, + seo: socialMedia + }); + + spectator.detectChanges(); + const moreButton = spectator.query('[data-testid="more-button"]'); + + expect(moreButton.textContent.trim()).toBe(socialMedia); + }); + }); }); afterEach(() => jest.clearAllMocks()); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts index 0341eaf197a..4eda8cf86f8 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/components/dot-uve-device-selector/dot-uve-device-selector.component.ts @@ -77,6 +77,18 @@ export class DotUveDeviceSelectorComponent implements OnInit { return menu; }); + readonly $moreButtonLabel = computed(() => { + const DEFAULT_LABEL = 'more'; + + const customDevice = this.$devices().find( + (device) => !device._isDefault && device.inode === this.$currentDevice()?.inode + ); + + const label = customDevice?.name || this.$currentSocialMedia(); + + return label || DEFAULT_LABEL; + }); + readonly activeMenuItemId = computed(() => { const deviceInode = this.$currentDevice()?.inode; const socialMedia = this.$currentSocialMedia(); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html index c825d80e68a..d78bbc5e20f 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html @@ -10,7 +10,7 @@ } - @if (preview) { + @if (preview && !$socialMedia()) {
- @if ($devices().length) { + @if ($devices()?.length) { } diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss index dc95cb3e052..ac956983f9b 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss @@ -35,7 +35,7 @@ align-self: stretch; position: relative; &::before { - border-left: 1px solid $color-palette-primary-200; + border-left: 1px solid $color-palette-gray-200; position: absolute; display: block; top: 0; diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts index 32857ad1048..be2dbb14529 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.spec.ts @@ -111,7 +111,8 @@ const baseUVEState = { orientation: signal(''), clearDeviceAndSocialMedia: jest.fn(), device: signal(DEFAULT_DEVICES.find((device) => device.inode === 'default')), - $unlockButton: signal(null) + $unlockButton: signal(null), + socialMedia: signal(null) }; const personaEventMock = { @@ -625,6 +626,29 @@ describe('DotUveToolbarComponent', () => { expect(workflowActions).toBeNull(); }); + + describe('calendar', () => { + it('should show calendar when in preview mode and socialMedia is false', () => { + baseUVEState.socialMedia.set(null); + spectator.detectChanges(); + + expect(spectator.query('p-calendar')).toBeTruthy(); + }); + + it('should not show calendar when socialMedia has a value', () => { + baseUVEState.socialMedia.set('faceboook'); + spectator.detectChanges(); + + expect(spectator.query('p-calendar')).toBeFalsy(); + }); + + it('should not show calendar when not in preview mode', () => { + baseUVEState.$isPreviewMode.set(false); + spectator.detectChanges(); + + expect(spectator.query('p-calendar')).toBeFalsy(); + }); + }); }); describe('State changes', () => { diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts index cf11b016fbe..83f5c5041ef 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.ts @@ -99,11 +99,12 @@ export class DotUveToolbarComponent { readonly $personaSelectorProps = this.#store.$personaSelector; readonly $infoDisplayProps = this.#store.$infoDisplayProps; readonly $unlockButton = this.#store.$unlockButton; + readonly $socialMedia = this.#store.socialMedia; readonly $devices: Signal = toSignal( this.#deviceService.get().pipe(map((devices = []) => [...DEFAULT_DEVICES, ...devices])), { - initialValue: DEFAULT_DEVICES + initialValue: null } ); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html index 524ae637262..ca9c39d3882 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html @@ -87,15 +87,15 @@ (reloadFromDialog)="reloadPage()" #dialog data-testId="ema-dialog" /> - } + @if ($editorProps().showBlockEditorSidebar) { diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts index b7c09055c66..d59b0e4df45 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts @@ -414,13 +414,7 @@ describe('EditEmaEditorComponent', () => { }); it('should hide components when the store changes', () => { - const componentsToHide = [ - 'palette', - 'dropzone', - 'contentlet-tools', - 'dialog', - 'confirm-dialog' - ]; // Test id of components that should hide when entering preview modes + const componentsToHide = ['palette', 'dropzone', 'contentlet-tools', 'dialog']; // Test id of components that should hide when entering preview modes const iphone = { ...mockDotDevices[0], icon: 'someIcon' }; @@ -452,13 +446,7 @@ describe('EditEmaEditorComponent', () => { }); it('should hide components when the store changes for a variant', () => { - const componentsToHide = [ - 'palette', - 'dropzone', - 'contentlet-tools', - 'dialog', - 'confirm-dialog' - ]; // Test id of components that should hide when entering preview modes + const componentsToHide = ['palette', 'dropzone', 'contentlet-tools', 'dialog']; // Test id of components that should hide when entering preview modes spectator.detectChanges(); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts index b5c23f0b8c8..542327cdfda 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.spec.ts @@ -326,7 +326,7 @@ describe('withEditor', () => { expect(store.viewParams()).toEqual({ device: iphone.inode, orientation: Orientation.LANDSCAPE, - seo: undefined + seo: null }); }); @@ -340,7 +340,7 @@ describe('withEditor', () => { expect(store.viewParams()).toEqual({ device: iphone.inode, orientation: Orientation.PORTRAIT, - seo: undefined + seo: null }); }); }); @@ -369,9 +369,9 @@ describe('withEditor', () => { expect(store.isEditState()).toBe(true); expect(store.orientation()).toBe(null); expect(store.viewParams()).toEqual({ - device: undefined, - orientation: undefined, - seo: undefined + device: null, + orientation: null, + seo: null }); }); }); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts index d5bd55a7aff..c805699ee6d 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/store/features/editor/toolbar/withUVEToolbar.ts @@ -208,7 +208,8 @@ export function withUVEToolbar() { viewParams: { ...store.viewParams(), device: device.inode, - orientation: newOrientation + orientation: newOrientation, + seo: null }, socialMedia: null, isEditState: false, @@ -246,9 +247,9 @@ export function withUVEToolbar() { orientation: null, viewParams: { ...store.viewParams(), - device: undefined, - orientation: undefined, - seo: undefined + device: null, + orientation: null, + seo: null } }); },