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

…1204) * fix: small styling issues & better primary color support w/Dark Mode
ghiscoding · May 12, 2024 · 9636a5b · 9636a5b
1 parent 89a8ea3
commit 9636a5b
Show file tree

Hide file tree

Showing 15 changed files with 222 additions and 207 deletions.
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "eslint": "^9.2.0",
     "eslint-plugin-cypress": "^3.2.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^17.5.1",
+    "eslint-plugin-n": "^17.6.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -66,7 +66,7 @@
     "jsdom-global": "^3.0.2",
     "npm-run-all2": "^6.1.2",
     "pnpm": "^8.15.8",
-    "rimraf": "^5.0.5",
+    "rimraf": "^5.0.6",
     "ts-jest": "^29.1.2",
     "typescript": "^5.4.5",
     "typescript-eslint": "^7.8.0"

diff --git a/packages/aurelia-slickgrid/package.json b/packages/aurelia-slickgrid/package.json
@@ -49,25 +49,25 @@
     "aurelia": "^2.0.0-beta.16"
   },
   "dependencies": {
-    "@aurelia/i18n": "^2.0.0-beta.16",
-    "@aurelia/runtime": "^2.0.0-beta.16",
-    "@aurelia/runtime-html": "^2.0.0-beta.16",
+    "@aurelia/i18n": "2.0.0-beta.16",
+    "@aurelia/runtime": "2.0.0-beta.16",
+    "@aurelia/runtime-html": "2.0.0-beta.16",
     "@formkit/tempo": "^0.1.1",
-    "@slickgrid-universal/common": "~5.0.0",
-    "@slickgrid-universal/custom-footer-component": "~5.0.0",
-    "@slickgrid-universal/empty-warning-component": "~5.0.0",
+    "@slickgrid-universal/common": "~5.0.1",
+    "@slickgrid-universal/custom-footer-component": "~5.0.1",
+    "@slickgrid-universal/empty-warning-component": "~5.0.1",
     "@slickgrid-universal/event-pub-sub": "~5.0.0",
-    "@slickgrid-universal/pagination-component": "~5.0.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~5.0.0",
+    "@slickgrid-universal/pagination-component": "~5.0.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.0.1",
     "@slickgrid-universal/utils": "~5.0.0",
     "dequal": "^2.0.3",
     "sortablejs": "^1.15.2"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "copyfiles": "^2.4.1",
-    "dompurify": "^3.1.2",
-    "rimraf": "^5.0.5",
+    "dompurify": "^3.1.3",
+    "rimraf": "^5.0.7",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5"
   }

diff --git a/packages/aurelia-slickgrid/src/global-grid-options.ts b/packages/aurelia-slickgrid/src/global-grid-options.ts
@@ -186,7 +186,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'mdi mdi-menu',
-    iconClearAllFiltersCommand: 'mdi mdi-filter',
+    iconClearAllFiltersCommand: 'mdi mdi-filter-remove-outline',
     iconClearAllSortingCommand: 'mdi mdi-sort-variant-off',
     iconClearFrozenColumnsCommand: 'mdi mdi-close',
     iconExportCsvCommand: 'mdi mdi-download',
@@ -240,6 +240,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
   headerRowHeight: 35,
   rowHeight: 35,
   topPanelHeight: 30,
