feat(styling): add Dark Mode grid option (#1407)

* feat(styling): add Dark Mode grid option
ghiscoding · Mar 2, 2024 · 855151b · 855151b
1 parent 9597c65
commit 855151b
Show file tree

Hide file tree

Showing 66 changed files with 901 additions and 84 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/package.json b/examples/vite-demo-vanilla-bundle/package.json
@@ -29,7 +29,7 @@
     "fetch-jsonp": "^1.3.0",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^2.0.2",
+    "multiple-select-vanilla": "^2.1.0",
     "rxjs": "^7.8.1",
     "whatwg-fetch": "^3.6.20"
   },

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.html b/examples/vite-demo-vanilla-bundle/src/examples/example01.html
@@ -10,7 +10,20 @@ <h3 class="title is-3">Example 01 - Basic Grids
   </div>
 </h3>
 
-<h5 class="title is-5">Grid 1</h5>
+<div class="columns">
+  <div class="column field is-narrow">
+    <h5 class="title is-5">Grid 1</h5>
+  </div>
+  <div class="column field has-addons is-narrow">
+    <p class="control">
+      <button class="button is-small" onclick.delegate="toggleDarkModeGrid1()" data-test="toggle-dark-mode">
+        <span class="icon mdi mdi-theme-light-dark"></span>
+        <span> Toggle Light/Dark</span>
+      </button>
+    </p>
+  </div>
+</div>
+
 <div class="grid1">
 </div>
 

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example01.ts b/examples/vite-demo-vanilla-bundle/src/examples/example01.ts
@@ -11,6 +11,7 @@ import './example01.scss';
 const NB_ITEMS = 995;
 
 export default class Example01 {
+  private _darkModeGrid1 = false;
   gridOptions1!: GridOption;
   gridOptions2!: GridOption;
   columnDefinitions1!: Column[];
@@ -56,6 +57,7 @@ export default class Example01 {
     ];
     this.gridOptions1 = {
       enableAutoResize: false,
+      darkMode: this._darkModeGrid1,
       gridHeight: 225,
       gridWidth: 800,
       rowHeight: 33,
@@ -170,6 +172,16 @@ export default class Example01 {
     return mockDataset;
   }
 
+  toggleDarkModeGrid1() {
+    this._darkModeGrid1 = !this._darkModeGrid1;
+    if (this._darkModeGrid1) {
+      document.querySelector('.grid-container1')?.classList.add('dark-mode');
+    } else {
+      document.querySelector('.grid-container1')?.classList.remove('dark-mode');
+    }
+    this.sgb1.gridOptions = { darkMode: this._darkModeGrid1 };
+  }
+
   // Toggle the Pagination of Grid2
   // IMPORTANT, the Pagination MUST BE CREATED on initial page load before you can start toggling it
   // Basically you cannot toggle a Pagination that doesn't exist (must created at the time as the grid)

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.html b/examples/vite-demo-vanilla-bundle/src/examples/example07.html
@@ -1,5 +1,11 @@
 <h3 class="title is-3">
   Example 07 - Row Move &amp; Row Selections
+  <span class="d-inline-flex">
+    <button class="button is-small" onclick.delegate="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="icon mdi mdi-theme-light-dark"></span>
+      <span> Toggle Light/Dark</span>
+    </button>
+  </span>
   <div class="subtitle code-link">
     <span class="is-size-6">see</span>
     <a class="is-size-5" target="_blank"

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example07.ts b/examples/vite-demo-vanilla-bundle/src/examples/example07.ts
@@ -19,6 +19,7 @@ import '../material-styles.scss';
 
 export default class Example07 {
   private _bindingEventService: BindingEventService;
+  private _darkMode = false;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
@@ -62,6 +63,7 @@ export default class Example07 {
     this.sgb?.dispose();
     this._bindingEventService.unbindAll();
     document.body.classList.remove('material-theme');
+    document.querySelector('.demo-container')?.classList.remove('dark-mode');
   }
 
   initializeGrid() {
@@ -294,6 +296,7 @@ export default class Example07 {
         container: '.demo-container',
         rightPadding: 10
       },
+      darkMode: this._darkMode,
       gridMenu: {
         commandTitleKey: 'CUSTOM_COMMANDS',
       },
@@ -648,6 +651,16 @@ export default class Example07 {
     this.sgb.sortService.disableSortFunctionality(true);
   }
 
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    if (this._darkMode) {
+      document.querySelector('.demo-container')?.classList.add('dark-mode');
+    } else {
+      document.querySelector('.demo-container')?.classList.remove('dark-mode');
+    }
+    this.sgb.gridOptions = { darkMode: this._darkMode };
+  }
+
   // or Toggle Filtering/Sorting functionalities
   // ---------------------------------------------
 

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.html b/examples/vite-demo-vanilla-bundle/src/examples/example12.html
@@ -1,6 +1,12 @@
 <h3 class="title is-3">
   Example 12 - Composite Editor Modal
-  <span class="subtitle is-size-5 has-text-grey-dark">(with Salesforce Theme)</span>
+  <span class="subtitle is-size-5">(with Salesforce Theme)</span>
+  <span class="d-inline-flex">
+    <button class="button is-small" onclick.delegate="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="icon mdi mdi-theme-light-dark"></span>
+      <span> Toggle Light/Dark</span>
+    </button>
+  </span>
   <div class="subtitle code-link">
     <span class="is-size-6">see</span>
     <a class="is-size-5"

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example12.ts b/examples/vite-demo-vanilla-bundle/src/examples/example12.ts
@@ -87,6 +87,7 @@ const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef,
 
 export default class Example12 {
   private _bindingEventService: BindingEventService;
+  private _darkMode = false;
   compositeEditorInstance: SlickCompositeEditorComponent;
   columnDefinitions: Column[];
   gridOptions: GridOption;
@@ -144,6 +145,7 @@ export default class Example12 {
     this.sgb?.dispose();
     this._bindingEventService.unbindAll();
     this.gridContainerElm.remove();
+    document.querySelector('.demo-container')?.classList.remove('dark-mode');
   }
 
   initializeGrid() {
@@ -358,7 +360,7 @@ export default class Example12 {
       {
         id: 'action', name: 'Action', field: 'action', width: 70, minWidth: 70, maxWidth: 70,
         excludeFromExport: true,
-        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-dots-vertical mdi-22px color-primary"></span></div>`,
+        formatter: () => `<div class="button-style margin-auto action-btn"><span class="mdi mdi-dots-vertical mdi-22px color-alt-default-light"></span></div>`,
         cellMenu: {
           hideCloseButton: false,
           commandTitle: 'Commands',
@@ -401,6 +403,7 @@ export default class Example12 {
       useSalesforceDefaultGridOptions: true,
       autoFixResizeRequiredGoodCount: 1,
       datasetIdPropertyName: 'id',
+      darkMode: this._darkMode,
       eventNamingStyle: EventNamingStyle.lowerCase,
       autoAddCustomEditorFormatter: customEditableInputFormatter,
       enableAddRow: true, // <-- this flag is required to work with the (create & clone) modal types
@@ -744,6 +747,16 @@ export default class Example12 {
     this.editQueue = [];
   }
 
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    if (this._darkMode) {
+      document.querySelector('.demo-container')?.classList.add('dark-mode');
+    } else {
+      document.querySelector('.demo-container')?.classList.remove('dark-mode');
+    }
+    this.sgb.gridOptions = { darkMode: this._darkMode };
+  }
+
   mockProducts() {
     return [
       {

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.html b/examples/vite-demo-vanilla-bundle/src/examples/example16.html
@@ -1,6 +1,12 @@
 <h3 class="title is-3">
   Example 16 - Regular & Custom Tooltips
   <span class="subtitle">(with Salesforce Theme)</span>
+  <span class="d-inline-flex">
+    <button class="button is-small" onclick.delegate="toggleDarkMode()" data-test="toggle-dark-mode">
+      <span class="icon mdi mdi-theme-light-dark"></span>
+      <span> Toggle Light/Dark</span>
+    </button>
+  </span>
   <div class="subtitle code-link">
     <span class="is-size-6">see</span>
     <a class="is-size-5"

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.scss b/examples/vite-demo-vanilla-bundle/src/examples/example16.scss
@@ -36,19 +36,19 @@ $control-height: 2.4em;
 }
 .l4.slick-custom-tooltip {
   color: #ffffff;
-  background-color: #363636;
-  border: 2px solid #252525;
+  background-color: #696969;
+  border: 2px solid #545454;
 }
 .l4.slick-custom-tooltip.arrow-down::after,
 .l4.slick-custom-tooltip.arrow-up::after {
   border-width: 10px; // arrow size
 }
 .l4.slick-custom-tooltip.arrow-down::after {
-  border-top-color: #252525; // arrow down color
+  border-top-color: #464646; // arrow down color
 }
 .l4.slick-custom-tooltip.arrow-up::after {
   top: -20px; // arrow size * 2
-  border-bottom-color: #252525; // arrow up color
+  border-bottom-color: #464646; // arrow up color
 }
 .l4.slick-custom-tooltip.arrow-left-align::after {
   margin-left: 15px;

diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example16.ts b/examples/vite-demo-vanilla-bundle/src/examples/example16.ts
@@ -22,6 +22,7 @@ import './example16.scss';
 
 export default class Example16 {
   private _bindingEventService: BindingEventService;
+  private _darkMode = false;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
@@ -47,6 +48,7 @@ export default class Example16 {
   dispose() {
     this.sgb?.dispose();
     this._bindingEventService.unbindAll();
+    document.querySelector('.demo-container')?.classList.remove('dark-mode');
   }
 
   initializeGrid() {
@@ -326,6 +328,7 @@ export default class Example16 {
       autoResize: {
         container: '.demo-container',
       },
+      darkMode: this._darkMode,
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableCellNavigation: true,
@@ -354,6 +357,7 @@ export default class Example16 {
         filters: [{ columnId: 'prerequisites', searchTerms: [1, 3, 5, 7, 9, 12, 15, 18, 21, 25, 28, 29, 30, 32, 34] }],
       },
       rowHeight: 33,
+      headerRowHeight: 35,
       enableFiltering: true,
       rowSelectionOptions: {
         // True (Single Selection), False (Multiple Selections)
@@ -498,4 +502,14 @@ export default class Example16 {
     }
     return output;
   }
+
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    if (this._darkMode) {
+      document.querySelector('.demo-container')?.classList.add('dark-mode');
+    } else {
+      document.querySelector('.demo-container')?.classList.remove('dark-mode');
+    }
+    this.sgb.gridOptions = { darkMode: this._darkMode };
+  }
 }
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/icons.ts b/examples/vite-demo-vanilla-bundle/src/examples/icons.ts
@@ -59,6 +59,7 @@ export default class Icons {
       '.mdi.mdi-arrow-expand',
       '.mdi.mdi-arrow-expand-horizontal',
       '.mdi.mdi-arrow-split-vertical',
+      '.mdi.mdi-brightness-4',
       '.mdi.mdi-calendar',
       '.mdi.mdi-calendar-check',
       '.mdi.mdi-calendar-clock',
@@ -218,6 +219,7 @@ export default class Icons {
       '.mdi.mdi-text-box-remove',
       '.mdi.mdi-text-box-remove-outline',
       '.mdi.mdi-text-box-search-outline',
+      '.mdi.mdi-theme-light-dark',
       '.mdi.mdi-toggle-switch',
       '.mdi.mdi-toggle-switch-off-outline',
       '.mdi.mdi-trash-can',

diff --git a/examples/vite-demo-vanilla-bundle/src/material-styles.scss b/examples/vite-demo-vanilla-bundle/src/material-styles.scss
@@ -74,6 +74,7 @@
     --slick-multiselect-ok-button-text-hover-color: #00a736;
     --slick-multiselect-select-all-text-color: #007c28;
     --slick-column-picker-checkbox-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M8.8 19.6L1.2 12c-.3-.3-.3-.8 0-1.1l1-1c.3-.3.8-.3 1 0L9 15.7c.1.2.5.2.6 0L20.9 4.4c.2-.3.7-.3 1 0l1 1c.3.3.3.7 0 1L9.8 19.6c-.2.3-.7.3-1 0z"></path></svg>');
+    --slick-column-picker-checkbox-icon-unchecked: var(--slick-column-picker-checkbox-icon-checked);
     --slick-multiselect-icon-checked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"></path></svg>');
     --slick-multiselect-icon-unchecked: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="%23009530" viewBox="0 0 24 24"><path d="M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z"></path></svg>');
     --slick-multiselect-icon-color: var(--slick-primary-color);
@@ -105,9 +106,38 @@
         border: 1px solid #55B876;
         span {
           font-weight: normal;
-          color: #555;
+          color: var(--slick-dark-text-color);
         }
       }
     }
+
+    .ms-dark-mode,
+    .ms-drop.ms-dark-mode,
+    .slick-dark-mode .ms-dark-mode,
+    .slick-dark-mode {
+      --slick-base-dark-menu-bg-color: #212121;
+      --slick-primary-color: #4caf50;
+      --slick-button-primary-bg-color: var(--slick-primary-color);
+      --slick-column-picker-checkbox-color: #49a54e;
+      --slick-compound-filter-text-color: #66bb6a;
+      --slick-compound-filter-operator-select-border: 1px solid #66bb6a;
+      --slick-header-filter-row-border-bottom: 1px solid #505050;
+      --slick-container-border-right: 1px solid #505050;
+      --slick-container-border-top: 1px solid #505050;
+      --slick-container-border-left: 1px solid #505050;
+      --slick-container-border-bottom: 1px solid #505050;
+      --slick-pane-top-border-top: 1px solid #505050;
+      --slick-filled-filter-color: #00ab3b;
+      --slick-highlight-color: #49a54e;
+      --slick-pagination-icon-color: #49a54e;
+      --slick-checkbox-selector-checked-color: #4caf50;
+      --slick-row-mouse-hover-box-shadow: none;
+      --slick-row-mouse-hover-color: #575757;
+      --slick-checkbox-selector-opacity: 1;
+      --slick-checkbox-selector-icon-height: 22px;
+      --slick-checkbox-selector-icon-bg-color: transparent;
+      --slick-checkbox-selector-icon-border: none;
+      --ms-ok-button-text-color: #4caf50;
+    }
   }
 }
diff --git a/examples/vite-demo-vanilla-bundle/src/styles.css b/examples/vite-demo-vanilla-bundle/src/styles.css
diff --git a/examples/vite-demo-vanilla-bundle/src/styles.scss b/examples/vite-demo-vanilla-bundle/src/styles.scss
@@ -66,4 +66,28 @@ input.is-narrow {
 }
 .text-red {
   color: red;
+}
+.d-inline-flex {
+  display: inline-flex;
+}
+
+.demo-container {
+  background-color: #fff;
+  h3 {
+    color: #333;
+  }
+  .subtitle {
+    color: #727272;
+  }
+}
+.demo-container.dark-mode {
+  padding: 20px;
+  background-color: #33393e;
+  color: #dddddd;
+  h3 {
+    color: #dddddd;
+  }
+  .subtitle {
+    color: #cbcbcb;
+  }
 }
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -76,7 +76,7 @@
     "excel-builder-vanilla": "3.0.1",
     "flatpickr": "^4.6.13",
     "moment-mini": "^2.29.4",
-    "multiple-select-vanilla": "^2.0.2",
+    "multiple-select-vanilla": "^2.1.0",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12"
   },