fix(core): empty warning message should work with multiple grids (#158)

* fix(core): empty warning message should work with multiple grids - also fix an issue with how to detect frozen grid, we need to check the frozenColumn instead of frozenRow * refactor: tweak cellMenu/contextMenu with a smaller min-width
ghiscoding · Nov 13, 2020 · 9e7c023 · 9e7c023
1 parent 83e5fc3
commit 9e7c023
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 60 deletions.
diff --git a/docs/app.53ec050882170b75c26d.bundle.css b/docs/app.53ec050882170b75c26d.bundle.css
diff --git a/docs/app.5aca34cb905c00578891.bundle.js → docs/app.688ebadadf99d39a93ec.bundle.js b/docs/app.5aca34cb905c00578891.bundle.js → docs/app.688ebadadf99d39a93ec.bundle.js
diff --git a/docs/app.5aca34cb905c00578891.bundle.map → docs/app.688ebadadf99d39a93ec.bundle.map b/docs/app.5aca34cb905c00578891.bundle.map → docs/app.688ebadadf99d39a93ec.bundle.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.53ec050882170b75c26d.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.5aca34cb905c00578891.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.53ec050882170b75c26d.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.688ebadadf99d39a93ec.bundle.js"></script></body></html>
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -221,7 +221,7 @@ export class Example3 {
         },
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -273,7 +273,7 @@ export class Example4 {
         },
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           // you can override the logic of when the menu is usable
           // for example say that we want to show a menu only when then Priority is set to 'High'.
           // Note that this ONLY overrides the usability itself NOT the text displayed in the cell,

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -249,7 +249,7 @@ export class Example11 {
         formatter: () => `<div class="fake-hyperlink">Action <span class="font-12px">&#9660;</span></div>`,
         cellMenu: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example12.ts
@@ -283,7 +283,7 @@ export class Example12 {
         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: {
           hideCloseButton: false,
-          width: 200,
+          width: 175,
           commandTitle: 'Commands',
           commandItems: [
             {

diff --git a/packages/common/src/interfaces/cellMenuOption.interface.ts b/packages/common/src/interfaces/cellMenuOption.interface.ts
@@ -41,7 +41,10 @@ export interface CellMenuOption {
   /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
   maxHeight?: number | string;
 
-  /** Width that the drop menu can have */
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$cell-menu-min-width`
+   */
   width?: number | string;
 
   /** Array of Option Items (title, option, disabled, ...) */

diff --git a/packages/common/src/interfaces/contextMenuOption.interface.ts b/packages/common/src/interfaces/contextMenuOption.interface.ts
@@ -86,7 +86,10 @@ export interface ContextMenuOption {
   /** Maximum height that the drop menu will have, can be a number (250) or text ("none") */
   maxHeight?: number | string;
 
-  /** Width that the drop menu can have */
+  /**
+   * Width that the drop menu can have.
+   * NOTE: the menu also has a "min-width" defined in CSS/SASS and setting a "width" below that threshold won't work, you change this min-width via SASS `$context-menu-min-width`
+   */
   width?: number | string;
 
   /** Array of Option Items (title, option, disabled, ...) */

diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -136,7 +136,7 @@ export class GroupingAndColspanService {
     let lastColumnGroup = '';
     let widthTotal = 0;
     const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0;
-    const isFrozenGrid = (this._gridOptions?.frozenRow !== undefined && this._gridOptions.frozenRow >= 0);
+    const isFrozenGrid = (this._gridOptions?.frozenColumn !== undefined && this._gridOptions.frozenColumn >= 0);
 
     for (let i = start; i < end; i++) {
       colDef = this._columnDefinitions[i];

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -81,6 +81,7 @@ $column-picker-title-font-size:                 18px !default;
 $cell-menu-icon-margin-right:                   6px !default;
 $cell-menu-close-btn-height:                    14px !default;
 $cell-menu-close-btn-margin:                    -4px 1px 1px 1px !default;
+$cell-menu-min-width:                           75px !default;
 $cell-menu-title-font-size:                     18px !default;
 $context-menu-item-font-size:                   16px !default;
 $context-menu-icon-font-size:                   16px !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -364,7 +364,7 @@ $cell-menu-close-btn-width:                           15px !default;
 $cell-menu-close-btn-margin:                          1px !default;
 $cell-menu-close-btn-padding:                         0px !default;
 $cell-menu-close-btn-opacity:                         0.9 !default;
-$cell-menu-min-width:                                 175px !default;
+$cell-menu-min-width:                                 125px !default;
 $cell-menu-padding:                                   6px !default;
 $cell-menu-item-border:                               1px solid transparent !default;
 $cell-menu-item-border-radius:                        0px !default;

diff --git a/packages/common/src/styles/slick-component.scss b/packages/common/src/styles/slick-component.scss
@@ -51,9 +51,9 @@
   font-size: $empty-data-warning-font-size;
   font-style: $empty-data-warning-font-style;
   line-height: $empty-data-warning-line-height;
-  z-index: $empty-data-warning-z-index;
   margin: $empty-data-warning-margin;
   padding: $empty-data-warning-padding;
+  z-index: $empty-data-warning-z-index;
 }
 
 

diff --git a/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip b/packages/vanilla-bundle/dist-grid-bundle-zip/slickgrid-vanilla-bundle.zip
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.53ec050882170b75c26d.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.5aca34cb905c00578891.bundle.js"></script></body></html>
		<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.53ec050882170b75c26d.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.688ebadadf99d39a93ec.bundle.js"></script></body></html>