a few ux improvements (#3057)

* style update * checkbox styler * casing update
2026-02-13 03:28:33 -05:00 · 2018-10-31 13:44:12 -07:00
parent b9a0744a83
commit 9b0757de9c
10 changed files with 111 additions and 70 deletions
--- a/extensions/theme-carbon/themes/dark_carbon.json
+++ b/extensions/theme-carbon/themes/dark_carbon.json
@@ -4,66 +4,69 @@
 	"type": "dark",
 	"colors": {

-        // base
-        "foreground": "#fffffe",
-        "focusBorder": "#0E639C",
+		// base
+		"foreground": "#fffffe",
+		"focusBorder": "#0078d7",
 		"selection.background": "#3062d6",

-        //text colors
-        "textLinkForeground": "#30B4FF",
-        "textLinkActiveForeground": "#30B4FF",
+		//text colors
+		"textLinkForeground": "#30b4ff",
+		"textLinkActiveForeground": "#30b4ff",

-        //Button control
-        "button.background": "#00BCF2",
-        "button.foreground": "#212121",
-        "button.hoverBackground": "#0099BC",
+		//Button control
+		"button.background": "#0078d7cc",
+		"button.foreground": "#ffffff",
+		"button.hoverBackground": "#0078d7",

-        // TODO add support for these
-        // "button.secondaryBackground": "#c8c8c8",
-        // "button.secondaryHoverBackground": "#a6a6a6",
-        // "button.secondaryForeground": "#333333",
-        // "button.disabledBackground": "#444444" ,
-        // "button.disabledForeground": "#888888" ,
+		// TODO add support for these
+		// "button.secondaryBackground": "#c8c8c8",
+		// "button.secondaryHoverBackground": "#a6a6a6",
+		// "button.secondaryForeground": "#333333",
+		// "button.disabledBackground": "#444444" ,
+		// "button.disabledForeground": "#888888" ,

-        //Dropdown Control
-        "dropdown.background": "#212121",
-        "dropdown.foreground": "#fffffe",
-        "dropdown.border": "#888888",
+		//Checkbox
+		"checkbox.disabled.foreground": "#888888",

-        //Input Control
-        "input.background": "#212121",
+		//Dropdown Control
+		"dropdown.background": "#212121",
+		"dropdown.foreground": "#fffffe",
+		"dropdown.border": "#888888",
+
+		//Input Control
+		"input.background": "#212121",
 		"input.border": "#888888",
 		"input.disabled.background": "#444444",
 		"input.disabled.foreground": "#888888",
-        "inputOption.activeBorder": "#007ACC",
-        "input.placeholderForeground": "#888888",
-        "inputValidation.errorBackground": "#D02E00",
-        "inputValidation.errorBorder": "#D02E00",
+		"inputOption.activeBorder": "#0078d7",
+		"input.placeholderForeground": "#888888",
+		"inputValidation.errorBackground": "#b62e00",
+		"inputValidation.errorBorder": "#b62e00",

-        //List and trees
-        "list.activeSelectionBackground": "#3062d6",
-        "list.hoverBackground": "#444444",
-		"pickerGroup.border": "#00BCF2",
+		//List and trees
+		"list.activeSelectionBackground": "#3062d6",
+		"list.hoverBackground": "#444444",
+		"pickerGroup.border": "#0078d7",
 		"activityBar.background": "#444444",
 		"sideBar.background": "#333333",
-		"sideBarTitle.foreground": "#BBBBBB",
-		"input.placeholderForeground": "#A6A6A6",
-        "editorGroupHeader.tabsBackground": "#444444",
-        "editor.background": "#212121",
-        "editor.foreground": "#ffffff",
-        "editorWidget.background": "#444444",
-        "editorLink.activeForeground": "#30B4FF",
-        "editorGroup.border": "#333333",
-        "editorGroup.background": "#212121",
-        "editorIndentGuide.activeBackground": "#707070",
-        "tab.activeBackground": "#212121",
-        "tab.activeForeground": "#ffffff",
-        "tab.inactiveBackground": "#444444",
-        "tab.inactiveForeground": "#b6b6b6",
+		"sideBarTitle.foreground": "#bbbbbb",
+		"input.placeholderForeground": "#a6a6a6",
+		"editorGroupHeader.tabsBackground": "#444444",
+		"editor.background": "#212121",
+		"editor.foreground": "#ffffff",
+		"editorWidget.background": "#444444",
+		"editorLink.activeForeground": "#30b4ff",
+		"editorGroup.border": "#333333",
+		"editorGroup.background": "#212121",
+		"editorIndentGuide.activeBackground": "#707070",
+		"tab.activeBackground": "#212121",
+		"tab.activeForeground": "#ffffff",
+		"tab.inactiveBackground": "#444444",
+		"tab.inactiveForeground": "#b6b6b6",
 		"tab.border": "#3c3c3c",
-        "panel.background": "#212121",
-        "panel.border": "#515151",
-        "panelTitle.activeForeground": "#ffffff",
+		"panel.background": "#212121",
+		"panel.border": "#515151",
+		"panelTitle.activeForeground": "#ffffff",
 		"panelTitle.inactiveForeground": "#888888"
 	},
 	"tokenColors": [
--- a/extensions/theme-carbon/themes/light_carbon.json
+++ b/extensions/theme-carbon/themes/light_carbon.json
@@ -5,18 +5,18 @@
 	"colors": {
 		// base
 		"foreground": "#4a4a4a",
-		"focusBorder": "#00BCF2",
-		"selection.background": "#C9D0D9",
+		"focusBorder": "#0078d7",
+		"selection.background": "#c9d0d9",
 		"widget.shadow": "#666666",

 		// text colors
-		"textLinkForeground": "#3062D6",
-		"textLinkActiveForeground": "#3062D6",
+		"textLinkForeground": "#3062d6",
+		"textLinkActiveForeground": "#3062d6",

 		//Button control
-		"button.background": "#00BCF2",
-		"button.foreground": "#212121",
-		"button.hoverBackground": "#0099BC",
+		"button.background": "#0078d7cc",
+		"button.foreground": "#ffffff",
+		"button.hoverBackground": "#0078d7",

 		// TODO add support for these
 		// "button.secondaryBackground": "#c8c8c8",
@@ -25,35 +25,38 @@
 		// "button.disabledBackground": "#eaeaea",
 		// "button.disabledForeground": "#888888",

+		//Checkbox
+		"checkbox.disabled.foreground": "#888888",
+
 		//Dropdown Control
-		"dropdown.background": "#fffffe",
+		"dropdown.background": "#ffffff",
 		"dropdown.foreground": "#4a4a4a",
-		"dropdown.border": "#C8C8C8",
+		"dropdown.border": "#c8c8c8",

 		//badge
 		"badge.background": "#777777",
 		"badge.foreground": "#ffffff",

 		//Input Control
-		"input.background": "#fffffe",
+		"input.background": "#ffffff",
 		"input.border": "#c8c8c8",
 		"input.disabled.background": "#dcdcdc",
 		"input.disabled.foreground": "#888888",
 		"inputOption.activeBorder": "#666666",
 		"input.placeholderForeground": "#767676",
 		"inputValidation.errorBackground": "#ffeaea",
-		"inputValidation.errorBorder": "#f1897f",
+		"inputValidation.errorBorder": "#b62e00",

 		//List and tree
 		"list.activeSelectionBackground": "#3062d6",
 		"list.hoverBackground": "#dcdcdc",
-		"pickerGroup.border": "#00BCF2",
+		"pickerGroup.border": "#0078d7",

 		// Workbench: Activity Bar
 		"activityBar.background": "#212121",

 		// Workbench: Side Bar
-		"sideBar.background": "#EAEAEA",
+		"sideBar.background": "#eaeaea",
 		"editorGroupHeader.tabsBackground": "#f4f4f4",
 		"editor.background": "#fffffe",
 		"editor.foreground": "#212121",
@@ -64,15 +67,15 @@
 		"editorIndentGuide.activeBackground": "#939393",

 		// Workbench: Tabs
-		"tab.activeBackground": "#FFFFFE",
-		"tab.activeForeground": "#4A4A4A",
+		"tab.activeBackground": "#ffffff",
+		"tab.activeForeground": "#4a4a4a",
 		"tab.inactiveBackground": "#f4f4f4",
 		"tab.inactiveForeground": "#707070",
-		"tab.border": "#EAEAEA",
+		"tab.border": "#eaeaea",
 		"tab.unfocusedInactiveForeground": "#888888",
 		"tab.unfocusedActiveForeground": "#212121",
-		"panel.background": "#FFFFFE",
-		"panel.border": "#C8C8C8",
+		"panel.background": "#ffffff",
+		"panel.border": "#c8c8c8",
 		"panelTitle.activeForeground": "#212121",
 		"panelTitle.inactiveForeground": "#757575"
 	},
--- a/src/sql/base/browser/ui/checkbox/checkbox.ts
+++ b/src/sql/base/browser/ui/checkbox/checkbox.ts
@@ -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';
+	}
 }
