wlxsp
/
test1
1
0
派生 0
代码 话题 0 合并请求 0 版本发布 0 百科 动态
浏览代码

Fixes issues welcome & settings editor with light themes

main
Eric Amodio 6 年前
父节点
d2abddee7a
当前提交
877cae2894
共有 5 个文件被更改，包括 132 次插入 和 51 次删除
分列视图
Diff 选项
显示统计 下载 Patch 文件 下载 Diff 文件
  1. +1
    -0
      CHANGELOG.md
  2. +93
    -37
      src/ui/scss/main.scss
  3. +4
    -3
      src/ui/settings/app.ts
  4. +32
    -9
      src/ui/shared/app-base.ts
  5. +2
    -2
      src/ui/welcome/app.ts

+ 1
- 0
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

+ 93
- 37
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';
@import 'popup';

+ 4
- 3
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');
}

+ 32
- 9
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<HTMLInputElement | HTMLSelectElement>('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;
}
}

+ 2
- 2
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;

撰写 预览
正在加载...
取消
保存