diff --git a/web/main.ts b/web/main.ts index 6d858e9..7db9d47 100644 --- a/web/main.ts +++ b/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 = 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(); + } }); } diff --git a/web/styles/main.css b/web/styles/main.css index 4fc36b4..5a7342f 100644 --- a/web/styles/main.css +++ b/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); }