#132: align sticky table header dinamically to controls

Author: bendera

web/main.ts

@@ -48,6 +48,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;
@@ -71,6 +72,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')!;
 
@@ -911,6 +913,11 @@ class GitGraphView {
 				}
 			}
 		}
+
+		if (this.config.stickyHeader) {
+			this.tableColHeadersElem = document.getElementById('tableColHeaders');
+			this.alignTableHeaderToControls();
+		}
 	}
 
 	private renderUncommittedChanges() {
@@ -1820,6 +1827,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 */
 
@@ -1832,6 +1855,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);
 }