From 877cae2894bcc3094492ee16fbaad144aba39bf9 Mon Sep 17 00:00:00 2001 From: Eric Amodio Date: Sun, 29 Jul 2018 00:36:59 -0400 Subject: [PATCH] Fixes issues welcome & settings editor with light themes --- CHANGELOG.md | 1 + src/ui/scss/main.scss | 130 +++++++++++++++++++++++++++++++++------------- src/ui/settings/app.ts | 7 +-- src/ui/shared/app-base.ts | 41 +++++++++++---- src/ui/welcome/app.ts | 4 +- 5 files changed, 132 insertions(+), 51 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ac96d1b..e43702a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p ### Fixed - Fixes [#462](https://github.com/eamodio/vscode-gitlens/issues/462) - Source Control shortcut on macOS (⌃⇧G) shouldn't be overridden - Fixes [#457](https://github.com/eamodio/vscode-gitlens/issues/457) - Displays the wrong username (You) — thanks to [PR #460](https://github.com/eamodio/vscode-gitlens/pull/460) by Zyck ([@qzyse2017](https://github.com/qzyse2017)) +- Fixes issues with GitLens Welcome and the interactive settings editor with light themes ## [8.5.3] - 2018-07-25 ### Fixed diff --git a/src/ui/scss/main.scss b/src/ui/scss/main.scss index 16a6125..0247439 100644 --- a/src/ui/scss/main.scss +++ b/src/ui/scss/main.scss @@ -24,13 +24,7 @@ a { } &:focus { - .vscode-light & { - outline-color: var(--background-color--darken-30); - } - - .vscode-dark & { - outline-color: var(--background-color--lighten-30); - } + outline-color: var(--focus-border-color); } } @@ -113,7 +107,7 @@ button { margin: 0; } -input[type=checkbox] { +input[type='checkbox'] { background: none; border: none; cursor: pointer; @@ -132,18 +126,33 @@ input[type=checkbox] { } } -input[type=text], +input[type='text'], input:not([type]) { background: none; - border: 1px solid var(--color); color: var(--color); margin: 0 0.75em; max-width: 300px; padding: 4px; width: 100%; + .vscode-light & { + border: 1px solid rgba(0, 0, 0, 0.3); + } + + .vscode-dark & { + border: 1px solid rgba(255, 255, 255, 0.3); + } + &:focus { - background: rgba(0, 0, 0, 0.1); + outline-color: var(--focus-border-color); + + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } + + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } } &[disabled] { @@ -152,12 +161,12 @@ input:not([type]) { } &::placeholder { - color: var(--color--50); + color: var(--vscode-input-placeholderForeground); } } label { - cursor : pointer; + cursor: pointer; } section { @@ -176,17 +185,29 @@ section { } select { + background: none; color: var(--color); cursor: pointer; margin: 0 0.75em; padding: 2px; .vscode-light & { - background-color: var(--background-color--darken-05); + border: 1px solid rgba(0, 0, 0, 0.3); } .vscode-dark & { - background-color: var(--background-color--lighten-05); + border: 1px solid rgba(255, 255, 255, 0.3); + } + + &:focus { + outline-color: var(--focus-border-color); + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } + + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } } &[disabled] { @@ -203,6 +224,17 @@ select option { .vscode-dark & { background-color: var(--background-color--lighten-05); } + + &:focus { + outline-color: var(--focus-border-color); + .vscode-light & { + background-color: rgba(255, 255, 255, 0.4); + } + + .vscode-dark & { + background-color: rgba(0, 0, 0, 0.2); + } + } } ul { @@ -237,13 +269,27 @@ ul { } .button--flat { - border: 1px solid rgba(255, 255, 255, 0.6); - color: white !important; + .vscode-light & { + border: 1px solid rgba(0, 0, 0, 0.6); + color: black; + } + .vscode-dark & { + border: 1px solid rgba(255, 255, 255, 0.6); + color: white !important; + } transition: background-color 250ms, border-color 250ms, color 250ms; &:hover { - background-color: white; - color: black !important; + .vscode-light & { + background-color: var(--button-background-color--darken-30); + border-color: var(--button-background-color--darken-30); + color: white !important; + } + .vscode-dark & { + background-color: white; + border-color: white; + color: black !important; + } } .preload & { @@ -270,16 +316,23 @@ ul { } .button--flat-primary { - background-color: var(--link-color--darken-20); - border: 1px solid var(--link-color--darken-20); - color: white !important; + background-color: var(--button-background-color); + border: 1px solid var(--button-background-color); + color: var(--button-color) !important; font-weight: 600; transition: background-color 250ms, border-color 250ms, color 250ms; &:hover { - background-color: white; - border-color: white; - color: black !important; + .vscode-light & { + background-color: var(--button-background-color--darken-30); + border-color: var(--button-background-color--darken-30); + color: white !important; + } + .vscode-dark & { + background-color: white; + border-color: white; + color: black !important; + } } .preload & { @@ -379,7 +432,7 @@ ul { &:before { border-left: 1px solid rgba(122, 122, 122, 0.15); - content: " "; + content: ' '; height: calc(100% + 7px); left: 37px; position: absolute; @@ -499,7 +552,7 @@ ul { & p { margin-top: -1em; - opacity: 0.4; + opacity: 0.6; } } @@ -538,7 +591,9 @@ ul { color: var(--color); outline: none; - &:hover, &:active, &:focus { + &:hover, + &:active, + &:focus { color: var(--color); outline: none; } @@ -623,7 +678,8 @@ ul { background-color: var(--background-color--lighten-05); } - &:hover, &:focus { + &:hover, + &:focus { .vscode-light & { background-color: var(--background-color--darken-075); } @@ -646,16 +702,15 @@ ul { } } -.list-button__title{ +.list-button__title { font-size: 1em; font-weight: 400; margin: 0; - margin-bottom: .25em; + margin-bottom: 0.25em; overflow: hidden; text-overflow: ellipsis; } - .list-button__detail { color: var(--color--75); display: inline-block; @@ -707,13 +762,14 @@ ul { margin-right: -9px; } - select, option { + select, + option { background-color: var(--background-color) !important; } } .page-header__subtitle { - color: var(--color--50); + color: var(--color--75); margin: 0.25em 0 0 0; } @@ -732,7 +788,7 @@ ul { } .section__settings--multi { - & >.settings-group { + & > .settings-group { flex-basis: 100%; margin-left: 1em; } @@ -889,7 +945,7 @@ ul { margin-bottom: 0.75em; position: relative; - & input[type=checkbox] { + & input[type='checkbox'] { flex: 16px 0 0; height: 16px; margin: 0 0.75em 0 0; @@ -965,4 +1021,4 @@ ul { flex-wrap: nowrap !important; } -@import 'popup'; \ No newline at end of file +@import 'popup'; diff --git a/src/ui/settings/app.ts b/src/ui/settings/app.ts index 09d0cb4..8c72f7d 100644 --- a/src/ui/settings/app.ts +++ b/src/ui/settings/app.ts @@ -1,7 +1,7 @@ 'use strict'; -import { DOM } from './../shared/dom'; -import { App } from '../shared/app-base'; import { SettingsBootstrap } from '../ipc'; +import { App } from '../shared/app-base'; +import { DOM } from './../shared/dom'; const bootstrap: SettingsBootstrap = (window as any).bootstrap; @@ -84,8 +84,9 @@ export class SettingsApp extends App { if ( (e.target as HTMLElement).matches('i.icon__info') || (e.target as HTMLElement).matches('a.link__learn-more') - ) + ) { return; + } element.classList.toggle('collapsed'); } diff --git a/src/ui/shared/app-base.ts b/src/ui/shared/app-base.ts index cc37053..b9bf68f 100644 --- a/src/ui/shared/app-base.ts +++ b/src/ui/shared/app-base.ts @@ -1,7 +1,7 @@ 'use strict'; -import { DOM } from './../shared/dom'; import { darken, lighten, opacity } from '../shared/colors'; import { Bootstrap, Message, SaveSettingsMessage } from './../ipc'; +import { DOM } from './../shared/dom'; interface VsCodeApi { postMessage(msg: {}): void; @@ -16,7 +16,10 @@ export abstract class App { private _changes: { [key: string]: any } = Object.create(null); private _updating: boolean = false; - constructor(protected readonly appName: string, protected readonly bootstrap: TBootstrap) { + constructor( + protected readonly appName: string, + protected readonly bootstrap: TBootstrap + ) { this.log(`${this.appName}.ctor`); this._api = acquireVsCodeApi(); @@ -89,7 +92,8 @@ export abstract class App { if (element.checked) { set(setting, props.join('.'), fromCheckboxValue(element.value)); - } else { + } + else { set(setting, props.join('.'), false); } @@ -104,7 +108,8 @@ export abstract class App { if (!setting.includes(element.value)) { setting.push(element.value); } - } else { + } + else { const i = setting.indexOf(element.value); if (i !== -1) { setting.splice(i, 1); @@ -118,7 +123,8 @@ export abstract class App { default: { if (element.checked) { this._changes[element.name] = fromCheckboxValue(element.value); - } else { + } + else { this._changes[element.name] = false; } @@ -329,6 +335,19 @@ export abstract class App { color = computedStyle.getPropertyValue('--link-color').trim(); bodyStyle.setProperty('--link-color--darken-20', darken(color, 20)); + + bodyStyle.setProperty( + '--focus-border-color', + computedStyle.getPropertyValue('--vscode-focusBorder').trim() + ); + + color = computedStyle.getPropertyValue('--vscode-button-background').trim(); + bodyStyle.setProperty('--button-background-color', color); + bodyStyle.setProperty('--button-background-color--darken-30', darken(color, 30)); + bodyStyle.setProperty( + '--button-color', + computedStyle.getPropertyValue('--vscode-button-foreground').trim() + ); }; const observer = new MutationObserver(onColorThemeChanged); @@ -363,7 +382,8 @@ export abstract class App { option.selected = true; } } - } finally { + } + finally { this._updating = false; } @@ -386,13 +406,15 @@ export abstract class App { const disabled = !this.evaluateStateExpression(el.dataset.enablement!, state); if (disabled) { el.setAttribute('disabled', ''); - } else { + } + else { el.removeAttribute('disabled'); } if (el.matches('input,select')) { (el as HTMLInputElement | HTMLSelectElement).disabled = disabled; - } else { + } + else { const input = el.querySelector('input,select'); if (input == null) continue; @@ -464,7 +486,8 @@ function flatten(o: { [key: string]: any }, path?: string): { [key: string]: any if (typeof value === 'object') { Object.assign(results, flatten(value, path === undefined ? key : `${path}.${key}`)); - } else { + } + else { results[path === undefined ? key : `${path}.${key}`] = value; } } diff --git a/src/ui/welcome/app.ts b/src/ui/welcome/app.ts index 18ecc71..f1c13bd 100644 --- a/src/ui/welcome/app.ts +++ b/src/ui/welcome/app.ts @@ -1,7 +1,7 @@ 'use strict'; -import { DOM } from './../shared/dom'; -import { App } from '../shared/app-base'; import { WelcomeBootstrap } from '../ipc'; +import { App } from '../shared/app-base'; +import { DOM } from './../shared/dom'; const bootstrap: WelcomeBootstrap = (window as any).bootstrap;