fix: small styling issues & better primary color support w/Dark Mode

src/app/examples/grid-colspan.component.ts

@@ -60,6 +60,9 @@ export class GridColspanComponent implements OnInit {
       preHeaderPanelHeight: 28,
       explicitInitialization: true,
       colspanCallback: this.renderDifferentColspan,
+      gridMenu: {
+        iconButtonContainer: 'preheader' // we can display the grid menu icon in either the preheader or in the column header (default)
+      },
       enableExcelExport: true,
       excelExportOptions: {
         exportWithFormatter: false

src/app/examples/grid-draggrouping.component.html

@@ -59,11 +59,17 @@ <h2>
         </button>
         <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter"
                 (click)="setFiltersDynamically()">
-          Set Filters Dynamically
+          <span class="mdi mdi-filter-outline"></span>
+          <span>
+            Set Filters Dynamically
+          </span>
         </button>
         <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-sorting"
                 (click)="setSortingDynamically()">
-          Set Sorting Dynamically
+          <span class="mdi mdi-sort-ascending"></span>
+          <span>
+            Set Sorting Dynamically
+          </span>
         </button>
       </div>
     </div>

src/app/examples/grid-rowdetail.component.html

@@ -17,18 +17,21 @@ <h2>
   <div class="subtitle" [innerHTML]="subTitle"></div>
 
   <div class="col-sm-6">
-    <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="changeEditableGrid()" data-test="editable-grid-btn">
+    <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="changeEditableGrid()" data-test="editable-grid-btn">
       Make Grid Editable
     </button>
-    <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="closeAllRowDetail()" data-test="collapse-all-btn">
+    <button class="btn btn-outline-secondary btn-sm btn-icon" (click)="closeAllRowDetail()" data-test="collapse-all-btn">
       Close All Row Details
     </button>
     &nbsp;&nbsp;
-    <label for="">Detail View Rows Shown: </label>
-    <input type="number" style="height: 22px; width: 40px" [(ngModel)]="detailViewRowCount">
-    <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
-      Set
-    </button>
+
+    <span class="d-inline-flex gap-4px">
+      <label for="detailViewRowCount">Detail View Rows Shown: </label>
+      <input id="detailViewRowCount" type="number" style="height: 22px; width: 40px" [(ngModel)]="detailViewRowCount">
+      <button class="btn btn-outline-secondary btn-xs btn-icon" (click)="changeDetailViewRowCount()" data-test="set-count-btn">
+        Set
+      </button>
+    </span>
   </div>
   <div class="alert alert-{{flashAlertType}} col-sm-6" *ngIf="message" data-test="flash-msg">{{message}}</div>
 

src/app/examples/grid-trading.component.scss

@@ -50,6 +50,9 @@ $sparkline-color: #00b78d;
 
 .slick-dark-mode,
 .dark-mode {
+  .text-success {
+    color: #42b47f !important
+  }
   .changed-gain {
     background-color: #00ff001d !important;
   }

src/app/examples/grid-trading.component.ts

@@ -23,13 +23,15 @@ const priceFormatter: Formatter = (_cell, _row, value, _col, dataContext) => {
   const direction = dataContext.priceChange >= 0 ? 'up' : 'down';
   const fragment = new DocumentFragment();
   const divElm = document.createElement('div');
-  divElm.className = 'd-inline-flex align-items-center';
+  divElm.className = `d-inline-flex align-items-center text-${direction === 'up' ? 'success' : 'danger'}`;
   const spanElm = document.createElement('span');
-  spanElm.className = `mdi mdi-arrow-${direction} text-${direction === 'up' ? 'success' : 'danger'}`;
+  spanElm.className = `mdi mdi-arrow-${direction}`;
   divElm.appendChild(spanElm);
   fragment.appendChild(divElm);
   if (value instanceof HTMLElement) {
     divElm.appendChild(value);
+  } else {
+    divElm.appendChild(document.createTextNode(value));
   }
   return fragment;
 };
@@ -109,7 +111,7 @@ export class GridTradingComponent implements OnDestroy, OnInit {
         },
         grouping: {
           getter: 'currency',
-          formatter: (g) => `Currency: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          formatter: (g) => `Currency: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -122,7 +124,7 @@ export class GridTradingComponent implements OnDestroy, OnInit {
         id: 'market', name: 'Market', field: 'market', filterable: true, sortable: true, minWidth: 75, width: 75,
         grouping: {
           getter: 'market',
-          formatter: (g) => `Market: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          formatter: (g) => `Market: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -140,7 +142,7 @@ export class GridTradingComponent implements OnDestroy, OnInit {
         },
         grouping: {
           getter: 'trsnType',
-          formatter: (g) => `Type: <span style="color: #003597; font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
+          formatter: (g) => `Type: <span style="var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -153,7 +155,7 @@ export class GridTradingComponent implements OnDestroy, OnInit {
         filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
         formatter: Formatters.multiple,
         params: {
-          formatters: [Formatters.dollarColored, priceFormatter],
+          formatters: [Formatters.dollar, priceFormatter],
           maxDecimal: 2,
         }
       },

src/app/examples/grid-tree-data-hierarchical.component.html

@@ -13,7 +13,7 @@ <h2>
 
   <div class="row">
     <div class="col-md-7">
-      <button (click)="addNewFile()" data-test="add-item-btn" class="btn btn-primary btn-xs btn-icon">
+      <button (click)="addNewFile()" data-test="add-item-btn" class="btn btn-xs btn-icon btn-primary">
         <span class="icon mdi mdi-plus color-white"></span>
         <span>Add New Pop Song</span>
       </button>
@@ -48,7 +48,7 @@ <h2>
         <input type="text" class="form-control search-string" data-test="search-string"
                placeholder="search value" autocomplete="off" [(ngModel)]="searchString"
                (ngModelChange)="searchStringChanged()">
-        <button class="btn btn-outline-secondary" data-test="clear-search-string" (click)="clearSearch()">
+        <button class="btn btn-sm btn-outline-secondary d-flex align-items-center" data-test="clear-search-string" (click)="clearSearch()">
           <span class="icon mdi mdi-close-thick"></span>
         </button>
       </div>

src/app/examples/grid-tree-data-hierarchical.component.scss

@@ -8,7 +8,7 @@
   }
 
   .avg-total {
-    color: #ac76ff;
+    color: #a365ff;
   }
   .bold {
     font-weight: bold;

src/app/examples/grid-tree-data-hierarchical.component.ts

@@ -98,10 +98,10 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
 
             if (avgVal !== undefined && sumVal !== undefined) {
               // when found Avg & Sum, we'll display both
-              return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+              return isNaN(sumVal) ? '' : `<span class="text-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> / <span class="avg-total">avg: ${decimalFormatted(avgVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
             } else if (sumVal !== undefined) {
               // or when only Sum is aggregated, then just show Sum
-              return isNaN(sumVal) ? '' : `<span class="color-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
+              return isNaN(sumVal) ? '' : `<span class="text-primary bold">sum: ${decimalFormatted(sumVal, 0, 2)} MB</span> <span class="total-suffix">(${treeLevel === 0 ? 'total' : 'sub-total'})</span>`;
             }
           }
           // reaching this line means it's a regular dataContext without totals, so regular formatter output will be used
@@ -260,7 +260,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
     const indentSpacer = addWhiteSpaces(5 * treeLevel);
 
     if (data[idx + 1]?.[treeLevelPropName] > data[idx][treeLevelPropName] || data[idx]['__hasChildren']) {
-      const folderPrefix = `<span class="mdi icon color-alt-warning ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></span>`;
+      const folderPrefix = `<span class="mdi icon ${dataContext.__collapsed ? 'mdi-folder' : 'mdi-folder-open'}"></span>`;
       if (dataContext.__collapsed) {
         return `<span class="hidden">${exportIndentationLeadingChar}</span>${spacer}${indentSpacer} <span class="slick-group-toggle collapsed" level="${treeLevel}"></span>${folderPrefix} ${prefix} ${value}`;
       } else {
@@ -274,13 +274,13 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
   getFileIcon(value: string) {
     let prefix = '';
     if (value.includes('.pdf')) {
-      prefix = '<span class="mdi icon mdi-file-pdf-outline color-danger"></span>';
+      prefix = '<span class="mdi icon mdi-file-pdf-outline"></span>';
     } else if (value.includes('.txt')) {
-      prefix = '<span class="mdi icon mdi-file-document-outline color-muted-light"></span>';
+      prefix = '<span class="mdi icon mdi-file-document-outline"></span>';
     } else if (value.includes('.xls')) {
-      prefix = '<span class="mdi icon mdi-file-excel-outline color-success"></span>';
+      prefix = '<span class="mdi icon mdi-file-excel-outline"></span>';
     } else if (value.includes('.mp3')) {
-      prefix = '<span class="mdi icon mdi-file-music-outline color-info"></span>';
+      prefix = '<span class="mdi icon mdi-file-music-outline"></span>';
     }
     return prefix;
   }

src/app/examples/grid-tree-data-parent-child.component.ts

@@ -124,7 +124,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
         titleFormatter: (_row, _cell, value, _def, dataContext) => {
           let prefix = '';
           if (dataContext.treeLevel > 0) {
-            prefix = `<span class="mdi mdi-subdirectory-arrow-right mdi-v-align-sub color-se-secondary"></span>`;
+            prefix = `<span class="mdi mdi-subdirectory-arrow-right"></span>`;
           }
           return `${prefix}<span class="bold">${value}</span> <span style="font-size:11px; margin-left: 15px;">(parentId: ${dataContext.parentId})</span>`;
         },
@@ -227,7 +227,7 @@ export class GridTreeDataParentChildComponent implements OnInit {
 
   showSpinner() {
     if (this.isLargeDataset) {
-      this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px color-alt-success';
+      this.loadingClass = 'mdi mdi-load mdi-spin-1s mdi-24px';
     }
   }
 

src/app/modules/angular-slickgrid/global-grid-options.ts

@@ -225,6 +225,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
   } as RowDetailView,
   rowHeight: 35,
   topPanelHeight: 35,
+  preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
   translationNamespaceSeparator: ':',
   resetFilterSearchValueAfterOnBeforeCancellation: true,
   resizeByContentOnlyOnFirstLoad: true,

src/styles.scss

@@ -25,6 +25,10 @@ $slick-button-border-color: #ababab !default;
   gap: 4px;
 }
 
+.gap-4px {
+  gap: 4px;
+}
+
 .side-menu {
   margin-left: 15px;
 
@@ -85,6 +89,9 @@ $slick-button-border-color: #ababab !default;
 .slick-dark-mode {
   --slick-button-style-bg-color: #212121;
   --slick-button-border-color: #626262;
+  .text-primary {
+    color: #599BFE !important;
+  }
 }
 .button-style {
   cursor: pointer;
@@ -123,12 +130,3 @@ $slick-button-border-color: #ababab !default;
     color: #dfdfdf;
   }
 }
-
-.ms-dark-mode,
-.ms-drop.ms-dark-mode,
-.slick-dark-mode .ms-dark-mode,
-.slick-dark-mode {
-  --slick-checkbox-selector-unchecked-color: #0298e3;
-  --slick-column-picker-checkbox-color: #0298e3;
-  --slick-pagination-icon-color: #0298e3;
-}