Merge pull request #1374 from ghiscoding/bugfix/dark-mode-grid-menu

fix: hide Toggle Dark Mode from Grid Menu by default

Author: ghiscoding

docs/styling/dark-mode.md

@@ -64,6 +64,35 @@ this.compositeEditorInstance?.openDetails({
 });
 ```
 
+### Grid Menu
+By default there is no command for toggling the Dark Mode from the Grid Menu, however you can show the command at any time via the following settings:
+
+```ts
+export class MyDemo {
+  isDarkModeEnabled = false;
+
+  defineGrid() {
+    this.gridOptions = {
+      darkMode: this.isDarkModeEnabled,
+      gridMenu: {
+        hideToggleDarkModeCommand: false, // hidden by default
+
+        // you can optionally add extra command to toggle your own page styling as well
+        onCommand: (_, args) => {
+          // ...
+        },
+
+        // you can also change the icon and/or command name
+        iconToggleDarkModeCommand: 'fa fa-moon-o',
+        commandLabels: {
+          toggleDarkModeCommand: 'Toggle Dark Mode',
+        },
+      }
+    };
+  }
+}
+```
+
 ### Tweaking Some Colors
 
 The Dark Mode Theme was created by setting a few CSS variables, in some cases you might need to tweak some of these variables. Take a look at the Slickgrid-Universal [CSS variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables.scss#L976-L985) to see which variables were reassigned. Also note that if you're using other Themes like Material or Salesforce, then there's also other variables that are set (see [Material variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-material.scss#L159-L189) or [Salesforce variables](https://github.com/ghiscoding/slickgrid-universal/blob/670946dcedd330a70d2e88127a0042474e7a5348/packages/common/src/styles/_variables-theme-salesforce.scss#L202-L219))

src/app/examples/grid-composite-editor.component.html

@@ -1,7 +1,7 @@
 <div id="demo-container" class="container-fluid">
   <h2>
     {{title}}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkModeGrid()"
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()"
           data-test="toggle-dark-mode">
       <span>Toggle Dark Mode</span>
     </button>

src/app/examples/grid-composite-editor.component.ts

@@ -84,7 +84,7 @@ const myCustomTitleValidator = (value: any, args: any) => {
   encapsulation: ViewEncapsulation.None,
 })
 export class GridCompositeEditorComponent implements OnDestroy, OnInit {
-  private _darkModeGrid = false;
+  private _darkMode = false;
   title = 'Example 30: Composite Editor Modal';
   subTitle = `Composite Editor allows you to Create, Clone, Edit, Mass Update & Mass Selection Changes inside a nice Modal Window.
   <br>The modal is simply populated by looping through your column definition list and also uses a lot of the same logic as inline editing (see <a href="https://ghiscoding.gitbook.io/angular-slickgrid/grid-functionalities/composite-editor-modal" target="_blank">Composite Editor - Wiki</a>.)`;
@@ -384,7 +384,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
         container: '#demo-container',
         rightPadding: 10
       },
-      darkMode: this._darkModeGrid,
+      darkMode: this._darkMode,
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       showCustomFooter: true,
@@ -443,6 +443,15 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
       },
       // when using the cellMenu, you can change some of the default options and all use some of the callback methods
       enableCellMenu: true,
+      gridMenu: {
+        hideToggleDarkModeCommand: false, // hidden by default
+        onCommand: (_, args) => {
+          if (args.command === 'toggle-dark-mode') {
+            this._darkMode = !this._darkMode; // keep local toggle var in sync
+            this.toggleBodyBackground();
+          }
+        }
+      }
     };
   }
 
@@ -625,7 +634,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
       onRendered: (modalElm) => {
         // Bootstrap requires extra attribute when toggling Dark Mode (data-bs-theme="dark")
         // we need to manually add this attribute  ourselve before opening the Composite Editor Modal
-        modalElm.dataset.bsTheme = this._darkModeGrid ? 'dark' : 'light';
+        modalElm.dataset.bsTheme = this._darkMode ? 'dark' : 'light';
       },
       onSave: (formValues, _selection, dataContext) => {
         const serverResponseDelay = 50;
@@ -762,16 +771,20 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit {
     this.editQueue = [];
   }
 
-  toggleDarkModeGrid() {
-    this._darkModeGrid = !this._darkModeGrid;
-    if (this._darkModeGrid) {
+  toggleDarkMode() {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkMode });
+  }
+
+  toggleBodyBackground() {
+    if (this._darkMode) {
       document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');
       document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'dark';
     } else {
       document.querySelector('.panel-wm-content')!.classList.remove('dark-mode');
       document.querySelector<HTMLDivElement>('#demo-container')!.dataset.bsTheme = 'light';
     }
-    this.angularGrid.slickGrid?.setOptions({ darkMode: this._darkModeGrid });
   }
 
   mockProducts() {

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

@@ -1,7 +1,7 @@
 <div class="container-fluid">
   <h2>
     {{title}}
-    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkModeGrid()"
+    <button class="btn btn-outline-secondary btn-sm ms-3" (click)="toggleDarkMode()"
           data-test="toggle-dark-mode">
       <span>Toggle Dark Mode</span>
     </button>

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

@@ -547,7 +547,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy {
     );
   }
 
-  toggleDarkModeGrid() {
+  toggleDarkMode() {
     this._darkModeGrid = !this._darkModeGrid;
     if (this._darkModeGrid) {
       document.querySelector<HTMLDivElement>('.panel-wm-content')!.classList.add('dark-mode');

src/app/modules/angular-slickgrid/constants.ts

@@ -61,6 +61,7 @@ export class Constants {
     TEXT_SORT_ASCENDING: 'Sort Ascending',
     TEXT_SORT_DESCENDING: 'Sort Descending',
     TEXT_STARTS_WITH: 'Starts With',
+    TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
     TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
     TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
     TEXT_X_OF_Y_SELECTED: '# of % selected',

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

@@ -146,6 +146,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
       exportExcelCommandKey: 'EXPORT_TO_EXCEL',
       exportTextDelimitedCommandKey: 'EXPORT_TO_TAB_DELIMITED',
       refreshDatasetCommandKey: 'REFRESH_DATASET',
+      toggleDarkModeCommandKey: 'TOGGLE_DARK_MODE',
       toggleFilterCommandKey: 'TOGGLE_FILTER_ROW',
       togglePreHeaderCommandKey: 'TOGGLE_PRE_HEADER_ROW',
     },
@@ -158,6 +159,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideForceFitButton: false,
     hideRefreshDatasetCommand: false,
     hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars',
@@ -168,6 +170,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportExcelCommand: 'fa fa-file-excel-o text-success',
     iconExportTextDelimitedCommand: 'fa fa-download',
     iconRefreshDatasetCommand: 'fa fa-refresh',
+    iconToggleDarkModeCommand: 'fa fa-moon-o mdi mdi-brightness-4',
     iconToggleFilterCommand: 'fa fa-random',
     iconTogglePreHeaderCommand: 'fa fa-random',
     menuWidth: 16,

test/cypress/e2e/example17.cy.ts

@@ -149,7 +149,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
     cy.get('[data-test="toggle-filtering-btn"]').click(); // show it back
   });
 
-  it.skip('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => {
+  it('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => {
     const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel'];
 
     cy.get('#grid17')
@@ -170,7 +170,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should be able to toggle Filters functionality', () => {
+  it('should be able to toggle Filters functionality', () => {
     const expectedTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Completed', 'Title'];
 
     cy.get('[data-test="toggle-filtering-btn"]').click(); // hide it
@@ -192,7 +192,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       .each(($child, index) => expect($child.text()).to.eq(expectedTitles[index]));
   });
 
-  it.skip('should be able to toggle Sorting functionality (disable) and expect all header menu Sorting commands to be hidden and also not show Sort hint while hovering a column', () => {
+  it('should be able to toggle Sorting functionality (disable) and expect all header menu Sorting commands to be hidden and also not show Sort hint while hovering a column', () => {
     const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column'];
 
     cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints
@@ -220,7 +220,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => {
+  it('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => {
     const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel'];
 
     cy.get('#grid17')
@@ -241,7 +241,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should be able to toggle Sorting functionality (re-enable) and expect all Sorting header menu commands to be hidden and also not show Sort hint while hovering a column', () => {
+  it('should be able to toggle Sorting functionality (re-enable) and expect all Sorting header menu commands to be hidden and also not show Sort hint while hovering a column', () => {
     const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column'];
 
     cy.get('.slick-sort-indicator').should('have.length', 0); // sort icon hints
@@ -265,7 +265,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => {
+  it('should expect "Clear Sorting" command to be hidden in the Grid Menu', () => {
     const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel'];
 
     cy.get('#grid17')
@@ -286,7 +286,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should be able to click disable Sorting functionality button and expect all Sorting commands to be hidden and also not show Sort hint while hovering a column', () => {
+  it('should be able to click disable Sorting functionality button and expect all Sorting commands to be hidden and also not show Sort hint while hovering a column', () => {
     const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column'];
 
     cy.get('.slick-sort-indicator').should('have.length.greaterThan', 0); // sort icon hints
@@ -314,7 +314,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should be able to click disable Filter functionality button and expect all Filter commands to be hidden and also not show Sort hint while hovering a column', () => {
+  it('should be able to click disable Filter functionality button and expect all Filter commands to be hidden and also not show Sort hint while hovering a column', () => {
     const expectedFullHeaderMenuCommands = ['Resize by Content', '', 'Sort Ascending', 'Sort Descending', '', 'Remove Filter', 'Remove Sort', 'Hide Column'];
 
     cy.get('[data-test="disable-filters-btn"]').click().click(); // even clicking twice should have same result
@@ -340,7 +340,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => {
+  it('should expect "Clear all Filters" command to be hidden in the Grid Menu', () => {
     const expectedFullHeaderMenuCommands = ['Clear all Filters', 'Clear all Sorting', 'Toggle Filter Row', 'Export to Excel'];
 
     cy.get('#grid17')
@@ -361,7 +361,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should open Column Picker and show the "Duration" column back to visible and expect it to have kept its position after toggling filter/sorting', () => {
+  it('should open Column Picker and show the "Duration" column back to visible and expect it to have kept its position after toggling filter/sorting', () => {
     // first 2 cols are hidden but they do count as li item
     const expectedFullPickerTitles = ['', '', 'Title', '% Complete', 'Start', 'Finish', 'Duration', 'Completed'];
 
@@ -404,7 +404,7 @@ describe('Example 17 - Row Move & Checkbox Selector Selector Plugins', () => {
       });
   });
 
-  it.skip('should add Edit/Delete columns and expect 2 new columns added at the beginning of the grid', () => {
+  it('should add Edit/Delete columns and expect 2 new columns added at the beginning of the grid', () => {
     const newExpectedColumns = ['', '', ...fullTitles];
     cy.get('[data-test="add-crud-columns-btn"]').click();