fix(containers): [Containers] : Fix #25808 UI Issues in the Portlet

* Fixed UI issues on containers portlet * Fixed UI issues on Containers portlet * Removed important sentence on scss files --------- Co-authored-by: Kevin D <kevin.davila@dotcms> Co-authored-by: Freddy Montes <[email protected]>
dotCMS · Sep 15, 2023 · c1c1e03 · c1c1e03
1 parent 2dd1d9c
commit c1c1e03
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 106 deletions.
diff --git a/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html b/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.html
@@ -11,12 +11,11 @@ <h3>{{ variable?.name }}</h3>
             </div>
 
             <button
-                class="p-button-outlined p-button-secondary p-button-sm"
+                class="p-button-outlined p-button-primary p-button-sm"
                 [attr.data-testId]="variable.variable"
                 [label]="'Add' | dm"
                 (click)="onSave(variable.variable)"
-                pButton
-            ></button>
+                pButton></button>
         </div>
     </ng-template>
 </p-dataView>
diff --git a/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.scss b/.../dot-container-create/dot-container-code/dot-add-variable/dot-add-variable.component.scss
@@ -26,4 +26,8 @@
     flex-basis: 100%;
     padding: $spacing-3 $spacing-6;
     justify-content: space-between;
+
+    button {
+        align-self: center;
+    }
 }
diff --git a/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.html b/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.html
@@ -1,73 +1,62 @@
 <div class="dot-container-code__content-tab-container" [formGroup]="fg">
     <div class="field mb-0">
-        <label class="block" dotFieldRequired>{{
-            'message.containers.create.content_type_code' | dm
-        }}</label>
+        <label class="block" dotFieldRequired>
+            {{ 'message.containers.create.content_type_code' | dm }}
+        </label>
     </div>
     <p-tabView
         [@contentCodeAnimation]
         [(activeIndex)]="activeTabIndex"
         [scrollable]="true"
         [controlClose]="true"
         (onChange)="handleTabClick($event, $event.index)"
-        (onClose)="removeItem($event.index)"
-    >
+        (onClose)="removeItem($event.index)">
         <p-tabPanel headerStyleClass="tab-panel-btn">
             <ng-template pTemplate="header">
                 <i
                     class="pi pi-plus pr-3 pl-3"
                     *ngIf="contentTypes.length > 0; else contentTypesLoader"
-                    (click)="handleTabClick($event); actionsMenu.toggle($event)"
-                ></i>
+                    (click)="handleTabClick($event); actionsMenu.toggle($event)"></i>
                 <ng-template #contentTypesLoader>
                     <p-skeleton borderRadius="0px" width="3rem" height="3.75rem"></p-skeleton>
                 </ng-template>
                 <p-menu #actionsMenu [popup]="true" [model]="menuItems" appendTo="body"></p-menu>
             </ng-template>
             <ng-template pTemplate="content">
                 <div
-                    class="dot-container-code__empty-content flex justify-content-center align-items-center flex-column"
-                >
+                    class="dot-container-code__empty-content flex justify-content-center align-items-center flex-column">
                     <dot-icon data-testId="code" name="code" size="100"></dot-icon>
                     <div
                         class="dot-container-code__empty-content-title"
-                        data-testId="empty-content-title"
-                    >
+                        data-testId="empty-content-title">
                         {{ 'message.containers.empty.content_type_message' | dm }}
                     </div>
                     <div
                         class="dot-container-code__empty-content-subtitle mb-1"
-                        data-testId="empty-content-subtitle"
-                    >
+                        data-testId="empty-content-subtitle">
                         {{ 'message.containers.empty.content_type_need_help' | dm }}?
-                        <a href="https://www.dotcms.com/docs/latest/containers" target="_blank">{{
-                            'message.containers.empty.content_type_go_to_documentation' | dm
-                        }}</a>
+                        <a href="https://www.dotcms.com/docs/latest/containers" target="_blank">
+                            {{ 'message.containers.empty.content_type_go_to_documentation' | dm }}
+                        </a>
                     </div>
                 </div>
             </ng-template>
         </p-tabPanel>
         <p-tabPanel
             *ngFor="let containerContent of getcontainerStructures.controls; let i = index"
             [closable]="true"
-            formArrayName="containerStructures"
-        >
+            formArrayName="containerStructures">
             <ng-template pTemplate="header">
-                <ng-container *ngIf="contentTypes.length > 0; else headerLoader">
-                    {{ contentTypeNamesById[containerContent.value.structureId] }}
-                </ng-container>
-                <ng-template #headerLoader>
-                    <p-skeleton borderRadius="0px" width="3rem" height="1.2rem"></p-skeleton>
-                </ng-template>
+                {{ contentTypeNamesById[containerContent.value.structureId] }}
             </ng-template>
