Skip to content

Commit

Permalink
Adds ToC section tracking to settings page
Browse files Browse the repository at this point in the history
  • Loading branch information
@eamodio
eamodio committed Apr 24, 2019
1 parent 90d6a0e commit 0a39667
Show file tree
Hide file tree
Showing 8 changed files with 215 additions and 74 deletions.
19 changes: 19 additions & 0 deletions src/webviews/apps/scss/main.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1082,6 +1082,25 @@ ul {
text-align: center;
}

.sidebar__jump-link {
&.active {
font-weight: 700;

&:before {
content: ' ';
border-left: 4px solid var(--color-link-foreground--darken-20);
position: absolute;
left: -1em;
height: 1em;
padding-bottom: 4px;

.vscode-light & {
border-left-color: var(--color-link-foreground--lighten-20);
}
}
}
}

.sponsor__image {
opacity: 0.8;
transition: opacity 250ms;
Expand Down
5 changes: 5 additions & 0 deletions src/webviews/apps/scss/popup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,4 +97,9 @@
&:after {
content: '}';
}

.vscode-light & {
background: var(--color-link-foreground--lighten-20);
border-bottom-color: var(--color-link-foreground--lighten-20);
}
}
99 changes: 80 additions & 19 deletions src/webviews/apps/settings/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,8 @@ <h3 id="views-layout" class="settings-group__header">Views Side Bar Layout</h3>
<option value="scm">Source Control side bar</option>
</select>
<a
class="link__learn-more jump-to"
class="link__learn-more"
data-action="jump"
title="Jump to Repositories view settings"
href="#repositories-view"
>
Expand All @@ -138,7 +139,8 @@ <h3 id="views-layout" class="settings-group__header">Views Side Bar Layout</h3>
<option value="scm">Source Control side bar</option>
</select>
<a
class="link__learn-more jump-to"
class="link__learn-more"
data-action="jump"
title="Jump to File History view settings"
href="#file-history-view"
>
Expand All @@ -158,7 +160,8 @@ <h3 id="views-layout" class="settings-group__header">Views Side Bar Layout</h3>
<option value="scm">Source Control side bar</option>
</select>
<a
class="link__learn-more jump-to"
class="link__learn-more"
data-action="jump"
title="Jump to Line History view settings"
href="#line-history-view"
>
Expand All @@ -178,7 +181,8 @@ <h3 id="views-layout" class="settings-group__header">Views Side Bar Layout</h3>
<option value="scm">Source Control side bar</option>
</select>
<a
class="link__learn-more jump-to"
class="link__learn-more"
data-action="jump"
title="Jump to Search Commits view settings"
href="#search-commits-view"
>
Expand All @@ -198,7 +202,8 @@ <h3 id="views-layout" class="settings-group__header">Views Side Bar Layout</h3>
<option value="scm">Source Control side bar</option>
</select>
<a
class="link__learn-more jump-to"
class="link__learn-more"
data-action="jump"
title="Jump to Compare view settings"
href="#compare-view"
>
Expand Down Expand Up @@ -3109,76 +3114,132 @@ <h2 class="section__title">
<div class="sidebar-group">
<h2>Jump to</h2>
<ul>
<li><a class="jump-to" href="#general" title="Jump to General settings">General</a></li>
<li>
<a class="jump-to" href="#current-line" title="Jump to Current Line Blame settings"
<a
class="sidebar__jump-link active"
data-action="jump"
href="#general"
title="Jump to General settings"
>General</a
>
</li>
<li>
<a
class="sidebar__jump-link"
data-action="jump"
href="#current-line"
title="Jump to Current Line Blame settings"
>Current Line Blame</a
>
</li>
<li>
<a class="jump-to" href="#blame" title="Jump to Gutter Blame settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#blame"
title="Jump to Gutter Blame settings"
>Gutter Blame</a
>
</li>
<li><a class="jump-to" href="#hovers" title="Jump to Hovers settings">Hovers</a></li>
<li>
<a class="jump-to" href="#code-lens" title="Jump to Code Lens settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#hovers"
title="Jump to Hovers settings"
>Hovers</a
>
</li>
<li>
<a
class="sidebar__jump-link"
data-action="jump"
href="#code-lens"
title="Jump to Code Lens settings"
>Code Lens</a
>
</li>
<li>
<a class="jump-to" href="#heatmap" title="Jump to Gutter Heatmap settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#heatmap"
title="Jump to Gutter Heatmap settings"
>Gutter Heatmap</a
>
</li>
<li>
<a class="jump-to" href="#recent-changes" title="Jump to Recent Changes settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#recent-changes"
title="Jump to Recent Changes settings"
>Recent Changes</a
>
</li>
<li>
<a class="jump-to" href="#status-bar" title="Jump to Status Bar Blame settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#status-bar"
title="Jump to Status Bar Blame settings"
>Status Bar Blame</a
>
</li>
<li>
<a
class="jump-to"
class="sidebar__jump-link"
data-action="jump"
href="#repositories-view"
title="Jump to Repositories view settings"
>Repositories view</a
>
</li>
<li>
<a
class="jump-to"
class="sidebar__jump-link"
data-action="jump"
href="#file-history-view"
title="Jump to File History view settings"
>File History view</a
>
</li>
<li>
<a
class="jump-to"
class="sidebar__jump-link"
data-action="jump"
href="#line-history-view"
title="Jump to Line History view settings"
>Line History view</a
>
</li>
<li>
<a
class="jump-to"
class="sidebar__jump-link"
data-action="jump"
href="#search-commits-view"
title="Jump to Search Commits view settings"
>Search Commits view</a
>
</li>
<li>
<a class="jump-to" href="#compare-view" title="Jump to Compare view settings"
<a
class="sidebar__jump-link"
data-action="jump"
href="#compare-view"
title="Jump to Compare view settings"
>Compare view</a
>
</li>
<li><a class="jump-to" href="#modes" title="Jump to Modes settings">Modes</a></li>
<li>
<a
class="sidebar__jump-link"
data-action="jump"
href="#modes"
title="Jump to Modes settings"
>Modes</a
>
</li>
</ul>
</div>
<div class="sidebar-group">
Expand Down
73 changes: 72 additions & 1 deletion src/webviews/apps/settings/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
'use strict';
/*global window document*/
/*global window document IntersectionObserver*/
import { SettingsBootstrap } from '../../protocol';
import { AppWithConfig } from '../shared/appWithConfigBase';
import { DOM } from '../shared/dom';
Expand All @@ -8,6 +8,10 @@ const bootstrap: SettingsBootstrap = (window as any).bootstrap;

