Skip to content

Commit 72d5d20

Browse files
mhutchiemhutchie
committed
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.
1 parent 0fd9a78 commit 72d5d20

File tree

7 files changed

+89
-91
lines changed

7 files changed

+89
-91
lines changed

‎package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -335,6 +335,11 @@
335335
},
336336
"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)."
337337
},
338+
"git-graph.controlBar.sticky": {
339+
"type": "boolean",
340+
"default": false,
341+
"description": "Keep the control bar visible when the Git Graph View is scrolled."
342+
},
338343
"git-graph.customBranchGlobPatterns": {
339344
"type": "array",
340345
"items": {
@@ -465,11 +470,6 @@
465470
},
466471
"description": "An object specifying the default visibility of the Date, Author & Commit columns. Example: {\"Date\": true, \"Author\": true, \"Commit\": true}"
467472
},
468-
"git-graph.stickyHeader": {
469-
"type": "boolean",
470-
"default": true,
471-
"description": "Keeps the header visible when the view is scrolled"
472-
},
473473
"git-graph.dialog.addTag.pushToRemote": {
474474
"type": "boolean",
475475
"default": false,

‎src/config.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,13 @@ class Config {
8686
return config;
8787
}
8888

89+
/**
90+
* Get the value of the `git-graph.controlBar.sticky` Extension Setting.
91+
*/
92+
get stickyControls() {
93+
return !!this.config.get('controlBar.sticky', false);
94+
}
95+
8996
/**
9097
* Get the value of the `git-graph.customBranchGlobPatterns` Extension Setting.
9198
*/
@@ -489,13 +496,6 @@ class Config {
489496
return !!this.config.get('showStatusBarItem', true);
490497
}
491498

492-
/**
493-
* Get the value of the `git-graph.stickyHeader` Extension Setting.
494-
*/
495-
get stickyHeader() {
496-
return !!this.config.get('stickyHeader', true);
497-
}
498-
499499
/**
500500
* Get the value of the `git-graph.tabIconColourTheme` Extension Setting.
501501
*/

‎src/gitGraphView.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -589,7 +589,6 @@ export class GitGraphView extends Disposable {
589589
customPullRequestProviders: config.customPullRequestProviders,
590590
dateFormat: config.dateFormat,
591591
defaultColumnVisibility: config.defaultColumnVisibility,
592-
stickyHeader: config.stickyHeader,
593592
dialogDefaults: config.dialogDefaults,
594593
enhancedAccessibility: config.enhancedAccessibility,
595594
fetchAndPrune: config.fetchAndPrune,
@@ -607,7 +606,8 @@ export class GitGraphView extends Disposable {
607606
referenceLabels: config.referenceLabels,
608607
repoDropdownOrder: config.repoDropdownOrder,
609608
showRemoteBranches: config.showRemoteBranches,
610-
showTags: config.showTags
609+
showTags: config.showTags,
610+
stickyControls: config.stickyControls
611611
},
612612
lastActiveRepo: this.extensionState.getLastActiveRepo(),
613613
loadViewTo: this.loadViewTo,
@@ -629,10 +629,9 @@ export class GitGraphView extends Disposable {
629629
<p class="unableToLoadMessage">${UNABLE_TO_FIND_GIT_MSG}</p>
630630
</body>`;
631631
} else if (numRepos > 0) {
632-
const stickyClassAttr = initialState.config.stickyHeader ? ' class="sticky"' : '';
633632
body = `<body>
634633
<div id="view" tabindex="-1">
635-
<div id="controls"${stickyClassAttr}>
634+
<div id="controls">
636635
<span id="repoControl"><span class="unselectable">Repo: </span><div id="repoDropdown" class="dropdown"></div></span>
637636
<span id="branchControl"><span class="unselectable">Branches: </span><div id="branchDropdown" class="dropdown"></div></span>
638637
<label id="showRemoteBranchesControl"><input type="checkbox" id="showRemoteBranchesCheckbox" tabindex="-1"><span class="customCheckbox"></span>Show Remote Branches</label>

‎src/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export interface GitGraphViewConfig {
235235
readonly repoDropdownOrder: RepoDropdownOrder;
236236
readonly showRemoteBranches: boolean;
237237
readonly showTags: boolean;
238-
readonly stickyHeader: boolean;
238+
readonly stickyControls: boolean;
239239
}
240240

241241
export interface GitGraphViewGlobalState {

‎tests/config.test.ts‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,68 @@ describe('Config', () => {
448448
});
449449
});
450450

451+
describe('stickyControls', () => {
452+
it('Should return TRUE when the configuration value is TRUE', () => {
453+
// Setup
454+
workspaceConfiguration.get.mockReturnValueOnce(true);
455+
456+
// Run
457+
const value = config.stickyControls;
458+
459+
// Assert
460+
expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false);
461+
expect(value).toBe(true);
462+
});
463+
464+
it('Should return FALSE when the configuration value is FALSE', () => {
465+
// Setup
466+
workspaceConfiguration.get.mockReturnValueOnce(false);
467+
468+
// Run
469+
const value = config.stickyControls;
470+
471+
// Assert
472+
expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false);
473+
expect(value).toBe(false);
474+
});
475+
476+
it('Should return TRUE when the configuration value is truthy', () => {
477+
// Setup
478+
workspaceConfiguration.get.mockReturnValueOnce(5);
479+
480+
// Run
481+
const value = config.stickyControls;
482+
483+
// Assert
484+
expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false);
485+
expect(value).toBe(true);
486+
});
487+
488+
it('Should return FALSE when the configuration value is falsy', () => {
489+
// Setup
490+
workspaceConfiguration.get.mockReturnValueOnce(0);
491+
492+
// Run
493+
const value = config.stickyControls;
494+
495+
// Assert
496+
expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false);
497+
expect(value).toBe(false);
498+
});
499+
500+
it('Should return the default value (TRUE) when the configuration value is not set', () => {
501+
// Setup
502+
workspaceConfiguration.get.mockImplementationOnce((_, defaultValue) => defaultValue);
503+
504+
// Run
505+
const value = config.stickyControls;
506+
507+
// Assert
508+
expect(workspaceConfiguration.get).toBeCalledWith('controlBar.sticky', false);
509+
expect(value).toBe(false);
510+
});
511+
});
512+
451513
describe('customBranchGlobPatterns', () => {
452514
it('Should return a filtered array of glob patterns based on the configuration value', () => {
453515
// Setup
@@ -3878,66 +3940,4 @@ describe('Config', () => {
38783940
expect(value).toBe(false);
38793941
});
38803942
});
3881-
3882-
describe('stickyHeader', () => {
3883-
it('Should return TRUE when the configuration value is TRUE', () => {
3884-
// Setup
3885-
workspaceConfiguration.get.mockReturnValueOnce(true);
3886-
3887-
// Run
3888-
const value = config.stickyHeader;
3889-
3890-
// Assert
3891-
expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true);
3892-
expect(value).toBe(true);
3893-
});
3894-
3895-
it('Should return FALSE when the configuration value is FALSE', () => {
3896-
// Setup
3897-
workspaceConfiguration.get.mockReturnValueOnce(false);
3898-
3899-
// Run
3900-
const value = config.stickyHeader;
3901-
3902-
// Assert
3903-
expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true);
3904-
expect(value).toBe(false);
3905-
});
3906-
3907-
it('Should return TRUE when the configuration value is truthy', () => {
3908-
// Setup
3909-
workspaceConfiguration.get.mockReturnValueOnce(5);
3910-
3911-
// Run
3912-
const value = config.stickyHeader;
3913-
3914-
// Assert
3915-
expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true);
3916-
expect(value).toBe(true);
3917-
});
3918-
3919-
it('Should return FALSE when the configuration value is falsy', () => {
3920-
// Setup
3921-
workspaceConfiguration.get.mockReturnValueOnce(0);
3922-
3923-
// Run
3924-
const value = config.stickyHeader;
3925-
3926-
// Assert
3927-
expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true);
3928-
expect(value).toBe(false);
3929-
});
3930-
3931-
it('Should return the default value (TRUE) when the configuration value is not set', () => {
3932-
// Setup
3933-
workspaceConfiguration.get.mockImplementationOnce((_, defaultValue) => defaultValue);
3934-
3935-
// Run
3936-
const value = config.stickyHeader;
3937-
3938-
// Assert
3939-
expect(workspaceConfiguration.get).toBeCalledWith('stickyHeader', true);
3940-
expect(value).toBe(true);
3941-
});
3942-
});
39433943
});

