Merge pull request #11 from hansu/4-adjust-column-width-also-when-the-table-header-is-not-displayed

4 adjust column width also when the table header is not displayed

Author: hansu

src/gitGraphView.ts

@@ -736,7 +736,6 @@ export class GitGraphView extends Disposable {
 					<div id="commitTable"></div>
 				</div>
 				<div id="footer"></div>
-				<div id="scrollShadow"></div>
 			</div>
 			<script nonce="${nonce}">var initialState = ${JSON.stringify(initialState)}, globalState = ${JSON.stringify(globalState)}, workspaceState = ${JSON.stringify(workspaceState)};</script>
 			<script nonce="${nonce}" src="${this.getMediaUri('out.min.js')}"></script>

web/main.ts

@@ -56,7 +56,6 @@ class GitGraphView {
 	private readonly footerElem: HTMLElement;
 	private readonly showRemoteBranchesElem: HTMLInputElement;
 	private readonly refreshBtnElem: HTMLElement;
-	private readonly scrollShadowElem: HTMLElement;
 
 	constructor(viewElem: HTMLElement, prevState: WebViewState | null) {
 		this.gitRepos = initialState.repos;
@@ -78,7 +77,6 @@ class GitGraphView {
 		this.tableElem = document.getElementById('commitTable')!;
 		this.tableColHeadersElem = document.getElementById('tableColHeaders')!;
 		this.footerElem = document.getElementById('footer')!;
-		this.scrollShadowElem = <HTMLInputElement>document.getElementById('scrollShadow')!;
 
 		viewElem.focus();
 
@@ -855,8 +853,7 @@ class GitGraphView {
 			markdown: this.config.markdown
 		});
 
-		const stickyClassAttr = this.config.stickyHeader ? ' class="sticky"' : '';
-		let html = '<tr id="tableColHeaders"' + stickyClassAttr + '><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
+		let html = '<tr id="tableColHeaders"><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
 			(colVisibility.date ? '<th class="tableColHeader dateCol" data-col="2">Date</th>' : '') +
 			(colVisibility.author ? '<th class="tableColHeader authorCol" data-col="3">Author</th>' : '') +
 			(colVisibility.commit ? '<th class="tableColHeader" data-col="4">Commit</th>' : '') +
@@ -904,11 +901,16 @@ class GitGraphView {
 				: '';
 
 			html += '<tr class="commit' + (commit.hash === currentHash ? ' current' : '') + (mutedCommits[i] ? ' mute' : '') + '"' + (commit.hash !== UNCOMMITTED ? '' : ' id="uncommittedChanges"') + ' data-id="' + i + '" data-color="' + vertexColours[i] + '">' +
-				(this.config.referenceLabels.branchLabelsAlignedToGraph ? '<td>' + (refBranches !== '' ? '<span style="margin-left:' + (widthsAtVertices[i] - 4) + 'px"' + refBranches.substring(5) : '') + '</td><td><span class="description">' + commitDot : '<td></td><td><span class="description">' + commitDot + refBranches) + (this.config.referenceLabels.tagLabelsOnRight ? message + refTags : refTags + message) + '</span></td>' +
-				(colVisibility.date ? '<td class="dateCol text" title="' + date.title + '">' + date.formatted + '</td>' : '') +
-				(colVisibility.author ? '<td class="authorCol text" title="' + escapeHtml(commit.author + ' <' + commit.email + '>') + '">' + (this.config.fetchAvatars ? '<span class="avatar" data-email="' + escapeHtml(commit.email) + '">' + (typeof this.avatars[commit.email] === 'string' ? '<img class="avatarImg" src="' + this.avatars[commit.email] + '">' : '') + '</span>' : '') + escapeHtml(commit.author) + '</td>' : '') +
-				(colVisibility.commit ? '<td class="text" title="' + escapeHtml(commit.hash) + '">' + abbrevCommit(commit.hash) + '</td>' : '') +
+				(this.config.referenceLabels.branchLabelsAlignedToGraph ? '<td>' + getResizeColHtml(0) + (refBranches !== '' ? '<span style="margin-left:' + (widthsAtVertices[i] - 4) + 'px"' + refBranches.substring(5) : '') + '</td><td>' + getResizeColHtml(1) + '<span class="description">' + commitDot : '<td>' + getResizeColHtml(0) + '</td><td>' + getResizeColHtml(1) + '<span class="description">' + commitDot + refBranches) + (this.config.referenceLabels.tagLabelsOnRight ? message + refTags : refTags + message) + '</span></td>' +
+				(colVisibility.date ? '<td class="dateCol text" title="' + date.title + '">' + getResizeColHtml(2) + date.formatted + '</td>' : '') +
+				(colVisibility.author ? '<td class="authorCol text" title="' + escapeHtml(commit.author + ' <' + commit.email + '>') + '">' + getResizeColHtml(3) + (this.config.fetchAvatars ? '<span class="avatar" data-email="' + escapeHtml(commit.email) + '">' + (typeof this.avatars[commit.email] === 'string' ? '<img class="avatarImg" src="' + this.avatars[commit.email] + '">' : '') + '</span>' : '') + escapeHtml(commit.author) + '</td>' : '') +
+				(colVisibility.commit ? '<td class="text" title="' + escapeHtml(commit.hash) + '">' + getResizeColHtml(4) + abbrevCommit(commit.hash) + '</td>' : '') +
 				'</tr>';
+
+
+		}
+		function getResizeColHtml(col:number) {
+			 return (col > 0 ? '<span class="resizeCol left" data-col="' + (col - 1) + '"></span>' : '') + (col < 4 ? '<span class="resizeCol right" data-col="' + col + '"></span>' : '');
 		}
 		this.tableElem.innerHTML = '<table>' + html + '</table>';
 		this.footerElem.innerHTML = this.moreCommitsAvailable ? '<div id="loadMoreCommitsBtn" class="roundedBtn">Load More Commits</div>' : '';
@@ -1987,16 +1989,6 @@ class GitGraphView {
 		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`;
 	}
 
 
@@ -2064,12 +2056,10 @@ class GitGraphView {
 
 	private observeViewScroll() {
 		let active = this.viewElem.scrollTop > 0, timeout: NodeJS.Timer | null = null;
-		this.scrollShadowElem.className = active ? CLASS_ACTIVE : '';
 		this.viewElem.addEventListener('scroll', () => {
 			const scrollTop = this.viewElem.scrollTop;
 			if (active !== scrollTop > 0) {
 				active = scrollTop > 0;
-				this.scrollShadowElem.className = active ? CLASS_ACTIVE : '';
 			}
 
 			if (this.config.loadMoreCommitsAutomatically && this.moreCommitsAvailable && !this.currentRepoRefreshState.inProgress) {

web/styles/main.css

@@ -69,18 +69,6 @@ code{
 	cursor:col-resize;
 }
 
-#scrollShadow.active{
-	position:fixed;
-	top:0;
-	left:0;
-	right:0;
-	height:6px;
-	box-shadow: inset 0 6px 6px -6px var(--vscode-scrollbar-shadow);
-	z-index:11;
-	pointer-events:none;
-}
-
-
 /* Commit Graph */
 
 #commitGraph{
@@ -295,12 +283,22 @@ code{
 }
 .resizeCol.left{
 	left:0;
-	border-left:1px solid rgba(128,128,128,0.25);
 }
 .resizeCol.right{
 	right:0;
 }
 
+table { border-collapse: collapse; }
+.commit>td, #tableColHeaders>th {
+  border-right: solid 1px rgba(128,128,128,0.25);
+}
+.commit>td{
+	position:relative;
+}
+#tableColHeaders>th:last-child, .commit>td:last-child {
+    border-right: none;
+}
+
 
 /* Commit Details View */