+
             <div [formGroupName]="i">
                 <button
                     class="p-button-outlined dot-container-code__variable-btn ml-3 mb-2 mt-2 p-button-sm"
                     [label]="'add-variable' | dm"
                     [disabled]="contentTypes.length === 0"
                     (click)="handleAddVariable(containerContent.value)"
-                    pButton
-                ></button>
+                    pButton></button>
                 <dot-textarea-content
                     #body
                     [attr.data-testid]="containerContent.value.structureId"
@@ -77,8 +66,7 @@
                     [customStyles]="{ border: 'none', height: '500px' }"
                     (monacoInit)="monacoInit($event)"
                     formControlName="code"
-                    language="html"
-                ></dot-textarea-content>
+                    language="html"></dot-textarea-content>
             </div>
         </p-tabPanel>
     </p-tabView>

diff --git a/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.scss b/.../dot-containers/dot-container-create/dot-container-code/dot-container-code.component.scss
@@ -28,6 +28,7 @@
     .p-tabview {
         height: 100%;
     }
+
     .p-tabview-panels {
         height: 100%;
         flex-grow: 1;
@@ -38,6 +39,7 @@
     .p-tabview-nav-content {
         border: 1px solid $input-border-color;
     }
+
     .p-tabview-nav {
         padding: 0;
     }
@@ -64,10 +66,6 @@
         background: $color-palette-gray-200;
     }
 
-    .p-tabview .p-tabview-nav {
-        border: none;
-    }
-
     .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
         border-bottom: 2px solid $color-palette-secondary-500;
     }
@@ -76,9 +74,18 @@
         border-bottom: 2px solid $color-palette-secondary-500;
     }
 
