fix: add "frozen" class to all slick-pane for easier styling (#1752)

ghiscoding · Nov 28, 2024 · 33a8a38 · 33a8a38
1 parent 8ccd0fa
commit 33a8a38
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 18 deletions.
diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
@@ -875,6 +875,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
       }
 
       this.setFrozenOptions();
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setScroller();
       this.setOverflow();
@@ -2285,6 +2286,14 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     }
   }
 
+  /** add/remove frozen class to left headers/footer when defined */
+  protected setPaneFrozenClasses(): void {
+    const classAction = this.hasFrozenColumns() ? 'add' : 'remove';
+    for (const elm of [this._paneHeaderL, this._paneTopL, this._paneBottomL]) {
+      elm.classList[classAction]('frozen');
+    }
+  }
+
   protected setPaneVisibility(): void {
     if (this.hasFrozenColumns()) {
       Utils.show(this._paneHeaderR);
@@ -3017,6 +3026,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     this.updateColumnCaches();
 
     if (this.initialized) {
+      this.setPaneFrozenClasses();
       this.setPaneVisibility();
       this.setOverflow();
       this.invalidateAllRows();

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -174,9 +174,6 @@ $slick-header-scroll-width-to-remove:                       16px !default;
 /* Frozen pinned rows/columns */
 $slick-frozen-border-bottom:                                1px solid #a5a5a5 !default;
 $slick-frozen-border-right:                                 1px solid #a5a5a5 !default;
-$slick-frozen-preheader-row-border-right:                   $slick-frozen-border-right !default;
-$slick-frozen-header-row-border-right:                      $slick-frozen-border-right !default;
-$slick-frozen-filter-row-border-right:                      $slick-frozen-border-right !default;
 $slick-frozen-overflow-right:                               scroll !default;                      // typically we would like to always have the scroll displayed when using hamburger menu (top right)
 
 /* icons */

diff --git a/packages/common/src/styles/slick-grid.scss b/packages/common/src/styles/slick-grid.scss
@@ -758,23 +758,9 @@
   }
 
   /** Frozen/Pinned styling */
-
-  .slick-row .slick-cell.frozen:last-child,
-  .slick-footerrow-column.frozen:last-child {
+  .slick-pane-left.frozen {
     border-right: var(--slick-frozen-border-right, v.$slick-frozen-border-right);
   }
-  .slick-header-column.frozen:last-child {
-    border-right: var(--slick-frozen-header-row-border-right, v.$slick-frozen-header-row-border-right);
-  }
-  .slick-pane-left {
-    .slick-preheader-panel .slick-header-column.frozen:last-child,
-    .slick-topheader-panel .slick-header-column.frozen:last-child {
-      border-right: var(--slick-frozen-preheader-row-border-right, v.$slick-frozen-preheader-row-border-right);
-    }
-  }
-  .slick-headerrow-column.frozen:last-child {
-    border-right: var(--slick-frozen-filter-row-border-right, v.$slick-frozen-filter-row-border-right);
-  }
 
   .slick-pane-bottom {
     border-top: var(--slick-frozen-border-bottom, v.$slick-frozen-border-bottom);