export class SettingsApp extends AppWithConfig<SettingsBootstrap> {
private _scopes: HTMLSelectElement | null = null;
private _observer: IntersectionObserver | undefined;

private _activeSection: string | undefined = 'general';
private _sections = new Map<string, boolean>();

constructor() {
super('SettingsApp', bootstrap);
Expand All @@ -30,6 +34,52 @@ export class SettingsApp extends AppWithConfig<SettingsBootstrap> {
scopes.parentElement!.classList.remove('hidden');
this._scopes = scopes;
}

let top = 83;
const header = document.querySelector('.page-header--sticky');
if (header != null) {
top = header.clientHeight;
}

this._observer = new IntersectionObserver(this.onObserver.bind(this), {
rootMargin: `-${top}px 0px 0px 0px`
});

for (const el of document.querySelectorAll('section[id]>.section__header')) {
this._sections.set(el.parentElement!.id, false);

this._observer.observe(el);
}
}

private onObserver(entries: IntersectionObserverEntry[], observer: IntersectionObserver) {
for (const entry of entries) {
this._sections.set(entry.target.parentElement!.id, entry.isIntersecting);

let nextActive: string | undefined;
for (const [id, visible] of this._sections.entries()) {
if (nextActive === undefined) {
nextActive = this._activeSection === 'modes' ? 'modes' : id;
}

if (!visible) continue;

nextActive = id;
break;
}

if (this._activeSection === nextActive) return;

if (this._activeSection !== undefined) {
this.toggleJumpLink(this._activeSection, false);
}

this._activeSection = nextActive;

if (this._activeSection !== undefined) {
this.toggleJumpLink(this._activeSection, true);
}
}
}

protected onBind(me: this) {
Expand All @@ -38,6 +88,9 @@ export class SettingsApp extends AppWithConfig<SettingsBootstrap> {
DOM.listenAll('.section__header', 'click', function(this: HTMLInputElement, e: Event) {
return me.onSectionHeaderClicked(this, e as MouseEvent);
});
DOM.listenAll('a[data-action="jump"]', 'click', function(this: HTMLAnchorElement, e: Event) {
return me.onJumpToLinkClicked(this, e as MouseEvent);
});
DOM.listenAll('[data-action]', 'click', function(this: HTMLAnchorElement, e: Event) {
return me.onActionLinkClicked(this, e as MouseEvent);
});
Expand Down Expand Up @@ -80,6 +133,17 @@ export class SettingsApp extends AppWithConfig<SettingsBootstrap> {
super.onInputSelected(element);
}

protected onJumpToLinkClicked(element: HTMLAnchorElement, e: MouseEvent) {
const href = element.getAttribute('href');
if (href == null) return;

const anchor = href.substr(1);
this.scrollToAnchor(anchor);

e.stopPropagation();
e.preventDefault();
}

private onSectionHeaderClicked(element: HTMLElement, e: MouseEvent) {
if (
(e.target as HTMLElement).matches('i.icon__info') ||
Expand All @@ -90,6 +154,13 @@ export class SettingsApp extends AppWithConfig<SettingsBootstrap> {

element.classList.toggle('collapsed');
}

private toggleJumpLink(anchor: string, active: boolean) {
const el = document.querySelector(`a.sidebar__jump-link[href="#${anchor}"]`);
if (el) {
el.classList.toggle('active', active);
}
}
}

new SettingsApp();
20 changes: 11 additions & 9 deletions src/webviews/apps/shared/appBase.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,22 @@ export abstract class App<TBootstrap extends AppBootstrap> {
this._api = acquireVsCodeApi();
initializeAndWatchThemeColors();

this.log(`${this.appName}.initializing`);
setTimeout(() => {
this.log(`${this.appName}.initializing`);

this.onInitialize();
this.onBind(this);
this.onInitialize();
this.onBind(this);

window.addEventListener('message', this.onMessageReceived.bind(this));
window.addEventListener('message', this.onMessageReceived.bind(this));

this.sendCommand(ReadyCommandType, {});
this.sendCommand(ReadyCommandType, {});

this.onInitialized();
this.onInitialized();

setTimeout(() => {
document.body.classList.remove('preload');
}, 500);
setTimeout(() => {
document.body.classList.remove('preload');
}, 500);
}, 0);
}

protected onInitialize() {
Expand Down

0 comments on commit 0a39667

Please sign in to comment.