From d9174dee92ac71fea9ba2c7ff6f71887fe60d1ca Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Sat, 31 Mar 2018 12:03:04 -0400 Subject: [PATCH] Adds many new settings to the UI Adds new General section with data/time settings Moves Keyboard Shortcuts to General Adds annotation format settings with popup UI Adds text input support to settings --- src/ui/scss/main.scss | 57 +++++++++++- src/ui/scss/popup.scss | 100 ++++++++++++++++++++ src/ui/settings/index.html | 228 +++++++++++++++++++++++++++++++++++++-------- src/ui/shared/app-base.ts | 69 ++++++++++++++ 4 files changed, 411 insertions(+), 43 deletions(-) create mode 100644 src/ui/scss/popup.scss diff --git a/src/ui/scss/main.scss b/src/ui/scss/main.scss index 25595d1..744266d 100644 --- a/src/ui/scss/main.scss +++ b/src/ui/scss/main.scss @@ -105,13 +105,15 @@ header { margin-bottom: 1em; } -input, select, button { +input, +select, +button { font-family: var(--font-family); font-size: inherit; margin: 0; } -input { +input[type="checkbox"] { background: none; border: none; cursor: pointer; @@ -130,6 +132,29 @@ input { } } +input[type="text"] { + background: none; + border: 1px solid var(--color); + color: var(--color); + margin: 0 0.75em; + padding: 4px; + width: 100%; + max-width: 300px; + + &:focus { + background: rgba(0, 0, 0, 0.1); + } + + &[disabled] { + color: var(--color--75); + cursor: default; + } + + &::placeholder { + color: var(--color--50); + } +} + label { cursor : pointer; } @@ -390,6 +415,15 @@ ul { .changelog__list-item--version { margin: 2em 0 0.5em 0; + padding-top: 2em; + + .vscode-dark & { + border-top: 1px solid var(--background-color--lighten-30); + } + + .vscode-light & { + border-top: 1px solid var(--background-color--darken-30); + } } .changelog__scroller { @@ -646,6 +680,13 @@ ul { margin-right: 1em; } +.section__settings--multi { + & >.settings-group { + flex-basis: 100%; + margin-left: 1em; + } +} + .section__header { align-items: baseline; cursor: pointer; @@ -759,6 +800,15 @@ ul { min-width: 300px; } +.settings-group__header { + font-size: 1.2em; + margin: 1em 0 1.5em 0; + + &:first-child { + margin-top: 0; + } +} + .settings-group__hint { color: var(--color--75); font-weight: 200; @@ -776,6 +826,7 @@ ul { flex: 100% 1 1; flex-wrap: wrap; margin-bottom: 0.75em; + position: relative; & input[type="checkbox"] { flex: 16px 0 0; @@ -868,3 +919,5 @@ ul { .nowrap { flex-wrap: nowrap !important; } + +@import 'popup'; \ No newline at end of file diff --git a/src/ui/scss/popup.scss b/src/ui/scss/popup.scss new file mode 100644 index 0000000..b3ef48d --- /dev/null +++ b/src/ui/scss/popup.scss @@ -0,0 +1,100 @@ +.popup { + box-shadow: 0px 0px 28px 0 rgba(0, 0, 0, 0.5); + cursor: default; + padding: 1em; + position: absolute; + top: 46px; + width: 410px; + z-index: 1; + + &:before { + background: transparent; + border: 12px solid transparent; + content: ""; + left: 50%; + position: absolute; + pointer-events: none; + top: -24px; + z-index: 1001; + + .vscode-light & { + border-bottom-color: var(--background-color--darken-075); + } + + .vscode-dark & { + border-bottom-color: var(--background-color--lighten-075); + } + } + + .vscode-light & { + background: var(--background-color--darken-075); + } + + .vscode-dark & { + background: var(--background-color--lighten-075); + } +} + +.token-popup__hint { + color: var(--color--75); + display: inline-block; + font-weight: 200; + margin: 1.25em 0.5em 0 0.25em; +} + +.token-popup__title { + color: var(--color); + font-weight: 400; + margin: 0.25em 0 1em 0; + text-align: center; +} + +.token-popup__table { + border-collapse: collapse; + color: var(--color--75); + table-layout: fixed; + + & tr:nth-child(even) { + .vscode-light & { + background-color: rgba(0, 0, 0, 0.05); + } + + .vscode-dark & { + background-color: rgba(255, 255, 255, 0.04); + } + } + + & td { + padding: 6px; + + i { + opacity: 0.6; + } + } + + & td:first-child { + padding: 6px 12px; + } + + & td:last-child { + padding-right: 12px; + } +} + +.token { + background: var(--link-color--darken-20); + border-bottom: 2px solid var(--link-color--darken-20); + border-radius: 3px; + color: white; + cursor: pointer; + display: inline-block; + padding: 1px 8px !important; + + &:before { + content: "${" + } + + &:after { + content: "}" + } +} diff --git a/src/ui/settings/index.html b/src/ui/settings/index.html index 73f85d3..0c49dd5 100644 --- a/src/ui/settings/index.html +++ b/src/ui/settings/index.html @@ -43,6 +43,75 @@
+
+
+

General + + + +

+

General GitLens settings — defaults and globals

+
+
+

Default Date/Time Display

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

Keyboard Shortcuts

+
+
+ + + +
+ + + +

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

+
+ +

+ + For more advanced customizations open User Settings and search for gitlens +

+
+
+

GitLens Explorer @@ -269,17 +338,47 @@

+ +
+ + + + +
+

When enabled the annotation can be scrolled into view when it is outside the viewport

+
+

For more advanced customizations open User Settings and search for gitlens.currentLine @@ -311,6 +410,33 @@

+ + + + +
+ +
@@ -330,6 +456,12 @@
+ + +
+

Compacts (deduplicates) matching adjacent blame annotations

+ +
@@ -346,13 +478,8 @@ - -
- - -
-

Compacts (deduplicates) matching adjacent blame annotations

+
@@ -364,6 +491,7 @@
+

For more advanced customizations open User Settings and search for gitlens.blame @@ -389,6 +517,7 @@

Adds on-demand heatmap to the edge of the gutter to show the relative age of a line

+
@@ -399,9 +528,11 @@
+
+

Use the @@ -424,6 +555,7 @@

Adds detailed blame information accessible via hovers

+
@@ -432,15 +564,18 @@
+
+ + + +
@@ -468,6 +605,7 @@
+
@@ -484,12 +622,14 @@
+
+
+
@@ -510,6 +651,7 @@
+
@@ -530,6 +672,7 @@

Adds on-demand recent changes annotations to highlight lines changed by the most recent commit

+
@@ -544,21 +687,25 @@
+
+
+
+

Use the @@ -581,12 +728,41 @@

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

+
+ +
+ + + + +
+
+
+

Avoids clearing the previous blame information when changing lines to reduce status bar "flashing"

+
+

For more advanced customizations open User Settings and search for gitlens.statusBar @@ -628,46 +808,13 @@

- -
-
-

Keyboard Shortcuts

-

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

-
-
-
- - - - - - -
-
-

Jump to

diff --git a/src/ui/shared/app-base.ts b/src/ui/shared/app-base.ts index 77b4e91..e94a231 100644 --- a/src/ui/shared/app-base.ts +++ b/src/ui/shared/app-base.ts @@ -52,6 +52,10 @@ export abstract class App { el.checked = checked; } + for (const el of document.querySelectorAll('input[type="text"].setting')) { + el.value = getSettingValue(el.name) || ''; + } + for (const el of document.querySelectorAll('select.setting')) { const value = getSettingValue(el.name); const option = el.querySelector(`option[value='${value}']`); @@ -69,14 +73,48 @@ export abstract class App { const onInputChecked = this.onInputChecked.bind(this); DOM.listenAll('input[type="checkbox"].setting', 'change', function(this: HTMLInputElement) { return onInputChecked(this, ...arguments); }); + const onInputBlurred = this.onInputBlurred.bind(this); + DOM.listenAll('input[type="text"].setting', 'blur', function(this: HTMLInputElement) { return onInputBlurred(this, ...arguments); }); + + const onInputFocused = this.onInputFocused.bind(this); + DOM.listenAll('input[type="text"].setting', 'focus', function(this: HTMLInputElement) { return onInputFocused(this, ...arguments); }); + const onInputSelected = this.onInputSelected.bind(this); DOM.listenAll('select.setting', 'change', function(this: HTMLInputElement) { return onInputSelected(this, ...arguments); }); + + const onTokenMouseDown = this.onTokenMouseDown.bind(this); + DOM.listenAll('[data-token]', 'mousedown', function(this: HTMLElement) { return onTokenMouseDown(this, ...arguments); }); + + const onPopupMouseDown = this.onPopupMouseDown.bind(this); + DOM.listenAll('.popup', 'mousedown', function(this: HTMLElement) { return onPopupMouseDown(this, ...arguments); }); } protected log(message: string) { console.log(message); } + private onInputBlurred(element: HTMLInputElement) { + this.log(`${this._appName}.onInputBlurred: name=${element.name}, value=${element.value}`); + + const popup = document.getElementById(`${element.name}.popup`); + if (popup != null) { + popup.classList.add('hidden'); + } + + let value: string | null | undefined = element.value; + if (value === '') { + value = element.dataset.defaultValue; + if (value === undefined) { + value = null; + } + } + + this._changes[element.name] = value; + + // this.setAdditionalSettings(element.checked ? element.dataset.addSettingsOn : element.dataset.addSettingsOff); + this.applyChanges(); + } + private onInputChecked(element: HTMLInputElement) { this.log(`${this._appName}.onInputChecked: name=${element.name}, checked=${element.checked}, value=${element.value}`); @@ -110,6 +148,15 @@ export abstract class App { this.applyChanges(); } + private onInputFocused(element: HTMLInputElement) { + this.log(`${this._appName}.onInputFocused: name=${element.name}, value=${element.value}`); + + const popup = document.getElementById(`${element.name}.popup`); + if (popup != null) { + popup.classList.remove('hidden'); + } + } + private onInputSelected(element: HTMLSelectElement) { if (element === this._scopes) return; @@ -122,6 +169,28 @@ export abstract class App { this.applyChanges(); } + private onPopupMouseDown(element: HTMLElement, e: MouseEvent) { + // e.stopPropagation(); + // e.stopImmediatePropagation(); + e.preventDefault(); + } + + private onTokenMouseDown(element: HTMLElement, e: MouseEvent) { + this.log(`${this._appName}.onTokenClicked: id=${element.id}`); + + const setting = element.closest('.settings-group__setting'); + if (setting == null) return; + + const input = setting.querySelector('input[type="text"]'); + if (input == null) return; + + input.value += `\${${element.dataset.token}}`; + + e.stopPropagation(); + e.stopImmediatePropagation(); + e.preventDefault(); + } + private applyChanges() { const args = JSON.stringify({ changes: this._changes,