+    .p-tabview
+        .p-tabview-nav
+        li:not(.p-highlight):not(.p-disabled):hover:first-child
+        .p-tabview-nav-link {
+        border-bottom: none;
+        background: $color-palette-primary-500;
+    }
+
     .p-tabview .p-tabview-nav li .p-tabview-nav-link {
         padding-left: $spacing-4;
         padding-right: $spacing-4;
+        text-wrap: nowrap;
     }
 
     .p-tabview .tab-panel-btn a.p-tabview-nav-link {

diff --git a/...ers/dot-container-create/dot-container-properties/dot-container-properties.component.html b/...ers/dot-container-create/dot-container-properties/dot-container-properties.component.html
@@ -2,52 +2,40 @@
     <form [formGroup]="form">
         <div class="dot-container-properties__button-container">
             <button
-                class="p-button-outlined p-button-sm"
+                class="p-button-outlined p-button-md"
                 [label]="'Cancel' | dm"
                 (click)="cancel()"
                 pButton
-                type="button"
-            ></button>
+                type="button"></button>
             <button
-                class="p-button-primary p-button-sm"
+                class="p-button-primary p-button-md"
                 [disabled]="vm.invalidForm"
                 [label]="'Save' | dm"
                 (click)="save()"
                 data-testId="saveBtn"
                 pButton
-                type="submit"
-            ></button>
+                type="submit"></button>
         </div>
         <div class="dot-container-properties__title-container">
-            <p-inplace #editText [active]="!form?.value?.identifier" data-testId="inplace">
-                <ng-template pTemplate="content">
-                    <span class="p-input-icon-right">
-                        <i class="pi pi-times" (click)="editText.deactivate()"></i>
-                        <input
-                            class="dot-container-properties__title-input w-25rem"
-                            [required]="true"
-                            data-testId="title"
-                            dotAutofocus
-                            type="text"
-                            pInputText
-                            formControlName="title"
-                        />
-                    </span>
-                </ng-template>
-                <ng-template pTemplate="display">
-                    <span
-                        class="dot-container-properties__title-text"
-                        *ngIf="!form?.value?.title"
-                        data-testId="editTitle"
-                        >{{ 'message.containers.create.click_to_edit' | dm }}</span
-                    >
-                    <span class="dot-container-properties__title-text" *ngIf="form?.value?.title">{{
-                        form?.value?.title
-                    }}</span>
-                    <i class="pi pi-pencil"></i>
-                </ng-template>
-            </p-inplace>
-            <dot-api-link *ngIf="form?.value?.identifier" [href]="vm.apiLink"></dot-api-link>
+            <div class="field">
+                <label class="block" for="title">{{
+                    'message.containers.create.title' | dm
+                }}</label>
+                <div class="dot-container-properties__title-container-content">
+                    <input
+                        class="dot-container-properties__title-input w-25rem"
+                        id="title"
+                        [required]="true"
+                        data-testId="title"
+                        dotAutofocus
+                        type="text"
+                        pInputText
+                        formControlName="title" />
+                    <dot-api-link
+                        *ngIf="form?.value?.identifier"
+                        [href]="vm.apiLink"></dot-api-link>
+                </div>
+            </div>
         </div>
         <div class="field">
             <label class="block" for="description">{{
@@ -59,8 +47,7 @@
                 data-testId="description"
                 type="text"
                 formControlName="friendlyName"
-                pInputText
-            />
+                pInputText />
         </div>
         <div class="field">
             <label class="block" dotFieldRequired for="max-contents">{{
@@ -74,37 +61,32 @@
                 type="number"
                 min="0"
                 formControlName="maxContentlets"
-                pInputText
-            />
+                pInputText />
             <button
                 class="p-button-info dot-container-properties__button-clear"
                 *ngIf="vm.isContentTypeVisible"
                 [label]="'message.containers.create.clear' | dm"
                 (click)="clearContentConfirmationModal()"
                 data-testId="clearContent"
                 pButton
-                type="button"
-            ></button>
+                type="button"></button>
         </div>
 
         <div
             class="dot-container-properties__code-loop-container"
             *ngIf="vm.isContentTypeVisible"
-            [@contentTypeAnimation]
-        >
+            [@contentTypeAnimation]>
             <dot-loop-editor
                 [isEditorVisible]="vm.showPrePostLoopInput"
                 (buttonClick)="showLoopInput()"
                 label="pre_loop"
-                formControlName="preLoop"
-            ></dot-loop-editor>
+                formControlName="preLoop"></dot-loop-editor>
             <dot-container-code [contentTypes]="vm.contentTypes" [fg]="form"></dot-container-code>
             <dot-loop-editor
                 [isEditorVisible]="vm.showPrePostLoopInput"
                 (buttonClick)="showLoopInput()"
                 formControlName="postLoop"
-                label="post_loop"
-            ></dot-loop-editor>
+                label="post_loop"></dot-loop-editor>
         </div>
         <div class="field" *ngIf="!vm.isContentTypeVisible">
             <label class="block" dotFieldRequired for="code">Code</label>
@@ -113,8 +95,7 @@
                 [show]="['code']"
                 data-testId="code"
                 formControlName="code"
-                language="html"
-            ></dot-textarea-content>
+                language="html"></dot-textarea-content>
         </div>
     </form>
 </ng-container>
diff --git a/...ers/dot-container-create/dot-container-properties/dot-container-properties.component.scss b/...ers/dot-container-create/dot-container-properties/dot-container-properties.component.scss
@@ -2,7 +2,7 @@
 
 .dot-container-properties__button-container {
     position: absolute;
-    top: 5.1rem;
+    top: 4.4rem;
     right: $spacing-4;
 
     button {
@@ -17,14 +17,10 @@
     padding: $spacing-2 0;
     align-items: center;
 
-    ::ng-deep .p-inplace.p-component {
+    &-content {
         display: flex;
         align-items: center;
-        justify-content: center;
-    }
-
-    ::ng-deep .p-inplace-display {
-        padding: 0.67rem $spacing-3;
+        gap: $spacing-2;
     }
 }
 
@@ -35,7 +31,6 @@
 }
 
 .dot-container-properties__max-contents-input {
-    width: 7rem;
     margin-right: $spacing-2;
 }
 
@@ -52,8 +47,9 @@
 }
 
 :host ::ng-deep {
-    .tab-panel-btn {
-        background: $brand-background;
+    .tab-panel-btn,
+    .tab-panel-btn:hover {
+        background: $color-palette-primary-500;
 
         a.p-tabview-nav-link {
             padding: 0;

diff --git a/...rtlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss b/...rtlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.scss
@@ -10,6 +10,6 @@
         align-items: center;
         justify-content: center;
         background: #e9ebfc;
-        height: 140px;
+        height: 167px;
     }
 }
diff --git a/...portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts b/...portlets/dot-containers/dot-container-create/dot-loop-editor/dot-loop-editor.component.ts
@@ -26,10 +26,6 @@ export class DotLoopEditorComponent implements ControlValueAccessor, OnInit {
 
     public readonly loopControl = new FormControl('');
 
-    constructor() {
-        //
-    }
-
     public ngOnInit(): void {
         this.loopControl.valueChanges.subscribe((fieldVal) => {
             this._onChange(fieldVal);

diff --git a/...rc/app/view/components/dot-content-type-selector/dot-content-type-selector.component.html b/...rc/app/view/components/dot-content-type-selector/dot-content-type-selector.component.html
@@ -1,6 +1,6 @@
 <p-dropdown
     [options]="options$ | async"
-    [style]="{ width: '155px' }"
+    [style]="{ 'min-width': '155px' }"
     [filter]="true"
     [showClear]="true"
     [resetFilterOnHide]="true"