fix: tuning menu layout - switch buttons

onecx · Dec 30, 2024 · 99869e0 · 99869e0
1 parent 56705a7
commit 99869e0
Showing 1 changed file with 32 additions and 32 deletions.
diff --git a/src/app/workspace/workspace-menu/menu.component.html b/src/app/workspace/workspace-menu/menu.component.html
@@ -121,23 +121,22 @@
       <!-- TABLE HEADER -->
       <ng-template pTemplate="header" let-columns>
         <tr id="ws_menu_table_header_row_1">
-          <th id="ws_menu_table_header_row_1_1" class="vertical-align-top text-left border-transparent">
-            <div class="slim-selectbutton filter-selectbutton">
-              <p-selectButton
-                inputid="ws_menu_table_header_row_1_switch_tree_label"
-                styleClass="data-view-control max-w-15rem flex flex flex-wrap row-gap-1"
-                [options]="treeNodeLabelSwitchItems"
-                [(ngModel)]="treeNodeLabelSwitchValue"
-                [disabled]="menuNodes.length === 0"
-                (onChange)="onTreeNodeLabelSwitchChange($event)"
-                [ariaLabel]="'DIALOG.MENU.HEADER.DISPLAYED_ITEM' | translate"
-                [pTooltip]="'DIALOG.MENU.HEADER.DISPLAYED_ITEM' | translate"
-                tooltipPosition="top"
-                tooltipEvent="hover"
-              >
-                <ng-template let-item pTemplate="item">{{ item.label }} </ng-template>
-              </p-selectButton>
-            </div>
+          <th id="ws_menu_table_header_row_1_1" class="pb-3 vertical-align-top text-left border-transparent">
+            <p-toggleButton
+              inputId="ws_menu_table_header_tree_toggle"
+              styleClass="white-space-nowrap"
+              [onIcon]="'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
+              [offIcon]="'pi pi-arrow-up-right-and-arrow-down-left-from-center'"
+              [onLabel]="'ACTIONS.TREE.COLLAPSE_ALL' | translate"
+              [offLabel]="'ACTIONS.TREE.EXPAND_ALL' | translate"
+              [(ngModel)]="treeExpanded"
+              [disabled]="menuNodes.length === 0"
+              (onChange)="onToggleTreeViewMode($event)"
+              [ariaLabel]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
+              [pTooltip]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
+              tooltipPosition="top"
+              tooltipEvent="hover"
+            />
           </th>
           <th
             id="ws_menu_table_header_row_1_2"
@@ -182,21 +181,22 @@
         <!-- ROW 2 -->
         <tr id="ws_menu_table_header_row_2">
           <th id="ws_menu_table_header_row_2_1" class="pr-4 vertical-align-bottom border-transparent border-bottom-2">
-            <p-toggleButton
-              inputId="ws_menu_table_header_tree_toggle"
-              styleClass="white-space-nowrap"
-              [onIcon]="'pi pi-arrow-down-left-and-arrow-up-right-to-center'"
-              [offIcon]="'pi pi-arrow-up-right-and-arrow-down-left-from-center'"
-              [onLabel]="'ACTIONS.TREE.COLLAPSE_ALL' | translate"
-              [offLabel]="'ACTIONS.TREE.EXPAND_ALL' | translate"
-              [(ngModel)]="treeExpanded"
-              [disabled]="menuNodes.length === 0"
-              (onChange)="onToggleTreeViewMode($event)"
-              [ariaLabel]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
-              [pTooltip]="'ACTIONS.TREE.EXPAND_ALL.TOOLTIP' | translate"
-              tooltipPosition="top"
-              tooltipEvent="hover"
-            />
+            <div class="slim-selectbutton filter-selectbutton">
+              <p-selectButton
+                inputid="ws_menu_table_header_row_1_switch_tree_label"
+                styleClass="data-view-control max-w-15rem flex flex flex-wrap row-gap-1"
+                [options]="treeNodeLabelSwitchItems"
+                [(ngModel)]="treeNodeLabelSwitchValue"
+                [disabled]="menuNodes.length === 0"
+                (onChange)="onTreeNodeLabelSwitchChange($event)"
+                [ariaLabel]="'DIALOG.MENU.HEADER.DISPLAYED_ITEM' | translate"
+                [pTooltip]="'DIALOG.MENU.HEADER.DISPLAYED_ITEM' | translate"
+                tooltipPosition="top"
+                tooltipEvent="hover"
+              >
+                <ng-template let-item pTemplate="item">{{ item.label }} </ng-template>
+              </p-selectButton>
+            </div>
           </th>
           <!-- ROW 2: DETAIL Columns -->
           <ng-container *ngIf="!displayRoles">