implementation (Edit Content): #30016 Develop Tabbed Interface Struct…

…ure for Hidden Column (#30188) ### Proposed Changes * Add tabs to the sidebard. ### Screenshots <img width="366" alt="image" src="https://github.com/user-attachments/assets/0e731578-ed35-40bc-bd70-c4675a51d370">
dotCMS · Sep 30, 2024 · 8ac8f64 · 8ac8f64
1 parent 43cd90a
commit 8ac8f64
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 37 deletions.
diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/utils/_theme-variables.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/utils/_theme-variables.scss
@@ -186,7 +186,7 @@ $tabview-item-color: $color-palette-gray-700;
 $tabview-item-selected-color: $color-palette-secondary;
 $tabview-item-padding: $spacing-3 $spacing-4 10px; // To match the 48px height
 $tabview-item-border: 3px solid $white;
-$tabview-item-border-height: 4px;
+$tabview-item-border-height: 2px;
 $tabview-item-selected-border: 5px solid $color-palette-secondary-500;
 $tabview-item-disabled-color: $color-palette-black-op-20;
 $tabview-nav-height: 48px;

diff --git a/...t-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html b/...t-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html
@@ -1,8 +1,41 @@
 <aside class="content-aside">
-    <div class="content-aside__toolbar">
-        <div class="tabs"></div>
+    <p-tabView>
+        <p-tabPanel [header]="'Info' | dm">
+            <section class="content-aside__section">
+                <div class="content-aside__header">
+                    <h2>{{ 'Information' | dm }}</h2>
+                </div>
+                <dot-content-aside-information
+                    [contentlet]="$contentlet()"
+                    [contentType]="$contentType()"
+                    [loading]="$loading()"
+                    data-testId="information" />
+            </section>
+
+            <section class="content-aside__section">
+                <div class="content-aside__header">
+                    <h2>{{ 'Workflow' | dm }}</h2>
+                    <div class="content-aside__icon">
+                        <i class="pi pi-history" aria-hidden="true"></i>
+                        <span>{{ 'show-all' | dm }}</span>
+                    </div>
+                </div>
+                <dot-content-aside-workflow
+                    [inode]="$contentlet()?.inode"
+                    [contentType]="$contentType()"
+                    data-testId="workflow" />
+            </section>
+        </p-tabPanel>
+        <!--        <p-tabPanel [header]="'History' | dm" >-->
+
+        <!--        </p-tabPanel>-->
+        <!--        <p-tabPanel [header]="'Settings' | dm">-->
+
+        <!--        </p-tabPanel>-->
+    </p-tabView>
+    <div class="content-aside__close">
         <button
-            class="p-button p-button-sm p-button-text p-button-rounded p-button-icon-only content-aside__closeBtn"
+            class="p-button p-button-sm p-button-text p-button-rounded p-button-icon-only"
             (click)="$toggle.emit(!$collapsed())"
             data-testId="toggle-button">
             <svg
@@ -35,29 +68,4 @@
             </svg>
         </button>
     </div>
-
-    <section class="content-aside__section">
-        <div class="content-aside__header">
-            <h2>{{ 'Information' | dm }}</h2>
-        </div>
-        <dot-content-aside-information
-            [contentlet]="$contentlet()"
-            [contentType]="$contentType()"
-            [loading]="$loading()"
-            data-testId="information" />
-    </section>
-
-    <section class="content-aside__section">
-        <div class="content-aside__header">
-            <h2>{{ 'Workflow' | dm }}</h2>
-            <div class="content-aside__icon">
-                <i class="pi pi-history" aria-hidden="true"></i>
-                <span>{{ 'show-all' | dm }}</span>
-            </div>
-        </div>
-        <dot-content-aside-workflow
-            [inode]="$contentlet()?.inode"
-            [contentType]="$contentType()"
-            data-testId="workflow" />
-    </section>
 </aside>
diff --git a/...t-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss b/...t-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss
@@ -10,19 +10,48 @@
     border-left: 1px solid $color-palette-gray-400;
     background: $color-palette-gray-100;
     box-shadow: $shadow-m;
+    position: relative;
+
+    ::ng-deep {
+        .p-tabview-nav-container {
+            border-bottom: 1px solid $color-palette-black-op-10;
+        }
+
+        .p-tabview {
+            .p-tabview-nav {
+                border: none;
+            }
+
+            .p-tabview-nav li .p-tabview-nav-link {
+                padding: 1.2rem $spacing-4 1.3rem;
+            }
+        }
+        .p-tabview-nav-content {
+            flex-grow: 1;
+            max-width: calc(100% - 4rem);
+        }
+    }
 }
 
 .content-aside {
     overflow: auto;
 }
 
-.p-button.content-aside__closeBtn {
-    rect {
-        stroke: $color-palette-primary;
-    }
+.content-aside__close {
+    position: absolute;
+    padding: $spacing-2;
+    top: 0;
+    right: 0;
+    border-left: 1px solid $color-palette-black-op-10;
 
-    path {
-        fill: $color-palette-primary;
+    button {
+        rect {
+            stroke: $color-palette-primary;
+        }
+
+        path {
+            fill: $color-palette-primary;
+        }
     }
 }
 

diff --git a/...ontent/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts b/...ontent/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts
@@ -10,7 +10,7 @@ import { DotContentAsideInformationComponent } from './components/dot-content-as
 import { DotContentAsideWorkflowComponent } from './components/dot-content-aside-workflow/dot-content-aside-workflow.component';
 import { DotEditContentAsideComponent } from './dot-edit-content-aside.component';
 
-import { CONTENT_FORM_DATA_MOCK } from '../../utils/mocks';
+import { CONTENT_FORM_DATA_MOCK, MockResizeObserver } from '../../utils/mocks';
 
 describe('DotEditContentAsideComponent', () => {
     let spectator: Spectator<DotEditContentAsideComponent>;
@@ -36,6 +36,9 @@ describe('DotEditContentAsideComponent', () => {
             }
         ]
     });
+    beforeAll(() => {
+        window.ResizeObserver = MockResizeObserver;
+    });
 
     beforeEach(() => {
         spectator = createComponent({

diff --git a/...dit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts b/...dit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts
@@ -1,5 +1,7 @@
 import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
 
+import { TabViewModule } from 'primeng/tabview';
+
 import { DotCMSContentType, DotCMSContentlet } from '@dotcms/dotcms-models';
 import { DotMessagePipe } from '@dotcms/ui';
 
@@ -12,7 +14,12 @@ import { DotContentAsideWorkflowComponent } from './components/dot-content-aside
     templateUrl: './dot-edit-content-aside.component.html',
     styleUrls: ['./dot-edit-content-aside.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [DotMessagePipe, DotContentAsideInformationComponent, DotContentAsideWorkflowComponent]
+    imports: [
+        DotMessagePipe,
+        DotContentAsideInformationComponent,
+        DotContentAsideWorkflowComponent,
+        TabViewModule
+    ]
 })
 export class DotEditContentAsideComponent {
     /**

diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -1805,6 +1805,7 @@ Hint=Hint
 HintHook=HintHook
 Hints=Hints
 History=History
+Settings=Settings
 Hit-Rate=Hit Rate
 Hold-down-ctrl-to-select-multiple-files=Click the following button and then select files from your computer.  (You may use the Ctrl (control) key on your keyboard to select multiple files)
 Home-Address=Home Address
@@ -5179,6 +5180,7 @@ Published=Published
 Modified=Modified
 Now=Now
 Information=Information
+Info=Info
 cluster-id=Cluster Id
 contenttypes.content.push_publish.filters=Filter
 download.bundle.header=Download Bundle