fix(query-builder): fix for comments

- make sure that the icon buttons are outlined
- change the size of the fields in bootstrap
- change the label inside the ghost drop indicator
- change the padding inside the ghost drop

Author: desig9stein

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -106,7 +106,7 @@
     $not-bootstrap-theme: not($bootstrap-theme);
 
     // Custom colors alpha
-    $alpha-hover: .06;
+    $alpha-hover: .08;
     $alpha-focus: .16;
     $alpha-focus-hover: .24;
 
@@ -434,6 +434,8 @@
             @include type-style('body-2');
 
             --ig-body-2-text-transform: unset;
+
+            padding-inline: rem(32px);
         }
 
         color: color($color: 'gray', $variant: if($theme-variant == 'light', 600, 900));
@@ -476,7 +478,7 @@
     }
 
     %filter-tree__inputs {
-        --ig-size: #{if($variant == 'indigo', 2, 1)};
+        --ig-size: #{if($variant == 'indigo' or $variant == 'bootstrap', 2, 1)};
 
         display: flex;
         align-items: flex-end;
@@ -504,7 +506,7 @@
     }
 
     %filter-tree__inputs-actions {
-        --ig-size: #{if($variant != 'bootstrap', 2, 1)};
+        --ig-size: 2;
 
         display: flex;
         gap: rem(8px);

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.html

@@ -97,7 +97,7 @@
             igxButton="flat"
             [disabled]="hasEditedExpression"
             (click)="addCondition(expressionItem, afterExpression, true)"
-            igxDrop 
+            igxDrop
             (enter)="onAddConditionEnter(addConditionButton, expressionItem)"
             (leave)="onChipLeave()"
         >
@@ -151,8 +151,8 @@
                 [removable]="isInEditMode() ? 'true' : 'false'"
                 (keydown)="invokeClick($event)"
                 (click)="onChipClick(expressionItem, expressionChip)"
-                (remove)="onChipRemove(expressionItem)"                
-                
+                (remove)="onChipRemove(expressionItem)"
+
             >
                 <igx-icon igxPrefix
                     class="igx-drag-indicator"
@@ -423,14 +423,14 @@
 
                 <div class="igx-filter-tree__inputs-actions">
                     <button type="button"
-                        igxIconButton="flat"
+                        igxIconButton="outlined"
                         [disabled]="!operandCanBeCommitted()"
                         (click)="commitExpression()"
                     >
                         <igx-icon family="default" name="confirm"></igx-icon>
                     </button>
                     <button type="button"
-                        igxIconButton="flat"
+                        igxIconButton="outlined"
                         (click)="discardExpression(expressionItem)"
                     >
                         <ng-container *ngTemplateOutlet="closeIcon"></ng-container>

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -1280,7 +1280,7 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         if (!keyboardMode) {
             var span = document.createElement('span')
             //TODO Localize string
-            span.innerHTML = "Drop condition here";
+            span.innerHTML = "Drop here to insert";
 
             dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);
             dragCopy.firstChild.firstChild.removeChild(dragCopy.firstChild.firstChild.childNodes[1]);