From 855a5b61b9d34397a464a02179db5b7478badd05 Mon Sep 17 00:00:00 2001 From: KevinDavilaDotCMS <144152756+KevinDavilaDotCMS@users.noreply.github.com> Date: Thu, 11 Jan 2024 01:26:37 -0500 Subject: [PATCH 1/2] Added preview message on banner in EMA editor --- .../dot-ema-device-display.component.html | 24 ++++----------- .../dot-ema-device-display.component.scss | 28 ++++-------------- .../dot-ema-device-display.component.spec.ts | 19 ++---------- .../dot-ema-device-display.component.ts | 18 ++---------- .../edit-ema-editor.component.html | 29 ++++++++++++++----- .../edit-ema-editor.component.scss | 23 ++++++++++++--- .../edit-ema-editor.component.spec.ts | 21 +++++++++++++- .../WEB-INF/messages/Language.properties | 2 ++ 8 files changed, 78 insertions(+), 86 deletions(-) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.html b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.html index 7b1509f20bbc..a8983c88c473 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.html +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.html @@ -1,19 +1,5 @@ -
-
- - {{ currentDevice.name }} {{ currentDevice.cssWidth }} x - {{ currentDevice.cssHeight }} -
- -
+ + + {{ currentDevice.name }} {{ currentDevice.cssWidth }} x + {{ currentDevice.cssHeight }} + diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.scss index 94be30a0dccc..c86241c994c9 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.scss +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.scss @@ -1,28 +1,10 @@ @use "variables" as *; -.selected-device { - height: $field-height-sm; // This follows the same height as an button-sm which is the same as sm field - display: grid; - grid-template-columns: min-content auto $field-height-sm; - margin-bottom: $spacing-1; - width: 100%; - background-color: $white; -} - -.selected-device__device { - height: 100%; - font-size: $font-size-md; - display: flex; - justify-content: center; - gap: $spacing-1; - grid-column: 2/2; - - .pi { - color: $color-palette-primary-500; - } -} - -.device__name { +:host { display: flex; + gap: $spacing-0; align-items: center; } +i { + color: $color-palette-primary-500; +} diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.spec.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.spec.ts index f9e0385d8142..6dcfa76579e4 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.spec.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.spec.ts @@ -1,7 +1,6 @@ import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest'; import { CommonModule } from '@angular/common'; -import { By } from '@angular/platform-browser'; import { mockDotDevices } from '@dotcms/utils-testing'; @@ -24,21 +23,9 @@ describe('DotEmaDeviceDisplayComponent', () => { }); it('should show name, sizes and icon of the selected device', () => { - expect(spectator.query(byTestId('device-name')).textContent).toBe('iphone 200 x 100'); + expect(spectator.query(byTestId('device-name')).textContent.trim()).toBe( + 'iphone 200 x 100' + ); expect(spectator.query(byTestId('device-icon'))).not.toBeNull(); }); - - it('should show a x button to reset the device selection', () => { - expect(spectator.query(byTestId('reset-device'))).not.toBeNull(); - }); - - it("should emit deviceReset event when click on 'x' button", () => { - const resetDevice = jest.spyOn(spectator.component.resetDevice, 'emit'); - - const resetButton = spectator.debugElement.query(By.css('[data-testId="reset-device"]')); - - spectator.triggerEventHandler(resetButton, 'onClick', {}); - - expect(resetDevice).toHaveBeenCalled(); - }); }); diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.ts index 229f9388c14c..49b999f22af3 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.ts +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/components/dot-ema-device-display/dot-ema-device-display.component.ts @@ -1,28 +1,16 @@ -import { CommonModule } from '@angular/common'; -import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'; - -import { ButtonModule } from 'primeng/button'; +import { NgIf } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core'; import { DotDevice } from '@dotcms/dotcms-models'; @Component({ selector: 'dot-ema-device-display', standalone: true, - imports: [CommonModule, ButtonModule], + imports: [NgIf], templateUrl: './dot-ema-device-display.component.html', styleUrls: ['./dot-ema-device-display.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class DotEmaDeviceDisplayComponent { @Input() currentDevice: DotDevice & { icon?: string }; - @Output() resetDevice = new EventEmitter(); - - /** - * Reset the device - * - * @memberof DotEmaDeviceDisplayComponent - */ - handleDeviceReset(): void { - this.resetDevice.emit(); - } } 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 47113dc44844..c885387f7d8c 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 @@ -9,11 +9,20 @@ + + -
- - {{ 'editema.dont.have.edit.permission' | dm }} +
+ +
+ + {{ 'editema.dont.have.edit.permission' | dm }} +
-
{ + expect(spectator.query(byTestId(testId))).not.toBeNull(); + }); + }); }); describe('persona selector', () => { @@ -1348,7 +1367,7 @@ describe('EditEmaEditorComponent', () => { it('should render a "Dont have permission" message', () => { spectator.detectChanges(); - expect(spectator.query(byTestId('cant-edit-message'))).toBeDefined(); + expect(spectator.query(byTestId('editor-banner'))).toBeDefined(); }); it('should iframe wrapper to be expanded', () => { diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties index e916d563e185..b13776b11497 100644 --- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties +++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties @@ -1419,6 +1419,8 @@ editema.infopage.accessdenied.title=Permission denied editema.infopage.accessdenied.description=You do not have the necessary permissions to view this page. editema.infopage.button.gotopages=Go to Pages +editema.editor.preview.back-to-edit=Back to Edit + email-address=Email Address Email-Address=Email Address From 51e87c025682bfc4f936cdce0bbf83f3c848d51c Mon Sep 17 00:00:00 2001 From: Freddy Montes <751424+fmontes@users.noreply.github.com> Date: Thu, 11 Jan 2024 11:57:37 -0600 Subject: [PATCH 2/2] Update core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss --- .../src/lib/edit-ema-editor/edit-ema-editor.component.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss index 580507415547..c772eab99807 100644 --- a/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss +++ b/core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss @@ -36,6 +36,8 @@ dot-edit-ema-toolbar { grid-column: 1 / -1; font-size: $font-size-sm; border: 1px solid $color-palette-primary-300; + border-left: 0; + border-right: 0; padding: 0 $spacing-3; }