Merge pull request #3719 from IgniteUI/apetrov/grid-advanced-excel-samples

refactor(grid): update advanced and excel filtering samples

Author: simeonoff

src/app/grid/grid-advanced-filtering-style/grid-advanced-filtering-style.component.scss

@@ -1,81 +1,18 @@
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
-$muted-yellow: #ffe482;
-
-$custom-button: button-theme(
-  $schema: $dark-material-schema,
-  $background: $black,
-  $foreground: $yellow,
-  $hover-foreground: $black,
-  $hover-background: $yellow,
-  $focus-foreground: $yellow,
-  $focus-background: $black,
-  $active-background: $yellow,
-  $active-foreground: $black,
-  $border-color: $yellow,
-  $hover-border-color: $yellow,
-  $focus-border-color: $yellow,
-  $active-border-color: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $schema: $dark-material-schema,
-  $item-background:  $black,
-  $item-text-color: $yellow,
-  $item-border-color: $yellow,
-  $item-selected-background: $yellow,
-  $item-hover-background: $yellow,
-  $item-selected-hover-background: $yellow,
-  $item-disabled-border: $yellow,
-  $item-selected-border-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $schema: $dark-material-schema,
-  $idle-text-color: $yellow,
-  $focused-text-color: $yellow,
-  $filled-text-color: $yellow,
-  $idle-bottom-line-color: $muted-yellow,
-  $focused-secondary-color: $yellow
+$custom-query-builder: query-builder-theme(
+  $header-foreground: #512da8,
+  $color-expression-group-and:  #eb0000,
+  $color-expression-group-or: #0000f3,
+  $subquery-header-background: var(--ig-gray-300),
+  $subquery-border-color: var(--ig-warn-500),
+  $subquery-border-radius: rem(4px)
 );
 
-$custom-chip: chip-theme(
-  $schema: $dark-material-schema,
-  $background: $yellow,
-  $text-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $schema: $dark-material-schema,
-  $background-color: $black,
-  $item-text-color: $yellow,
-  $hover-item-background: $yellow,
-  $hover-item-text-color: $black,
-  $focused-item-background: $yellow,
-  $focused-item-text-color: $black,
-  $selected-item-background: $yellow,
-  $selected-item-text-color: $black,
-  $selected-focus-item-background: $yellow,
-  $selected-focus-item-text-color: $black,
-  $selected-hover-item-background: $yellow,
-  $selected-hover-item-text-color: $black
-);
-
-
 :host {
   ::ng-deep {
     igx-advanced-filtering-dialog {
-      @include theme(
-        $palette: $dark-material-palette
-    );
-    @include css-vars($custom-button);
-    @include css-vars($custom-button-group);
-    @include css-vars($custom-input-group);
-    @include css-vars($custom-chip);
-    @include css-vars($custom-drop-down);
+      @include css-vars($custom-query-builder);
     }
   }
-}
- 
+}

src/app/grid/grid-excel-style-filtering-style/grid-excel-style-filtering-style.component.scss

@@ -5,30 +5,21 @@ $yellow: #ffcd0f;
 $black: #292826;
 
 $custom-grid: grid-theme(
-  $filtering-row-background: $yellow
+  $filtering-row-background: $yellow,
+  $excel-filtering-header-foreground: $black,
+  $excel-filtering-subheader-foreground: $black,
+  $excel-filtering-actions-foreground: #006400,
+  $excel-filtering-actions-hover-foreground: $yellow,
+  $excel-filtering-actions-disabled-foreground: var(--ig-gray-500)
 );
 
