feat(pivot): add styles for filtering toggle and dialog

desig9stein · desig9stein · commit 0018710bf7e5 · 2022-01-07T17:38:35.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss
@@ -88,6 +88,11 @@
             $item-border-color: transparent,
             $item-selected-border-color: transparent
         ));
+
+        igx-chips-area  {
+            padding: rem(16px) rem(16px) 0 rem(16px);
+            gap: rem(8px);
+        }
     }
 
     %grid-excel-menu__header {
@@ -119,7 +124,6 @@
     %grid-excel-menu__footer {
         display: flex;
         justify-content: space-between;
-        padding: rem(8px) rem(16px);
 
         %grid-excel-filter__apply,
         %grid-excel-filter__cancel {
@@ -241,19 +245,26 @@
         flex-direction: column;
         flex-grow: 1;
         overflow: hidden;
-        padding: 0 rem(16px);
+        padding: rem(16px);
+        gap: rem(16px);
+
 
         igx-list {
             flex-grow: 1;
             overflow: hidden;
-            margin: rem(8px) -#{rem(16px)} 0;
+            margin-left:  -#{rem(16px)};
+            margin-right:  -#{rem(16px)};
             border: 0;
             border-top: 1px dashed igx-color($palette, 'grays', 300);
             border-bottom: 1px dashed igx-color($palette, 'grays', 300);
         }
     }
 
     %grid-excel-menu--cosy {
+        igx-chips-area  {
+            padding: rem(8px) rem(8px) 0 rem(8px);
+        }
+
         %grid-excel-menu__header {
             justify-content: space-between;
             padding: rem(8px);
@@ -276,19 +287,22 @@
         }
 
         %grid-excel-main {
-            padding: 0 rem(8px);
+            padding: rem(8px);
+            gap: rem(8px);
         }
 
         igx-list {
-            margin: rem(8px) -#{rem(8px)} 0;
-        }
-
-        %grid-excel-menu__footer {
-            padding: rem(8px);
+            margin-left:  -#{rem(8px)};
+            margin-right:  -#{rem(8px)};
         }
     }
 
     %grid-excel-menu--compact {
+        igx-chips-area  {
+            padding: rem(4px) rem(4px) 0 rem(4px);
+            gap: rem(4px);
+        }
+
         %grid-excel-menu__header {
             justify-content: space-between;
             padding: rem(4px);
@@ -319,15 +333,13 @@
         }
 
         %grid-excel-main {
-            padding: 0 rem(4px);
+            padding: rem(4px);
+            gap: rem(4px);
         }
 
         igx-list {
-            margin: rem(8px) -#{rem(4px)} 0;
-        }
-
-        %grid-excel-menu__footer {
-            padding: rem(8px) rem(4px);
+            margin-left:  -#{rem(4px)};
+            margin-right:  -#{rem(4px)};
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss
@@ -553,6 +553,16 @@
             @extend %igx-grid__tr-pivot !optional
         }
 
+        @include e(pivot-filter-toggle) {
+            @extend %igx-grid__pivot-filter-toggle !optional
+        }
+
+        @include e(pivot-empty-chip-area) {
+            @extend %igx-grid__pivot-empty-chip-area !optional
+        }
+
+
+
         @include e(tr-pivot, $m: 'row-area') {
             @extend %igx-grid__tr-pivot--row-area !optional
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -2919,6 +2919,32 @@
         }
     }
 
+    %igx-grid__pivot-filter-toggle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        position: relative;
+
+        > igx-badge {
+            position: absolute;
+            top: rem(-4px);
+            left: 60%;
+            width: rem(18px);
+            min-width: rem(18px);
+            height: rem(18px);
+            font-size: rem(10px);
+            pointer-events: none;
+            user-select: none;
+        }
+    }
+
+    %igx-grid__pivot-empty-chip-area {
+        line-height: normal;
+        font-size: rem(14px);
+        margin-right: 0 !important;
+    }
+
     %igx-grid__tr-pivot--row-area {
         height: auto !important;
         align-items: flex-end;
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -124,13 +124,11 @@
     </div>
 </ng-template>
 
-
 <div [hidden]='true'>
-<igx-grid-excel-style-filtering>
-    <div igxExcelStyleColumnOperations [hidden]='true'>
-    </div>
-    <igx-excel-style-filter-operations>
-        <igx-excel-style-search></igx-excel-style-search>
-    </igx-excel-style-filter-operations>
-</igx-grid-excel-style-filtering>
+    <igx-grid-excel-style-filtering>
+        <div igxExcelStyleColumnOperations [hidden]='true'></div>
+        <igx-excel-style-filter-operations>
+            <igx-excel-style-search></igx-excel-style-search>
+        </igx-excel-style-filter-operations>
+    </igx-grid-excel-style-filtering>
 </div>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html
@@ -9,7 +9,7 @@
                 <igx-chips-area  #filterArea droppable='true'>
                     <span id='empty' igxDrop (dropped)="onDimDrop($event, filterArea, 2)"
                         *ngIf="grid.filterDimensions.length === 0"
-                        class='igx-pivot__emptyChipArea'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>
+                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}}</span>
 
                         <ng-container *ngFor="let filter of this.filterAreaDimensions; let last = last;">
                             <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
