Fix: dropdown layout in menu detail (#478)

* fix: improve layout of dropdowns in menu detail * fix: improve cleaning project
onecx · Jan 8, 2025 · 56b99cd · 56b99cd
1 parent 3bbfa14
commit 56b99cd
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "scripts": {
     "build": "ng build",
     "check": "ng lint --cache=true && npx prettier -c --cache .",
-    "clean": "npm cache clean --force && ng cache clean && rm -f .eslintcache && rm -f ./node_modules/.cache/prettier/.prettier-cache",
+    "clean": "npm cache clean --force && ng cache clean && rm -rf dist reports .angular .eslintcache ./node_modules/.cache/prettier/.prettier-cache",
     "lint": "ng lint --cache=true",
     "format": "ng lint --fix",
     "eslint": "eslint --quiet --ext .js,.ts src",

diff --git a/src/app/workspace/workspace-menu/menu-detail/menu-detail.component.html b/src/app/workspace/workspace-menu/menu-detail/menu-detail.component.html
@@ -1,4 +1,5 @@
 <p-dialog
+  #menuDetailDialog
   [header]="'DIALOG.MENU.HEADER.' + changeMode | translate"
   [(visible)]="displayDetailDialog"
   (onHide)="onCloseDetailDialog()"
@@ -139,23 +140,23 @@
                 formControlName="badge"
                 [showClear]="true"
                 [options]="iconItems"
-                scrollHeight="150px"
+                [appendTo]="'body'"
                 [showClear]="true"
                 [ariaLabel]="'MENU_ITEM.BADGE' | translate"
                 [pTooltip]="'MENU_ITEM.TOOLTIP.BADGE' | translate"
                 tooltipPosition="top"
                 tooltipEvent="hover"
               >
-                <ng-template let-ico pTemplate="selectedItem">
-                  <div class="flex">
-                    <span class="pi pi-{{ ico.value }} mr-3"> </span>
-                    <span>{{ ico.label }}</span>
+                <ng-template let-icon pTemplate="selectedItem">
+                  <div class="flex align-items-center">
+                    <span class="pi pi-{{ icon.value }} mr-3"> </span>
+                    <span>{{ icon.label }}</span>
                   </div>
                 </ng-template>
-                <ng-template let-ico pTemplate="item">
-                  <div class="flex">
-                    <span class="pi pi-{{ ico.value }} mr-3"> </span>
-                    <span>{{ ico.label }}</span>
+                <ng-template let-icon pTemplate="item">
+                  <div class="flex align-items-center">
+                    <span class="pi pi-{{ icon.value }} mr-3"> </span>
+                    <span>{{ icon.label }}</span>
                   </div>
                 </ng-template>
               </p-dropdown>

diff --git a/src/app/workspace/workspace-menu/menu-detail/menu-detail.component.scss b/src/app/workspace/workspace-menu/menu-detail/menu-detail.component.scss
@@ -2,6 +2,7 @@
 
 @include danger-action;
 @include compact-dropdown-list-items;
+@include dropdown-zebra-rows;
 @include correct-autocomplete;
 @include correct-select-button;
 @include search-criteria-select-button-slim;