--- a/src/sql/base/browser/ui/modal/modal.ts
+++ b/src/sql/base/browser/ui/modal/modal.ts
@@ -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');
--- a/src/sql/common/theme/colors.ts
+++ b/src/sql/common/theme/colors.ts
@@ -12,6 +12,7 @@ export const tableHeaderForeground = registerColor('table.headerForeground', { d
 export const disabledInputBackground = registerColor('input.disabled.background', { dark: '#444444', light: '#dcdcdc', hc: Color.black }, nls.localize('disabledInputBoxBackground', "Disabled Input box background."));
 export const disabledInputForeground = registerColor('input.disabled.foreground', { dark: '#888888', light: '#888888', hc: foreground }, nls.localize('disabledInputBoxForeground', "Disabled Input box foreground."));
 export const buttonFocusOutline = registerColor('button.focusOutline', { dark: '#eaeaea', light: '#666666', hc: null }, nls.localize('buttonFocusOutline', "Button outline color when focused."));
+export const disabledCheckboxForeground = registerColor('checkbox.disabled.foreground', { dark: '#888888', light: '#888888', hc: Color.black }, nls.localize('disabledCheckboxforeground', "Disabled checkbox foreground."));

 export const listFocusAndSelectionBackground = registerColor('list.focusAndSelectionBackground', { dark: '#2c3295', light: '#2c3295', hc: null }, nls.localize('listFocusAndSelectionBackground', "List/Table background color for the selected and focus item when the list/table is active"));

--- a/src/sql/common/theme/styler.ts
+++ b/src/sql/common/theme/styler.ts
@@ -255,3 +255,10 @@ export function attachButtonStyler(widget: IThemable, themeService: IThemeServic
 		buttonFocusOutline: (style && style.buttonFocusOutline) || sqlcolors.buttonFocusOutline
 	}, widget);
 }
