feat(FTM): New Toolbar - Implement Preview Button and Preview Toolbar (…

…#30854) This pull request includes several updates to the `DotEmaShellComponent` and `DotUveToolbarComponent` to improve their functionality and styling. The most important changes include modifying location handling methods, updating button styles, and restructuring the toolbar component. ### Changes to `DotEmaShellComponent`: * Replaced `replaceState` with `go` in the `#updateLocation` method to improve URL handling. * Updated test cases to use `location.go` instead of `location.replaceState` for consistency. [[1]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L310-R310) [[2]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L379-R379) [[3]](diffhunk://#diff-8843e3a4ce8c16e83408b1a6dcc3ad54eaddd17f8e986bbdb502e11bd4446ab4L564-R564) ### Changes to `DotUveToolbarComponent`: * Added new styles for the toolbar and its components, including buttons and chips, to enhance the user interface. * Refactored the toolbar component template to include separate templates for edit and preview modes and added new buttons and functionality for better user experience. [[1]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bL1-R34)R1, [[2]](diffhunk://#diff-9937556e73b051b878ba22ad1ce971a70019a617d7979b3e0bcc814801ad350bR52-R115) * Updated test cases to reflect the new structure and functionality of the toolbar component, ensuring proper testing of the new features. [[1]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1R49-L53) [[2]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L110-L169) [[3]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L186-L189) [[4]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L205-R201) [[5]](diffhunk://#diff-3eaa147616a5d1ff374a5fa27b0f38f0159a9039ef7e8d672dec43631f48a9e1L222-R237) ### Other Changes: * Added a new severity style for text buttons in `_splitbutton.scss` to standardize button appearance. * Updated button styles in `dot-ema-bookmarks.component.html` to include a smaller size class for better visual consistency. ### Video https://github.com/user-attachments/assets/576dce00-f7f0-47eb-a744-7eaac368dcf4
dotCMS · Dec 6, 2024 · 4aaeb73 · 4aaeb73
1 parent 363774c
commit 4aaeb73
Show file tree

Hide file tree

Showing 19 changed files with 459 additions and 190 deletions.
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_splitbutton.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_splitbutton.scss
@@ -111,3 +111,18 @@
         }
     }
 }
