From 17d929479d2db2d4feaf591f5885afa8e9e8fadb Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 7 Oct 2020 10:55:43 -0400 Subject: [PATCH] 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) --- .../angular-slickgrid/global-grid-options.ts | 1 + .../models/gridOption.interface.ts | 3 +++ .../services/groupingAndColspan.service.ts | 8 ++++++-- .../angular-slickgrid/styles/_variables.scss | 7 +++++-- .../styles/slick-bootstrap.scss | 19 ++++++++++++++----- .../angular-slickgrid/styles/slick-grid.scss | 2 -- 6 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/app/modules/angular-slickgrid/global-grid-options.ts b/src/app/modules/angular-slickgrid/global-grid-options.ts index 86761a11e..6ff729410 100644 --- a/src/app/modules/angular-slickgrid/global-grid-options.ts +++ b/src/app/modules/angular-slickgrid/global-grid-options.ts @@ -113,6 +113,7 @@ export const GlobalGridOptions: Partial = { useUtf8WithBom: true }, forceFitColumns: false, + frozenHeaderWidthCalcDifferential: 1, gridMenu: { hideClearAllFiltersCommand: false, hideClearAllSortingCommand: false, diff --git a/src/app/modules/angular-slickgrid/models/gridOption.interface.ts b/src/app/modules/angular-slickgrid/models/gridOption.interface.ts index 78d42b3b4..c1c5e279c 100644 --- a/src/app/modules/angular-slickgrid/models/gridOption.interface.ts +++ b/src/app/modules/angular-slickgrid/models/gridOption.interface.ts @@ -289,6 +289,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/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts b/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts index 2ed22c4a0..ee8c22d00 100644 --- a/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts +++ b/src/app/modules/angular-slickgrid/services/groupingAndColspan.service.ts @@ -110,6 +110,9 @@ export class GroupingAndColspanService { let header; let lastColumnGroup = ''; let widthTotal = 0; + const frozenColumn = this._gridOptions && this._gridOptions.frozenColumn || -1; + const frozenHeaderWidthCalcDifferential = this._gridOptions && this._gridOptions.frozenHeaderWidthCalcDifferential || 0; + const isFrozenGrid = frozenColumn >= 0; for (let i = start; i < end; i++) { colDef = this._columnDefinitions[i]; @@ -117,11 +120,11 @@ export class GroupingAndColspanService { 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 = $(`
`) + header = $(`
`) .html(`${colDef.columnGroup || ''}`) .width(widthTotal - headerColumnWidthDiff) .appendTo(preHeaderPanel); @@ -131,6 +134,7 @@ export class GroupingAndColspanService { } } + /** Translate Column Group texts and re-render them afterward. */ translateGroupingAndColSpan() { const currentColumnDefinitions = this._grid.getColumns(); diff --git a/src/app/modules/angular-slickgrid/styles/_variables.scss b/src/app/modules/angular-slickgrid/styles/_variables.scss index 5b8711e30..5579f2dc9 100644 --- a/src/app/modules/angular-slickgrid/styles/_variables.scss +++ b/src/app/modules/angular-slickgrid/styles/_variables.scss @@ -65,8 +65,8 @@ $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 @@ /* 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 but could be changed to any other icon package like Glyphicons, ... */ diff --git a/src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss b/src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss index 2a0f5cdf0..cef04643d 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-bootstrap.scss @@ -1,6 +1,6 @@ /*! - * SlickGrid custom styling for Bootstrap (https://github.com/ghiscoding/angular-slickgrid) - * Licensed under MIT (https://github.com/ghiscoding/angular-slickgrid/blob/master/LICENSE) + * SlickGrid custom styling for Bootstrap (https://github.com/ghiscoding/aurelia-slickgrid) + * Licensed under MIT (https://github.com/ghiscoding/aurelia-slickgrid/blob/master/LICENSE) * @author: Ghislain B. (ghiscoding) *//*! @@ -396,7 +396,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; @@ -415,11 +415,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/src/app/modules/angular-slickgrid/styles/slick-grid.scss b/src/app/modules/angular-slickgrid/styles/slick-grid.scss index 8d4b068fb..3c281892f 100644 --- a/src/app/modules/angular-slickgrid/styles/slick-grid.scss +++ b/src/app/modules/angular-slickgrid/styles/slick-grid.scss @@ -112,8 +112,6 @@ position: absolute; top: 0; bottom: 0; - - border: 1px solid silver; border-top-color: transparent; border-left-color: transparent; border-top-width: 0;