fix(ag-grid): add more icon mappings (#1028)

allianz · Sep 6, 2023 · 8fee8a0 · 8fee8a0
1 parent a865a0d
commit 8fee8a0
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/projects/ng-aquila/documentation/examples/ag-grid/ag-grid/ag-grid-example.html b/projects/ng-aquila/documentation/examples/ag-grid/ag-grid/ag-grid-example.html
@@ -13,6 +13,9 @@
     <button nxButton="small" (click)="toggleGroup()">
         Toggle group header
     </button>
+    <button nxButton="small" (click)="toggleFloatingFilter()">
+        Toggle floating filter
+    </button>
 </div>
 <!-- AG Grid Angular Component -->
 <ag-grid-angular

diff --git a/projects/ng-aquila/documentation/examples/ag-grid/ag-grid/ag-grid-example.ts b/projects/ng-aquila/documentation/examples/ag-grid/ag-grid/ag-grid-example.ts
@@ -24,26 +24,24 @@ import { Observable } from 'rxjs';
     styleUrls: ['./ag-grid-example.css'],
 })
 export class AgGridExampleComponent {
+    floatingFilter = true;
     columnsNoGroup: ColDef[] = [
         {
             colId: 'make',
             field: 'make',
             filter: 'agTextColumnFilter',
-            floatingFilter: true,
             headerCheckboxSelection: true,
             checkboxSelection: true,
             showDisabledCheckboxes: true,
             resizable: true,
         },
         {
             field: 'model',
-            floatingFilter: true,
             filter: 'agTextColumnFilter',
             resizable: true,
         },
         {
             field: 'price',
-            floatingFilter: true,
             filter: 'agTextColumnFilter',
             resizable: true,
         },
@@ -56,7 +54,6 @@ export class AgGridExampleComponent {
             colId: 'make',
             field: 'make',
             filter: 'agTextColumnFilter',
-            floatingFilter: true,
             headerCheckboxSelection: true,
             checkboxSelection: true,
             showDisabledCheckboxes: true,
@@ -67,32 +64,27 @@ export class AgGridExampleComponent {
             resizable: true,
             initialHide: true,
             showRowGroup: false,
-            floatingFilter: true,
             children: [
                 {
                     field: 'model',
                     filter: 'agTextColumnFilter',
                     cellEditorPopup: true,
                     resizable: true,
-                    floatingFilter: true,
                 },
                 {
                     field: 'price',
                     filter: 'agTextColumnFilter',
                     resizable: true,
-                    floatingFilter: true,
                 },
             ],
         },
         {
             field: 'model',
-            floatingFilter: true,
             filter: 'agTextColumnFilter',
             resizable: true,
         },
         {
             field: 'price',
-            floatingFilter: true,
             filter: 'agTextColumnFilter',
             resizable: true,
         },
@@ -104,6 +96,7 @@ export class AgGridExampleComponent {
         sortable: true,
         filter: true,
         resizable: true,
+        floatingFilter: this.floatingFilter,
     };
 
     // Data that gets displayed in the grid
@@ -169,6 +162,14 @@ export class AgGridExampleComponent {
         this.gridApi.sizeColumnsToFit();
     }
 
+    toggleFloatingFilter() {
+        this.floatingFilter = !this.floatingFilter;
+        this.defaultColDef = {
+            ...this.defaultColDef,
+            floatingFilter: this.floatingFilter,
+        };
+    }
+
     columnDefsTest: ColDef[] = [
         { field: 'make' },
         { field: 'model' },

diff --git a/projects/ng-aquila/src/ag-grid/ag-theme-aquila.scss b/projects/ng-aquila/src/ag-grid/ag-theme-aquila.scss
@@ -18,6 +18,12 @@ $icon-mapping: (
     left: '\e902',
     menu: '\e928',
     save: '\e917',
+    eye-slash: '\ea52',
+    tick: '\e911',
+    copy: '\ea35',
+    eye: '\ea54',
+    small-left: '\ea28',
+    small-down: '\e90a',
 );
 // note: the sass API does some auto magic with deriving colors with transparency from certain values. this does not work if we want to use one of our
 // css variables, the sass build will throw an error if that happens.
@@ -110,6 +116,11 @@ $aquila-theme: (
         }
     }
 
+    // safari fix that the before and after from above are placed on top of the border
+    .ag-header-row-column-group {
+        z-index: 1;
+    }
+
     .ag-header-row:has(+ .ag-header-row-column-filter) {
         --ag-header-column-resize-handle-height: 67px;
 
@@ -130,7 +141,7 @@ $aquila-theme: (
 
     .ag-header-row-column-group:has(+ .ag-header-row) {
         .ag-header-cell-resize::after {
-            height: 109px;
+            height: calc(200% - var(--ag-grid-size) * 4);
         }
     }