+
+// Severity for text button
+.p-splitbutton.p-button-text {
+    @extend #text-primary-severity;
+
+    .p-button {
+        &,
+        &:hover,
+        &:focus {
+            color: $color-palette-primary;
+            background-color: transparent;
+            border: transparent;
+        }
+    }
+}
diff --git a/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts b/...-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.spec.ts
@@ -307,7 +307,7 @@ describe('DotEmaShellComponent', () => {
         it('should call store.loadPageAsset when the `loadPageAsset` is called', () => {
             const spyloadPageAsset = jest.spyOn(store, 'loadPageAsset');
             const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
-            const spyLocation = jest.spyOn(location, 'replaceState');
+            const spyLocation = jest.spyOn(location, 'go');
 
             spectator.detectChanges();
             expect(spyloadPageAsset).toHaveBeenCalledWith(INITIAL_PAGE_PARAMS);
@@ -376,7 +376,7 @@ describe('DotEmaShellComponent', () => {
 
                 const spyStoreLoadPage = jest.spyOn(store, 'loadPageAsset');
                 const spyUrlTree = jest.spyOn(router, 'createUrlTree');
-                const spyLocation = jest.spyOn(location, 'replaceState');
+                const spyLocation = jest.spyOn(location, 'go');
 
                 store.loadPageAsset(newParams);
                 spectator.detectChanges();
@@ -561,7 +561,7 @@ describe('DotEmaShellComponent', () => {
 
             it('should trigger a store reload if the url is the same', () => {
                 const spyReload = jest.spyOn(store, 'reloadCurrentPage');
-                const spyLocation = jest.spyOn(location, 'replaceState');
+                const spyLocation = jest.spyOn(location, 'go');
                 spectator.detectChanges();
 
                 spectator.triggerEventHandler(

diff --git a/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts b/core-web/libs/portlets/edit-ema/portlet/src/lib/dot-ema-shell/dot-ema-shell.component.ts
@@ -223,7 +223,6 @@ export class DotEmaShellComponent implements OnInit, OnDestroy {
      */
     #updateLocation(queryParams: Params = {}): void {
         const urlTree = this.#router.createUrlTree([], { queryParams });
-
-        this.#location.replaceState(urlTree.toString());
+        this.#location.go(urlTree.toString());
     }
 }
diff --git a/...let/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.html b/...let/src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.html
@@ -3,7 +3,7 @@
         (click)="toggleBookmark()"
         [icon]="bookmarked() ? 'pi pi-star-fill' : 'pi pi-star'"
         [loading]="loading()"
-        styleClass="p-button-text"
+        styleClass="p-button-text p-button-sm"
         data-testId="bookmark-button" />
 } @else {
     <p-button

diff --git a/.../src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.spec.ts b/.../src/lib/edit-ema-editor/components/dot-ema-bookmarks/dot-ema-bookmarks.component.spec.ts
@@ -29,12 +29,6 @@ describe('DotEmaBookmarksComponent', () => {
         providers: [
             DialogService,
             HttpClient,
-            // {
-            //     provide: UVEStore,
-            //     useValue: {
-            //         $previewMode: signal(false)
-            //     }
-            // },
             mockProvider(UVEStore, { $previewMode: signal(false) }),
             {
                 provide: LoginService,

diff --git a/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html b/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.html
@@ -1,37 +1,37 @@
-<p-toolbar>
-    <div class="p-toolbar-group-start">
-        @if ($toolbar().editor) {
-            <p-button
-                icon="pi pi-eye"
-                styleClass="p-button-text"
-                data-testId="uve-toolbar-preview"
-                (click)="togglePreviewMode(true)" />
-
-            <dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />
-
-            <p-button
-                icon="pi pi-external-link"
-                styleClass="p-button-text"
-                (cdkCopyToClipboardCopied)="triggerCopyToast()"
-                [cdkCopyToClipboard]="$toolbar().editor.copyUrl"
-                data-testId="uve-toolbar-copy-url" />
-
-            <a
-                title="Page API URL"
-                pButton
-                label="API"
-                class="p-button-text"
-                target="_blank"
-                data-testId="uve-toolbar-api-link"
-                [href]="$apiURL()"></a>
-        } @else if ($toolbar().preview) {
-            <div>PREVIEW MODE CONTENT</div>
-            <button (click)="togglePreviewMode(false)">Back</button>
+@let preview = $isPreviewMode();
+@let runningExperiment = $toolbar().runningExperiment;
+
+<p-toolbar [styleClass]="$styleToolbarClass()">
+    <div class="p-toolbar-group-start" [ngClass]="{ 'p-0': preview }">
+        @if (preview) {
+            <ng-container [ngTemplateOutlet]="previewLeftOptionsTemplate"></ng-container>
+        } @else {
+            <ng-container [ngTemplateOutlet]="editLeftOptionsTemplate"></ng-container>
         }
     </div>
 
+    @if (preview) {
+        <div class="p-toolbar-group-center">
+            <div>
+                <p-button
+                    icon="pi pi-chevron-left"
+                    styleClass="p-button-text p-button-sm"
+                    data-testId="arrow-left" />
+                <p-button
+                    icon="pi pi-chevron-right"
+                    styleClass="p-button-text p-button-sm"
+                    data-testId="arrow-right" />
+            </div>
+            <p-calendar
+                inputStyleClass="p-inputtext-sm"
+                [(ngModel)]="date"
+                [readonlyInput]="true" />
+            <p-chip styleClass="uve-toolbar-chips" label="Today" alt="Page Day" />
+        </div>
+    }
+
     <div class="p-toolbar-group-end">
-        @if ($toolbar().runningExperiment; as runningExperiment) {
+        @if (runningExperiment) {
             <dot-ema-running-experiment
                 [runningExperiment]="runningExperiment"
                 data-testId="uve-toolbar-running-experiment" />
@@ -49,10 +49,77 @@
             [value]="$personaSelectorProps().value"
             #personaSelector
             data-testId="uve-toolbar-persona-selector" />
-        <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
+
+        @if (!preview) {
+            <span data-testId="uve-toolbar-workflow-actions">Workflows</span>
+        }
     </div>
 </p-toolbar>
 
+<ng-template #editLeftOptionsTemplate>
+    <p-button
+        pTooltip="Preview Mode"
+        icon="pi pi-eye"
+        styleClass="p-button-text p-button-sm"
+        data-testId="uve-toolbar-preview"
+        (click)="setPreviewMode()" />
+
+    <dot-ema-bookmarks [url]="$toolbar().editor.bookmarksUrl" />
+
+    <p-button
+        pTooltip="Copy URL"
+        icon="pi pi-external-link"
+        styleClass="p-button-text p-button-sm"
+        (cdkCopyToClipboardCopied)="triggerCopyToast()"
+        [cdkCopyToClipboard]="$toolbar().editor.copyUrl"
+        data-testId="uve-toolbar-copy-url" />
+
+    <a
+        title="Page API URL"
+        pTooltip="Page API URL"
+        pButton
+        label="API"
+        class="p-button-text p-button-sm"
+        target="_blank"
+        data-testId="uve-toolbar-api-link"
+        [href]="$apiURL()"></a>
+</ng-template>
+
+<ng-template #previewLeftOptionsTemplate>
+    <p-button
+        icon="pi pi-times"
+        styleClass="p-button-text p-button-sm"
+        (click)="setEditMode()"
+        data-testId="close-preview-mode" />
+
+    <div class="vertical-divider"></div>
+
+    <p-button
+        icon="pi pi-desktop"
+        pTooltip="Desktop Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="desktop-preview" />
+
+    <p-button
+        icon="pi pi-tablet"
+        pTooltip="Tablet Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="tablet-preview" />
+
+    <p-button
+        icon="pi pi-mobile"
+        pTooltip="Mobile Preview"
+        styleClass="p-button-text p-button-sm"
+        data-testId="mobile-preview" />
+
+    <p-splitButton
+        styleClass="p-button-sm"
+        label="More"
+        [model]="[]"
+        text
+        data-testId="more-devices-preview" />
+</ng-template>
+
 @if ($toolbar().showInfoDisplay) {
     <dot-ema-info-display data-testId="info-display" />
 }
diff --git a/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss b/...portlet/src/lib/edit-ema-editor/components/dot-uve-toolbar/dot-uve-toolbar.component.scss
@@ -1,7 +1,44 @@
 @use "variables" as *;
 
+::ng-deep {
+    .uve-toolbar {
+        padding: 0 $spacing-4;
+        transition: padding 0.2s ease;
+        border-color: $color-palette-primary-200;
+        border-top: 1px solid transparent; // Avoid jump
+    }
+
+    .uve-toolbar-preview {
+        border-top-color: $color-palette-primary-200;
+        padding-inline: $spacing-5;
+    }
+
+    .p-chip.uve-toolbar-chips {
+        height: $field-height-sm;
+        background-color: $color-palette-primary-op-10;
+        border-color: $color-palette-primary-op-10;
+    }
+}
+
 .p-toolbar-group-start,
-.p-toolbar-group-end {
+.p-toolbar-group-end,
+.p-toolbar-group-center {
+    padding: $spacing-1 0;
     align-items: center;
     gap: $spacing-1;
+    align-self: stretch;
+}
+
+.vertical-divider {
+    align-self: stretch;
+    position: relative;
+    &::before {
+        border-left: 1px solid $color-palette-primary-200;
+        position: absolute;
+        display: block;
+        top: 0;
+        left: 50%;
+        height: 100%;
+        content: "";
+    }
 }