+  preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
   translationNamespaceSeparator: ':',
   resetFilterSearchValueAfterOnBeforeCancellation: true,
   resizeByContentOnlyOnFirstLoad: true,

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -33,36 +33,36 @@
   },
   "dependencies": {
     "@aurelia/fetch-client": "2.0.0-beta.16",
-    "@aurelia/i18n": "^2.0.0-beta.16",
-    "@aurelia/kernel": "^2.0.0-beta.16",
-    "@aurelia/metadata": "^2.0.0-beta.16",
-    "@aurelia/router": "^2.0.0-beta.16",
-    "@aurelia/runtime": "^2.0.0-beta.16",
-    "@aurelia/runtime-html": "^2.0.0-beta.16",
+    "@aurelia/i18n": "2.0.0-beta.16",
+    "@aurelia/kernel": "2.0.0-beta.16",
+    "@aurelia/metadata": "2.0.0-beta.16",
+    "@aurelia/router": "2.0.0-beta.16",
+    "@aurelia/runtime": "2.0.0-beta.16",
+    "@aurelia/runtime-html": "2.0.0-beta.16",
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@formkit/tempo": "^0.1.1",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^5.0.0",
-    "@slickgrid-universal/composite-editor-component": "^5.0.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^5.0.0",
-    "@slickgrid-universal/excel-export": "^5.0.0",
-    "@slickgrid-universal/graphql": "^5.0.0",
-    "@slickgrid-universal/odata": "^5.0.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^5.0.0",
-    "@slickgrid-universal/rxjs-observable": "^5.0.0",
-    "@slickgrid-universal/text-export": "^5.0.0",
-    "aurelia": "^2.0.0-beta.16",
+    "@slickgrid-universal/common": "^5.0.1",
+    "@slickgrid-universal/composite-editor-component": "^5.0.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "^5.0.1",
+    "@slickgrid-universal/excel-export": "^5.0.1",
+    "@slickgrid-universal/graphql": "^5.0.1",
+    "@slickgrid-universal/odata": "^5.0.1",
+    "@slickgrid-universal/row-detail-view-plugin": "^5.0.1",
+    "@slickgrid-universal/rxjs-observable": "^5.0.1",
+    "@slickgrid-universal/text-export": "^5.0.1",
+    "aurelia": "2.0.0-beta.16",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",
-    "i18next": "^23.11.3",
+    "i18next": "^23.11.4",
     "i18next-fetch-backend": "^6.0.0",
     "rxjs": "^7.8.1"
   },
   "devDependencies": {
-    "@aurelia/testing": "^2.0.0-beta.16",
-    "@aurelia/ts-jest": "^2.0.0-beta.16",
-    "@aurelia/webpack-loader": "^2.0.0-beta.16",
+    "@aurelia/testing": "2.0.0-beta.16",
+    "@aurelia/ts-jest": "2.0.0-beta.16",
+    "@aurelia/webpack-loader": "2.0.0-beta.16",
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.12",
@@ -74,7 +74,7 @@
     "copy-webpack-plugin": "^12.0.2",
     "copyfiles": "^2.4.1",
     "css-loader": "^7.1.1",
-    "dompurify": "^3.1.2",
+    "dompurify": "^3.1.3",
     "dotenv-webpack": "^8.1.0",
     "fetch-jsonp": "^1.3.0",
     "html-webpack-plugin": "^5.6.0",
@@ -83,8 +83,8 @@
     "npm-run-all2": "^6.1.2",
     "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
-    "rimraf": "^5.0.5",
-    "sass": "^1.77.0",
+    "rimraf": "^5.0.7",
+    "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
     "servor": "^4.0.2",
     "source-map-loader": "^5.0.0",

diff --git a/packages/demo/src/examples/slickgrid/example14.ts b/packages/demo/src/examples/slickgrid/example14.ts
@@ -62,7 +62,10 @@ export class Example14 {
       },
       externalResources: [new ExcelExportService()],
       explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan
+      colspanCallback: this.renderDifferentColspan,
+      gridMenu: {
+        iconButtonContainer: 'preheader' // we can display the grid menu icon in either the preheader or in the column header (default)
+      },
     };
   }
 

diff --git a/packages/demo/src/examples/slickgrid/example18.html b/packages/demo/src/examples/slickgrid/example18.html
@@ -59,11 +59,17 @@ <h2>
       </button>
       <button class="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter"
               click.trigger="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.trigger="setSortingDynamically()">
-        Set Sorting Dynamically
+        <span class="mdi mdi-sort-ascending"></span>
+        <span>
+          Set Sorting Dynamically
+        </span>
       </button>
     </div>
   </div>

diff --git a/packages/demo/src/examples/slickgrid/example19.html b/packages/demo/src/examples/slickgrid/example19.html
@@ -14,20 +14,22 @@ <h2>
 <div class="subtitle" innerhtml.bind="subTitle"></div>
 
 <div class="col-sm-6">
-  <button class="btn btn-outline-secondary btn-xs btn-icon" click.trigger="changeEditableGrid()" data-test="editable-grid-btn">
+  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="changeEditableGrid()" data-test="editable-grid-btn">
     Make Grid Editable
   </button>
-  <button class="btn btn-outline-secondary btn-xs btn-icon" click.trigger="closeAllRowDetail()" data-test="collapse-all-btn">
+  <button class="btn btn-outline-secondary btn-sm btn-icon" click.trigger="closeAllRowDetail()" data-test="collapse-all-btn">
     Close all Row Details
   </button>
   &nbsp;&nbsp;
 
