From b5691cfbc896733909a1726d8b6f687b60b8c564 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 2 Sep 2024 15:42:15 -0700
Subject: [PATCH] layout, styling, nesting fixes

---
 src-ui/src/app/app.module.ts                  |  4 ++++
 ...ustom-fields-query-dropdown.component.html | 23 +++++++++----------
 ...ustom-fields-query-dropdown.component.scss |  8 ++++---
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts
index 737d1f9cf..93c458ae0 100644
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -142,6 +142,7 @@ import {
   arrowRightShort,
   arrowUpRight,
   asterisk,
+  braces,
   bodyText,
   boxArrowUp,
   boxArrowUpRight,
@@ -199,6 +200,7 @@ import {
   link,
   listTask,
   listUl,
+  nodePlus,
   pencil,
   people,
   peopleFill,
@@ -244,6 +246,7 @@ const icons = {
   arrowRightShort,
   arrowUpRight,
   asterisk,
+  braces,
   bodyText,
   boxArrowUp,
   boxArrowUpRight,
@@ -301,6 +304,7 @@ const icons = {
   link,
   listTask,
   listUl,
+  nodePlus,
   pencil,
   people,
   peopleFill,
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
index 5c3b4e415..ef63881b9 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.html
@@ -9,10 +9,10 @@
   <div class="dropdown-menu px-3 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
     <div class="btn-group my-2 w-100">
       <button type="button" class="btn btn-sm btn-outline-primary" (click)="addAtom()" [disabled]="disabled">
-        <i-bs name="plus"></i-bs>&nbsp;Add query
+        <i-bs name="node-plus"></i-bs>&nbsp;Add query
       </button>
       <button type="button" class="btn btn-sm btn-outline-primary" (click)="addExpression()" [disabled]="disabled">
-        <i-bs name="plus"></i-bs>&nbsp;Add expression
+        <i-bs name="braces"></i-bs>&nbsp;Add expression
       </button>
     </div>
     <div class="list-group list-group-flush">
@@ -26,9 +26,6 @@
               <ng-container *ngTemplateOutlet="queryExpression; context: { query: query }"></ng-container>
             }
           }
-          <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
-            <i-bs name="x-circle"></i-bs>
-          </button>
         </div>
       }
     </div>
@@ -38,7 +35,6 @@
 <ng-template #queryAtom let-query="query">
   <div class="input-group input-group-sm">
     <ng-select
-      class="w-40"
       [items]="customFields"
       [(ngModel)]="query.field"
       [disabled]="disabled"
@@ -50,20 +46,23 @@
     </select>
     @switch (query.operator) {
       @case ('exists') {
-        <select class="w-25 form-select" [(ngModel)]="query.value" [disabled]="disabled">
+        <select class="w-25 form-select rounded-end" [(ngModel)]="query.value" [disabled]="disabled">
           <option value="true" i18n>true</option>
           <option value="false" i18n>false</option>
         </select>
       }
       @default {
-        <input class="w-25 form-control" type="text" [(ngModel)]="query.value" [disabled]="disabled">
+        <input class="w-25 form-control rounded-end" type="text" [(ngModel)]="query.value" [disabled]="disabled">
       }
     }
+    <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
+      <i-bs name="x-circle"></i-bs>
+    </button>
   </div>
 </ng-template>
 
 <ng-template #queryExpression let-query="query">
-  <div class="d-flex flex-column border border-primary rounded p-2 mt-2">
+  <div class="d-flex flex-column border border-primary rounded px-2 pt-2">
     <div class="btn-group btn-group-xs" role="group">
       <input [(ngModel)]="query.operator" type="radio" class="btn-check" id="logicalOperatorAnd_{{query.field}}" name="logicalOperatorAnd_{{query.field}}" value="AND">
       <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{query.field}}" i18n>And</label>
@@ -81,11 +80,11 @@
               <ng-container *ngTemplateOutlet="queryExpression; context: { query: subquery }"></ng-container>
             }
           }
-          <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(subquery)" [disabled]="disabled">
-            <i-bs name="x-circle"></i-bs>
-          </button>
         </div>
       }
     </div>
   </div>
+  <button class="btn btn-link btn-sm text-danger pe-0" type="button" (click)="removeComponent(query)" [disabled]="disabled">
+    <i-bs name="x-circle"></i-bs>
+  </button>
 </ng-template>
diff --git a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
index 7f49cb1e2..cb90fbcad 100644
--- a/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
+++ b/src-ui/src/app/components/common/custom-fields-query-dropdown/custom-fields-query-dropdown.component.scss
@@ -1,5 +1,5 @@
 .dropdown-menu {
-  width: 500px;
+  width: 450px;
 }
 
 ::ng-deep .ng-select-container {
@@ -7,6 +7,8 @@
   border-bottom-right-radius: 0 !important;
 }
 
-.w-40 {
-  width: 40%;
+::ng-deep .ng-select {
+  max-width: 100px;
+  min-width: 35%;
+  font-size: 14px;
 }