#132: align sticky table header dinamically to controls

Author: bendera

web/main.ts

@@ -45,6 +45,7 @@ class GitGraphView {
 private readonly viewElem: HTMLElement;
 private readonly controlsElem: HTMLElement;
 private readonly tableElem: HTMLElement;
+private tableColHeadersElem: HTMLElement | null;
 private readonly footerElem: HTMLElement;
 private readonly showRemoteBranchesElem: HTMLInputElement;
 private readonly refreshBtnElem: HTMLElement;
@@ -66,6 +67,7 @@ class GitGraphView {
 
 this.controlsElem = document.getElementById('controls')!;
 this.tableElem = document.getElementById('commitTable')!;
+this.tableColHeadersElem = document.getElementById('tableColHeaders')!;
 this.footerElem = document.getElementById('footer')!;
 this.scrollShadowElem = <HTMLInputElement>document.getElementById('scrollShadow')!;
 
@@ -839,6 +841,11 @@ class GitGraphView {
 }
 }
 }
+
+if (this.config.stickyHeader) {
+this.tableColHeadersElem = document.getElementById('tableColHeaders');
+this.alignTableHeaderToControls();
+}
 }
 
 private renderUncommittedChanges() {
@@ -1746,6 +1753,22 @@ class GitGraphView {
 this.requestLoadRepoInfoAndCommits(false, true);
 }
 
+private alignTableHeaderToControls() {
+if (!this.tableColHeadersElem) {
+return;
+}
+
+const controlsHeight = this.controlsElem.offsetHeight;
+const controlsWidth = this.controlsElem.offsetWidth;
+const tableColHeadersHeight = this.tableColHeadersElem.offsetHeight;
+const bottomBorderWidth = 1;
+const shadowYPos = controlsHeight + tableColHeadersHeight + bottomBorderWidth;
+
+this.tableColHeadersElem.style.top = `${controlsHeight}px`;
+this.scrollShadowElem.style.top = `${shadowYPos}px`;
+this.scrollShadowElem.style.width = `${controlsWidth}px`;
+}
+
 
 /* Observers */
 
@@ -1758,6 +1781,10 @@ class GitGraphView {
 windowWidth = window.outerWidth;
 windowHeight = window.outerHeight;
 }
+
+if (this.config.stickyHeader) {
+this.alignTableHeaderToControls();
+}
 });
 }
 

web/styles/main.css

@@ -70,9 +70,10 @@ body.selection-background-color-exists ::selection{
 top:0;
 left:0;
 right:0;
-height:0;
-box-shadow:0 -6px 6px 6px var(--vscode-scrollbar-shadow);
+height:6px;
+box-shadow: inset 0 6px 6px -6px var(--vscode-scrollbar-shadow);
 z-index:20;
+pointer-events:none;
 }
 
 .blockUserInteraction{
@@ -281,7 +282,7 @@ body.selection-background-color-exists ::selection{
 }
 #tableColHeaders.sticky .tableColHeader {
 position: sticky;
-top: 41px;
+top: inherit;
 z-index: 3;
 background-color: var(--vscode-editor-background);
 }