Skip to content

Commit

Permalink
feat(common): add optional "Toggle Dark Mode" in Grid Menu (#1418)
Browse files Browse the repository at this point in the history 
* feat(common): add optional "Toggle Dark Mode" in Grid Menu
  • Loading branch information
@ghiscoding
ghiscoding committed Mar 6, 2024
1 parent 7e00087 commit 990c1df
Show file tree
Hide file tree
Showing 16 changed files with 239 additions and 116 deletions.
1 change: 1 addition & 0 deletions examples/vite-demo-vanilla-bundle/public/i18n/en.json
View file
Expand Up @@ -61,6 +61,7 @@
"STARTS_WITH": "Starts With",
"SYNCHRONOUS_RESIZE": "Synchronous resize",
"TOGGLE_ALL_GROUPS": "Toggle all Groups",
"TOGGLE_DARK_MODE": "Toggle Dark Mode",
"TOGGLE_FILTER_ROW": "Toggle Filter Row",
"TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
"UNFREEZE_COLUMNS": "Unfreeze Columns",
Expand Down
1 change: 1 addition & 0 deletions examples/vite-demo-vanilla-bundle/public/i18n/fr.json
View file
Expand Up @@ -61,6 +61,7 @@
"STARTS_WITH": "Commence par",
"SYNCHRONOUS_RESIZE": "Redimension synchrone",
"TOGGLE_ALL_GROUPS": "Basculer tous les groupes",
"TOGGLE_DARK_MODE": "Basculer le mode clair/sombre",
"TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
"TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
"UNFREEZE_COLUMNS": "Dégeler les colonnes",
Expand Down
8 changes: 8 additions & 0 deletions examples/vite-demo-vanilla-bundle/src/examples/example01.ts
View file
Expand Up @@ -66,6 +66,14 @@ export default class Example01 {
gridHeight: 225,
gridWidth: 800,
rowHeight: 33,
gridMenu: {
hideToggleDarkModeCommand: false, // disabled command by default
onCommand: (_, args) => {
if (args.command === 'toggle-dark-mode') {
this._darkModeGrid1 = !this._darkModeGrid1; // keep local toggle var in sync
}
}
}
};

// copy the same Grid Options and Column Definitions to 2nd grid
Expand Down
4 changes: 4 additions & 0 deletions examples/vite-demo-vanilla-bundle/src/examples/example12.scss
View file
Expand Up @@ -3,3 +3,7 @@ $control-height: 2.4em;

// @import '@slickgrid-universal/common/dist/styles/sass/slickgrid-theme-salesforce.scss';
@import 'bulma/bulma';

.slick-dark-mode .slick-pagination {
background-color: #2d2d2d;
}
17 changes: 15 additions & 2 deletions examples/vite-demo-vanilla-bundle/src/examples/example12.ts
View file
Expand Up @@ -475,6 +475,15 @@ export default class Example12 {
},
// 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, // disabled command by default
onCommand: (_, args) => {
if (args.command === 'toggle-dark-mode') {
this._darkMode = !this._darkMode; // keep local toggle var in sync
this.toggleBodyBackground();
}
}
}
};
}

Expand Down Expand Up @@ -749,13 +758,17 @@ export default class Example12 {

toggleDarkMode() {
this._darkMode = !this._darkMode;
this.toggleBodyBackground();
this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode };
this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode });
}

toggleBodyBackground() {
if (this._darkMode) {
document.querySelector('.demo-container')?.classList.add('dark-mode');
} else {
document.querySelector('.demo-container')?.classList.remove('dark-mode');
}
this.sgb.gridOptions = { ...this.sgb.gridOptions, darkMode: this._darkMode };
this.sgb.slickGrid?.setOptions({ darkMode: this._darkMode });
}

