#132 Add sticky header option

bendera · bendera · commit 009519769e1d · 2020-12-18T18:48:21.000+01:00
diff --git a/package.json b/package.json
@@ -470,6 +470,11 @@
 					},
 					"description": "An object specifying the default visibility of the Date, Author & Commit columns. Example: {\"Date\": true, \"Author\": true, \"Commit\": true}"
 				},
+				"git-graph.stickyHeader": {
+					"type": "boolean",
+					"default": true,
+					"description": "Keeps the header visible when the view is scrolled"
+				},
 				"git-graph.dialog.addTag.pushToRemote": {
 					"type": "boolean",
 					"default": false,
diff --git a/src/config.ts b/src/config.ts
@@ -534,6 +534,13 @@ class Config {
 		return !!this.config.get('showStatusBarItem', true);
 	}
 
+	/**
+	 * Get the value of the `git-graph.stickyHeader` Extension Setting.
+	 */
+	get stickyHeader() {
+		return !!this.config.get('stickyHeader', true);
+	}
+
 	/**
 	 * Get the value of the `git-graph.tabIconColourTheme` Extension Setting.
 	 */
diff --git a/src/gitGraphView.ts b/src/gitGraphView.ts
@@ -624,6 +624,7 @@ export class GitGraphView extends Disposable {
 				customPullRequestProviders: config.customPullRequestProviders,
 				dateFormat: config.dateFormat,
 				defaultColumnVisibility: config.defaultColumnVisibility,
+				stickyHeader: config.stickyHeader,
 				dialogDefaults: config.dialogDefaults,
 				enhancedAccessibility: config.enhancedAccessibility,
 				fetchAndPrune: config.fetchAndPrune,
@@ -666,9 +667,10 @@ export class GitGraphView extends Disposable {
 			<p class="unableToLoadMessage">${UNABLE_TO_FIND_GIT_MSG}</p>
 			</body>`;
 		} else if (numRepos > 0) {
+			const stickyClassAttr = initialState.config.stickyHeader ? ' class="sticky"' : '';
 			body = `<body>
 			<div id="view" tabindex="-1">
-				<div id="controls">
+				<div id="controls"${stickyClassAttr}>
 					<span id="repoControl"><span class="unselectable">Repo: </span><div id="repoDropdown" class="dropdown"></div></span>
 					<span id="branchControl"><span class="unselectable">Branches: </span><div id="branchDropdown" class="dropdown"></div></span>
 					<label id="showRemoteBranchesControl"><input type="checkbox" id="showRemoteBranchesCheckbox" tabindex="-1"><span class="customCheckbox"></span>Show Remote Branches</label>
diff --git a/src/types.ts b/src/types.ts
@@ -250,6 +250,7 @@ export interface GitGraphViewConfig {
 	readonly showRemoteBranches: boolean;
 	readonly showStashes: boolean;
 	readonly showTags: boolean;
+	readonly stickyHeader: boolean;
 }
 
 export interface GitGraphViewGlobalState {
diff --git a/tests/config.test.ts b/tests/config.test.ts
@@ -2675,6 +2675,8 @@ describe('Config', () => {
 
 	describe('showStatusBarItem', testBooleanExtensionSetting('showStatusBarItem', 'showStatusBarItem', true));
 
+	describe('stickyHeader', testBooleanExtensionSetting('stickyHeader', 'stickyHeader', true));
+
 	describe('tabIconColourTheme', () => {
 		it('Should return TabIconColourTheme.Colour when the configuration value is "colour"', () => {
 			// Setup
diff --git a/web/main.ts b/web/main.ts
@@ -808,7 +808,8 @@ class GitGraphView {
 			markdown: this.config.markdown
 		});
 
-		let html = '<tr id="tableColHeaders"><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
+		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>' +
 			(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>' : '') +
diff --git a/web/styles/main.css b/web/styles/main.css
@@ -215,7 +215,8 @@ body.selection-background-color-exists ::selection{
 	padding:0 4px;
 }
 #commitTable th{
-	border-bottom:1px solid rgba(128,128,128,0.5);
+	border-bottom:1px solid transparent;
+	box-shadow: 0 1px 0 rgba(128,128,128,0.5);
 	line-height:18px;
 	padding:6px 12px;
 }
@@ -278,6 +279,12 @@ body.selection-background-color-exists ::selection{
 .tableColHeader{
 	position:relative;
 }
+#tableColHeaders.sticky .tableColHeader {
+	position: sticky;
+	top: 41px;
+	z-index: 3;
+	background-color: var(--vscode-editor-background);
+}
 .resizeCol{
 	position:absolute;
 	top:0;
@@ -770,11 +777,12 @@ body.tagLabelsRightAligned .gitRef.tag{
 
 #controls{
 	display:block;
-	position:relative;
+	position: relative;
 	left:0;
 	right:0;
 	top:0;
 	padding:4px 132px 4px 0;
+	background-color: var(--vscode-editor-background);
 	border-bottom:1px solid rgba(128,128,128,0.5);
 	line-height:32px;
 	text-align:center;
@@ -784,6 +792,11 @@ body.tagLabelsRightAligned .gitRef.tag{
 	user-select:none;
 }
 
+#controls.sticky {
+	position:sticky;
+	z-index: 4;
+}
+
 #repoControl, #branchControl, #showRemoteBranchesControl{
 	display:inline-block;
 	white-space:nowrap;

Original file line number	Diff line number	Diff line change
`@@ -250,6 +250,7 @@ export interface GitGraphViewConfig {`
`250`	`250`	`readonly showRemoteBranches: boolean;`
`251`	`251`	`readonly showStashes: boolean;`
`252`	`252`	`readonly showTags: boolean;`
	`253`	`+ readonly stickyHeader: boolean;`
`253`	`254`	`}`
`254`	`255`
`255`	`256`	`export interface GitGraphViewGlobalState {`