-$custom-flat-button: button-theme(
-  $background: $yellow,
-  $foreground: $black,
-  $hover-background: $black,
-  $hover-foreground: $yellow
-);
-
-$custom-contained-button: button-theme(
+$custom-button: button-theme(
   $background: $black,
   $foreground: $yellow,
   $hover-background: $black,
   $hover-foreground: $yellow
 );
 
-$custom-button-group: button-group-theme(
-  $item-background: $yellow,
-  $item-text-color: $black,
-  $item-hover-background: $black,
-  $item-hover-text-color: $yellow
-);
-
 $custom-input-group: input-group-theme(
   $box-background: $yellow,
   $idle-text-color: $black,
@@ -49,8 +40,6 @@ $custom-checkbox: checkbox-theme(
 
 $custom-drop-down: drop-down-theme(
   $background-color: $yellow,
-  $selected-item-background: lighten($black, 10%),
-  $selected-focus-item-background: lighten($black, 15%),
   $item-text-color: $black,
   $hover-item-background: $black,
   $hover-item-text-color: $yellow
@@ -63,11 +52,9 @@ $custom-drop-down: drop-down-theme(
     @include css-vars($custom-input-group);
     @include css-vars($custom-checkbox);
     @include css-vars($custom-list);
-    @include css-vars($custom-flat-button);
-    @include css-vars($custom-button-group);
 
-    .igx-excel-filter__apply {
-      @include css-vars($custom-contained-button);
+    .igx-excel-filter__menu-footer {
+      @include css-vars($custom-button);
     }
   }
 }

src/app/hierarchical-grid/hierarchical-grid-advanced-filtering-style/hierarchical-grid-advanced-filtering-style.component.scss

@@ -1,81 +1,18 @@
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
-$muted-yellow: #ffe482;
-
-$custom-button: button-theme(
-  $schema: $dark-material-schema,
-  $background: $black,
-  $foreground: $yellow,
-  $hover-foreground: $black,
-  $hover-background: $yellow,
-  $focus-foreground: $yellow,
-  $focus-background: $black,
-  $active-background: $yellow,
-  $active-foreground: $black,
-  $border-color: $yellow,
-  $hover-border-color: $yellow,
-  $focus-border-color: $yellow,
-  $active-border-color: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $schema: $dark-material-schema,
-  $item-background:  $black,
-  $item-text-color: $yellow,
-  $item-border-color: $yellow,
-  $item-selected-background: $yellow,
-  $item-hover-background: $yellow,
-  $item-selected-hover-background: $yellow,
-  $item-disabled-border: $yellow,
-  $item-selected-border-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $schema: $dark-material-schema,
-  $idle-text-color: $yellow,
-  $focused-text-color: $yellow,
-  $filled-text-color: $yellow,
-  $idle-bottom-line-color: $muted-yellow,
-  $focused-secondary-color: $yellow
+$custom-query-builder: query-builder-theme(
+  $header-foreground: #512da8,
+  $color-expression-group-and:  #eb0000,
+  $color-expression-group-or: #0000f3,
+  $subquery-header-background: var(--ig-gray-300),
+  $subquery-border-color: var(--ig-warn-500),
+  $subquery-border-radius: rem(4px)
 );
 
-$custom-chip: chip-theme(
-  $schema: $dark-material-schema,
-  $background: $yellow,
-  $text-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $schema: $dark-material-schema,
-  $background-color: $black,
-  $item-text-color: $yellow,
-  $hover-item-background: $yellow,
-  $hover-item-text-color: $black,
-  $focused-item-background: $yellow,
-  $focused-item-text-color: $black,
-  $selected-item-background: $yellow,
-  $selected-item-text-color: $black,
-  $selected-focus-item-background: $yellow,
-  $selected-focus-item-text-color: $black,
-  $selected-hover-item-background: $yellow,
-  $selected-hover-item-text-color: $black
-);
-
-
 :host {
   ::ng-deep {
     igx-advanced-filtering-dialog {
-      @include theme(
-        $palette: $dark-material-palette
-      );
-      @include css-vars($custom-button);
-      @include css-vars($custom-button-group);
-      @include css-vars($custom-input-group);
-      @include css-vars($custom-chip);
-      @include css-vars($custom-drop-down);
+      @include css-vars($custom-query-builder);
     }
   }
-}
- 
+}

src/app/tree-grid/tree-grid-advanced-filtering-style/tree-grid-advanced-filtering-style.component.scss

@@ -1,81 +1,18 @@
 @use "igniteui-angular/theming" as *;
 
-$yellow: #ffcd0f;
-$black: #292826;
-$muted-yellow: #ffe482;
-
-$custom-button: button-theme(
-  $schema: $dark-material-schema,
-  $background: $black,
-  $foreground: $yellow,
-  $hover-foreground: $black,
-  $hover-background: $yellow,
-  $focus-foreground: $yellow,
-  $focus-background: $black,
-  $active-background: $yellow,
-  $active-foreground: $black,
-  $border-color: $yellow,
-  $hover-border-color: $yellow,
-  $focus-border-color: $yellow,
-  $active-border-color: $yellow
-);
-
-$custom-button-group: button-group-theme(
-  $schema: $dark-material-schema,
-  $item-background:  $black,
-  $item-text-color: $yellow,
-  $item-border-color: $yellow,
-  $item-selected-background: $yellow,
-  $item-hover-background: $yellow,
-  $item-selected-hover-background: $yellow,
-  $item-disabled-border: $yellow,
-  $item-selected-border-color: $yellow
-);
-
-$custom-input-group: input-group-theme(
-  $schema: $dark-material-schema,
-  $idle-text-color: $yellow,
-  $focused-text-color: $yellow,
-  $filled-text-color: $yellow,
-  $idle-bottom-line-color: $muted-yellow,
-  $focused-secondary-color: $yellow
+$custom-query-builder: query-builder-theme(
+  $header-foreground: #512da8,
+  $color-expression-group-and:  #eb0000,
+  $color-expression-group-or: #0000f3,
+  $subquery-header-background: var(--ig-gray-300),
+  $subquery-border-color: var(--ig-warn-500),
+  $subquery-border-radius: rem(4px)
 );
 
-$custom-chip: chip-theme(
-  $schema: $dark-material-schema,
-  $background: $yellow,
-  $text-color: $black
-);
-
-$custom-drop-down: drop-down-theme(
-  $schema: $dark-material-schema,
-  $background-color: $black,
-  $item-text-color: $yellow,
-  $hover-item-background: $yellow,
-  $hover-item-text-color: $black,
-  $focused-item-background: $yellow,
-  $focused-item-text-color: $black,
-  $selected-item-background: $yellow,
-  $selected-item-text-color: $black,
-  $selected-focus-item-background: $yellow,
-  $selected-focus-item-text-color: $black,
-  $selected-hover-item-background: $yellow,
-  $selected-hover-item-text-color: $black
-);
-
-
 :host {
   ::ng-deep {
     igx-advanced-filtering-dialog {
-      @include theme(
-        $palette: $dark-material-palette
-      );
-      @include css-vars($custom-button);
-      @include css-vars($custom-button-group);
-      @include css-vars($custom-input-group);
-      @include css-vars($custom-chip);
-      @include css-vars($custom-drop-down);
+      @include css-vars($custom-query-builder);
     }
   }
-}
- 
+}