@@ -33,9 +33,9 @@
                         {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}}
                     </igx-chip>
                 </igx-chips-area>
-                <div style="position: relative;" *ngIf="isFiltersButton && grid.filterDimensions.length !== 0">
+                <div class="igx-grid__pivot-filter-toggle" *ngIf="isFiltersButton && grid.filterDimensions.length !== 0">
                     <igx-icon #filterIcon (pointerdown)='onFilteringIconPointerDown($event)' (click)='onFiltersAreaDropdownClick($event)'>filter_list</igx-icon>
-                    <igx-badge style="position: absolute; bottom: 0;left: 10px" value="{{this.filterDropdownDimensions.size}}"></igx-badge>
+                    <igx-badge value="{{this.filterDropdownDimensions.size}}"></igx-badge>
                 </div>
             </div>
             <div class='igx-grid__tr-pivot--drop-row-area' (igxDragLeave)="onAreaDragLeave($event, rowArea)" igxDrop
@@ -49,7 +49,7 @@
                 <!-- Columns area -->
                 <igx-chips-area #colArea droppable='true'>
                     <span id='empty' (dropped)="onDimDrop($event, colArea, 1)" igxDrop
-                        *ngIf="grid.columnDimensions.length === 0" class='igx-pivot__emptyChipArea'>
+                        *ngIf="grid.columnDimensions.length === 0" class='igx-grid__pivot-empty-chip-area'>
                         {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}}</span>
                     <ng-container *ngFor="let col of grid.columnDimensions; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
@@ -84,7 +84,7 @@
                 <!-- Value area -->
                 <igx-chips-area #valueArea droppable='true'>
                     <span id='empty' (dropped)="onValueDrop($event, valueArea)" igxDrop *ngIf="grid.values.length === 0"
-                        class='igx-pivot__emptyChipArea'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>
+                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}}</span>
                     <ng-container *ngFor="let value of grid.values; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                             [style.height.px]='getAreaHeight(valueArea)'></span>
@@ -128,7 +128,7 @@
                 <ng-container *ngIf="grid.showPivotConfigurationUI">
                     <span id='empty' igxDrop (dropped)="onDimDrop($event, rowArea, 0)"
                         *ngIf="grid.rowDimensions.length === 0 && grid.showPivotConfigurationUI"
-                        class='igx-pivot__emptyChipArea'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>
+                        class='igx-grid__pivot-empty-chip-area'>{{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}}</span>
                     <ng-container *ngFor="let row of grid.rowDimensions; let last = last;">
                         <span [style.visibility]='"hidden"' class="igx-grid__tr-pivot--chip_drop_indicator"
                             [style.height.px]='getAreaHeight(rowArea)'></span>
