fix: unify modal dialog layout, fix various things

onecx · Oct 13, 2024 · 4b1eb1b · 4b1eb1b
1 parent 40698b2
commit 4b1eb1b
Show file tree

Hide file tree

Showing 26 changed files with 236 additions and 144 deletions.
diff --git a/src/app/_ws-mixins.scss b/src/app/_ws-mixins.scss
@@ -460,16 +460,16 @@
     }
   }
 }
-@mixin dialog-non-full-size-modal {
+@mixin dialog-modal-disable-full-height {
   :host ::ng-deep {
     @media (max-width: 991px) {
-      .p-dialog.p-dialog {
+      .p-dialog.disable-max-height-preset.p-dialog {
         max-height: unset !important;
         height: unset !important;
       }
     }
     @media (max-width: 576px) {
-      .p-dialog.p-dialog {
+      .p-dialog.disable-max-height-preset.p-dialog {
         max-height: inherit !important;
         height: inherit !important;
       }
@@ -491,6 +491,15 @@
     }
   }
 }
+@mixin tabview-fix-color-selected-tab {
+  :host ::ng-deep {
+    // correct the background color on inital selected tab
+    .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link[aria-selected='true'] {
+      background-color: rgba(var(--primary-color-rgb), 0.12);
+    }
+  }
+}
+
 /* **********************************************
  *  TABLE
  * **********************************************/
@@ -566,3 +575,21 @@
     }
   }
 }
+
+/* flex content side-by-side requires a bit smaller width
+*/
+@mixin flex-width-media-queries {
+  :host ::ng-deep {
+    @media screen and (min-width: 768px) {
+      .sm\:w-5x {
+        width: 40% !important; // org: 41.6667%
+      }
+      .sm\:w-6x {
+        width: 48% !important; // org: 50%
+      }
+      .sm\:w-7x {
+        width: 56% !important; // org: 58.3333%
+      }
+    }
+  }
+}
diff --git a/src/app/workspace/workspace-create/workspace-create.component.html b/src/app/workspace/workspace-create/workspace-create.component.html
@@ -1,16 +1,20 @@
 <p-dialog
   [header]="'ACTIONS.CREATE.WORKSPACE' | translate"
   [(visible)]="displayDialog"
-  [baseZIndex]="10000"
+  [modal]="true"
+  [closable]="true"
   [draggable]="true"
   [resizable]="true"
-  [modal]="true"
+  [dismissableMask]="true"
+  [contentStyle]="{ overflow: 'auto' }"
   [style]="{ width: '700px' }"
+  styleClass="disable-max-height-preset"
+  [breakpoints]="{ '991px': '700px' }"
 >
   <form [formGroup]="formGroup">
     <div class="flex flex-wrap flex-column gap-4 justify-content-between">
-      <div>
-        <span class="p-float-label mt-1" controlErrorAnchor>
+      <div class="mt-1 flex flex-row flex-wrap gap-3 justify-content-between align-items-center">
+        <span class="p-float-label w-12 sm:w-5x" controlErrorAnchor>
           <input
             pInputText
             type="text"
@@ -23,9 +27,7 @@
           />
           <label class="ocx-required-label" for="ws_create_item_name"> {{ 'WORKSPACE.NAME' | translate }} </label>
         </span>
-      </div>
-      <div>
-        <span class="p-float-label" controlErrorAnchor>
+        <span class="p-float-label w-12 sm:w-7x" controlErrorAnchor>
           <input
             pInputText
             type="text"
@@ -42,8 +44,8 @@
         </span>
       </div>
 
-      <div>
-        <span class="p-float-label">
+      <div class="flex flex-row flex-wrap gap-3 justify-content-between align-items-center">
+        <span class="p-float-label w-12 sm:w-5x">
           <p-dropdown
             id="ws_create_item_theme"
             formControlName="theme"
@@ -56,6 +58,24 @@
           </p-dropdown>
           <label class="ocx-required-label" for="ws_create_item_theme"> {{ 'WORKSPACE.THEME' | translate }} </label>
         </span>
