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)
ghiscoding · Oct 5, 2020 · 4b99615 · 4b99615
1 parent 0086402
commit 4b99615
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/packages/common/src/services/groupingAndColspan.service.ts b/packages/common/src/services/groupingAndColspan.service.ts
@@ -135,18 +135,19 @@ export class GroupingAndColspanService {
     let header;
     let lastColumnGroup = '';
     let widthTotal = 0;
+    const isFrozenGrid = this._gridOptions?.frozenColumn ?? false;
 
     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 - 2); // remove 2px because of possible 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;