fix: hide Toggle Dark Mode from Grid Menu by default (#1167)

* fix: hide Toggle Dark Mode from Grid Menu by default

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))

packages/aurelia-slickgrid/src/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',

packages/aurelia-slickgrid/src/global-grid-options.ts

@@ -169,6 +169,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',
     },
@@ -181,6 +182,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     hideForceFitButton: false,
     hideRefreshDatasetCommand: false,
     hideSyncResizeButton: true,
+    hideToggleDarkModeCommand: true,
     hideToggleFilterCommand: false,
     hideTogglePreHeaderCommand: false,
     iconCssClass: 'fa fa-bars',
@@ -191,6 +193,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
     iconExportExcelCommand: 'fa fa-file-excel-o',
     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,

packages/demo/src/examples/slickgrid/example30.ts

@@ -79,7 +79,7 @@ const myCustomTitleValidator = (value: any, args: any) => {
 };
 
 export class Example30 {
-  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/aurelia-slickgrid/grid-functionalities/composite-editor-modal" target="_blank">Composite Editor - Wiki</a>.)`;
@@ -378,7 +378,7 @@ export class Example30 {
         container: '#demo-container',
         rightPadding: 10
       },
-      darkMode: this._darkModeGrid,
+      darkMode: this._darkMode,
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       showCustomFooter: true,
@@ -437,6 +437,15 @@ export class Example30 {
       },
       // 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();
+          }
+        }
+      }
     };
   }
 
@@ -623,7 +632,7 @@ export class Example30 {
       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;
@@ -666,15 +675,19 @@ export class Example30 {
   }
 
   toggleDarkMode() {
-    this._darkModeGrid = !this._darkModeGrid;
-    if (this._darkModeGrid) {
+    this._darkMode = !this._darkMode;
+    this.toggleBodyBackground();
+    this.aureliaGrid.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.aureliaGrid.slickGrid?.setOptions({ darkMode: this._darkModeGrid });
   }
 
   removeUnsavedStylingFromCell(_item: any, column: Column, row: number) {

test/cypress/e2e/example16.cy.ts

@@ -148,7 +148,7 @@ describe('Example 16 - 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('#grid16')
@@ -169,7 +169,7 @@ describe('Example 16 - 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
@@ -191,7 +191,7 @@ describe('Example 16 - 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
@@ -219,7 +219,7 @@ describe('Example 16 - 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('#grid16')
@@ -240,7 +240,7 @@ describe('Example 16 - 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
@@ -264,7 +264,7 @@ describe('Example 16 - 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('#grid16')
@@ -285,7 +285,7 @@ describe('Example 16 - 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
@@ -313,7 +313,7 @@ describe('Example 16 - 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
@@ -339,7 +339,7 @@ describe('Example 16 - 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('#grid16')
@@ -360,7 +360,7 @@ describe('Example 16 - 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'];
 
@@ -403,7 +403,7 @@ describe('Example 16 - 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();