mockProducts() {
Expand Down
8 changes: 4 additions & 4 deletions examples/vite-demo-vanilla-bundle/src/material-styles.scss
View file
Expand Up @@ -118,7 +118,7 @@
.slick-dark-mode .ms-dark-mode,
.slick-dark-mode {
--slick-base-dark-menu-bg-color: #212121;
--slick-primary-color: #4caf50;
--slick-primary-color: #66bb6a;
--slick-button-primary-bg-color: var(--slick-primary-color);
--slick-cell-box-shadow: none;
--slick-column-picker-checkbox-color: #49a54e;
Expand All @@ -130,18 +130,18 @@
--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-filled-filter-color: #66bb6a;
--slick-highlight-color: #49a54e;
--slick-pagination-icon-color: #49a54e;
--slick-checkbox-selector-checked-color: #4caf50;
--slick-checkbox-selector-checked-color: #66bb6a;
--slick-row-mouse-hover-box-shadow: none;
--slick-row-mouse-hover-color: #505050;
--slick-row-selected-color: #474747;
--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;
--ms-ok-button-text-color: #66bb6a;
}
}
}
1 change: 1 addition & 0 deletions packages/common/src/constants.ts
View file
Expand Up @@ -64,6 +64,7 @@ export class Constants {
TEXT_SORT_DESCENDING: 'Sort Descending',
TEXT_STARTS_WITH: 'Starts With',
TEXT_TOGGLE_ALL_GROUPS: 'Toggle all Groups',
TEXT_TOGGLE_DARK_MODE: 'Toggle Dark Mode',
TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
TEXT_UNFREEZE_COLUMNS: 'Unfreeze Columns',
Expand Down
104 changes: 88 additions & 16 deletions packages/common/src/extensions/__tests__/slickGridMenu.spec.ts
View file

Large diffs are not rendered by default.

185 changes: 94 additions & 91 deletions packages/common/src/extensions/slickGridMenu.ts
View file
Expand Up @@ -565,160 +565,158 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
const translationPrefix = getTranslationPrefix(gridOptions);
const commandLabels = this._addonOptions?.commandLabels;

// show grid menu: Unfreeze Columns/Rows
if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearFrozenColumnsCommand) {
const commandName = 'clear-pinning';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
if (this._addonOptions && this.gridOptions) {
// show grid menu: Unfreeze Columns/Rows
if (!this._addonOptions.hideClearFrozenColumnsCommand) {
const commandName = 'clear-pinning';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconClearFrozenColumnsCommand || 'fa fa-times',
titleKey: `${translationPrefix}${commandLabels?.clearFrozenColumnsCommandKey ?? 'CLEAR_PINNING'}`,
disabled: false,
command: commandName,
positionOrder: 52
}
);
});
}
}
}

if (this.gridOptions && (this.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad)) {
// show grid menu: Clear all Filters
if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearAllFiltersCommand) {
const commandName = 'clear-filter';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
if (this.gridOptions.enableFiltering && !this.sharedService.hideHeaderRowAfterPageLoad) {
// show grid menu: Clear all Filters
if (!this._addonOptions.hideClearAllFiltersCommand) {
const commandName = 'clear-filter';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconClearAllFiltersCommand || 'fa fa-filter text-danger',
titleKey: `${translationPrefix}${commandLabels?.clearAllFiltersCommandKey ?? 'CLEAR_ALL_FILTERS'}`,
disabled: false,
command: commandName,
positionOrder: 50
}
);
});
}
}
}

// show grid menu: toggle filter row
if (this.gridOptions && this._addonOptions && !this._addonOptions.hideToggleFilterCommand) {
const commandName = 'toggle-filter';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
// show grid menu: toggle filter row
if (!this._addonOptions.hideToggleFilterCommand) {
const commandName = 'toggle-filter';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconToggleFilterCommand || 'fa fa-random',
titleKey: `${translationPrefix}${commandLabels?.toggleFilterCommandKey ?? 'TOGGLE_FILTER_ROW'}`,
disabled: false,
command: commandName,
positionOrder: 53
}
);
});
}
}
}

// show grid menu: refresh dataset
if (backendApi && this.gridOptions && this._addonOptions && !this._addonOptions.hideRefreshDatasetCommand) {
const commandName = 'refresh-dataset';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
// show grid menu: refresh dataset
if (backendApi && !this._addonOptions.hideRefreshDatasetCommand) {
const commandName = 'refresh-dataset';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconRefreshDatasetCommand || 'fa fa-refresh',
titleKey: `${translationPrefix}${commandLabels?.refreshDatasetCommandKey ?? 'REFRESH_DATASET'}`,
disabled: false,
command: commandName,
positionOrder: 57
}
);
positionOrder: 58
});
}
}
}
}

if (this.gridOptions.showPreHeaderPanel) {
// show grid menu: toggle pre-header row
if (this.gridOptions && this._addonOptions && !this._addonOptions.hideTogglePreHeaderCommand) {
const commandName = 'toggle-preheader';
// show grid menu: toggle dark mode
if (!this._addonOptions.hideToggleDarkModeCommand) {
const commandName = 'toggle-dark-mode';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconToggleDarkModeCommand || 'fa fa-random',
titleKey: `${translationPrefix}${commandLabels?.toggleDarkModeCommandKey ?? 'TOGGLE_DARK_MODE'}`,
disabled: false,
command: commandName,
positionOrder: 54
});
}
}

if (this.gridOptions.showPreHeaderPanel) {
// show grid menu: toggle pre-header row
if (!this._addonOptions.hideTogglePreHeaderCommand) {
const commandName = 'toggle-preheader';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconTogglePreHeaderCommand || 'fa fa-random',
titleKey: `${translationPrefix}${commandLabels?.togglePreHeaderCommandKey ?? 'TOGGLE_PRE_HEADER_ROW'}`,
disabled: false,
command: commandName,
positionOrder: 53
}
);
});
}
}
}
}

