From 72d5d20a88df7e8f2fb9621e5af88657b489071e Mon Sep 17 00:00:00 2001 From: Michael Hutchison Date: Sat, 7 Nov 2020 18:44:37 +1100 Subject: [PATCH] Renamed setting to be grouped under "Control Bar", and is now disabled by default. Refactored back-end code to follow the existing method ordering. Moved sticky css class to the view element (now called "sticky-controls"), so the class doesn't need to be maintained on multiple elements. --- package.json | 10 ++-- src/config.ts | 14 ++--- src/gitGraphView.ts | 7 ++- src/types.ts | 2 +- tests/config.test.ts | 124 +++++++++++++++++++++---------------------- web/main.ts | 8 +-- web/styles/main.css | 15 +++--- 7 files changed, 89 insertions(+), 91 deletions(-) diff --git a/package.json b/package.json index 6399be4..d119ebd 100644 --- a/package.json +++ b/package.json @@ -335,6 +335,11 @@ }, "markdownDescription": "Customise which context menu actions are visible. For example, if you want to hide the rebase action from the branch context menu, a suitable value for this setting is `{ \"branch\": { \"rebase\": false } }`. For more information of how to configure this setting, view the documentation [here](https://github.com/mhutchie/vscode-git-graph/wiki/Extension-Settings#context-menu-actions-visibility)." }, + "git-graph.controlBar.sticky": { + "type": "boolean", + "default": false, + "description": "Keep the control bar visible when the Git Graph View is scrolled." + }, "git-graph.customBranchGlobPatterns": { "type": "array", "items": { @@ -465,11 +470,6 @@ }, "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 index f9650db..1786073 100644 --- a/src/config.ts +++ b/src/config.ts @@ -86,6 +86,13 @@ class Config { return config; } + /** + * Get the value of the `git-graph.controlBar.sticky` Extension Setting. + */ + get stickyControls() { + return !!this.config.get('controlBar.sticky', false); + } + /** * Get the value of the `git-graph.customBranchGlobPatterns` Extension Setting. */ @@ -489,13 +496,6 @@ 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 index a958ee0..1098269 100644 --- a/src/gitGraphView.ts +++ b/src/gitGraphView.ts @@ -589,7 +589,6 @@ 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, @@ -607,7 +606,8 @@ export class GitGraphView extends Disposable { referenceLabels: config.referenceLabels, repoDropdownOrder: config.repoDropdownOrder, showRemoteBranches: config.showRemoteBranches, - showTags: config.showTags + showTags: config.showTags, + stickyControls: config.stickyControls }, lastActiveRepo: this.extensionState.getLastActiveRepo(), loadViewTo: this.loadViewTo, @@ -629,10 +629,9 @@ export class GitGraphView extends Disposable {

${UNABLE_TO_FIND_GIT_MSG}

