a few ux improvements (#3057)

* style update

* checkbox styler

* casing update
This commit is contained in:
Alan Ren
2018-10-31 13:44:12 -07:00
committed by GitHub
parent 2238c42432
commit 56c2d16560
10 changed files with 111 additions and 70 deletions

View File

@@ -3,6 +3,7 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { Color } from 'vs/base/common/color';
import { Event, Emitter } from 'vs/base/common/event';
import { KeyCode } from 'vs/base/common/keyCodes';
import { Widget } from 'vs/base/browser/ui/widget';
@@ -15,9 +16,14 @@ export interface ICheckboxOptions {
ariaLabel?: string;
}
export interface ICheckboxStyles {
disabledCheckboxForeground?: Color;
}
export class Checkbox extends Widget {
private _el: HTMLInputElement;
private _label: HTMLSpanElement;
private disabledCheckboxForeground: Color;
private _onChange = new Emitter<boolean>();
public readonly onChange: Event<boolean> = this._onChange.event;
@@ -65,6 +71,7 @@ export class Checkbox extends Widget {
public set enabled(val: boolean) {
this._el.disabled = !val;
this.updateStyle();
}
public get enabled(): boolean {
@@ -90,4 +97,13 @@ export class Checkbox extends Widget {
public enable(): void {
this.enabled = true;
}
public style(styles: ICheckboxStyles): void {
this.disabledCheckboxForeground = styles.disabledCheckboxForeground;
this.updateStyle();
}
private updateStyle(): void {
this._label.style.color = !this.enabled && this.disabledCheckboxForeground ? this.disabledCheckboxForeground.toString() : 'inherit';
}
}

View File

@@ -27,7 +27,7 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
export const MODAL_SHOWING_KEY = 'modalShowing';
export const MODAL_SHOWING_CONTEXT = new RawContextKey<Array<string>>(MODAL_SHOWING_KEY, []);
const INFO_ALT_TEXT = localize('infoAltText', 'Infomation');
const INFO_ALT_TEXT = localize('infoAltText', 'Information');
const WARNING_ALT_TEXT = localize('warningAltText', 'Warning');
const ERROR_ALT_TEXT = localize('errorAltText', 'Error');
const SHOW_DETAILS_TEXT = localize('showMessageDetails', 'Show Details');