+        <div class="p-inputgroup w-12 sm:w-7x" controlErrorAnchor>
+          <span class="p-float-label">
+            <p-dropdown
+              #inputHomePage
+              id="ws_create_form_home_page"
+              formControlName="homePage"
+              styleClass="w-full inputgroup-dropdown-with-link input-field-correction"
+              [options]="mfeRList"
+              [editable]="true"
+              [attr.aria-label]="'WORKSPACE.HOME_PAGE' | translate"
+              [pTooltip]="'WORKSPACE.TOOLTIPS.HOME_PAGE' | translate"
+              tooltipPosition="top"
+              tooltipEvent="hover"
+            >
+            </p-dropdown>
+            <label for="ws_create_form_home_page"> {{ 'WORKSPACE.HOME_PAGE' | translate }} </label>
+          </span>
+        </div>
       </div>
 
       <div>
@@ -77,25 +97,6 @@
         </label>
       </div>
 
-      <div class="p-inputgroup mb-1" controlErrorAnchor>
-        <span class="p-float-label">
-          <p-dropdown
-            #inputHomePage
-            id="ws_create_form_home_page"
-            formControlName="homePage"
-            styleClass="w-full inputgroup-dropdown-with-link input-field-correction"
-            [options]="mfeRList"
-            [editable]="true"
-            [attr.aria-label]="'WORKSPACE.HOME_PAGE' | translate"
-            [pTooltip]="'WORKSPACE.TOOLTIPS.HOME_PAGE' | translate"
-            tooltipPosition="top"
-            tooltipEvent="hover"
-          >
-          </p-dropdown>
-          <label for="ws_create_form_home_page"> {{ 'WORKSPACE.HOME_PAGE' | translate }} </label>
-        </span>
-      </div>
-
       <div class="flex flex-wrap sm:flex-nowrap align-items-center row-gap-2 column-gap-4">
         <app-image-container
           [id]="'ws_create_item_logo_image'"

diff --git a/src/app/workspace/workspace-create/workspace-create.component.scss b/src/app/workspace/workspace-create/workspace-create.component.scss
@@ -2,3 +2,5 @@
 
 @include displaying-text-responsive;
 @include dialog-footer-buttons;
+@include dialog-modal-disable-full-height;
+@include flex-width-media-queries;
diff --git a/src/app/workspace/workspace-detail/workspace-detail.component.html b/src/app/workspace/workspace-detail/workspace-detail.component.html
@@ -118,14 +118,16 @@
   [(visible)]="workspaceDeleteVisible"
   [header]="'DIALOG.WORKSPACE.HEADER.DELETE' | translate"
   [modal]="true"
+  [closable]="true"
+  [draggable]="true"
   [resizable]="false"
   [dismissableMask]="true"
-  [style]="{ 'max-width': '425px' }"
+  styleClass="disable-max-height-preset"
 >
   <div class="flex column-gap-3 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-question-circle text-3xl danger-action-text"></div>
     <div>
-      <div>{{ this.workspaceDeleteMessage }}</div>
+      <div class="font-bold" id="ws_delete_message">{{ this.workspaceDeleteMessage }}</div>
       <div class="mt-2">{{ 'ACTIONS.DELETE.MESSAGE_INFO' | translate }}</div>
     </div>
   </div>

diff --git a/src/app/workspace/workspace-detail/workspace-detail.component.scss b/src/app/workspace/workspace-detail/workspace-detail.component.scss
@@ -8,14 +8,10 @@
 @include displaying-text-responsive;
 @include readable-disabled-form-controls;
 @include dialog-footer-buttons;
