feat(styling): add frozen on all possible elements with SASS variables (

#138) * feat(styling): add frozen on all possible elements with SASS variables - add frozen to both the pre-header & header columns - add SASS variables to customize border on these 3 properties (pre-header, header, header-row aka filter row) * fix(core): don't override alwaysShowVerticalScroll flag - the `alwaysShowVerticalScroll` flag should be dealt directly in the core and it should never show vertical scroll on left frozen container, even when the `alwaysShowVerticalScroll` is set to True (see core lib [PR #537](6pac/SlickGrid#537))
ghiscoding · Oct 7, 2020 · c61da91 · c61da91
1 parent 0086402
commit c61da91
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 23 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -17,7 +17,7 @@ import { ExampleGridOptions } from './example-grid-options';
 import './example02.scss';
 
 // you can create custom validator to pass to an inline editor
-const myCustomTitleValidator = (value, args) => {
+const myCustomTitleValidator = (value, _args) => {
   if (value === null || value === undefined || !value.length) {
     return { valid: false, msg: 'This is a required field' };
   } else if (!/^Task\s\d+$/.test(value)) {
@@ -36,7 +36,7 @@ interface ReportItem {
   effortDriven: boolean;
 }
 
-const customEditableInputFormatter = (row: number, cell: number, value: any, columnDef: Column, item: ReportItem) => {
+const customEditableInputFormatter = (_row: number, _cell: number, _value: any, _columnDef: Column, item: ReportItem) => {
   return item.title;
 };
 
@@ -282,7 +282,7 @@ export class Example4 {
             {
               command: 'command2', title: 'Command 2', positionOrder: 62,
               // you can use the "action" callback and/or use "onCallback" callback from the grid options, they both have the same arguments
-              action: (e, args) => {
+              action: (_e, args) => {
                 console.log(args.dataContext, args.column);
                 // action callback.. do something
               },
@@ -345,11 +345,10 @@ export class Example4 {
       },
       enableCheckboxSelector: true,
       enableRowSelection: true,
-      alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns
       frozenColumn: this.frozenColumnCount,
       frozenRow: this.frozenRowCount,
       // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
-      editCommandHandler: (item, column, editCommand) => {
+      editCommandHandler: (_item, _column, editCommand) => {
         this.commandQueue.push(editCommand);
         editCommand.execute();
       },
@@ -359,7 +358,7 @@ export class Example4 {
         // all the Cell Menu callback methods (except the action callback)
         // are available under the grid options as shown below
         onCommand: (e, args) => this.executeCommand(e, args),
-        onOptionSelected: (e, args) => {
+        onOptionSelected: (_e, args) => {
           // change "Completed" property with new option selected from the Cell Menu
           const dataContext = args && args.dataContext;
           if (dataContext && dataContext.hasOwnProperty('completed')) {
@@ -390,7 +389,7 @@ export class Example4 {
     return this.dataset;
   }
 
-  costDurationFormatter(row, cell, value, columnDef, dataContext) {
+  costDurationFormatter(_row, _cell, _value, _columnDef, dataContext) {
     const costText = this.isNullUndefinedOrEmpty(dataContext.cost) ? 'n/a' : Slicker.Utilities.formatNumber(dataContext.cost, 0, 2, false, '$', '', '.', ',');
     let durationText = 'n/a';
     if (!this.isNullUndefinedOrEmpty(dataContext.duration) && dataContext.duration >= 0) {
@@ -454,8 +453,8 @@ export class Example4 {
     }
   }
 
-  executeCommand(e, args) {
-    const columnDef = args.column;
+  executeCommand(_e, args) {
+    // const columnDef = args.column;
     const command = args.command;
     const dataContext = args.dataContext;
 

diff --git a/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/gridMenuExtension.spec.ts
@@ -585,7 +585,7 @@ describe('gridMenuExtension', () => {
 
         expect(onCommandSpy).toHaveBeenCalled();
         expect(setColumnsSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, alwaysShowVerticalScroll: true });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
       });
 
       it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => {

diff --git a/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts b/packages/common/src/extensions/__tests__/headerMenuExtension.spec.ts
@@ -392,7 +392,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand.notify({ column: columnsMock[0], grid: gridStub, command: 'freeze-columns', item: { command: 'freeze-columns' } }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0, alwaysShowVerticalScroll: false });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0 });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 
@@ -405,7 +405,7 @@ describe('headerMenuExtension', () => {
         instance.onCommand.notify({ column: columnsMock[1], grid: gridStub, command: 'freeze-columns', item: { command: 'freeze-columns' } }, new Slick.EventData(), gridStub);
 
         expect(onCommandSpy).toHaveBeenCalled();
-        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, alwaysShowVerticalScroll: false });
+        expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 });
         expect(setColumnsSpy).toHaveBeenCalled();
       });
 

diff --git a/packages/common/src/extensions/gridMenuExtension.ts b/packages/common/src/extensions/gridMenuExtension.ts
@@ -388,8 +388,7 @@ export class GridMenuExtension implements Extension {
       switch (args.command) {
         case 'clear-frozen-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
-          const showVerticalScroll = this.sharedService?.gridOptions?.enableGridMenu || false;
-          this.sharedService.slickGrid.setOptions({ frozenColumn: -1, alwaysShowVerticalScroll: showVerticalScroll });
+          this.sharedService.slickGrid.setOptions({ frozenColumn: -1 });
           if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) {
             this.sharedService.slickGrid.setColumns(visibleColumns);
           }

diff --git a/packages/common/src/extensions/headerMenuExtension.ts b/packages/common/src/extensions/headerMenuExtension.ts
@@ -342,7 +342,7 @@ export class HeaderMenuExtension implements Extension {
         case 'freeze-columns':
           const visibleColumns = [...this.sharedService.visibleColumns];
           const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id);
-          this.sharedService.slickGrid.setOptions({ frozenColumn: columnPosition, alwaysShowVerticalScroll: false });
+          this.sharedService.slickGrid.setOptions({ frozenColumn: columnPosition });
 
           // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden
           // to make sure that we only use the visible columns, not doing this would show back some of the hidden columns

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -134,6 +134,7 @@ export const GlobalGridOptions: GridOption = {
   gridAutosizeColsMode: GridAutosizeColsMode.none,
   eventNamingStyle: EventNamingStyle.lowerCase,
   forceFitColumns: false,
+  frozenHeaderWidthCalcDifferential: 1,
   gridMenu: {
     hideClearAllFiltersCommand: false,
     hideClearAllSortingCommand: false,

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -314,6 +314,9 @@ export interface GridOption {
   /** Formatter commonly used options defined for the entire grid */
   formatterOptions?: FormatterOption;
 
+  /** Optional frozen border in pixel to remove from total header width calculation (depending on your border width, it should be 0, 1 or 2 defaults is 1) */
+  frozenHeaderWidthCalcDifferential?: number;
+
   /** Defaults to false, do we want to freeze (pin) the bottom portion instead of the top */
   frozenBottom?: boolean;
 

diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -135,18 +135,21 @@ export class GroupingAndColspanService {
     let header;
     let lastColumnGroup = '';
     let widthTotal = 0;
+    const frozenColumn = this._gridOptions?.frozenColumn ?? -1;
+    const frozenHeaderWidthCalcDifferential = this._gridOptions?.frozenHeaderWidthCalcDifferential ?? 0;
+    const isFrozenGrid = frozenColumn >= 0;
 
     for (let i = start; i < end; i++) {
       colDef = this._columnDefinitions[i];
       if (colDef) {
         if (lastColumnGroup === colDef.columnGroup && i > 0) {
           widthTotal += colDef.width || 0;
           if (header && header.width) {
-            header.width(widthTotal - headerColumnWidthDiff);
+            header.width(widthTotal - headerColumnWidthDiff - frozenHeaderWidthCalcDifferential); // remove possible frozen border
           }
         } else {
           widthTotal = colDef.width || 0;
-          header = $(`<div class="ui-state-default slick-header-column" />`)
+          header = $(`<div class="ui-state-default slick-header-column ${isFrozenGrid ? 'frozen' : ''}" />`)
             .html(`<span class="slick-column-name">${colDef.columnGroup || ''}</span>`)
             .width(widthTotal - headerColumnWidthDiff)
             .appendTo(preHeaderPanel);

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -65,8 +65,8 @@ $preheader-border-left:                               none !default;
 $preheader-border-left-first-element:                 none !default;
 $preheader-border-right:                              none !default;
 $preheader-border-right-last-element:                 none !default;
-$preheader-border-bottom:                             0 !default;
-$preheader-border-top:                                0 !default;
+$preheader-border-bottom:                             none !default;
+$preheader-border-top:                                none !default;
 $preheader-font-size:                                 calc(#{$font-size-base} + 3px) !default;
 $preheader-height:                                    25px !default; /* full height is calculated with cell padding + borders (25px + 5px + 0px + 0px) = 30px must be set as preHeaderPanelHeight */
 $preheader-grouped-title-display:                     inline-grid !default;
@@ -117,6 +117,9 @@ $header-scroll-width-to-remove:                       16px !default;
 /* Frozen pinned rows/columns */
 $frozen-border-bottom:                                1px solid #a5a5a5 !default;
 $frozen-border-right:                                 1px solid #a5a5a5 !default;
+$frozen-preheader-row-border-right:                   $frozen-border-right !default;
+$frozen-header-row-border-right:                      $frozen-border-right !default;
+$frozen-filter-row-border-right:                      $frozen-border-right !default;
 $frozen-overflow-right:                               scroll !default;                      // typically we would like to always have the scroll displayed when using hamburger menu (top right)
 
 /* icon font is using Font-Awesome by default bu      t could be changed to any other icon package like Glyphicons, ... */

diff --git a/packages/common/src/styles/slick-bootstrap.scss b/packages/common/src/styles/slick-bootstrap.scss
@@ -390,7 +390,7 @@
       border-top: $preheader-border-top;
 
       .slick-header-column {
-        height: calc(#{$preheader-height} - #{$cell-padding-top-bottom});
+        height: $preheader-height;
         border-left: $preheader-border-left;
         border-right: $preheader-border-right;
         font-size: $preheader-font-size;
@@ -409,11 +409,20 @@
   /** Frozen/Pinned styling */
 
   .slick-row .slick-cell.frozen:last-child,
-  // .slick-header-column.frozen:last-child,
-  .slick-headerrow-column.frozen:last-child,
   .slick-footerrow-column.frozen:last-child {
     border-right: $frozen-border-right;
   }
+  .slick-header-column.frozen:last-child {
+    border-right: $frozen-header-row-border-right;
+  }
+  .slick-pane-left {
+    .slick-preheader-panel .slick-header-column.frozen:last-child {
+      border-right: $frozen-preheader-row-border-right;
+    }
+  }
+  .slick-headerrow-column.frozen:last-child {
+    border-right: $frozen-filter-row-border-right;
+  }
 
   .slick-pane-bottom {
     border-top: $frozen-border-bottom;

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -113,7 +113,6 @@
     top: 0;
     bottom: 0;
 
-    border: 1px solid silver;
     border-top-color: transparent;
     border-left-color: transparent;
     border-top-width: 0;

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
diff --git a/packages/vanilla-bundle/src/salesforce-global-grid-options.ts b/packages/vanilla-bundle/src/salesforce-global-grid-options.ts
@@ -19,6 +19,7 @@ export const SalesforceGlobalGridOptions: GridOption = {
     maxDecimal: 2,
     thousandSeparator: ','
   },
+  frozenHeaderWidthCalcDifferential: 2,
   gridMenu: {
     hideTogglePreHeaderCommand: true,
     hideRefreshDatasetCommand: true,