feat(plugins): show bullet when command menu icon missing

ghiscoding · Nov 27, 2021 · cbe580a · cbe580a
1 parent 576a762
commit cbe580a
Show file tree

Hide file tree

Showing 13 changed files with 59 additions and 22 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example07.ts
@@ -72,6 +72,7 @@ export class Example7 {
         excludeFromExport: true, excludeFromHeaderMenu: true,
         formatter: () => `<div class="button-style margin-auto" style="width: 35px; margin-top: -1px;"><span class="mdi mdi-chevron-down mdi-22px color-primary"></span></div>`,
         cellMenu: {
+          width: 185,
           commandTitleKey: 'COMMANDS',
           commandItems: [
             {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -323,7 +323,7 @@ export class Example11 {
           {
             command: 'modal',
             title: 'Mass Update',
-            iconCssClass: 'mdi mdi-table-edit',
+            // iconCssClass: 'mdi mdi-table-edit',
           },
         ],
         onCommand: (e, args) => this.executeCommand(e, args)

diff --git a/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts b/packages/common/src/extensions/__tests__/slickCellMenu.plugin.spec.ts
@@ -279,11 +279,11 @@ describe('CellMenu Plugin', () => {
                 <button class="close" type="button" data-dismiss="slick-cell-menu" aria-label="Close">×</button>
               </div>
               <li class="slick-cell-menu-item orange" data-command="command1">
-                <div class="slick-cell-menu-icon"></div>
+                <div class="slick-cell-menu-icon">◦</div>
                 <span class="slick-cell-menu-content">Command 1</span>
               </li>
               <li class="slick-cell-menu-item" data-command="command2">
-                <div class="slick-cell-menu-icon"></div>
+                <div class="slick-cell-menu-icon">◦</div>
                 <span class="slick-cell-menu-content">Command 2</span>
               </li>
               <li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>
@@ -670,11 +670,11 @@ describe('CellMenu Plugin', () => {
                 <button class="close" type="button" data-dismiss="slick-cell-menu" aria-label="Close">×</button>
               </div>
               <li class="slick-cell-menu-item purple" data-option="option1">
-                <div class="slick-cell-menu-icon"></div>
+                <div class="slick-cell-menu-icon">◦</div>
                 <span class="slick-cell-menu-content">Option 1</span>
               </li>
               <li class="slick-cell-menu-item" data-option="option2">
-                <div class="slick-cell-menu-icon"></div>
+                <div class="slick-cell-menu-icon">◦</div>
                 <span class="slick-cell-menu-content">Option 2</span>
               </li>
               <li class="slick-cell-menu-item slick-cell-menu-item-divider"></li>

diff --git a/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts b/packages/common/src/extensions/__tests__/slickContextMenu.spec.ts
@@ -309,11 +309,11 @@ describe('ContextMenu Plugin', () => {
                 <button class="close" type="button" data-dismiss="slick-context-menu" aria-label="Close">×</button>
               </div>
               <li class="slick-context-menu-item orange" data-command="command1">
-                <div class="slick-context-menu-icon"></div>
+                <div class="slick-context-menu-icon">◦</div>
                 <span class="slick-context-menu-content">Command 1</span>
               </li>
               <li class="slick-context-menu-item" data-command="command2">
-                <div class="slick-context-menu-icon"></div>
+                <div class="slick-context-menu-icon">◦</div>
                 <span class="slick-context-menu-content">Command 2</span>
               </li>
               <li class="slick-context-menu-item slick-context-menu-item-divider"></li>
@@ -482,6 +482,24 @@ describe('ContextMenu Plugin', () => {
         expect(commandIconElm2.classList.contains('red')).toBeTruthy();
       });
 
+      it('should create a Context Menu item with a bullet character when "iconCssClass" is not provided', () => {
+        plugin.dispose();
+        plugin.init({ commandItems: deepCopy(commandItemsMock) });
+        (gridOptionsMock.contextMenu.commandItems[1] as MenuCommandItem).title = 'Help';
+        (gridOptionsMock.contextMenu.commandItems[1] as MenuCommandItem).iconCssClass = undefined;
+        gridStub.onContextMenu.notify({ grid: gridStub }, eventData, gridStub);
+
+        const contextMenuElm = document.body.querySelector('.slick-context-menu.slickgrid12345') as HTMLDivElement;
+        const commandListElm = contextMenuElm.querySelector('.slick-context-menu-command-list') as HTMLDivElement;
+        const commandItemElm2 = commandListElm.querySelector('[data-command="command2"]') as HTMLDivElement;
+        const commandContentElm2 = commandItemElm2.querySelector('.slick-context-menu-content') as HTMLDivElement;
+        const commandIconElm2 = commandItemElm2.querySelector('.slick-context-menu-icon') as HTMLDivElement;
+
+        expect(commandListElm.querySelectorAll('.slick-context-menu-item').length).toBe(5);
+        expect(commandContentElm2.textContent).toBe('Help');
+        expect(commandIconElm2.textContent).toBe('◦');
+      });
+
       it('should create a Context Menu item with "textCssClass" and expect extra css classes added to the item text DOM element', () => {
         plugin.dispose();
         plugin.init({ commandItems: deepCopy(commandItemsMock) });
@@ -1233,11 +1251,11 @@ describe('ContextMenu Plugin', () => {
                 <button class="close" type="button" data-dismiss="slick-context-menu" aria-label="Close">×</button>
               </div>
               <li class="slick-context-menu-item purple" data-option="option1">
-                <div class="slick-context-menu-icon"></div>
+                <div class="slick-context-menu-icon">◦</div>
                 <span class="slick-context-menu-content">Option 1</span>
               </li>
               <li class="slick-context-menu-item" data-option="option2">
-                <div class="slick-context-menu-icon"></div>
+                <div class="slick-context-menu-icon">◦</div>
                 <span class="slick-context-menu-content">Option 2</span>
               </li>
               <li class="slick-context-menu-item slick-context-menu-item-divider"></li>

diff --git a/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts b/packages/common/src/extensions/__tests__/slickHeaderMenu.spec.ts
@@ -279,7 +279,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-outline" data-command="show-positive-numbers">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -301,7 +301,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item slick-header-menu-item-disabled mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -325,7 +325,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item slick-header-menu-item-disabled mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -345,7 +345,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item slick-header-menu-item-hidden mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -365,7 +365,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon" style="background-image: url(/images/some-image.png);"></div>
+            <div class="slick-header-menu-icon" style="background-image: url(/images/some-image.png);">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -387,7 +387,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content bold red">Some Title</span>
           </li>`
       ));
@@ -408,7 +408,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Some Tooltip">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -430,7 +430,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -456,7 +456,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -485,7 +485,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -514,7 +514,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));
@@ -569,7 +569,7 @@ describe('HeaderMenu Plugin', () => {
       expect(commandElm).toBeTruthy();
       expect(removeExtraSpaces(commandElm.outerHTML)).toBe(removeExtraSpaces(
         `<li class="slick-header-menu-item mdi mdi-lightbulb-on" data-command="show-negative-numbers" title="Highlight negative numbers.">
-            <div class="slick-header-menu-icon"></div>
+            <div class="slick-header-menu-icon">◦</div>
             <span class="slick-header-menu-content"></span>
           </li>`
       ));

diff --git a/packages/common/src/extensions/menuBaseClass.ts b/packages/common/src/extensions/menuBaseClass.ts
@@ -211,6 +211,8 @@ export class MenuBaseClass<M extends CellMenu | ContextMenu | GridMenu | HeaderM
 
         if ((item as MenuCommandItem | MenuOptionItem).iconCssClass) {
           iconElm.classList.add(...(item as MenuCommandItem | MenuOptionItem).iconCssClass!.split(' '));
+        } else {
+          iconElm.textContent = '◦';
         }
 
         if ((item as MenuCommandItem | MenuOptionItem).iconImage) {

diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
@@ -423,7 +423,7 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
   /** Update the Titles of each sections (command, commandTitle, ...) */
   updateAllTitles(options: GridMenuOption) {
     if (this._commandTitleElm?.textContent && (options.customTitle || options.commandTitle)) {
-      this._commandTitleElm.textContent = (options.customTitle || options.commandTitle) as string;
+      this._commandTitleElm.textContent = this._gridMenuOptions?.commandItems?.length ? (options.customTitle || options.commandTitle) as string : '';
       this._gridMenuOptions!.commandTitle = this._commandTitleElm.textContent;
     }
     if (this._columnTitleElm?.textContent && options.columnTitle) {

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -37,6 +37,7 @@ export const GlobalGridOptions: GridOption = {
     hideCloseButton: true,
     hideCommandSection: false,
     hideOptionSection: false,
+    showBulletWhenIconMissing: true,
   },
   compositeEditorOptions: {
     labels: {
@@ -72,6 +73,7 @@ export const GlobalGridOptions: GridOption = {
     iconExportCsvCommand: 'fa fa-download mdi mdi-download',
     iconExportExcelCommand: 'fa fa-file-excel-o mdi mdi-file-excel-outline',
     iconExportTextDelimitedCommand: 'fa fa-download mdi mdi-download',
+    showBulletWhenIconMissing: true,
   },
   customFooterOptions: {
     dateFormat: 'YYYY-MM-DD, hh:mm a',
@@ -200,6 +202,7 @@ export const GlobalGridOptions: GridOption = {
     iconTogglePreHeaderCommand: 'fa fa-random mdi mdi-flip-vertical',
     menuWidth: 16,
     resizeOnShowHeaderRow: true,
+    showBulletWhenIconMissing: true,
     headerColumnValueExtractor: pickerHeaderColumnValueExtractor
   },
   headerMenu: {

diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts
@@ -65,6 +65,9 @@ export interface CellMenuOption {
   /** Same as "optionTitle", except that it's a translation key which can be used on page load and/or when switching locale */
   optionTitleKey?: string;
 
+  /** Defaults to True, should we show bullets when icons are missing? */
+  showBulletWhenIconMissing?: boolean;
+
   // --
   // action/override callbacks
 

diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts
@@ -113,6 +113,9 @@ export interface ContextMenuOption {
   /** Same as "optionTitle", except that it's a translation key which can be used on page load and/or when switching locale */
   optionTitleKey?: string;
 
+  /** Defaults to True, should we show bullets when icons are missing? */
+  showBulletWhenIconMissing?: boolean;
+
   // --
   // action/override callbacks
 

diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts
@@ -148,6 +148,9 @@ export interface GridMenuOption {
   /** Defaults to true, allows the user to control if the default gridMenu button (located on the top right corner by default CSS) should be created or omitted */
   showButton?: boolean;
 
+  /** Defaults to True, should we show bullets when icons are missing? */
+  showBulletWhenIconMissing?: boolean;
+
   /** Defaults to "Synchronous resize" which is 1 of the last 2 checkbox title shown at the end of the picker list */
   syncResizeTitle?: string;
 

diff --git a/packages/common/src/styles/slick-controls.scss b/packages/common/src/styles/slick-controls.scss
@@ -290,6 +290,7 @@
 
 .slick-grid-menu-icon {
   display: inline-block;
+  text-align: center;
   font-size: var(--slick-grid-menu-icon-font-size, $slick-grid-menu-icon-font-size);
   line-height: var(--slick-grid-menu-icon-line-height, $slick-grid-menu-icon-line-height);
   margin-right: var(--slick-grid-menu-icon-margin-right, $slick-grid-menu-icon-margin-right);

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -102,6 +102,7 @@
     }
 
     .slick-cell-menu-icon {
+      text-align: center;
       font-size: var(--slick-cell-menu-icon-font-size, $slick-cell-menu-icon-font-size);
       background-position: center center;
       background-repeat: no-repeat;
@@ -238,6 +239,7 @@
       background-position: center center;
       background-repeat: no-repeat;
       display: inline-block;
+      text-align: center;
       font-size: var(--slick-context-menu-icon-font-size, $slick-context-menu-icon-font-size);
       height: var(--slick-context-menu-icon-height, $slick-context-menu-icon-height);
       line-height: var(--slick-context-menu-icon-line-height, $slick-context-menu-icon-line-height);
@@ -473,6 +475,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   display: inline-block;
+  text-align: center;
   color: var(--slick-header-menu-icon-font-color, $slick-header-menu-icon-font-color);
   font-size: var(--slick-header-menu-icon-font-size, $slick-header-menu-icon-font-size);
   font-weight: var(--slick-header-menu-icon-font-weight, $slick-header-menu-icon-font-weight);