diff --git a/.vscodeignore b/.vscodeignore index 6414a06..24d0ed6 100644 --- a/.vscodeignore +++ b/.vscodeignore @@ -1,10 +1,7 @@ !images/dark/** !images/light/** !images/gitlens-icon.png -!images/screenshot-line-blame-annotation.png -!images/screenshot-code-lens.png -!images/screenshot-status-bar.png -!images/screenshot-git-custom-view-repository.png +!images/settings-*.png images/** .vscode/** .vscode-test/** diff --git a/images/settings-code-lens-authors.png b/images/settings-code-lens-authors.png new file mode 100644 index 0000000..3a41b6e Binary files /dev/null and b/images/settings-code-lens-authors.png differ diff --git a/images/settings-code-lens-off.png b/images/settings-code-lens-off.png new file mode 100644 index 0000000..7651ce5 Binary files /dev/null and b/images/settings-code-lens-off.png differ diff --git a/images/settings-code-lens-recent.png b/images/settings-code-lens-recent.png new file mode 100644 index 0000000..9469197 Binary files /dev/null and b/images/settings-code-lens-recent.png differ diff --git a/images/settings-code-lens.png b/images/settings-code-lens.png new file mode 100644 index 0000000..7ac6e14 Binary files /dev/null and b/images/settings-code-lens.png differ diff --git a/images/settings-current-line-blame-off.png b/images/settings-current-line-blame-off.png new file mode 100644 index 0000000..89aa48a Binary files /dev/null and b/images/settings-current-line-blame-off.png differ diff --git a/images/settings-current-line-blame.png b/images/settings-current-line-blame.png new file mode 100644 index 0000000..f8a2fbf Binary files /dev/null and b/images/settings-current-line-blame.png differ diff --git a/images/settings-gitlens-view-history-avatars.png b/images/settings-gitlens-view-history-avatars.png new file mode 100644 index 0000000..0b0788c Binary files /dev/null and b/images/settings-gitlens-view-history-avatars.png differ diff --git a/images/settings-gitlens-view-history.png b/images/settings-gitlens-view-history.png new file mode 100644 index 0000000..9fac0de Binary files /dev/null and b/images/settings-gitlens-view-history.png differ diff --git a/images/settings-gitlens-view-repository-avatars.png b/images/settings-gitlens-view-repository-avatars.png new file mode 100644 index 0000000..5f44914 Binary files /dev/null and b/images/settings-gitlens-view-repository-avatars.png differ diff --git a/images/settings-gitlens-view-repository.png b/images/settings-gitlens-view-repository.png new file mode 100644 index 0000000..2457cc0 Binary files /dev/null and b/images/settings-gitlens-view-repository.png differ diff --git a/images/settings-status-bar-left.png b/images/settings-status-bar-left.png new file mode 100644 index 0000000..a5309b6 Binary files /dev/null and b/images/settings-status-bar-left.png differ diff --git a/images/settings-status-bar-off.png b/images/settings-status-bar-off.png new file mode 100644 index 0000000..a815783 Binary files /dev/null and b/images/settings-status-bar-off.png differ diff --git a/images/settings-status-bar-right.png b/images/settings-status-bar-right.png new file mode 100644 index 0000000..23afdae Binary files /dev/null and b/images/settings-status-bar-right.png differ diff --git a/src/ui/scss/main.scss b/src/ui/scss/main.scss index 7687784..ad98814 100644 --- a/src/ui/scss/main.scss +++ b/src/ui/scss/main.scss @@ -13,7 +13,7 @@ body { a { border: 0; color: var(--link-color); - font-weight: 400; + font-weight: 600; outline: none; text-decoration: none; @@ -38,6 +38,14 @@ b { font-weight: 600; } +code, +.shortcut-key { + background-color: var(--background-color--lighten-15); + padding: 1px 5px; + vertical-align: bottom; + border-radius: 3px; +} + h1 { padding: 0; margin: 0; @@ -59,7 +67,7 @@ header { display: flex; flex-wrap: wrap; align-items: center; - margin-bottom: 3em; + margin-bottom: 1em; } input, select, button { @@ -83,6 +91,11 @@ input { margin: -2px .25em 0 .25em; vertical-align: middle; } + + &[disabled] { + color: var(--color--75); + cursor: default; + } } label { @@ -117,6 +130,11 @@ select { .vscode-dark & { background-color: var(--background-color--lighten-05); } + + &[disabled] { + color: var(--color--75); + cursor: default; + } } select option { @@ -151,6 +169,12 @@ ul { width: 90%; } +.features-list { + font-weight: 200; + list-style: disc; + margin-left: 2em; +} + .header__blurb { color: var(--color--75); flex: 55% 2 1; @@ -158,6 +182,7 @@ ul { font-weight: 200; line-height: 1.3; margin: 0 0 0 6em; + min-width: 345px; @media all and (max-width: 880px) { margin: 0 2em; @@ -178,7 +203,6 @@ ul { white-space: nowrap; } - .icon { background-color: var(--color); width: 19px; @@ -276,10 +300,25 @@ ul { } } +.page-header { + margin: 1em 0 2em 0; +} + +.page-header__title { + font-size: 3em; + margin: 0; +} + +.page-header__subtitle { + color: var(--color--50); + margin: 0; +} + .section__preview { flex: 40% 1 1; text-align: end; - min-width: 300px; + margin-left: 1em; + min-width: 400px; } .section__settings { @@ -308,30 +347,53 @@ ul { margin: 0.25em 0; } -.section__welcome { - margin: 1em 0; +.section-group__content { + min-width: 0; +} + +.section-group__sidebar { + align-self: flex-start; + position: sticky; + margin: -1em 0 0 3em; + top: 0; + + a { + font-weight: 400; + } + + li { + white-space: nowrap; + } +} + +.section-group__sidebar--settings { + @media all and (max-width: 860px) { + display: none; + } +} + +.section-group__sidebar--welcome { + margin-right: 3em; + @media all and (max-width: 560px) { + display: none; + } +} + +.section-group-section { p { font-size: 1.1em; font-weight: 200; margin: 1em 0.25em; - max-width: calc(475px - 0.5em); line-height: 1.275; } } -.section-group__main { - min-width: 0; -} - -.section-group__sidebar { - margin-left: 3em; -} - .section-groups { display: flex; justify-content: space-around; - margin: 0 1em; + margin-top: -1em; + margin-bottom: 50%; } .settings-group { @@ -342,8 +404,27 @@ ul { .settings-group__setting { margin-bottom: 1em; + + &[disabled] { + label { + color: var(--color--75); + cursor: default; + } + } +} + +.settings-group__setting--nested { + margin-left: 2em; +} + +.settings-group__setting--nested2 { + margin-left: 4em; } .sidebar-group { margin-top: 1em; -} \ No newline at end of file +} + +[data-visibility][hidden] { + display: none; +} diff --git a/src/ui/settings/app.ts b/src/ui/settings/app.ts index fcc62e4..ed8fd28 100644 --- a/src/ui/settings/app.ts +++ b/src/ui/settings/app.ts @@ -37,15 +37,7 @@ export class App { } changes[element.name] = value; - for (const el of document.querySelectorAll(`[data-readonly="${element.name}"]`)) { - if (el.tagName === 'SELECT') { - el.disabled = !value; - } - else { - (el as HTMLInputElement).readOnly = !value; - } - } - + this.updateState(element.name, !!value); this.applyChanges(); } @@ -56,6 +48,7 @@ export class App { changes[element.name] = value; + this.updateState(element.name, value); this.applyChanges(); } @@ -79,23 +72,85 @@ export class App { private initializeState() { console.log('SettingsApp.initializeState'); - DOM.getElementById(`blame.line.enabled`).checked = config.blame.line.enabled; - let element = DOM.getElementById(`blame.line.annotationType`)!; - element.querySelector(`option[value='${config.blame.line.annotationType}']`)!.selected = true; - if (config.blame.line.enabled) { - element.disabled = false; + for (const el of document.querySelectorAll('input[type="checkbox"]')) { + const name = el.name; + + const checked = getSettingValue(name); + el.checked = checked; + + this.updateState(name, checked); } - DOM.getElementById(`statusBar.enabled`).checked = config.statusBar.enabled; + for (const el of document.querySelectorAll('select')) { + const name = el.name; - DOM.getElementById(`codeLens.enabled`).checked = config.codeLens.enabled; + const value = getSettingValue(name); - DOM.getElementById(`gitExplorer.enabled`).checked = config.gitExplorer.enabled; + el.querySelector(`option[value='${value}']`)!.selected = true; - element = DOM.getElementById(`gitExplorer.view`)!; - element.querySelector(`option[value='${config.gitExplorer.view}']`)!.selected = true; + this.updateState(name, value); + } + } - element = DOM.getElementById(`keymap`)!; - element.querySelector(`option[value='${config.keymap}']`)!.selected = true; + private updateState(setting: string, value: string | boolean) { + this.updateEnablement(setting, value); + this.updateVisibility(setting, value); + } + + private updateEnablement(setting: string, value: string | boolean) { + for (const el of document.querySelectorAll(`[data-enablement~="${setting}"]`)) { + const enabled = evaluateExpression(el.dataset.enablement!, setting, value); + if (enabled) { + el.removeAttribute('disabled'); + } + else { + el.setAttribute('disabled', ''); + } + + const input = el.querySelector('input,select'); + if (input == null) continue; + + input.disabled = !enabled; + } } + + private updateVisibility(setting: string, value: string | boolean) { + for (const el of document.querySelectorAll(`[data-visibility~="${setting}"]`)) { + const visible = evaluateExpression(el.dataset.visibility!, setting, value); + if (visible) { + el.removeAttribute('hidden'); + } + else { + el.setAttribute('hidden', ''); + } + } + } +} + +function evaluateExpression(expression: string, setting: string, settingValue: string | boolean): boolean { + let state = false; + for (const expr of expression.trim().split('&&')) { + const [lhs, rhs] = parseExpression(expr); + + const value = lhs !== setting + ? getSettingValue(lhs) + : settingValue; + state = rhs !== undefined ? rhs === '' + value : !!value; + + if (!state) break; + } + return state; +} + +function get(o: { [key: string ]: any}, path: string): T { + return path.split('.').reduce((o = {}, key) => o[key], o) as T; +} + +function getSettingValue(path: string): T { + return get(config, path); } + +function parseExpression(expression: string): [string, string | boolean | undefined] { + const [lhs, rhs] = expression.trim().split('='); + return [lhs.trim(), rhs !== undefined ? rhs.trim() : rhs]; +} \ No newline at end of file diff --git a/src/ui/settings/index.html b/src/ui/settings/index.html index a4cd391..bfd6ae3 100644 --- a/src/ui/settings/index.html +++ b/src/ui/settings/index.html @@ -2,8 +2,8 @@ - - + + @@ -18,119 +18,285 @@

- GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. + GitLens + supercharges the Git capabilities built into Visual Studio Code. It helps you to + visualize code authorship at a glance via Git blame annotations and code lens, + seamlessly navigate and explore Git repositories, + gain valuable insights via powerful comparison commands, and so much more.

-
-
-

Line Annotations

-

Adds an unobtrusive Git blame annotation to the end of the current line

-
-
-
-
- - - + +
+
+ + + +
+
+ + +
+
+ + +
+
+
+ + + + + + +
+
+
+ +
+
+

Code Lens + + + +

+

Adds Git authorship code lens to the top of the file and on code blocks

+
+

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + + +
+
+
+ +
+
+

Current Line Blame + + + +

+

Adds an unobtrusive Git blame annotation to the end of the current line

+
+
+
+
+ + + +
+
+
+ + +
- -
- -
- -
+ -
-
-

Code Lens

-

Adds Git authorship code lens to the top of the file and on code blocks

-
-

-
-
-
- - +
+
+

Hovers + + + +

+

Adds detailed Git blame information accessible via hovers

-
-
- -
-
-
- -
-
-

Status Bar

-

Adds Git blame information about the current line to the status bar

-
-
-
-
- - +
+
+
+

Coming soon

+ +
+
+
+ +
-
-
- -
-
-
+ -
-
-

GitLens Explorer

-

Adds a GitLens view to the Explorer activity to explore repositories or file histories

-
-

-
-
-
- - +
+
+

Status Bar Blame + + + +

+

Adds a Git blame annotation about the current line to the status bar

-
- - - +
+
+
+ + +
+
+ + + +
+
+ + +
+
+
+ + + +
-
-
- -
-
-
+ -
-
-

Keyboard Shortcuts

+
+
+

Keyboard Shortcuts

+

Search for + + gitlens + in the + Keyboard Shortcuts editor to see the shortcuts and to customize them further

+
+
+
+ + + + + Alt + based shortcuts. Not great for non-English keyboard layouts + + + Chorded shortcuts that start with + Ctrl+Shift+G ( + ⌥⌘G on macOS). Better for non-English keyboard layouts + + + GitLens won't bind any keyboard shortcuts. Configure your own via the + Keyboard Shortcuts editor +
+
+
-
-
- - - +
+
+

Jump to

+
-
+ - - - + + + \ No newline at end of file diff --git a/src/ui/welcome/index.html b/src/ui/welcome/index.html index 3410d70..300e4da 100644 --- a/src/ui/welcome/index.html +++ b/src/ui/welcome/index.html @@ -18,62 +18,142 @@

- GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. + GitLens + supercharges the Git capabilities built into Visual Studio Code. It helps you to + visualize code authorship at a glance via Git blame annotations and code lens, + seamlessly navigate and explore Git repositories, + gain valuable insights via powerful comparison commands, and so much more.

+
+

Welcome

+

Thank you for taking the time to try GitLens!

+
+
-
-
-

Welcome

+
+

- Thank you for taking the time to try GitLens! -
- GitLens is powerful, feature rich, and highly configurable, so please be sure to open the GitLens settings page to tailor it to suit your needs. + GitLens simply helps you understand code better. Quickly glimpse into who, why, and when a line or code block was changed. + Jump back through history to gain further insights as to how and why the code evolved. Explore + the history and evolution of a codebase. Dive in and see how GitLens can help!

-
+
+

Features

+

Here are just some of the features that GitLens provides +

    +
  • Adds a GitLens view to the Explorer activity to explore repositories or file histories
    • +
  • Adds Git authorship code lens to the top of the file and on code blocks
    • +
  • Adds an unobtrusive Git blame annotation to the end of the current line
    • +
  • Adds detailed Git blame information accessible via hovers
    • +
  • Adds a Git blame annotation about the current line to the status bar
    • +
  • Adds many powerful commands for exploring commits and histories, comparing and navigating + revisions, stash access, repository status, and more
    • +
+

+

GitLens is powerful, feature rich, and highly customizable to meet your specific needs, so please + be sure to visit the + GitLens settings page.

+
+

Customize

    -
    • -
    • -
    • +
  • + +
    • +
  • + +
    • +
  • + +
-
+

Learn

    -
    • +
  • + +
-
-
+
+

Show Your Support

-
+

Help

-
+

Resources

@@ -82,4 +162,5 @@
+ \ No newline at end of file