if (this.gridOptions.enableSorting) {
// show grid menu: Clear all Sorting
if (this.gridOptions && this._addonOptions && !this._addonOptions.hideClearAllSortingCommand) {
const commandName = 'clear-sorting';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
if (this.gridOptions.enableSorting) {
// show grid menu: Clear all Sorting
if (!this._addonOptions.hideClearAllSortingCommand) {
const commandName = 'clear-sorting';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconClearAllSortingCommand || 'fa fa-unsorted text-danger',
titleKey: `${translationPrefix}${commandLabels?.clearAllSortingCommandKey ?? 'CLEAR_ALL_SORTING'}`,
disabled: false,
command: commandName,
positionOrder: 51
}
);
});
}
}
}
}

// show grid menu: Export to file
if (this.gridOptions?.enableTextExport && this._addonOptions && !this._addonOptions.hideExportCsvCommand) {
const commandName = 'export-csv';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
// show grid menu: Export to file
if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportCsvCommand) {
const commandName = 'export-csv';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconExportCsvCommand || 'fa fa-download',
titleKey: `${translationPrefix}${commandLabels?.exportCsvCommandKey ?? 'EXPORT_TO_CSV'}`,
disabled: false,
command: commandName,
positionOrder: 54
}
);
positionOrder: 55
});
}
}
}

// show grid menu: Export to Excel
if (this.gridOptions && this.gridOptions.enableExcelExport && this._addonOptions && !this._addonOptions.hideExportExcelCommand) {
const commandName = 'export-excel';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
// show grid menu: Export to Excel
if (this.gridOptions.enableExcelExport && !this._addonOptions.hideExportExcelCommand) {
const commandName = 'export-excel';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconExportExcelCommand || 'fa fa-file-excel-o text-success',
titleKey: `${translationPrefix}${commandLabels?.exportExcelCommandKey ?? 'EXPORT_TO_EXCEL'}`,
disabled: false,
command: commandName,
positionOrder: 55
}
);
positionOrder: 56
});
}
}
}

// show grid menu: export to text file as tab delimited
if (this.gridOptions?.enableTextExport && this._addonOptions && !this._addonOptions.hideExportTextDelimitedCommand) {
const commandName = 'export-text-delimited';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push(
{
// show grid menu: export to text file as tab delimited
if (this.gridOptions.enableTextExport && !this._addonOptions.hideExportTextDelimitedCommand) {
const commandName = 'export-text-delimited';
if (!originalCommandItems.some(item => item !== 'divider' && item.hasOwnProperty('command') && item.command === commandName)) {
gridMenuCommandItems.push({
iconCssClass: this._addonOptions.iconExportTextDelimitedCommand || 'fa fa-download',
titleKey: `${translationPrefix}${commandLabels?.exportTextDelimitedCommandKey ?? 'EXPORT_TO_TAB_DELIMITED'}`,
disabled: false,
command: commandName,
positionOrder: 56
}
);
positionOrder: 57
});
}
}
}

// add the custom "Commands" title if there are any commands
const commandItems = this._addonOptions?.commandItems || [];
if (this.gridOptions && this._addonOptions && (Array.isArray(gridMenuCommandItems) && gridMenuCommandItems.length > 0 || (Array.isArray(commandItems) && commandItems.length > 0))) {
this._addonOptions.commandTitle = this._addonOptions.commandTitle || this.extensionUtility.getPickerTitleOutputString('commandTitle', 'gridMenu');
// add the custom "Commands" title if there are any commands
const commandItems = this._addonOptions?.commandItems || [];
if ((Array.isArray(gridMenuCommandItems) && gridMenuCommandItems.length > 0 || (Array.isArray(commandItems) && commandItems.length > 0))) {
this._addonOptions.commandTitle = this._addonOptions.commandTitle || this.extensionUtility.getPickerTitleOutputString('commandTitle', 'gridMenu');
}
}

return gridMenuCommandItems;
Expand Down Expand Up @@ -797,6 +795,11 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
console.error(`[Slickgrid-Universal] You must register the TextExportService to properly use Export to File in the Grid Menu. Example:: this.gridOptions = { enableTextExport: true, externalResources: [new TextExportService()] };`);
}
break;
case 'toggle-dark-mode':
const currentDarkMode = this.sharedService.gridOptions.darkMode;
this.grid.setOptions({ darkMode: !currentDarkMode });
this.sharedService.gridOptions.darkMode = !currentDarkMode;
break;
case 'toggle-filter':
let showHeaderRow = this.gridOptions?.showHeaderRow ?? false;
showHeaderRow = !showHeaderRow; // inverse show header flag
Expand Down

0 comments on commit 990c1df

Please sign in to comment.