-  <label for="">Detail View Rows Shown: </label>
-  <input type="number" value.bind="detailViewRowCount" style="height: 22px; width: 40px">
-  <button class="btn btn-outline-secondary btn-xs btn-icon" style="height: 26px;" click.trigger="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" value.bind="detailViewRowCount" style="height: 26px; width: 40px">
+    <button class="btn btn-outline-secondary btn-xs btn-icon" style="height: 26px;" click.trigger="changeDetailViewRowCount()"
+      data-test="set-count-btn">
+      Set
+    </button>
+  </span>
 </div>
 <div class="alert alert-${flashAlertType} col-sm-6" if.bind="message" data-test="flash-msg">${message}</div>
 

diff --git a/packages/demo/src/examples/slickgrid/example28.html b/packages/demo/src/examples/slickgrid/example28.html
@@ -12,7 +12,7 @@ <h2>
 
 <div class="row">
   <div class="col-md-7">
-    <button click.trigger="addNewFile()" data-test="add-item-btn" class="btn btn-xs btn-primary">
+    <button click.trigger="addNewFile()" data-test="add-item-btn" class="btn btn-xs btn-icon btn-primary">
       <span class="mdi mdi-plus color-white"></span>
       <span>Add New Pop Song</span>
     </button>
@@ -46,7 +46,7 @@ <h2>
     <div class="input-group input-group-sm">
       <input type="text" class="form-control search-string" placeholder="search value" autocomplete="off"
               data-test="search-string" value.bind="searchString">
-      <button class="btn btn-xs btn-outline-secondary d-flex align-items-center" data-test="clear-search-string"
+      <button class="btn btn-sm btn-outline-secondary d-flex align-items-center" data-test="clear-search-string"
               click.trigger="clearSearch()">
         <span class="icon mdi mdi-close-thick"></span>
       </button>

diff --git a/packages/demo/src/examples/slickgrid/example28.scss b/packages/demo/src/examples/slickgrid/example28.scss
@@ -8,7 +8,7 @@
   }
 
   .avg-total {
-    color: #ac76ff;
+    color: #a365ff;
   }
   .bold {
     font-weight: bold;

diff --git a/packages/demo/src/examples/slickgrid/example28.ts b/packages/demo/src/examples/slickgrid/example28.ts
@@ -96,10 +96,10 @@ export class Example28 {
 
             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
@@ -223,7 +223,7 @@ export class Example28 {
     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 {
@@ -237,13 +237,13 @@ export class Example28 {
   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-succes"></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;
   }

diff --git a/packages/demo/src/examples/slickgrid/example34.scss b/packages/demo/src/examples/slickgrid/example34.scss
@@ -50,6 +50,9 @@ $sparkline-color: #00b78d;
 
 .slick-dark-mode,
 .dark-mode {
+  .text-success {
+    color: #42b47f !important
+  }
   .changed-gain {
     background-color: #00ff001d !important;
   }

diff --git a/packages/demo/src/examples/slickgrid/example34.ts b/packages/demo/src/examples/slickgrid/example34.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;
 };
@@ -103,7 +105,7 @@ export class Example34 {
         },
         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="color: var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -116,7 +118,7 @@ export class Example34 {
         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="color: var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -134,7 +136,7 @@ export class Example34 {
         },
         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="color: var(--slick-primary-color); font-weight: bold;">${g.value}</span>  <span style="color: #659bff;">(${g.count} items)</span>`,
           aggregators: [
             new Aggregators.Sum('amount')
           ],
@@ -147,7 +149,7 @@ export class Example34 {
         filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
         formatter: Formatters.multiple,
         params: {
-          formatters: [Formatters.dollarColored, priceFormatter],
+          formatters: [Formatters.dollar, priceFormatter],
           maxDecimal: 2,
         }
 

diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss
@@ -23,6 +23,10 @@ $side-menu-width: 250px;
   gap: 4px;
 }
 
+.gap-4px {
+  gap: 4px;
+}
+
 .mdi-pencil.pointer:hover {
   color: #00bfff;
 }
@@ -149,6 +153,9 @@ outline: 0 none;
 .slick-dark-mode {
   --slick-button-style-bg-color: #212121;
   --slick-button-border-color: #626262;
+  .text-primary {
+    color: #599BFE !important;
+  }
 }
 
 .button-style {
@@ -195,9 +202,3 @@ outline: 0 none;
   }
 }
 
-.ms-dark-mode,
-.ms-drop.ms-dark-mode,
-.slick-dark-mode .ms-dark-mode,
-.slick-dark-mode {
-  --slick-checkbox-selector-unchecked-color: #89d1f5;
-}