Skip to content

Commit

Permalink
Renamed setting to be grouped under "Control Bar", and is now disable…
Browse files Browse the repository at this point in the history 
…d 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.
  • Loading branch information
@mhutchie
mhutchie committed Nov 7, 2020
1 parent 0fd9a78 commit 72d5d20
Show file tree
Hide file tree
Showing 7 changed files with 89 additions and 91 deletions.
10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down Expand Up @@ -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,
Expand Down
14 changes: 7 additions & 7 deletions src/config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down
7 changes: 3 additions & 4 deletions src/gitGraphView.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -629,10 +629,9 @@ 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"${stickyClassAttr}>
<div id="controls">
<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>
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
124 changes: 62 additions & 62 deletions tests/config.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
});
});
});
8 changes: 4 additions & 4 deletions web/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ class GitGraphView {
this.footerElem = document.getElementById('footer')!;
this.scrollShadowElem = <HTMLInputElement>document.getElementById('scrollShadow')!;

alterClass(viewElem, 'sticky-controls', this.config.stickyControls);
viewElem.focus();

this.graph = new Graph('commitGraph', viewElem, this.config.graph, this.config.mute);
Expand Down Expand Up @@ -738,8 +739,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>' : '') +
Expand Down Expand Up @@ -842,7 +842,7 @@ class GitGraphView {
}
}

if (this.config.stickyHeader) {
if (this.config.stickyControls) {
this.tableColHeadersElem = document.getElementById('tableColHeaders');
this.alignTableHeaderToControls();
}
Expand Down Expand Up @@ -1782,7 +1782,7 @@ class GitGraphView {
windowHeight = window.outerHeight;
}

if (this.config.stickyHeader) {
if (this.config.stickyControls) {
this.alignTableHeaderToControls();
}
});
Expand Down
15 changes: 7 additions & 8 deletions web/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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{
Expand Down

0 comments on commit 72d5d20

Please sign in to comment.