`; } else if (numRepos > 0) { - const stickyClassAttr = initialState.config.stickyHeader ? ' class="sticky"' : ''; body = `
-
+
Repo: Branches: diff --git a/src/types.ts b/src/types.ts index 2d7aa49..df96ce0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -235,7 +235,7 @@ export interface GitGraphViewConfig { readonly repoDropdownOrder: RepoDropdownOrder; readonly showRemoteBranches: boolean; readonly showTags: boolean; - readonly stickyHeader: boolean; + readonly stickyControls: boolean; } export interface GitGraphViewGlobalState { diff --git a/tests/config.test.ts b/tests/config.test.ts index b45df51..d6e7f6d 100644 --- a/tests/config.test.ts +++ b/tests/config.test.ts @@ -448,6 +448,68 @@ describe('Config', () => { }); }); + describe('stickyControls', () => { + it('Should return TRUE when the configuration value is TRUE', () => { + // Setup + workspaceConfiguration.get.mockReturnValueOnce(true); + + // Run + const value = config.stickyControls; + + // Assert + expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false); + expect(value).toBe(true); + }); + + it('Should return FALSE when the configuration value is FALSE', () => { + // Setup + workspaceConfiguration.get.mockReturnValueOnce(false); + + // Run + const value = config.stickyControls; + + // Assert + expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false); + expect(value).toBe(false); + }); + + it('Should return TRUE when the configuration value is truthy', () => { + // Setup + workspaceConfiguration.get.mockReturnValueOnce(5); + + // Run + const value = config.stickyControls; + + // Assert + expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false); + expect(value).toBe(true); + }); + + it('Should return FALSE when the configuration value is falsy', () => { + // Setup + workspaceConfiguration.get.mockReturnValueOnce(0); + + // Run + const value = config.stickyControls; + + // Assert + expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false); + expect(value).toBe(false); + }); + + it('Should return the default value (TRUE) when the configuration value is not set', () => { + // Setup + workspaceConfiguration.get.mockImplementationOnce((_, defaultValue) => defaultValue); + + // Run + const value = config.stickyControls; + + // Assert + expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false); + expect(value).toBe(false); + }); + }); + describe('customBranchGlobPatterns', () => { it('Should return a filtered array of glob patterns based on the configuration value', () => { // Setup @@ -3878,66 +3940,4 @@ describe('Config', () => { expect(value).toBe(false); }); }); - - describe('stickyHeader', () => { - it('Should return TRUE when the configuration value is TRUE', () => { - // Setup - workspaceConfiguration.get.mockReturnValueOnce(true); - - // Run - const value = config.stickyHeader; - - // Assert - expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true); - expect(value).toBe(true); - }); - - it('Should return FALSE when the configuration value is FALSE', () => { - // Setup - workspaceConfiguration.get.mockReturnValueOnce(false); - - // Run - const value = config.stickyHeader; - - // Assert - expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true); - expect(value).toBe(false); - }); - - it('Should return TRUE when the configuration value is truthy', () => { - // Setup - workspaceConfiguration.get.mockReturnValueOnce(5); - - // Run - const value = config.stickyHeader; - - // Assert - expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true); - expect(value).toBe(true); - }); - - it('Should return FALSE when the configuration value is falsy', () => { - // Setup - workspaceConfiguration.get.mockReturnValueOnce(0); - - // Run - const value = config.stickyHeader; - - // Assert - expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true); - expect(value).toBe(false); - }); - - it('Should return the default value (TRUE) when the configuration value is not set', () => { - // Setup - workspaceConfiguration.get.mockImplementationOnce((_, defaultValue) => defaultValue); - - // Run - const value = config.stickyHeader; - - // Assert - expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true); - expect(value).toBe(true); - }); - }); }); diff --git a/web/main.ts b/web/main.ts index 7258bd6..d830634 100644 --- a/web/main.ts +++ b/web/main.ts @@ -71,6 +71,7 @@ class GitGraphView { this.footerElem = document.getElementById('footer')!; this.scrollShadowElem = document.getElementById('scrollShadow')!; + alterClass(viewElem, 'sticky-controls', this.config.stickyControls); viewElem.focus(); this.graph = new Graph('commitGraph', viewElem, this.config.graph, this.config.mute); @@ -738,8 +739,7 @@ class GitGraphView { markdown: this.config.markdown }); - const stickyClassAttr = this.config.stickyHeader ? ' class="sticky"' : ''; - let html = 'GraphDescription' + + let html = 'GraphDescription' + (colVisibility.date ? 'Date' : '') + (colVisibility.author ? 'Author' : '') + (colVisibility.commit ? 'Commit' : '') + @@ -842,7 +842,7 @@ class GitGraphView { } } - if (this.config.stickyHeader) { + if (this.config.stickyControls) { this.tableColHeadersElem = document.getElementById('tableColHeaders'); this.alignTableHeaderToControls(); } @@ -1782,7 +1782,7 @@ class GitGraphView { windowHeight = window.outerHeight; } - if (this.config.stickyHeader) { + if (this.config.stickyControls) { this.alignTableHeaderToControls(); } }); diff --git a/web/styles/main.css b/web/styles/main.css index edcf517..839cbc9 100644 --- a/web/styles/main.css +++ b/web/styles/main.css @@ -280,11 +280,11 @@ body.selection-background-color-exists ::selection{ .tableColHeader{ position:relative; } -#tableColHeaders.sticky .tableColHeader { - position: sticky; - top: inherit; - z-index: 3; - background-color: var(--vscode-editor-background); +#view.sticky-controls .tableColHeader{ + position:sticky; + top:inherit; + z-index:3; + background-color:var(--vscode-editor-background); } .resizeCol{ position:absolute; @@ -788,10 +788,9 @@ body.tagLabelsRightAligned .gitRef.tag{ -webkit-user-select:none; user-select:none; } - -#controls.sticky { +#view.sticky-controls > #controls{ position:sticky; - z-index: 4; + z-index:4; } #repoControl, #branchControl, #showRemoteBranchesControl{