Merge pull request #10 from ghiscoding/bugfix/dark-mode-primary-color

fix: small styling issues & better primary color support w/Dark Mode
ghiscoding · May 12, 2024 · 14308aa · 14308aa
2 parents e555a10 + bf0b3bb
commit 14308aa
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 131 deletions.
diff --git a/bootstrap5-i18n-demo/package.json b/bootstrap5-i18n-demo/package.json
@@ -38,22 +38,22 @@
     ]
   },
   "dependencies": {
-    "@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/rxjs-observable": "^5.0.0",
-    "@slickgrid-universal/text-export": "^5.0.0",
-    "dompurify": "^3.1.2",
+    "@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/rxjs-observable": "^5.0.1",
+    "@slickgrid-universal/text-export": "^5.0.1",
+    "dompurify": "^3.1.3",
     "fetch-jsonp": "^1.3.0",
-    "i18next": "^23.11.3",
+    "i18next": "^23.11.4",
     "moment-mini": "^2.29.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^14.1.1",
     "regenerator-runtime": "^0.14.1",
-    "slickgrid-react": "^5.0.1"
+    "slickgrid-react": "^5.0.2"
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
@@ -70,7 +70,7 @@
     "@types/jest": "^29.5.12",
     "@types/moment": "^2.13.0",
     "@types/node": "^20.12.11",
-    "@types/react": "^18.3.1",
+    "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
     "@types/sortablejs": "^1.15.8",
     "@types/text-encoding-utf-8": "^1.0.5",
@@ -103,9 +103,9 @@
     "minimatch": "^9.0.4",
     "moment-mini": "^2.29.4",
     "promise-polyfill": "^8.3.0",
-    "react-router-dom": "^6.23.0",
+    "react-router-dom": "^6.23.1",
     "rxjs": "^7.8.1",
-    "sass": "^1.77.0",
+    "sass": "^1.77.1",
     "sass-loader": "^14.2.1",
     "style-loader": "4.0.0",
     "ts-jest": "^29.1.2",

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example14.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example14.tsx
@@ -68,7 +68,10 @@ export default class Example14 extends React.Component {
       },
       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/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example18.tsx
@@ -549,11 +549,13 @@ export default class Example18 extends React.Component<Props, State> {
               </button>
               <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-filter"
                 onClick={() => this.setFiltersDynamically()}>
-                Set Filters Dynamically
+                <span className="mdi mdi-filter-outline"></span>
+                <span>Set Filters Dynamically</span>
               </button>
               <button className="btn btn-outline-secondary btn-xs btn-icon" data-test="set-dynamic-sorting"
                 onClick={() => this.setSortingDynamically()}>
-                Set Sorting Dynamically
+                <span className="mdi mdi-sort-ascending"></span>
+                <span>Set Sorting Dynamically</span>
               </button>
             </div>
           </div>

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example28.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example28.tsx
@@ -128,10 +128,10 @@ export default class Example28 extends React.Component<Props, State> {
 
             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

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/Example34.tsx b/bootstrap5-i18n-demo/src/examples/slickgrid/Example34.tsx
@@ -37,13 +37,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;
 };
@@ -121,7 +123,7 @@ export default class Example34 extends React.Component<Props, State> {
         },
         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')
           ],
@@ -134,7 +136,7 @@ export default class Example34 extends React.Component<Props, State> {
         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')
           ],
@@ -152,7 +154,7 @@ export default class Example34 extends React.Component<Props, State> {
         },
         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')
           ],
@@ -165,7 +167,7 @@ export default class Example34 extends React.Component<Props, State> {
         filter: { model: Filters.compoundInputNumber }, type: FieldType.number,
         formatter: Formatters.multiple,
         params: {
-          formatters: [Formatters.dollarColored, priceFormatter],
+          formatters: [Formatters.dollar, priceFormatter],
           maxDecimal: 2,
         }
 

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

diff --git a/bootstrap5-i18n-demo/src/examples/slickgrid/example34.scss b/bootstrap5-i18n-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/bootstrap5-i18n-demo/src/styles.scss b/bootstrap5-i18n-demo/src/styles.scss
@@ -25,6 +25,10 @@ $side-menu-width: 250px;
   gap: 4px;
 }
 
+.gap-4px {
+  gap: 4px;
+}
+
 .btn-group-xs > .btn, .btn-xs {
   padding  : 1px 5px;
   font-size  : 12px;
@@ -131,6 +135,9 @@ section {
 .slick-dark-mode {
   --slick-button-style-bg-color: #212121;
   --slick-button-border-color: #626262;
+  .text-primary {
+    color: #599BFE !important;
+  }
 }
 
 .button-style {
@@ -176,10 +183,3 @@ section {
     color: #dfdfdf;
   }
 }
-
-.ms-dark-mode,
-.ms-drop.ms-dark-mode,
-.slick-dark-mode .ms-dark-mode,
-.slick-dark-mode {
-  --slick-checkbox-selector-unchecked-color: #89d1f5;
-}