feat(edit-ema): Move Preview Device Selected to New Bar #27308

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 @@
-<div
-    class="selected-device"
-    [style]="{
-        width: currentDevice.cssWidth + 'px'
-    }"
-    data-testId="selected-device">
-    <div class="selected-device__device">
-        <i *ngIf="!!currentDevice.icon" [class]="currentDevice.icon" data-testId="device-icon"></i>
-        <span class="device__name" data-testId="device-name"
-            >{{ currentDevice.name }} {{ currentDevice.cssWidth }} x
-            {{ currentDevice.cssHeight }}</span
-        >
-    </div>
-    <p-button
-        (onClick)="handleDeviceReset()"
-        icon="pi pi-times"
-        styleClass="p-button-text p-button-sm p-button-rounded"
-        data-testId="reset-device" />
-</div>
+<i *ngIf="!!currentDevice.icon" [class]="currentDevice.icon" data-testId="device-icon"></i>
+<span class="device__name" data-testId="device-name">
+    {{ currentDevice.name }} {{ currentDevice.cssWidth }} x
+    {{ currentDevice.cssHeight }}
+</span>

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;
+}

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();
-    });
 });

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<undefined>();
-
-    /**
-     * Reset the device
-     *
-     * @memberof DotEmaDeviceDisplayComponent
-     */
-    handleDeviceReset(): void {
-        this.resetDevice.emit();
-    }
 }

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.html

@@ -9,11 +9,20 @@
     <dot-edit-ema-toolbar>
         <ng-container left>
             <p-button
+                *ngIf="!currentDevice"
                 [label]="'editpage.toolbar.preview.page' | dm"
                 (onClick)="deviceSelector.openMenu($event)"
                 icon="pi pi-desktop"
                 styleClass="p-button-text p-button-sm"
                 data-testId="ema-preview" />
+            <p-button
+                *ngIf="currentDevice"
+                [label]="'editema.editor.preview.back-to-edit' | dm"
+                (onClick)="updateCurrentDevice()"
+                icon="pi pi-arrow-left"
+                styleClass="p-button-text p-button-sm"
+                data-testId="ema-back-to-edit" />
+
             <dot-ema-bookmarks [url]="es.favoritePageURL" />
             <p-button
                 [cdkCopyToClipboard]="es.iframeURL"
@@ -48,9 +57,18 @@
             <p-button class="p-button-sm" label="Save" />
         </ng-container>
     </dot-edit-ema-toolbar>
-    <div class="editor-message" *ngIf="!es.editor.page.canEdit" data-testId="cant-edit-message">
-        <i class="pi pi-exclamation-circle"></i>
-        {{ 'editema.dont.have.edit.permission' | dm }}
+    <div
+        class="editor-banner"
+        *ngIf="currentDevice || !es.editor.page.canEdit"
+        data-testId="editor-banner">
+        <dot-ema-device-display
+            *ngIf="!!currentDevice"
+            [currentDevice]="currentDevice"
+            data-testId="device-display" />
+        <div class="editor-banner--message" *ngIf="!es.editor.page.canEdit">
+            <i class="pi pi-exclamation-circle"></i>
+            {{ 'editema.dont.have.edit.permission' | dm }}
+        </div>
     </div>
     <div
         class="editor-content"
@@ -59,11 +77,6 @@
             'editor-content--expanded': !es.editor.page.canEdit
         }"
         data-testId="editor-content">
-        <dot-ema-device-display
-            *ngIf="!!currentDevice"
-            [currentDevice]="currentDevice"
-            (resetDevice)="updateCurrentDevice()"
-            data-testId="device-display" />
         <div
             class="iframe-wrapper"
             [ngClass]="{

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.scss

@@ -7,7 +7,7 @@
     height: 100%;
 }
 
-:host:has(.editor-message) {
+:host:has(.editor-banner) {
     grid-template-rows: min-content min-content 1fr;
 }
 
@@ -24,16 +24,33 @@ dot-edit-ema-toolbar {
     grid-column: 1 / -1;
 }
 
-.editor-message {
-    background-color: $color-palette-primary-300;
+.editor-banner {
+    background-color: $color-palette-primary-200;
     color: $black;
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
     justify-content: center;
     align-items: center;
     gap: $spacing-0;
     height: $spacing-5;
     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;
+}
+
+.editor-banner--message {
+    grid-column: 2 / 3;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: $spacing-0;
+}
+
+dot-ema-device-display {
+    grid-column: 1 / 2;
 }
 
 i {

core-web/libs/portlets/edit-ema/portlet/src/lib/edit-ema-editor/edit-ema-editor.component.spec.ts

@@ -356,6 +356,25 @@ describe('EditEmaEditorComponent', () => {
                     expect(spectator.query(byTestId(testId))).toBeNull();
                 });
             });
+
+            it('should show the components that need showed on preview mode', () => {
+                const componentsToShow = ['ema-back-to-edit', 'device-display']; // Test id of components that should show when entering preview modes
+
+                spectator.detectChanges();
+
+                const deviceSelector = spectator.debugElement.query(
+                    By.css('[data-testId="dot-device-selector"]')
+                );
+
+                const iphone = { ...mockDotDevices[0], icon: 'someIcon' };
+
+                spectator.triggerEventHandler(deviceSelector, 'selected', iphone);
+                spectator.detectChanges();
+
+                componentsToShow.forEach((testId) => {
+                    expect(spectator.query(byTestId(testId))).not.toBeNull();
+                });
+            });
         });
 
         describe('persona selector', () => {
@@ -1382,7 +1401,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', () => {

dotCMS/src/main/webapp/WEB-INF/messages/Language.properties

@@ -1419,6 +1419,10 @@ editema.infopage.notfound.description=The page you're looking for doesn't exist
 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
 email-body=Email Body