From 8ac8f64b4d1f9389d3aa453268d7e09a9337e78e Mon Sep 17 00:00:00 2001 From: Humberto Morera <31667212+hmoreras@users.noreply.github.com> Date: Mon, 30 Sep 2024 14:11:10 -0600 Subject: [PATCH] implementation (Edit Content): #30016 Develop Tabbed Interface Structure for Hidden Column (#30188) ### Proposed Changes * Add tabs to the sidebard. ### Screenshots image --- .../dotcms-theme/utils/_theme-variables.scss | 2 +- .../dot-edit-content-aside.component.html | 64 +++++++++++-------- .../dot-edit-content-aside.component.scss | 41 ++++++++++-- .../dot-edit-content-aside.component.spec.ts | 5 +- .../dot-edit-content-aside.component.ts | 9 ++- .../WEB-INF/messages/Language.properties | 2 + 6 files changed, 86 insertions(+), 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 index b235efdad82c..b63c0c22c2d4 100644 --- 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/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html index 21517c482a14..c49e1fd8885d 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html +++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.html @@ -1,8 +1,41 @@ diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss index ffbd8a07456f..1ce11b920704 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.scss +++ b/core-web/libs/edit-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/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts index 25146bf70c2c..bfdc050ff860 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.spec.ts +++ b/core-web/libs/edit-content/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; @@ -36,6 +36,9 @@ describe('DotEditContentAsideComponent', () => { } ] }); + beforeAll(() => { + window.ResizeObserver = MockResizeObserver; + }); beforeEach(() => { spectator = createComponent({ diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts index 32219aa25154..463cb18ed37d 100644 --- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts +++ b/core-web/libs/edit-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 index 7e0e51171d0c..c5c2fcb8cb3b 100644 --- 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