+
+export function attachCheckboxStyler(widget: IThemable, themeService: IThemeService, style?: { disabledCheckboxForeground?: cr.ColorIdentifier })
+	: IDisposable {
+	return attachStyler(themeService, {
+		disabledCheckboxForeground: (style && style.disabledCheckboxForeground) || sqlcolors.disabledCheckboxForeground
+	}, widget);
+}
--- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts
+++ b/src/sql/parts/connection/connectionDialog/connectionWidget.ts
@@ -17,7 +17,7 @@ import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes';
 import * as Constants from 'sql/parts/connection/common/constants';
 import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/parts/connection/common/connectionProfileGroup';
-import { attachInputBoxStyler, attachButtonStyler, attachEditableDropdownStyler } from 'sql/common/theme/styler';
+import { attachButtonStyler, attachCheckboxStyler, attachEditableDropdownStyler, attachInputBoxStyler } from 'sql/common/theme/styler';
 import { Dropdown } from 'sql/base/browser/ui/editableDropdown/dropdown';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { ICapabilitiesService } from 'sql/services/capabilities/capabilitiesService';
@@ -274,6 +274,7 @@ export class ConnectionWidget {
 		this._toDispose.push(attachInputBoxStyler(this._passwordInputBox, this._themeService));
 		this._toDispose.push(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService));
 		this._toDispose.push(attachButtonStyler(this._advancedButton, this._themeService));