‎web/main.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ class GitGraphView {
7171
this.footerElem = document.getElementById('footer')!;
7272
this.scrollShadowElem = <HTMLInputElement>document.getElementById('scrollShadow')!;
7373

74+
alterClass(viewElem, 'sticky-controls', this.config.stickyControls);
7475
viewElem.focus();
7576

7677
this.graph = new Graph('commitGraph', viewElem, this.config.graph, this.config.mute);
@@ -738,8 +739,7 @@ class GitGraphView {
738739
markdown: this.config.markdown
739740
});
740741

741-
const stickyClassAttr = this.config.stickyHeader ? ' class="sticky"' : '';
742-
let html = '<tr id="tableColHeaders"' + stickyClassAttr + '><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
742+
let html = '<tr id="tableColHeaders"><th id="tableHeaderGraphCol" class="tableColHeader" data-col="0">Graph</th><th class="tableColHeader" data-col="1">Description</th>' +
743743
(colVisibility.date ? '<th class="tableColHeader dateCol" data-col="2">Date</th>' : '') +
744744
(colVisibility.author ? '<th class="tableColHeader authorCol" data-col="3">Author</th>' : '') +
745745
(colVisibility.commit ? '<th class="tableColHeader" data-col="4">Commit</th>' : '') +
@@ -842,7 +842,7 @@ class GitGraphView {
842842
}
843843
}
844844

