#25276 Code refactor for the new menu

dotCMS · Aug 3, 2023 · 9feffb5 · 9feffb5
1 parent d21b785
commit 9feffb5
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 34 deletions.
diff --git a/...ents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.html b/...ents/dot-edit-page-state-controller-seo/dot-edit-page-state-controller-seo.component.html
@@ -9,6 +9,7 @@
 
 <dot-tab-buttons
     [mode]="mode"
+    [options]="options"
     (eventOpen)="op.openMenu($event)"
     (changeState)="stateSelectorHandler($event.target.value)"
 ></dot-tab-buttons>

diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.html b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.html
@@ -1,30 +1,26 @@
 <div class="dot-tab-buttons">
-    <div style="position: relative">
-        <button
-            class="dot-tab-button"
-            [ngClass]="{ 'dot-tab-button-hover': mode === pageMode.EDIT }"
-            [value]="pageMode.EDIT"
-            (click)="onChangeState($event)"
-        >
-            Edit
-        </button>
-        <div class="dot-tab-buttons-select" *ngIf="mode === pageMode.EDIT"></div>
-    </div>
+    <div *ngFor="let item of options" style="position: relative">
+        <div class="dot-tab-container" (click)="onChangeState($event)">
+            <button
+                class="dot-tab-button"
+                [ngClass]="{
+                    'dot-tab-button-active': mode === item.value,
+                    'dot-tab-button__right': item.value === pageMode.PREVIEW
+                }"
+                [value]="item.value"
+                [disabled]="item.disabled"
+            >
+                {{ item.label }}
+            </button>
 
-    <div style="position: relative">
-        <div
-            class="dot-button-dropdown"
-            [ngClass]="{ 'dot-tab-button-hover': mode === pageMode.PREVIEW }"
-            (click)="onChangeState($event)"
-        >
-            <button class="dot-tab-button__right" [value]="pageMode.PREVIEW">Preview</button>
             <button
                 class="dot-tab-dropdown"
+                *ngIf="item.value === pageMode.PREVIEW"
                 [ngClass]="{ 'dot-tab-button-hover-dropdown': mode === pageMode.PREVIEW }"
             >
                 <i class="dot-tabs-dropdown-icon" [class]="icon"></i>
             </button>
         </div>
-        <div class="dot-tab-buttons-select" *ngIf="mode === pageMode.PREVIEW"></div>
+        <div class="dot-tab-buttons-select" *ngIf="mode === item.value"></div>
     </div>
 </div>
diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.scss b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.scss
@@ -7,6 +7,11 @@
     margin-right: 2rem;
 }
 
+.dot-tab-container {
+    display: flex;
+    position: relative;
+}
+
 .dot-tab-button {
     border: 1.5px solid $color-palette-gray-200;
     color: $color-palette-primary-500;
@@ -20,18 +25,9 @@
 }
 
 .dot-tab-button__right {
-    border: 1.5px solid $color-palette-gray-200;
-    color: $color-palette-primary-500;
-    background-color: transparent;
-    padding: 0 0.5rem 0 1rem;
-    height: 2.5rem;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
     border-right: 0;
-    border-top-left-radius: 0.375rem;
-    border-bottom-left-radius: 0.375rem;
-
-    &:hover {
-        background: $color-palette-primary-100;
-    }
 }
 
 .dot-tab-dropdown {
@@ -64,13 +60,15 @@
     position: absolute;
 }
 
-.dot-tab-button-hover {
+.dot-tab-button-active {
     background: $color-palette-primary-100;
     border-radius: 0.375rem;
     border: 0;
 
-    .dot-tab-button__right {
+    &.dot-tab-button__right {
         border: 1.5px solid $color-palette-primary-100;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
     }
 }
 

diff --git a/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.ts b/core-web/libs/ui/src/lib/dot-tab-buttons/dot-tab-buttons.component.ts
@@ -1,6 +1,7 @@
-import { NgClass, NgIf } from '@angular/common';
+import { CommonModule, NgClass, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
 
+import { SelectItem } from 'primeng/api';
 import { ButtonModule } from 'primeng/button';
 import { SplitButtonModule } from 'primeng/splitbutton';
 
@@ -9,7 +10,7 @@ import { DotPageMode } from '@dotcms/dotcms-models';
 @Component({
     selector: 'dot-tab-buttons',
     standalone: true,
-    imports: [SplitButtonModule, ButtonModule, NgIf, NgClass],
+    imports: [CommonModule, SplitButtonModule, ButtonModule, NgIf, NgClass],
     templateUrl: './dot-tab-buttons.component.html',
     styleUrls: ['./dot-tab-buttons.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -18,6 +19,7 @@ export class DotTabButtonsComponent {
     @Output() eventOpen = new EventEmitter();
     @Output() changeState = new EventEmitter();
     @Input() mode: DotPageMode;
+    @Input() options: SelectItem[];
     pageMode = DotPageMode;
     up = 'pi pi-angle-up';
     down = 'pi pi-angle-down';