+		this._toDispose.push(attachCheckboxStyler(this._rememberPasswordCheckBox, this._themeService));

 		if (this._authTypeSelectBox) {
 			// Theme styler
--- a/src/sql/parts/disasterRecovery/backup/backup.component.ts
+++ b/src/sql/parts/disasterRecovery/backup/backup.component.ts
@@ -14,7 +14,7 @@ import { ModalFooterStyle } from 'sql/base/browser/ui/modal/modal';
 import { CategoryView } from 'sql/base/browser/ui/modal/optionsDialog';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
-import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'sql/common/theme/styler';
+import { attachButtonStyler, attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler, attachCheckboxStyler } from 'sql/common/theme/styler';
 import { IConnectionProfile } from 'sql/parts/connection/common/interfaces';
 import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants';
 import { IBackupService, IBackupUiService, TaskExecutionMode } from 'sql/parts/disasterRecovery/backup/common/backupService';
@@ -523,6 +523,11 @@ export class BackupComponent {
 		this._toDispose.push(attachInputBoxStyler(this.mediaNameBox, this.themeService));
 		this._toDispose.push(attachInputBoxStyler(this.mediaDescriptionBox, this.themeService));
 		this._toDispose.push(attachInputBoxStyler(this.backupRetainDaysBox, this.themeService));
+		this._toDispose.push(attachCheckboxStyler(this.copyOnlyCheckBox, this.themeService));
+		this._toDispose.push(attachCheckboxStyler(this.encryptCheckBox, this.themeService));
+		this._toDispose.push(attachCheckboxStyler(this.verifyCheckBox, this.themeService));
+		this._toDispose.push(attachCheckboxStyler(this.checksumCheckBox, this.themeService));
+		this._toDispose.push(attachCheckboxStyler(this.continueOnErrorCheckBox, this.themeService));

 		this._toDispose.push(this.backupTypeSelectBox.onDidSelect(selected => this.onBackupTypeChanged()));
 		this.addButtonClickHandler(this.addPathButton, () => this.onAddClick());
--- a/src/sql/parts/disasterRecovery/restore/restoreDialog.ts
+++ b/src/sql/parts/disasterRecovery/restore/restoreDialog.ts
@@ -33,7 +33,7 @@ import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
 import * as DialogHelper from 'sql/base/browser/ui/modal/dialogHelper';
 import { Modal } from 'sql/base/browser/ui/modal/modal';
-import { attachButtonStyler, attachModalDialogStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler } from 'sql/common/theme/styler';
+import { attachButtonStyler, attachModalDialogStyler, attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler, attachCheckboxStyler } from 'sql/common/theme/styler';
 import * as TelemetryKeys from 'sql/common/telemetryKeys';
 import * as BackupConstants from 'sql/parts/disasterRecovery/backup/constants';
 import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/parts/disasterRecovery/restore/restoreViewModel';
@@ -532,6 +532,7 @@ export class RestoreDialog extends Modal {
 				ariaLabel: label
 			});
 		});
+		this._register(attachCheckboxStyler(checkbox, this._themeService));
 		return checkbox;
 	}

--- a/src/sql/parts/modelComponents/checkbox.component.ts
+++ b/src/sql/parts/modelComponents/checkbox.component.ts
@@ -14,6 +14,8 @@ import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
 import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import { Checkbox, ICheckboxOptions } from 'sql/base/browser/ui/checkbox/checkbox';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { attachCheckboxStyler } from 'sql/common/theme/styler';
+import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';

@Component({
 	selector: 'modelview-checkbox',
@@ -30,7 +32,8 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
+		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
+		@Inject(forwardRef(() => ElementRef)) el: ElementRef,) {
 		super(changeRef, el);
 	}

@@ -55,6 +58,7 @@ export default class CheckBoxComponent extends ComponentBase implements ICompone
 					args: e
 				});
 			}));
+			this._register(attachCheckboxStyler(this._input, this.themeService));
 		}
 	}