845-
if (this.config.stickyHeader) {
845+
if (this.config.stickyControls) {
846846
this.tableColHeadersElem = document.getElementById('tableColHeaders');
847847
this.alignTableHeaderToControls();
848848
}
@@ -1782,7 +1782,7 @@ class GitGraphView {
17821782
windowHeight = window.outerHeight;
17831783
}
17841784

1785-
if (this.config.stickyHeader) {
1785+
if (this.config.stickyControls) {
17861786
this.alignTableHeaderToControls();
17871787
}
17881788
});

‎web/styles/main.css‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -280,11 +280,11 @@ body.selection-background-color-exists ::selection{
280280
.tableColHeader{
281281
position:relative;
282282
}
283-
#tableColHeaders.sticky .tableColHeader {
284-
position: sticky;
285-
top: inherit;
286-
z-index: 3;
287-
background-color: var(--vscode-editor-background);
283+
#view.sticky-controls .tableColHeader{
284+
position:sticky;
285+
top:inherit;
286+
z-index:3;
287+
background-color:var(--vscode-editor-background);
288288
}
289289
.resizeCol{
290290
position:absolute;
@@ -788,10 +788,9 @@ body.tagLabelsRightAligned .gitRef.tag{
788788
-webkit-user-select:none;
789789
user-select:none;
790790
}
791-
792-
#controls.sticky {
791+
#view.sticky-controls > #controls{
793792
position:sticky;
794-
z-index: 4;
793+
z-index:4;
795794
}
796795

797796
#repoControl, #branchControl, #showRemoteBranchesControl{

0 commit comments

Comments
 (0)