+@include dialog-modal-disable-full-height;
+@include tabview-fix-color-selected-tab;
 
 :host ::ng-deep {
-  @media (max-width: 991px) {
-    .p-dialog.p-dialog {
-      max-height: unset !important;
-      height: unset !important;
-    }
-  }
   .max-w-11 {
     max-width: 90%;
   }

diff --git a/src/app/workspace/workspace-detail/workspace-export/workspace-export.component.html b/src/app/workspace/workspace-detail/workspace-export/workspace-export.component.html
@@ -5,8 +5,10 @@
   [resizable]="true"
   [draggable]="true"
   [dismissableMask]="true"
+  [style]="{ width: '400px' }"
+  styleClass="disable-max-height-preset"
 >
-  <div class="flex flex-row flex-wrap column-gap-4 row-gap-1 justify-content-start align-items-center">
+  <div class="flex flex-row flex-nowrap column-gap-4 row-gap-1 justify-content-start align-items-center">
     <div class="pi pi-download text-3xl"></div>
     <div class="flex flex-column row-gap-3 mt-2">
       <div>{{ 'ACTIONS.EXPORT.WORKSPACE' | translate }}</div>

diff --git a/src/app/workspace/workspace-detail/workspace-export/workspace-export.component.scss b/src/app/workspace/workspace-detail/workspace-export/workspace-export.component.scss
diff --git a/src/app/workspace/workspace-detail/workspace-intern/workspace-intern.component.html b/src/app/workspace/workspace-detail/workspace-intern/workspace-intern.component.html
@@ -35,7 +35,7 @@
           pInputText
           type="text"
           readonly
-          id="ws_detail_intern_intern_item_name"
+          id="ws_detail_intern_item_name"
           class="w-full pt-3 pb-2 text-responsive"
           [value]="workspace.name"
           [pTooltip]="'WORKSPACE.TOOLTIPS.NAME' | translate"
@@ -53,7 +53,7 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_intern_intern_item_creation-date"
+            id="ws_detail_intern_item_creation-date"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.creationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_DATE' | translate"
@@ -70,7 +70,7 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_intern_intern_item_creation-user"
+            id="ws_detail_intern_item_creation-user"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.creationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.CREATION_USER' | translate"
@@ -89,7 +89,7 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_intern_intern_item_modification-date"
+            id="ws_detail_intern_item_modification-date"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.modificationDate | date: dateFormat"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_DATE' | translate"
@@ -106,7 +106,7 @@
             pInputText
             type="text"
             readonly
-            id="ws_detail_intern_intern_item_modification-user"
+            id="ws_detail_intern_item_modification-user"
             class="w-full pt-3 pb-2 text-responsive"
             [value]="workspace.modificationUser"
             [pTooltip]="'INTERNAL.TOOLTIPS.MODIFICATION_USER' | translate"

diff --git a/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.scss b/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.scss
@@ -5,6 +5,7 @@
 @include search-criteria-select-button-slim;
 @include search-criteria-select-button-filter;
 @include float-label-textbox;
+@include dialog-modal-disable-full-height;
 
 :host ::ng-deep {
   .h-2-5rem {

diff --git a/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.ts b/src/app/workspace/workspace-detail/workspace-roles/workspace-roles.component.ts
@@ -53,7 +53,7 @@ export class WorkspaceRolesComponent implements OnInit, OnChanges {
   public iamRolesLoaded = false
   public wRolesLoaded = false
   public exceptionKey: string | undefined
-  public quickFilterValue: RoleFilterType = 'WORKSPACE'
+  public quickFilterValue: RoleFilterType = 'ALL'
   public quickFilterValue2: RoleFilterType = 'WORKSPACE'
   public quickFilterItems: ExtendedSelectItem[]
   public quickFilterCount = ''
@@ -93,7 +93,7 @@ export class WorkspaceRolesComponent implements OnInit, OnChanges {
   }
 
   public ngOnChanges(changes: SimpleChanges): void {
-    if (this.workspace && changes['workspace']) this.searchRoles()
+    if (this.workspace && changes['workspace']) this.searchRoles(true)
   }
 
   /**
@@ -185,7 +185,8 @@ export class WorkspaceRolesComponent implements OnInit, OnChanges {
     this.roles = []
     this.wRolesLoaded = false
     this.iamRolesLoaded = false
-    this.searchRoles()
+    this.quickFilterValue = 'ALL'
+    this.searchRoles(true)
   }
 
   public onAddRole(ev: MouseEvent, role: Role): void {