diff --git a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts index 2b18a6a2fa..979505d89c 100644 --- a/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts +++ b/src/sql/base/browser/ui/editableDropdown/browser/dropdown.ts @@ -4,15 +4,14 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./media/dropdownList'; -import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; +import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { DropdownDataSource, DropdownListRenderer, IDropdownListItem, SELECT_OPTION_ENTRY_TEMPLATE_ID } from 'sql/base/browser/ui/editableDropdown/browser/dropdownList'; import * as DOM from 'vs/base/browser/dom'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; -import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; +import { IInputBoxStyles, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; import { IListStyles, List } from 'vs/base/browser/ui/list/listWidget'; -import { Color } from 'vs/base/common/color'; import { Emitter, Event } from 'vs/base/common/event'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Disposable } from 'vs/base/common/lifecycle'; @@ -20,10 +19,8 @@ import { clamp } from 'vs/base/common/numbers'; import { mixin } from 'vs/base/common/objects'; import { ScrollbarVisibility } from 'vs/base/common/scrollable'; import * as nls from 'vs/nls'; -import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; - -export interface IDropdownOptions extends IDropdownStyles { +export interface IDropdownOptions extends Partial { /** * Whether or not a options in the list must be selected or a "new" option can be set */ @@ -58,9 +55,9 @@ export interface IDropdownOptions extends IDropdownStyles { ariaDescription?: string; } -export interface IDropdownStyles { - contextBackground?: Color; - contextBorder?: Color; +export interface IEditableDropdownStyles extends IInputBoxStyles, IListStyles { + contextBackground?: string; + contextBorder?: string; } const errorMessage = nls.localize('editableDropdown.errorValidate', "Must be an option from the list"); @@ -96,7 +93,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate constructor( container: HTMLElement, private readonly contextViewService: IContextViewProvider, - opt?: IDropdownOptions + opt: IDropdownOptions ) { super(); this._options = opt || Object.create(null); @@ -116,7 +113,8 @@ export class Dropdown extends Disposable implements IListVirtualDelegate this._inputContainer.style.width = '100%'; this._inputContainer.style.height = '100%'; this._selectListContainer = DOM.$('div'); - + this._selectListContainer.style.backgroundColor = opt.contextBackground; + this._selectListContainer.style.outline = `1px solid ${opt.contextBorder}`; this._input = new InputBox(this._inputContainer, contextViewService, { validationOptions: { // @SQLTODO @@ -126,7 +124,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate placeholder: this._options.placeholder, ariaLabel: this._options.ariaLabel, ariaDescription: this._options.ariaDescription, - inputBoxStyles: defaultInputBoxStyles + inputBoxStyles: this._options }); // Clear title from input box element (defaults to placeholder value) since we don't want a tooltip for the selected value @@ -206,6 +204,7 @@ export class Dropdown extends Disposable implements IListVirtualDelegate getWidgetRole: () => 'listbox' } }); + this._selectList.style(this._options); this.values = this._options.values; this._register(this._selectList.onDidBlur(() => { @@ -378,13 +377,6 @@ export class Dropdown extends Disposable implements IListVirtualDelegate this._hideList(); } - style(style: IListStyles & IInputBoxStyles & IDropdownStyles) { - this._selectList.style(style); - this._input.style(style); - this._selectListContainer.style.backgroundColor = style.contextBackground ? style.contextBackground.toString() : ''; - this._selectListContainer.style.outline = `1px solid ${style.contextBorder}`; - } - private _inputValidator(value: string): IMessage | null { if (!this._input.hasFocus() && this._input.isEnabled() && !this._selectList.isDOMFocused() && !this._dataSource.values.some(i => i === value)) { if (this._options.strictSelection && this._options.errorMessage) { diff --git a/src/sql/base/browser/ui/inputBox/inputBox.ts b/src/sql/base/browser/ui/inputBox/inputBox.ts index 48b7699663..b85b577503 100644 --- a/src/sql/base/browser/ui/inputBox/inputBox.ts +++ b/src/sql/base/browser/ui/inputBox/inputBox.ts @@ -3,9 +3,8 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { InputBox as vsInputBox, IInputOptions as vsIInputBoxOptions, IInputBoxStyles as vsIInputBoxStyles, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; +import { InputBox as vsInputBox, IInputOptions as vsIInputBoxOptions, IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; -import { Color } from 'vs/base/common/color'; import { Event, Emitter } from 'vs/base/common/event'; import { AdsWidget } from 'sql/base/browser/ui/adsWidget'; @@ -14,11 +13,6 @@ export interface OnLoseFocusParams { hasChanged: boolean; } -export interface IInputBoxStyles extends vsIInputBoxStyles { - disabledInputBackground?: Color; - disabledInputForeground?: Color; -} - export interface IInputOptions extends vsIInputBoxOptions { /** * Whether calls to validate require the force parameter to be set to true @@ -31,13 +25,6 @@ export interface IInputOptions extends vsIInputBoxOptions { } export class InputBox extends vsInputBox implements AdsWidget { - // private enabledInputBackground?: Color; - // private enabledInputForeground?: Color; - // private enabledInputBorder?: Color; - // private disabledInputBackground?: Color; - // private disabledInputForeground?: Color; - // private disabledInputBorder?: Color; - private _lastLoseFocusValue: string; private _onLoseFocus = this._register(new Emitter()); @@ -51,11 +38,6 @@ export class InputBox extends vsInputBox implements AdsWidget { constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, private _sqlOptions?: IInputOptions, id?: string) { super(container, contextViewProvider, _sqlOptions); - // {{SQL CARBON TODO}} - fix styles - // this.enabledInputBackground = this.inputBackground; - // this.enabledInputForeground = this.inputForeground; - // this.enabledInputBorder = this.inputBorder; - //this.disabledInputBackground = Color.transparent; this._lastLoseFocusValue = this.value; let self = this; @@ -80,23 +62,12 @@ export class InputBox extends vsInputBox implements AdsWidget { if (id !== undefined) { this.inputElement.id = id; } - } - - public override style(styles: IInputBoxStyles): void { - // super.style(styles); - // this.enabledInputBackground = this.inputBackground; - // this.enabledInputForeground = this.inputForeground; - // this.enabledInputBorder = this.inputBorder; - // this.disabledInputBackground = styles.disabledInputBackground; - // this.disabledInputForeground = styles.disabledInputForeground; - // this.updateInputEnabledDisabledColors(); - // this.applyStyles(); + this.updateInputEnabledDisabledColors(); } public override enable(): void { super.enable(); this.updateInputEnabledDisabledColors(); - this.applyStyles(); } public set rows(value: number) { @@ -116,7 +87,6 @@ export class InputBox extends vsInputBox implements AdsWidget { public override disable(): void { super.disable(); this.updateInputEnabledDisabledColors(); - this.applyStyles(); } public setHeight(value: string) { @@ -169,10 +139,14 @@ export class InputBox extends vsInputBox implements AdsWidget { } private updateInputEnabledDisabledColors(): void { - // let enabled = this.isEnabled(); - // this.inputBackground = enabled ? this.enabledInputBackground : this.disabledInputBackground; - // this.inputForeground = enabled ? this.enabledInputForeground : this.disabledInputForeground; - // this.inputBorder = enabled ? this.enabledInputBorder : this.disabledInputBorder; + const enabled = this.isEnabled(); + const background = enabled ? this._sqlOptions.inputBoxStyles.inputBackground : this._sqlOptions.inputBoxStyles.disabledInputBackground + const foreground = enabled ? this._sqlOptions.inputBoxStyles.inputForeground : this._sqlOptions.inputBoxStyles.disabledInputForeground; + const border = enabled ? this._sqlOptions.inputBoxStyles.inputBorder : this._sqlOptions.inputBoxStyles.disabledInputBorder; + this.element.style.backgroundColor = background; + this.element.style.color = foreground; + this.input.style.color = foreground; + this.element.style.border = `1px solid ${border}`; } public override validate(force?: boolean): MessageType | undefined { diff --git a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts index cb032ab516..e6127662b6 100644 --- a/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts +++ b/src/sql/base/browser/ui/table/plugins/headerFilter.plugin.ts @@ -11,7 +11,7 @@ import { DisposableStore, dispose, IDisposable } from 'vs/base/common/lifecycle' import { withNullAsUndefined } from 'vs/base/common/types'; import { IDisposableDataProvider, instanceOfIDisposableDataProvider } from 'sql/base/common/dataProvider'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; -import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; +import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { trapKeyboardNavigation } from 'sql/base/browser/dom'; import { IListAccessibilityProvider, IListStyles, List } from 'vs/base/browser/ui/list/listWidget'; import { IListRenderer, IListVirtualDelegate } from 'vs/base/browser/ui/list/list'; @@ -19,8 +19,8 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Emitter } from 'vs/base/common/event'; -import { CountBadge } from 'vs/base/browser/ui/countBadge/countBadge'; -import { defaultCountBadgeStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { CountBadge, ICountBadgeStyles } from 'vs/base/browser/ui/countBadge/countBadge'; +import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; export type HeaderFilterCommands = 'sort-asc' | 'sort-desc'; @@ -30,7 +30,7 @@ export interface CommandEventArgs { command: HeaderFilterCommands } -export interface ITableFilterOptions { +export interface ITableFilterOptions extends ITableFilterStyles { /** * The message to be displayed when the filter is disabled and the user tries to open the filter menu. */ @@ -40,13 +40,9 @@ export interface ITableFilterOptions { * Set to false to prevent the grid from being re-drawn multiple times by different plugins. */ refreshColumns?: boolean; - /** - * The button styles. - */ - buttonStyles: IButtonStyles; } -export interface ITableFilterStyles extends IInputBoxStyles, IListStyles { +export interface ITableFilterStyles extends IInputBoxStyles, IListStyles, IButtonStyles, ICountBadgeStyles { } interface NotificationProvider { @@ -70,9 +66,6 @@ export class HeaderFilter { private okButton?: Button; private clearButton?: Button; private cancelButton?: Button; - // {{SQL CARBON TODO}} - disable - // private sortAscButton?: Button; - // private sortDescButton?: Button; private selectAllCheckBox?: Checkbox; private searchInputBox?: InputBox; private countBadge?: CountBadge; @@ -82,7 +75,6 @@ export class HeaderFilter { private filteredListData?: TableFilterListElement[]; private elementDisposables?: IDisposable[]; private columnDef!: FilterableColumn; - private filterStyles?: ITableFilterStyles; private disposableStore = new DisposableStore(); private columnButtonMapping: Map = new Map(); private previouslyFocusedElement: HTMLElement; @@ -184,7 +176,7 @@ export class HeaderFilter { private createButtonMenuItem(title: string, command: HeaderFilterCommands, iconClass: string): Button { const buttonContainer = append(this.menu, $('.slick-header-menu-image-button-container')); - const button = new Button(buttonContainer, this.options.buttonStyles); + const button = new Button(buttonContainer, this.options); button.icon = `slick-header-menuicon ${iconClass}`; button.label = title; button.onDidClick(async () => { @@ -208,20 +200,20 @@ export class HeaderFilter { this.searchInputBox = new InputBox(append(searchRow, $('.search-input')), this.contextViewProvider, { placeholder: localize('table.searchPlaceHolder', "Search"), - inputBoxStyles: defaultInputBoxStyles + inputBoxStyles: this.options }); const visibleCountContainer = append(searchRow, $('.visible-count')); visibleCountContainer.setAttribute('aria-live', 'polite'); visibleCountContainer.setAttribute('aria-atomic', 'true'); this.visibleCountBadge = new CountBadge(visibleCountContainer, { countFormat: localize({ key: 'tableFilter.visibleCount', comment: ['This tells the user how many items are shown in the list. Currently not visible, but read by screen readers.'] }, "{0} Results") - }, defaultCountBadgeStyles); + }, this.options); const selectedCountBadgeContainer = append(searchRow, $('.selected-count')); selectedCountBadgeContainer.setAttribute('aria-live', 'polite'); this.countBadge = new CountBadge(selectedCountBadgeContainer, { countFormat: localize({ key: 'tableFilter.selectedCount', comment: ['This tells the user how many items are selected in the list'] }, "{0} Selected") - }, defaultCountBadgeStyles); + }, this.options); this.searchInputBox.onDidChange(async (newString) => { this.filteredListData = this.listData.filter(element => element.value?.toUpperCase().indexOf(newString.toUpperCase()) !== -1); @@ -408,9 +400,6 @@ export class HeaderFilter { // Make sure the menu can fit in the screen. this.menu.style.height = `${Math.min(DefaultMenuHeight, window.innerHeight - MenuBarHeight) - MenuVerticalPadding}px`; - // {{SQL CARBON TODO}} - style buttons - // this.sortAscButton = this.createButtonMenuItem(localize('table.sortAscending', "Sort Ascending"), 'sort-asc', 'ascending'); - // this.sortDescButton = this.createButtonMenuItem(localize('table.sortDescending', "Sort Descending"), 'sort-desc', 'descending'); this.createButtonMenuItem(localize('table.sortAscending', "Sort Ascending"), 'sort-asc', 'ascending'); this.createButtonMenuItem(localize('table.sortDescending', "Sort Descending"), 'sort-desc', 'descending'); @@ -418,49 +407,28 @@ export class HeaderFilter { await this.createFilterList(); const buttonGroupContainer = append(this.menu, $('.filter-menu-button-container')); - this.okButton = this.createButton(buttonGroupContainer, 'filter-ok-button', localize('headerFilter.ok', "OK"), this.options.buttonStyles); + this.okButton = this.createButton(buttonGroupContainer, 'filter-ok-button', localize('headerFilter.ok', "OK"), this.options); this.okButton.onDidClick(async () => { this.columnDef.filterValues = this.listData.filter(element => element.checked).map(element => element.value); this.setButtonImage($menuButton, this.columnDef.filterValues.length > 0); await this.handleApply(this.columnDef); }); - this.clearButton = this.createButton(buttonGroupContainer, 'filter-clear-button', localize('headerFilter.clear', "Clear"), { secondary: true, ...this.options.buttonStyles }); + this.clearButton = this.createButton(buttonGroupContainer, 'filter-clear-button', localize('headerFilter.clear', "Clear"), { secondary: true, ...this.options }); this.clearButton.onDidClick(async () => { this.columnDef.filterValues!.length = 0; this.setButtonImage($menuButton, false); await this.handleApply(this.columnDef); }); - this.cancelButton = this.createButton(buttonGroupContainer, 'filter-cancel-button', localize('headerFilter.cancel', "Cancel"), { secondary: true, ...this.options.buttonStyles }); + this.cancelButton = this.createButton(buttonGroupContainer, 'filter-cancel-button', localize('headerFilter.cancel', "Cancel"), { secondary: true, ...this.options }); this.cancelButton.onDidClick(() => { this.hideMenu(); }); - this.applyStyles(); // No need to add this to disposable store, it will be disposed when the menu is closed. trapKeyboardNavigation(this.menu); } - public style(styles: ITableFilterStyles): void { - this.filterStyles = styles; - this.applyStyles(); - } - - private applyStyles() { - if (this.filterStyles) { - // {{SQL CARBON TODO}} - apply styles - // this.okButton?.style(this.filterStyles); - // this.cancelButton?.style(this.filterStyles); - // this.clearButton?.style(this.filterStyles); - // this.sortAscButton?.style(this.filterStyles); - // this.sortDescButton?.style(this.filterStyles); - // this.searchInputBox?.style(this.filterStyles); - // this.countBadge?.style(this.filterStyles); - // this.visibleCountBadge?.style(this.filterStyles); - // this.list?.style(this.filterStyles); - } - } - private columnsResized() { this.hideMenu(); } diff --git a/src/sql/base/browser/ui/table/tableCellEditorFactory.ts b/src/sql/base/browser/ui/table/tableCellEditorFactory.ts index a6dc097d13..f56479231e 100644 --- a/src/sql/base/browser/ui/table/tableCellEditorFactory.ts +++ b/src/sql/base/browser/ui/table/tableCellEditorFactory.ts @@ -8,10 +8,11 @@ import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; import { KeyCode, EVENT_KEY_CODE_MAP } from 'vs/base/common/keyCodes'; import * as DOM from 'vs/base/browser/dom'; -import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; -import { Event } from 'vs/base/common/event'; +import { Dropdown, IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; import { Disposable } from 'vs/base/common/lifecycle'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { IInputBoxStyles } from 'vs/base/browser/ui/inputbox/inputBox'; +import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox'; const InverseKeyCodeMap: { [k: string]: number } = Object.fromEntries(Object.entries(EVENT_KEY_CODE_MAP).map(([key, value]) => [value, Number(key)])); @@ -19,8 +20,9 @@ export interface ITableCellEditorOptions { valueGetter?: (item: Slick.SlickData, column: Slick.Column) => string, valueSetter?: (context: any, row: number, item: Slick.SlickData, column: Slick.Column, value: string) => void, optionsGetter?: (item: Slick.SlickData, column: Slick.Column) => string[], - editorStyler: (component: InputBox | SelectBox | Dropdown) => void, - onStyleChange: Event; + inputBoxStyles: IInputBoxStyles, + editableDropdownStyles: IEditableDropdownStyles, + selectBoxStyles: ISelectBoxStyles } export class TableCellEditorFactory { @@ -37,8 +39,9 @@ export class TableCellEditorFactory { optionsGetter: options.optionsGetter ?? function (item, column) { return []; }, - editorStyler: options.editorStyler, - onStyleChange: options.onStyleChange + inputBoxStyles: options.inputBoxStyles, + editableDropdownStyles: options.editableDropdownStyles, + selectBoxStyles: options.selectBoxStyles }; } @@ -68,17 +71,12 @@ export class TableCellEditorFactory { type: inputType, inputBoxStyles: defaultInputBoxStyles }); - self._options.editorStyler(this._input); this._input.element.style.height = '100%'; this._input.focus(); this._input.onLoseFocus(async () => { await this.commitEdit(); }); this._register(this._input); - this._register(self._options.onStyleChange(() => { - self._options.editorStyler(this._input); - })); - this._input.value = presetValue ?? ''; } @@ -163,7 +161,7 @@ export class TableCellEditorFactory { container.style.height = '100%'; container.style.width = '100%'; if (isEditable) { - this._component = new Dropdown(container, self._contextViewProvider); + this._component = new Dropdown(container, self._contextViewProvider, self._options.editableDropdownStyles); this._component.onValueChange(async () => { await this.commitEdit(); }); @@ -178,12 +176,8 @@ export class TableCellEditorFactory { await this.commitEdit(); }); } - self._options.editorStyler(this._component); this._component.focus(); this._register(this._component); - this._register(self._options.onStyleChange(() => { - self._options.editorStyler(this._component); - })); } private async commitEdit(): Promise { diff --git a/src/sql/platform/browser/editableDropdown/editableDropdown.component.ts b/src/sql/platform/browser/editableDropdown/editableDropdown.component.ts index addb7719a2..df2e87e12f 100644 --- a/src/sql/platform/browser/editableDropdown/editableDropdown.component.ts +++ b/src/sql/platform/browser/editableDropdown/editableDropdown.component.ts @@ -10,10 +10,8 @@ import { import { AngularDisposable } from 'sql/base/browser/lifecycle'; import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; -import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler'; - +import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; @Component({ selector: 'editable-select-box', @@ -32,7 +30,6 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha constructor( @Inject(forwardRef(() => ElementRef)) private readonly _el: ElementRef, - @Inject(IThemeService) private readonly themeService: IThemeService, @Inject(IContextViewService) private readonly contextViewService: IContextViewService ) { super(); @@ -44,7 +41,8 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha strictSelection: false, placeholder: '', maxHeight: 125, - ariaLabel: '' + ariaLabel: '', + ...defaultEditableDropdownStyles }; this._selectbox = new Dropdown(this._el.nativeElement, this.contextViewService, dropdownOptions); this._selectbox.values = this.options; @@ -61,7 +59,6 @@ export class EditableDropDown extends AngularDisposable implements OnInit, OnCha this.onDidSelect.emit(e); } }); - this._register(attachEditableDropdownStyler(this._selectbox, this.themeService)); } ngOnChanges(changes: SimpleChanges): void { diff --git a/src/sql/platform/browser/inputbox/inputBox.component.ts b/src/sql/platform/browser/inputbox/inputBox.component.ts index 5047e341d3..64c2a8321b 100644 --- a/src/sql/platform/browser/inputbox/inputBox.component.ts +++ b/src/sql/platform/browser/inputbox/inputBox.component.ts @@ -10,9 +10,6 @@ import { import { InputBox as vsInputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { AngularDisposable } from 'sql/base/browser/lifecycle'; - -import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; @@ -34,7 +31,6 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges { constructor( @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, - @Inject(IThemeService) private themeService: IThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService ) { super(); @@ -63,7 +59,6 @@ export class InputBox extends AngularDisposable implements OnInit, OnChanges { this.onDidChange.emit(e); } }); - this._register(attachInputBoxStyler(this._inputbox, this.themeService)); } ngOnChanges(changes: SimpleChanges): void { diff --git a/src/sql/platform/theme/browser/defaultStyles.ts b/src/sql/platform/theme/browser/defaultStyles.ts index 3caaa3eef1..5acdc27437 100644 --- a/src/sql/platform/theme/browser/defaultStyles.ts +++ b/src/sql/platform/theme/browser/defaultStyles.ts @@ -4,10 +4,12 @@ *--------------------------------------------------------------------------------------------*/ import { ICheckboxStyles } from 'sql/base/browser/ui/checkbox/checkbox'; import { IDropdownStyles } from 'sql/base/browser/ui/dropdownList/dropdownList'; +import { IEditableDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; +import { ITableFilterStyles } from 'sql/base/browser/ui/table/plugins/headerFilter.plugin'; import * as sqlcr from 'sql/platform/theme/common/colorRegistry'; import { disabledCheckboxForeground } from 'sql/platform/theme/common/colors'; import { IButtonStyles } from 'vs/base/browser/ui/button/button'; -import { IStyleOverride, overrideStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles'; import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry'; @@ -34,6 +36,20 @@ export const defaultInfoButtonStyles: IButtonStyles = { buttonDisabledBorder: undefined } +export const defaultEditableDropdownStyles: IEditableDropdownStyles = { + contextBackground: asCssVariable(editorBackground), + contextBorder: asCssVariable(inputBorder), + ...defaultInputBoxStyles, + ...defaultListStyles +} + +export const defaultTableFilterStyles: ITableFilterStyles = { + ...defaultInputBoxStyles, + ...defaultButtonStyles, + ...defaultCountBadgeStyles, + ...defaultListStyles +} + export const defaultDropdownStyles: IDropdownStyles = { foregroundColor: asCssVariable(inputForeground), borderColor: asCssVariable(inputBorder), diff --git a/src/sql/platform/theme/common/styler.ts b/src/sql/platform/theme/common/styler.ts index 141df18e3d..e045421118 100644 --- a/src/sql/platform/theme/common/styler.ts +++ b/src/sql/platform/theme/common/styler.ts @@ -8,41 +8,9 @@ import * as colors from './colors'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import * as cr from 'vs/platform/theme/common/colorRegistry'; import * as sqlcr from 'sql/platform/theme/common/colorRegistry'; -import { IThemable, attachStyler, computeStyles, defaultListStyles, IColorMapping, IStyleOverrides } from 'sql/platform/theme/common/vsstyler'; +import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler'; import { IDisposable } from 'vs/base/common/lifecycle'; -export interface IInputBoxStyleOverrides extends IStyleOverrides { - inputBackground?: cr.ColorIdentifier, - inputForeground?: cr.ColorIdentifier, - disabledInputBackground?: cr.ColorIdentifier, - disabledInputForeground?: cr.ColorIdentifier, - inputBorder?: cr.ColorIdentifier, - inputValidationInfoBorder?: cr.ColorIdentifier, - inputValidationInfoBackground?: cr.ColorIdentifier, - inputValidationWarningBorder?: cr.ColorIdentifier, - inputValidationWarningBackground?: cr.ColorIdentifier, - inputValidationErrorBorder?: cr.ColorIdentifier, - inputValidationErrorBackground?: cr.ColorIdentifier -} - -export const defaultInputBoxStyles: IInputBoxStyleOverrides = { - inputBackground: cr.inputBackground, - inputForeground: cr.inputForeground, - disabledInputBackground: colors.disabledInputBackground, - disabledInputForeground: colors.disabledInputForeground, - inputBorder: cr.inputBorder, - inputValidationInfoBorder: cr.inputValidationInfoBorder, - inputValidationInfoBackground: cr.inputValidationInfoBackground, - inputValidationWarningBorder: cr.inputValidationWarningBorder, - inputValidationWarningBackground: cr.inputValidationWarningBackground, - inputValidationErrorBorder: cr.inputValidationErrorBorder, - inputValidationErrorBackground: cr.inputValidationErrorBackground -}; - -export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { ...defaultInputBoxStyles, ...(style || {}) }, widget); -} - export interface ISelectBoxStyleOverrides extends IStyleOverrides { selectBackground?: cr.ColorIdentifier, selectListBackground?: cr.ColorIdentifier, @@ -161,120 +129,6 @@ export function attachTableStyler(widget: IThemable, themeService: IThemeService return attachStyler(themeService, { ...defaultTableStyles, ...(style || {}) }, widget); } -export interface IHighPerfTableStyleOverrides extends IStyleOverrides { - listFocusBackground?: cr.ColorIdentifier, - listFocusForeground?: cr.ColorIdentifier, - listActiveSelectionBackground?: cr.ColorIdentifier, - listActiveSelectionForeground?: cr.ColorIdentifier, - listFocusAndSelectionBackground?: cr.ColorIdentifier, - listFocusAndSelectionForeground?: cr.ColorIdentifier, - listInactiveFocusBackground?: cr.ColorIdentifier, - listInactiveSelectionBackground?: cr.ColorIdentifier, - listInactiveSelectionForeground?: cr.ColorIdentifier, - listHoverBackground?: cr.ColorIdentifier, - listHoverForeground?: cr.ColorIdentifier, - listDropBackground?: cr.ColorIdentifier, - listFocusOutline?: cr.ColorIdentifier, - listInactiveFocusOutline?: cr.ColorIdentifier, - listSelectionOutline?: cr.ColorIdentifier, - listHoverOutline?: cr.ColorIdentifier, - tableHeaderBackground?: cr.ColorIdentifier, - tableHeaderForeground?: cr.ColorIdentifier, - cellOutlineColor?: cr.ColorIdentifier, - tableHeaderAndRowCountColor?: cr.ColorIdentifier -} - -export const defaultHighPerfTableStyles: IColorMapping = { - listFocusBackground: cr.listFocusBackground, - listFocusForeground: cr.listFocusForeground, - listActiveSelectionBackground: cr.listActiveSelectionBackground, - listActiveSelectionForeground: cr.listActiveSelectionForeground, - listFocusAndSelectionBackground: colors.listFocusAndSelectionBackground, - listFocusAndSelectionForeground: cr.listActiveSelectionForeground, - listInactiveFocusBackground: cr.listInactiveFocusBackground, - listInactiveSelectionBackground: cr.listInactiveSelectionBackground, - listInactiveSelectionForeground: cr.listInactiveSelectionForeground, - listHoverBackground: cr.listHoverBackground, - listHoverForeground: cr.listHoverForeground, - listDropBackground: cr.listDropBackground, - listFocusOutline: cr.activeContrastBorder, - listSelectionOutline: cr.activeContrastBorder, - listHoverOutline: cr.activeContrastBorder, - tableHeaderBackground: colors.tableHeaderBackground, - tableHeaderForeground: colors.tableHeaderForeground, - cellOutlineColor: colors.tableCellOutline, - tableHeaderAndRowCountColor: colors.tableCellOutline -}; - -export function attachHighPerfTableStyler(widget: IThemable, themeService: IThemeService, overrides?: IHighPerfTableStyleOverrides): IDisposable { - return attachStyler(themeService, { ...defaultHighPerfTableStyles, ...(overrides || {}) }, widget); -} - -export interface IEditableDropdownStyleOverrides extends IStyleOverrides { - listFocusBackground?: cr.ColorIdentifier, - listFocusForeground?: cr.ColorIdentifier, - listActiveSelectionBackground?: cr.ColorIdentifier, - listActiveSelectionForeground?: cr.ColorIdentifier, - listFocusAndSelectionBackground?: cr.ColorIdentifier, - listFocusAndSelectionForeground?: cr.ColorIdentifier, - listInactiveFocusBackground?: cr.ColorIdentifier, - listInactiveSelectionBackground?: cr.ColorIdentifier, - listInactiveSelectionForeground?: cr.ColorIdentifier, - listHoverBackground?: cr.ColorIdentifier, - listHoverForeground?: cr.ColorIdentifier, - listDropBackground?: cr.ColorIdentifier, - listFocusOutline?: cr.ColorIdentifier, - listInactiveFocusOutline?: cr.ColorIdentifier, - listSelectionOutline?: cr.ColorIdentifier, - listHoverOutline?: cr.ColorIdentifier, - inputBackground?: cr.ColorIdentifier, - inputForeground?: cr.ColorIdentifier, - inputBorder?: cr.ColorIdentifier, - inputValidationInfoBorder?: cr.ColorIdentifier, - inputValidationInfoBackground?: cr.ColorIdentifier, - inputValidationWarningBorder?: cr.ColorIdentifier, - inputValidationWarningBackground?: cr.ColorIdentifier, - inputValidationErrorBorder?: cr.ColorIdentifier, - inputValidationErrorBackground?: cr.ColorIdentifier, - contextBackground?: cr.ColorIdentifier, - contextBorder?: cr.ColorIdentifier -} - -export const defaultEditableDropdownStyle: IEditableDropdownStyleOverrides = { - listFocusBackground: cr.listFocusBackground, - listFocusForeground: cr.listFocusForeground, - listActiveSelectionBackground: cr.listActiveSelectionBackground, - listActiveSelectionForeground: cr.listActiveSelectionForeground, - listFocusAndSelectionBackground: cr.listActiveSelectionBackground, - listFocusAndSelectionForeground: cr.listActiveSelectionForeground, - listInactiveFocusBackground: cr.listInactiveFocusBackground, - listInactiveSelectionBackground: cr.listInactiveSelectionBackground, - listInactiveSelectionForeground: cr.listInactiveSelectionForeground, - listHoverBackground: cr.listHoverBackground, - listHoverForeground: cr.listHoverForeground, - listDropBackground: cr.listDropBackground, - listFocusOutline: cr.activeContrastBorder, - listSelectionOutline: cr.activeContrastBorder, - listHoverOutline: cr.activeContrastBorder, - listInactiveFocusOutline: cr.listInactiveFocusOutline, - inputBackground: cr.inputBackground, - inputForeground: cr.inputForeground, - inputBorder: cr.inputBorder, - inputValidationInfoBorder: cr.inputValidationInfoBorder, - inputValidationInfoBackground: cr.inputValidationInfoBackground, - inputValidationWarningBorder: cr.inputValidationWarningBorder, - inputValidationWarningBackground: cr.inputValidationWarningBackground, - inputValidationErrorBorder: cr.inputValidationErrorBorder, - inputValidationErrorBackground: cr.inputValidationErrorBackground, - contextBackground: cr.editorBackground, - contextBorder: cr.inputBorder -}; - - -export function attachEditableDropdownStyler(widget: IThemable, themeService: IThemeService, style?: IEditableDropdownStyleOverrides): IDisposable { - return attachStyler(themeService, { ...defaultEditableDropdownStyle, ...(style || {}) }, widget); -} - export interface IInfoBoxStyleOverrides { informationBackground: cr.ColorIdentifier, warningBackground: cr.ColorIdentifier, @@ -300,39 +154,14 @@ export interface IInfoButtonStyleOverrides { buttonHoverBackground: cr.ColorIdentifier } -export function attachTableFilterStyler(widget: IThemable, themeService: IThemeService): IDisposable { - return attachStyler(themeService, { - ...defaultInputBoxStyles, - buttonForeground: cr.buttonForeground, - buttonBackground: cr.buttonBackground, - buttonHoverBackground: cr.buttonHoverBackground, - buttonSecondaryForeground: cr.buttonSecondaryForeground, - buttonSecondaryBackground: cr.buttonSecondaryBackground, - buttonSecondaryHoverBackground: cr.buttonSecondaryHoverBackground, - buttonBorder: cr.buttonBorder, - buttonSecondaryBorder: cr.buttonSecondaryBorder, - buttonDisabledBorder: cr.buttonDisabledBorder, - buttonDisabledBackground: cr.buttonDisabledBackground, - buttonDisabledForeground: cr.buttonDisabledForeground, - badgeBackground: cr.badgeBackground, - badgeForeground: cr.badgeForeground, - badgeBorder: cr.contrastBorder, - ...defaultListStyles, - }, widget); -} - export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable { function applyStyles(): void { const colorTheme = themeService.getColorTheme(); - const inputStyles = computeStyles(colorTheme, defaultInputBoxStyles); const selectBoxStyles = computeStyles(colorTheme, defaultSelectBoxStyles); const tableStyles = computeStyles(colorTheme, defaultTableStyles); - const editableDropdownStyles = computeStyles(colorTheme, defaultEditableDropdownStyle); widget.style({ - inputBoxStyles: inputStyles, selectBoxStyles: selectBoxStyles, tableStyles: tableStyles, - dropdownStyles: editableDropdownStyles, paneSeparator: cr.resolveColorValue(sqlcr.DesignerPaneSeparator, colorTheme), groupHeaderBackground: cr.resolveColorValue(sqlcr.GroupHeaderBackground, colorTheme) }); diff --git a/src/sql/platform/theme/common/vsstyler.ts b/src/sql/platform/theme/common/vsstyler.ts index 9f6faad6a4..97a5d84725 100644 --- a/src/sql/platform/theme/common/vsstyler.ts +++ b/src/sql/platform/theme/common/vsstyler.ts @@ -5,7 +5,7 @@ import { Color } from 'vs/base/common/color'; import { IDisposable } from 'vs/base/common/lifecycle'; -import { activeContrastBorder, badgeBackground, badgeForeground, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list +import { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetBorder, editorWidgetForeground, focusBorder, inputActiveOptionBackground, inputActiveOptionBorder, inputActiveOptionForeground, inputBackground, inputBorder, inputForeground, inputValidationErrorBackground, inputValidationErrorBorder, inputValidationErrorForeground, inputValidationInfoBackground, inputValidationInfoBorder, inputValidationInfoForeground, inputValidationWarningBackground, inputValidationWarningBorder, inputValidationWarningForeground, keybindingLabelBackground, keybindingLabelBorder, keybindingLabelBottomBorder, keybindingLabelForeground, listActiveSelectionBackground, listActiveSelectionForeground, listActiveSelectionIconForeground, listDropBackground, listFilterWidgetBackground, listFilterWidgetNoMatchesOutline, listFilterWidgetOutline, listFocusBackground, listFocusForeground, listFocusOutline, listHoverBackground, listHoverForeground, listInactiveFocusBackground, listInactiveFocusOutline, listInactiveSelectionBackground, listInactiveSelectionForeground, listInactiveSelectionIconForeground, menuBackground, menuBorder, menuForeground, menuSelectionBackground, menuSelectionBorder, menuSelectionForeground, menuSeparatorBackground, pickerGroupForeground, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, quickInputListFocusBackground, quickInputListFocusForeground, quickInputListFocusIconForeground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, selectBackground, selectBorder, selectForeground, selectListBackground, checkboxBackground, checkboxBorder, checkboxForeground, tableColumnsBorder, tableOddRowsBackgroundColor, textLinkForeground, treeIndentGuidesStroke, widgetShadow, listFocusAndSelectionOutline, listFilterWidgetShadow, buttonSeparator } from 'vs/platform/theme/common/colorRegistry'; // {{SQL CARBON EDIT}} Added buttonSecondaryBorder, buttonDisabledBorder, buttonDisabledBackground, buttonDisabledForeground to import list import { isHighContrast } from 'vs/platform/theme/common/theme'; import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; @@ -60,54 +60,6 @@ export function attachStyler(themeService: IThemeServic return themeService.onDidColorThemeChange(applyStyles); } -export interface IBadgeStyleOverrides extends IStyleOverrides { - badgeBackground?: ColorIdentifier; - badgeForeground?: ColorIdentifier; -} - -export function attachBadgeStyler(widget: IThemable, themeService: IThemeService, style?: IBadgeStyleOverrides): IDisposable { - return attachStyler(themeService, { - badgeBackground: style?.badgeBackground || badgeBackground, - badgeForeground: style?.badgeForeground || badgeForeground, - badgeBorder: contrastBorder - } as IBadgeStyleOverrides, widget); -} - -export interface IInputBoxStyleOverrides extends IStyleOverrides { - inputBackground?: ColorIdentifier; - inputForeground?: ColorIdentifier; - inputBorder?: ColorIdentifier; - inputActiveOptionBorder?: ColorIdentifier; - inputActiveOptionForeground?: ColorIdentifier; - inputActiveOptionBackground?: ColorIdentifier; - inputValidationInfoBorder?: ColorIdentifier; - inputValidationInfoBackground?: ColorIdentifier; - inputValidationInfoForeground?: ColorIdentifier; - inputValidationWarningBorder?: ColorIdentifier; - inputValidationWarningBackground?: ColorIdentifier; - inputValidationWarningForeground?: ColorIdentifier; - inputValidationErrorBorder?: ColorIdentifier; - inputValidationErrorBackground?: ColorIdentifier; - inputValidationErrorForeground?: ColorIdentifier; -} - -export function attachInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { - inputBackground: style?.inputBackground || inputBackground, - inputForeground: style?.inputForeground || inputForeground, - inputBorder: style?.inputBorder || inputBorder, - inputValidationInfoBorder: style?.inputValidationInfoBorder || inputValidationInfoBorder, - inputValidationInfoBackground: style?.inputValidationInfoBackground || inputValidationInfoBackground, - inputValidationInfoForeground: style?.inputValidationInfoForeground || inputValidationInfoForeground, - inputValidationWarningBorder: style?.inputValidationWarningBorder || inputValidationWarningBorder, - inputValidationWarningBackground: style?.inputValidationWarningBackground || inputValidationWarningBackground, - inputValidationWarningForeground: style?.inputValidationWarningForeground || inputValidationWarningForeground, - inputValidationErrorBorder: style?.inputValidationErrorBorder || inputValidationErrorBorder, - inputValidationErrorBackground: style?.inputValidationErrorBackground || inputValidationErrorBackground, - inputValidationErrorForeground: style?.inputValidationErrorForeground || inputValidationErrorForeground - } as IInputBoxStyleOverrides, widget); -} - export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOverrides { selectBackground?: ColorIdentifier; selectListBackground?: ColorIdentifier; @@ -136,26 +88,6 @@ export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeSer } as ISelectBoxStyleOverrides, widget); } -export function attachFindReplaceInputBoxStyler(widget: IThemable, themeService: IThemeService, style?: IInputBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { - inputBackground: style?.inputBackground || inputBackground, - inputForeground: style?.inputForeground || inputForeground, - inputBorder: style?.inputBorder || inputBorder, - inputActiveOptionBorder: style?.inputActiveOptionBorder || inputActiveOptionBorder, - inputActiveOptionForeground: style?.inputActiveOptionForeground || inputActiveOptionForeground, - inputActiveOptionBackground: style?.inputActiveOptionBackground || inputActiveOptionBackground, - inputValidationInfoBorder: style?.inputValidationInfoBorder || inputValidationInfoBorder, - inputValidationInfoBackground: style?.inputValidationInfoBackground || inputValidationInfoBackground, - inputValidationInfoForeground: style?.inputValidationInfoForeground || inputValidationInfoForeground, - inputValidationWarningBorder: style?.inputValidationWarningBorder || inputValidationWarningBorder, - inputValidationWarningBackground: style?.inputValidationWarningBackground || inputValidationWarningBackground, - inputValidationWarningForeground: style?.inputValidationWarningForeground || inputValidationWarningForeground, - inputValidationErrorBorder: style?.inputValidationErrorBorder || inputValidationErrorBorder, - inputValidationErrorBackground: style?.inputValidationErrorBackground || inputValidationErrorBackground, - inputValidationErrorForeground: style?.inputValidationErrorForeground || inputValidationErrorForeground - } as IInputBoxStyleOverrides, widget); -} - export interface IListStyleOverrides extends IStyleOverrides { listBackground?: ColorIdentifier; listFocusBackground?: ColorIdentifier; diff --git a/src/sql/workbench/browser/designer/designer.ts b/src/sql/workbench/browser/designer/designer.ts index 6129812642..d7346b4418 100644 --- a/src/sql/workbench/browser/designer/designer.ts +++ b/src/sql/workbench/browser/designer/designer.ts @@ -14,7 +14,7 @@ import * as DOM from 'vs/base/browser/dom'; import { Emitter, Event } from 'vs/base/common/event'; import { Orientation, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview'; import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; -import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; +import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import 'vs/css!./media/designer'; import { ITableStyles } from 'sql/base/browser/ui/table/interfaces'; import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; @@ -41,8 +41,7 @@ import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticip import { listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry'; import { alert } from 'vs/base/browser/ui/aria/aria'; import { layoutDesignerTable, TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil'; -import { Dropdown, IDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; -import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; +import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; import { IAction } from 'vs/base/common/actions'; import { InsertAfterSelectedRowAction, InsertBeforeSelectedRowAction, AddRowAction, DesignerTableActionContext, MoveRowDownAction, MoveRowUpAction, DesignerTableAction } from 'sql/workbench/browser/designer/tableActions'; import { RowMoveManager, RowMoveOnDragEventData } from 'sql/base/browser/ui/table/plugins/rowMoveManager.plugin'; @@ -54,16 +53,14 @@ import { onUnexpectedError } from 'vs/base/common/errors'; import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; -import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; import { ThemeIcon } from 'vs/base/common/themables'; -import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; export interface IDesignerStyle { tabbedPanelStyles?: ITabbedPanelStyles; - inputBoxStyles?: IInputBoxStyles; tableStyles?: ITableStyles; selectBoxStyles?: ISelectBoxStyles; - dropdownStyles?: IListStyles & IInputBoxStyles & IDropdownStyles; paneSeparator?: Color; groupHeaderBackground?: Color; } @@ -136,10 +133,9 @@ export class Designer extends Disposable { optionsGetter: (item, column): string[] => { return item[column.field].values; }, - editorStyler: (component) => { - this.styleComponent(component); - }, - onStyleChange: this._onStyleChangeEventEmitter.event + inputBoxStyles: defaultInputBoxStyles, + editableDropdownStyles: defaultEditableDropdownStyles, + selectBoxStyles: defaultSelectBoxStyles }, this._contextViewProvider ); this._loadingSpinner = new LoadingSpinner(this._container, { showText: true, fullSize: true }); @@ -218,7 +214,6 @@ export class Designer extends Disposable { private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table | SelectBox | Dropdown): void { if (component instanceof InputBox) { - component.style(this._styles.inputBoxStyles); } else if (component instanceof Checkbox) { } else if (component instanceof TabbedPanel) { component.style(this._styles.tabbedPanelStyles); @@ -226,7 +221,6 @@ export class Designer extends Disposable { this.removeTableSelectionStyles(); component.style(this._styles.tableStyles); } else if (component instanceof Dropdown) { - component.style(this._styles.dropdownStyles); } else { component.style(this._styles.selectBoxStyles); } @@ -252,7 +246,7 @@ export class Designer extends Disposable { public style(styles: IDesignerStyle): void { this._styles = styles; this._componentMap.forEach((value, key, map) => { - if (!(value.component instanceof Checkbox)) { + if (value.component instanceof Table) { if (value.component.style) { this.styleComponent(value.component); } @@ -792,7 +786,8 @@ export class Designer extends Disposable { dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, { values: dropdownProperties.values as string[] || [], ariaLabel: componentDefinition.componentProperties?.title, - ariaDescription: componentDefinition.description + ariaDescription: componentDefinition.description, + ...defaultEditableDropdownStyles }); dropdown.onValueChange((value) => { this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value, source: view }); diff --git a/src/sql/workbench/browser/modelComponents/dropdown.component.ts b/src/sql/workbench/browser/modelComponents/dropdown.component.ts index c8a092e3af..3e5ecf5fb7 100644 --- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts +++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts @@ -13,7 +13,6 @@ import * as azdata from 'azdata'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; -import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler'; import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; @@ -26,6 +25,7 @@ import { ILogService } from 'vs/platform/log/common/log'; import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService'; import { errorForeground, inputValidationErrorBorder } from 'vs/platform/theme/common/colorRegistry'; import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; +import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; @Component({ selector: 'modelview-dropdown', @@ -88,13 +88,11 @@ export default class DropDownComponent extends ComponentBase { if (this.editable) { this.setSelectedValue(e); diff --git a/src/sql/workbench/browser/modelComponents/inputbox.component.ts b/src/sql/workbench/browser/modelComponents/inputbox.component.ts index 6c3906abce..b55a18c439 100644 --- a/src/sql/workbench/browser/modelComponents/inputbox.component.ts +++ b/src/sql/workbench/browser/modelComponents/inputbox.component.ts @@ -12,13 +12,11 @@ import * as azdata from 'azdata'; import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase'; import { IInputOptions, InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; -import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import * as nls from 'vs/nls'; -import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; +import { asCssVariable, inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import * as DOM from 'vs/base/browser/dom'; @@ -27,7 +25,7 @@ import { isNumber } from 'vs/base/common/types'; import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom'; import { onUnexpectedError } from 'vs/base/common/errors'; import { ILogService } from 'vs/platform/log/common/log'; -import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles'; @Component({ selector: 'modelview-inputBox', @@ -46,7 +44,6 @@ export default class InputBoxComponent extends ComponentBase ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService, @Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(ILogService) logService: ILogService @@ -71,7 +68,10 @@ export default class InputBoxComponent extends ComponentBase !input.inputElement.validationMessage); this._register(input); - this._register(attachInputBoxStyler(input, this.themeService, { - inputValidationInfoBackground: inputBackground, - inputValidationInfoBorder: inputBorder, - })); this._register(input.onDidChange(async e => { if (checkOption()) { this.value = input.value; diff --git a/src/sql/workbench/browser/modelComponents/table.component.ts b/src/sql/workbench/browser/modelComponents/table.component.ts index 7b69d8260a..fc09ae3eff 100644 --- a/src/sql/workbench/browser/modelComponents/table.component.ts +++ b/src/sql/workbench/browser/modelComponents/table.component.ts @@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa import { Table } from 'sql/base/browser/ui/table/table'; import { TableDataView } from 'sql/base/browser/ui/table/tableDataView'; -import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } from 'sql/platform/theme/common/styler'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom'; import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin'; @@ -41,7 +41,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; import { deepClone, equals } from 'vs/base/common/objects'; -import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; export enum ColumnSizingMode { ForceFit = 0, // all columns will be sized to fit in viewable space, no horiz scroll bar @@ -607,8 +607,7 @@ export default class TableComponent extends ComponentBase({ buttonStyles: defaultButtonStyles }, this.contextViewService); - this._register(attachTableFilterStyler(filterPlugin, this.themeService)); + const filterPlugin = new HeaderFilter(defaultTableFilterStyles, this.contextViewService); this._filterPlugin = filterPlugin; this._filterPlugin.onFilterApplied.subscribe((e, args) => { let filterValues = (args).column.filterValues; diff --git a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts index 109d949649..d7d32ff4dc 100644 --- a/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts +++ b/src/sql/workbench/contrib/assessment/browser/asmtResultsView.component.ts @@ -46,12 +46,12 @@ import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys'; import { LocalizedStrings } from 'sql/workbench/contrib/assessment/common/strings'; import { ConnectionManagementInfo } from 'sql/platform/connection/common/connectionManagementInfo'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { attachTableFilterStyler } from 'sql/platform/theme/common/styler'; import { DASHBOARD_BORDER } from 'sql/workbench/common/theme'; import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; -import { defaultButtonStyles, defaultListStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultListStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; export const ASMTRESULTSVIEW_SELECTOR: string = 'asmt-results-view-component'; export const ROW_HEIGHT: number = 25; @@ -326,8 +326,7 @@ export class AsmtResultsViewComponent extends TabChild implements IAssessmentCom columnDef.formatter = (row, cell, value, columnDef, dataContext) => this.detailSelectionFormatter(row, cell, value, columnDef, dataContext as ExtendedItem); columns.unshift(columnDef); - let filterPlugin = new HeaderFilter({ buttonStyles: defaultButtonStyles }, this._contextViewService); - this._register(attachTableFilterStyler(filterPlugin, this._themeService)); + let filterPlugin = new HeaderFilter(defaultTableFilterStyles, this._contextViewService); this.filterPlugin = filterPlugin; this.filterPlugin.onFilterApplied.subscribe((e, args) => { let filterValues = args.column.filterValues; diff --git a/src/sql/workbench/contrib/backup/browser/backup.component.ts b/src/sql/workbench/contrib/backup/browser/backup.component.ts index 256a1bdbb1..1e988c11c7 100644 --- a/src/sql/workbench/contrib/backup/browser/backup.component.ts +++ b/src/sql/workbench/contrib/backup/browser/backup.component.ts @@ -11,7 +11,7 @@ import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { ListBox } from 'sql/base/browser/ui/listBox/listBox'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; -import { attachListBoxStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; +import { attachListBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; import * as BackupConstants from 'sql/workbench/contrib/backup/common/constants'; import { IBackupService, TaskExecutionMode } from 'sql/platform/backup/common/backupService'; @@ -606,17 +606,11 @@ export class BackupComponent extends AngularDisposable { private registerListeners(): void { // Theme styler - this._register(attachInputBoxStyler(this.backupNameBox!, this.themeService)); - this._register(attachInputBoxStyler(this.recoveryBox!, this.themeService)); this._register(attachSelectBoxStyler(this.backupTypeSelectBox!, this.themeService)); this._register(attachListBoxStyler(this.pathListBox!, this.themeService)); this._register(attachSelectBoxStyler(this.compressionSelectBox!, this.themeService)); this._register(attachSelectBoxStyler(this.algorithmSelectBox!, this.themeService)); this._register(attachSelectBoxStyler(this.encryptorSelectBox!, this.themeService)); - this._register(attachInputBoxStyler(this.mediaNameBox!, this.themeService)); - this._register(attachInputBoxStyler(this.urlInputBox!, this.themeService)); - this._register(attachInputBoxStyler(this.mediaDescriptionBox!, this.themeService)); - this._register(attachInputBoxStyler(this.backupRetainDaysBox!, this.themeService)); this._register(this.backupTypeSelectBox!.onDidSelect(selected => this.onBackupTypeChanged())); this._register(this.addUrlPathButton!.onDidClick(() => this.onAddUrlClick())); diff --git a/src/sql/workbench/contrib/charts/browser/chartView.ts b/src/sql/workbench/contrib/charts/browser/chartView.ts index 5e8cb21f33..8861bc87c0 100644 --- a/src/sql/workbench/contrib/charts/browser/chartView.ts +++ b/src/sql/workbench/contrib/charts/browser/chartView.ts @@ -25,7 +25,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { INotificationService } from 'vs/platform/notification/common/notification'; import { Registry } from 'vs/platform/registry/common/platform'; -import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; +import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { ChartOptions, ControlType, IChartOption } from './chartOptions'; import { Insight } from './insight'; @@ -385,7 +385,6 @@ export class ChartView extends Disposable implements IPanelView { input.value = val; } }; - this.optionDisposables.push(attachInputBoxStyler(input, this._themeService)); break; case ControlType.numberInput: let numberInput = new InputBox(optionInput, this._contextViewService, { @@ -408,7 +407,6 @@ export class ChartView extends Disposable implements IPanelView { numberInput.value = val; } }; - this.optionDisposables.push(attachInputBoxStyler(numberInput, this._themeService)); break; case ControlType.dateInput: let dateInput = new InputBox(optionInput, this._contextViewService, { @@ -431,7 +429,6 @@ export class ChartView extends Disposable implements IPanelView { dateInput.value = val; } }; - this.optionDisposables.push(attachInputBoxStyler(dateInput, this._themeService)); break; } this.optionMap[entry] = { element: optionContainer, set: setFunc }; diff --git a/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts b/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts index a7bda7d593..2f9b444d92 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanPropertiesViewBase.ts @@ -11,7 +11,7 @@ import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { Action } from 'vs/base/common/actions'; import { Codicon } from 'vs/base/common/codicons'; import { filterIconClassNames, propertiesSearchDescription, searchPlaceholder, sortAlphabeticallyIconClassNames, sortByDisplayOrderIconClassNames, sortReverseAlphabeticallyIconClassNames } from 'sql/workbench/contrib/executionPlan/browser/constants'; -import { attachInputBoxStyler, attachTableStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } from 'sql/platform/theme/common/styler'; import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants'; import { contrastBorder, inputBackground, listHoverBackground, listInactiveSelectionBackground } from 'vs/platform/theme/common/colorRegistry'; import { TreeGrid } from 'sql/base/browser/ui/table/treeGrid'; @@ -149,7 +149,6 @@ export abstract class ExecutionPlanPropertiesViewBase extends Disposable impleme inputBoxStyles: defaultInputBoxStyles })); - this._register(attachInputBoxStyler(this._propertiesSearchInput, this._themeService)); this._propertiesSearchInput.element.classList.add('codicon', filterIconClassNames); this._searchAndActionBarContainer.appendChild(this._propertiesSearchInputContainer); this._register(this._propertiesSearchInput.onDidChange(e => { diff --git a/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts b/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts index 9af8d36509..2fa6b7d038 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/topOperationsTab.ts @@ -14,7 +14,7 @@ import { ExecutionPlanState } from 'sql/workbench/common/editor/query/executionP import { Table } from 'sql/base/browser/ui/table/table'; import { hyperLinkFormatter, textFormatter } from 'sql/base/browser/ui/table/formatters'; import { RESULTS_GRID_DEFAULTS } from 'sql/workbench/common/constants'; -import { attachInputBoxStyler, attachTableStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } from 'sql/platform/theme/common/styler'; import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader'; import { QueryResultsView } from 'sql/workbench/contrib/query/browser/queryResultsView'; @@ -186,7 +186,6 @@ export class TopOperationsTabView extends Disposable implements IPanelView { placeholder: searchPlaceholder, inputBoxStyles: defaultInputBoxStyles, })); - this._register(attachInputBoxStyler(topOperationsSearchInput, this._themeService)); topOperationsSearchInput.element.classList.add('codicon', filterIconClassNames); const header = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, headerInfoContainer, { diff --git a/src/sql/workbench/contrib/executionPlan/browser/widgets/customZoomWidget.ts b/src/sql/workbench/contrib/executionPlan/browser/widgets/customZoomWidget.ts index 5061d94022..047270aa97 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/widgets/customZoomWidget.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/customZoomWidget.ts @@ -5,7 +5,6 @@ import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { ActionBar } from 'sql/base/browser/ui/taskbar/actionbar'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { ExecutionPlanWidgetBase } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetBase'; import * as DOM from 'vs/base/browser/dom'; import { Action } from 'vs/base/common/actions'; @@ -43,7 +42,6 @@ export class CustomZoomWidget extends ExecutionPlanWidgetBase { flexibleWidth: false, inputBoxStyles: defaultInputBoxStyles })); - this._register(attachInputBoxStyler(this.customZoomInputBox, this.themeService)); const currentZoom = this.executionPlanDiagram.getZoomLevel(); diff --git a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts index 26d40b1841..f7eb8a8c09 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts @@ -10,7 +10,7 @@ import * as DOM from 'vs/base/browser/dom'; import { localize } from 'vs/nls'; import { Codicon } from 'vs/base/common/codicons'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; +import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { Action } from 'vs/base/common/actions'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; @@ -131,7 +131,6 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase { })); this._searchTextInputBox.setAriaLabel(ENTER_SEARCH_VALUE_TITLE); this._searchTextInputBox.element.style.marginLeft = '5px'; - this._register(attachInputBoxStyler(this._searchTextInputBox, this.themeService)); this._register(this._searchTextInputBox.onDidChange(e => { this._usePreviousSearchResult = false; })); diff --git a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts index 0d12ecc127..90a8141198 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts +++ b/src/sql/workbench/contrib/jobManagement/browser/jobsView.component.ts @@ -33,11 +33,10 @@ import { TelemetryView } from 'sql/platform/telemetry/common/telemetryKeys'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { onUnexpectedError } from 'vs/base/common/errors'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; -import { attachTableFilterStyler } from 'sql/platform/theme/common/styler'; import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; -import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; export const JOBSVIEW_SELECTOR: string = 'jobsview-component'; export const ROW_HEIGHT: number = 45; @@ -189,8 +188,7 @@ export class JobsViewComponent extends JobManagementView implements OnInit, OnDe }); this.rowDetail = rowDetail; columns.unshift(this.rowDetail.getColumnDefinition()); - let filterPlugin = new HeaderFilter({ buttonStyles: defaultButtonStyles }, this._contextViewService); - this._register(attachTableFilterStyler(filterPlugin, this._themeService)); + let filterPlugin = new HeaderFilter(defaultTableFilterStyles, this._contextViewService); this.filterPlugin = filterPlugin; jQuery(this._gridEl.nativeElement).empty(); jQuery(this.actionBarContainer.nativeElement).empty(); diff --git a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts index 3c4bdde71a..d57b52b9b3 100644 --- a/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts +++ b/src/sql/workbench/contrib/jobManagement/browser/notebooksView.component.ts @@ -34,11 +34,10 @@ import { Taskbar } from 'sql/base/browser/ui/taskbar/taskbar'; import { onUnexpectedError } from 'vs/base/common/errors'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; -import { attachTableFilterStyler } from 'sql/platform/theme/common/styler'; import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; -import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; export const NOTEBOOKSVIEW_SELECTOR: string = 'notebooksview-component'; @@ -188,8 +187,7 @@ export class NotebooksViewComponent extends JobManagementView implements OnInit, }); this.rowDetail = rowDetail; columns.unshift(this.rowDetail.getColumnDefinition()); - let filterPlugin = new HeaderFilter({ buttonStyles: defaultButtonStyles }, this._contextViewService); - this._register(attachTableFilterStyler(filterPlugin, this._themeService)); + let filterPlugin = new HeaderFilter(defaultTableFilterStyles, this._contextViewService); this.filterPlugin = filterPlugin; jQuery(this._gridEl.nativeElement).empty(); jQuery(this.actionBarContainer.nativeElement).empty(); diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/stdin.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/stdin.component.ts index 8ad7922cee..a599e66a04 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/stdin.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/stdin.component.ts @@ -13,18 +13,16 @@ import { nb } from 'azdata'; import { localize } from 'vs/nls'; import { IInputOptions } from 'vs/base/browser/ui/inputbox/inputBox'; -import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; +import { asCssVariable, inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { AngularDisposable } from 'sql/base/browser/lifecycle'; import { Deferred } from 'sql/base/common/promise'; import { ICellModel, CellExecutionState } from 'sql/workbench/services/notebook/browser/models/modelInterfaces'; -import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles'; export const STDIN_SELECTOR: string = 'stdin-component'; @Component({ @@ -44,7 +42,6 @@ export class StdInComponent extends AngularDisposable implements AfterViewInit { constructor( - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService ) { super(); @@ -54,17 +51,16 @@ export class StdInComponent extends AngularDisposable implements AfterViewInit { let inputOptions: IInputOptions = { placeholder: '', ariaLabel: this.prompt, - inputBoxStyles: defaultInputBoxStyles + inputBoxStyles: getInputBoxStyle({ + inputValidationInfoBackground: asCssVariable(inputBackground), + inputValidationInfoBorder: asCssVariable(inputBorder) + }) }; this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions); if (this.password) { this._input.inputElement.type = 'password'; } this._register(this._input); - this._register(attachInputBoxStyler(this._input, this.themeService, { - inputValidationInfoBackground: inputBackground, - inputValidationInfoBorder: inputBorder, - })); if (this.cellModel) { this._register(this.cellModel.onExecutionStateChange((status) => this.handleExecutionChange(status))); } diff --git a/src/sql/workbench/contrib/notebook/browser/notebookViews/viewOptionsModal.ts b/src/sql/workbench/contrib/notebook/browser/notebookViews/viewOptionsModal.ts index 9bcd789e3a..ea92ddba45 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookViews/viewOptionsModal.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebookViews/viewOptionsModal.ts @@ -14,7 +14,6 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { ILogService } from 'vs/platform/log/common/log'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import * as DOM from 'vs/base/browser/dom'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { localize } from 'vs/nls'; import { IInputOptions, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; @@ -99,8 +98,6 @@ export class ViewOptionsModal extends Modal { this._submitButton = this.addFooterButton(localize('save', "Save"), () => this.onSubmitHandler()); this.addFooterButton(localize('cancel', "Cancel"), () => this.onCancelHandler(), 'right', true); - this._register(attachInputBoxStyler(this._viewNameInput!, this._themeService)); - this._register(this._viewNameInput.onDidChange(v => this.validate())); attachModalDialogStyler(this, this._themeService); diff --git a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts index f032440b33..6eb1da67a6 100644 --- a/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/outputs/gridOutput.component.ts @@ -241,7 +241,6 @@ class DataResourceTable extends GridTableBase { @IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService, @IConfigurationService configurationService: IConfigurationService, @IQueryModelService queryModelService: IQueryModelService, - @IThemeService themeService: IThemeService, @IContextViewService contextViewService: IContextViewService, @INotificationService notificationService: INotificationService, @IExecutionPlanService executionPlanService: IExecutionPlanService, @@ -254,7 +253,7 @@ class DataResourceTable extends GridTableBase { super(state, createResultSet(source), { actionOrientation: ActionsOrientation.HORIZONTAL, inMemoryDataProcessing: true - }, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService); + }, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService); this._gridDataProvider = this.instantiationService.createInstance(DataResourceDataProvider, source, this.resultSet, this.cellModel); this._chart = this.instantiationService.createInstance(ChartView, false); diff --git a/src/sql/workbench/contrib/query/browser/gridPanel.ts b/src/sql/workbench/contrib/query/browser/gridPanel.ts index 3643043c28..f268076c2a 100644 --- a/src/sql/workbench/contrib/query/browser/gridPanel.ts +++ b/src/sql/workbench/contrib/query/browser/gridPanel.ts @@ -6,7 +6,7 @@ import 'vs/css!./media/gridPanel'; import { ITableStyles, ITableMouseEvent, FilterableColumn } from 'sql/base/browser/ui/table/interfaces'; -import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } from 'sql/platform/theme/common/styler'; import QueryRunner, { QueryGridDataProvider } from 'sql/workbench/services/query/common/queryRunner'; import { ResultSetSummary, IColumn, ICellValue } from 'sql/workbench/services/query/common/query'; import { VirtualizedCollection } from 'sql/base/browser/ui/table/asyncDataView'; @@ -60,7 +60,7 @@ import { queryEditorNullBackground } from 'sql/platform/theme/common/colorRegist import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; import { GridRange } from 'sql/base/common/gridRange'; import { onUnexpectedError } from 'vs/base/common/errors'; -import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; const ROW_HEIGHT = 29; const HEADER_HEIGHT = 26; @@ -422,7 +422,6 @@ export abstract class GridTableBase extends Disposable implements IView, IQue @IUntitledTextEditorService private readonly untitledEditorService: IUntitledTextEditorService, @IConfigurationService protected readonly configurationService: IConfigurationService, @IQueryModelService private readonly queryModelService: IQueryModelService, - @IThemeService private readonly themeService: IThemeService, @IContextViewService private readonly contextViewService: IContextViewService, @INotificationService private readonly notificationService: INotificationService, @IExecutionPlanService private readonly executionPlanService: IExecutionPlanService, @@ -622,9 +621,8 @@ export abstract class GridTableBase extends Disposable implements IView, IQue this.filterPlugin = new HeaderFilter({ disabledFilterMessage: localize('resultsGrid.maxRowCountExceeded', "Max row count for filtering/sorting has been exceeded. To update it, navigate to User Settings and change the setting: 'queryEditor.results.inMemoryDataProcessingThreshold'"), refreshColumns: !autoSizeOnRender, // The auto size columns plugin refreshes the columns so we don't need to refresh twice if both plugins are on. - buttonStyles: defaultButtonStyles + ...defaultTableFilterStyles }, this.contextViewService, this.notificationService,); - this._register(attachTableFilterStyler(this.filterPlugin, this.themeService)); this._register(registerThemingParticipant((theme: IColorTheme, collector: ICssStyleCollector) => { const nullBackground = theme.getColor(queryEditorNullBackground); if (nullBackground) { @@ -1114,7 +1112,6 @@ class GridTable extends GridTableBase { @IUntitledTextEditorService untitledEditorService: IUntitledTextEditorService, @IConfigurationService configurationService: IConfigurationService, @IQueryModelService queryModelService: IQueryModelService, - @IThemeService themeService: IThemeService, @IContextViewService contextViewService: IContextViewService, @INotificationService notificationService: INotificationService, @IExecutionPlanService executionPlanService: IExecutionPlanService, @@ -1128,7 +1125,7 @@ class GridTable extends GridTableBase { inMemoryDataProcessing: true, showActionBar: configurationService.getValue('queryEditor').results.showActionBar, inMemoryDataCountThreshold: configurationService.getValue('queryEditor').results.inMemoryDataProcessingThreshold, - }, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, themeService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService); + }, contextMenuService, instantiationService, editorService, untitledEditorService, configurationService, queryModelService, contextViewService, notificationService, executionPlanService, accessibilityService, quickInputService, componentContextService, contextKeyService, logService); this._gridDataProvider = this.instantiationService.createInstance(QueryGridDataProvider, this._runner, resultSet.batchId, resultSet.id); this.providerId = this._runner.getProviderId(); } diff --git a/src/sql/workbench/contrib/query/browser/queryActions.ts b/src/sql/workbench/contrib/query/browser/queryActions.ts index 6a49a34d4f..fdd4c927d6 100644 --- a/src/sql/workbench/contrib/query/browser/queryActions.ts +++ b/src/sql/workbench/contrib/query/browser/queryActions.ts @@ -7,10 +7,9 @@ import 'vs/css!./media/queryActions'; import * as nls from 'vs/nls'; import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys'; import { Action, IAction, IActionRunner } from 'vs/base/common/actions'; -import { IDisposable, Disposable } from 'vs/base/common/lifecycle'; +import { Disposable } from 'vs/base/common/lifecycle'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { INotificationService } from 'vs/platform/notification/common/notification'; import Severity from 'vs/base/common/severity'; import { append, $ } from 'vs/base/browser/dom'; @@ -26,7 +25,6 @@ import { } from 'sql/platform/connection/common/connectionManagement'; import { QueryEditor } from 'sql/workbench/contrib/query/browser/queryEditor'; import { IQueryModelService } from 'sql/workbench/services/query/common/queryModel'; -import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler'; import { Task } from 'sql/workbench/services/tasks/browser/tasksRegistry'; import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; @@ -49,6 +47,7 @@ import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown' import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; import { Codicon } from 'vs/base/common/codicons'; import { ThemeIcon } from 'vs/base/common/themables'; +import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; /** * Action class that query-based Actions will extend. This base class automatically handles activating and @@ -650,7 +649,8 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt this._dropdown = new Dropdown(this._databaseListDropdown, contextViewProvider, { strictSelection: true, placeholder: this._selectDatabaseString, - ariaLabel: this._selectDatabaseString + ariaLabel: this._selectDatabaseString, + ...defaultEditableDropdownStyles }); // Allows database selector to commit typed or pasted DB names without the need to click @@ -666,10 +666,6 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt append(container, this._databaseListDropdown); } - public style(styles) { - this._dropdown.style(styles); - } - public setActionContext(context: any): void { } @@ -685,10 +681,6 @@ export class ListDatabasesActionItem extends Disposable implements IActionViewIt this._dropdown.blur(); } - public attachStyler(themeService: IThemeService): IDisposable { - return attachEditableDropdownStyler(this, themeService); - } - // EVENT HANDLERS FROM EDITOR ////////////////////////////////////////// public onConnected(): void { let dbName = this.getCurrentDatabaseName(); diff --git a/src/sql/workbench/contrib/query/browser/queryEditor.ts b/src/sql/workbench/contrib/query/browser/queryEditor.ts index db06a13b59..19114bda6c 100644 --- a/src/sql/workbench/contrib/query/browser/queryEditor.ts +++ b/src/sql/workbench/contrib/query/browser/queryEditor.ts @@ -284,7 +284,6 @@ export class QueryEditor extends EditorPane { if (action.id === actions.ListDatabasesAction.ID) { if (!this._listDatabasesActionItem) { this._listDatabasesActionItem = this.instantiationService.createInstance(actions.ListDatabasesActionItem, this, action); - this._register(this._listDatabasesActionItem.attachStyler(this.themeService)); } return this._listDatabasesActionItem; } diff --git a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts index 4c75a47eaf..9bd84dde4c 100644 --- a/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts +++ b/src/sql/workbench/contrib/resourceViewer/browser/resourceViewerTable.ts @@ -6,7 +6,7 @@ import 'vs/css!./media/resourceViewerTable'; import * as azdata from 'azdata'; import { Table } from 'sql/base/browser/ui/table/table'; -import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } from 'sql/platform/theme/common/styler'; import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin'; import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; @@ -28,7 +28,7 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; -import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles'; export class ResourceViewerTable extends Disposable { @@ -62,8 +62,7 @@ export class ResourceViewerTable extends Disposable { })); this._resourceViewerTable.setSelectionModel(new RowSelectionModel()); - let filterPlugin = new HeaderFilter({ buttonStyles: defaultButtonStyles }, this._contextViewService); - this._register(attachTableFilterStyler(filterPlugin, this._themeService)); + let filterPlugin = new HeaderFilter(defaultTableFilterStyles, this._contextViewService); this._register(attachTableStyler(this._resourceViewerTable, this._themeService)); this._register(this._resourceViewerTable.onClick(this.onTableClick, this)); this._register(this._resourceViewerTable.onContextMenu((e: ITableMouseEvent) => { diff --git a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts index e11487ce2f..5b0211d542 100644 --- a/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts +++ b/src/sql/workbench/services/accountManagement/browser/autoOAuthDialog.ts @@ -6,7 +6,6 @@ import 'vs/css!./media/autoOAuthDialog'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { Event, Emitter } from 'vs/base/common/event'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { localize } from 'vs/nls'; @@ -112,8 +111,6 @@ export class AutoOAuthDialog extends Modal { // Theme styler this._register(this._copyAndOpenButton!); this._register(this._closeButton!); - this._register(attachInputBoxStyler(this._userCodeInputBox!, this._themeService)); - this._register(attachInputBoxStyler(this._websiteInputBox!, this._themeService)); } diff --git a/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts b/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts index dbc39e7ba5..ca1e4f3034 100644 --- a/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts +++ b/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts @@ -13,7 +13,7 @@ import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { localize } from 'vs/nls'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; +import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import * as DOM from 'vs/base/browser/dom'; import * as strings from 'vs/base/common/strings'; import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService'; @@ -445,11 +445,6 @@ export class BackupRestoreUrlBrowserDialog extends Modal { this._register(attachSelectBoxStyler(this._subscriptionSelectorBox, this._themeService)); this._register(attachSelectBoxStyler(this._storageAccountSelectorBox, this._themeService)); this._register(attachSelectBoxStyler(this._blobContainerSelectorBox, this._themeService)); - this._register(attachInputBoxStyler(this._sasInputBox, this._themeService)); - - if (this._backupFileInputBox) { - this._register(attachInputBoxStyler(this._backupFileInputBox, this._themeService)); - } if (this._backupFileSelectorBox) { this._register(attachSelectBoxStyler(this._backupFileSelectorBox, this._themeService)); } diff --git a/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts b/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts index 9edd7cbe9a..52a074f989 100644 --- a/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts @@ -13,7 +13,6 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes'; import * as Constants from 'sql/platform/connection/common/constants'; import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement'; -import * as styler from 'sql/platform/theme/common/styler'; import { IAccountManagementService } from 'sql/platform/accounts/common/interfaces'; import * as azdata from 'azdata'; @@ -60,13 +59,6 @@ export class CmsConnectionWidget extends ConnectionWidget { } } - protected override registerListeners(): void { - super.registerListeners(); - if (this._serverDescriptionInputBox) { - this._register(styler.attachInputBoxStyler(this._serverDescriptionInputBox, this._themeService)); - } - } - protected override fillInConnectionForm(authTypeChanged: boolean = false): void { // Server Name this.addServerNameOption(); diff --git a/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts b/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts index 86b63ea04e..811b577a5c 100644 --- a/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts +++ b/src/sql/workbench/services/connection/browser/connectionBrowseTab.ts @@ -10,7 +10,6 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement'; import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile'; import { ConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { ITreeItem } from 'sql/workbench/common/views'; import { CONNECTIONS_SORT_BY_CONFIG_KEY } from 'sql/platform/connection/common/connectionConfig'; import { ConnectionSource } from 'sql/workbench/services/connection/browser/connectionDialogWidget'; @@ -118,7 +117,6 @@ export class ConnectionBrowserView extends Disposable implements IPanelView { //this._register(attachProgressBarStyler(this.filterProgressBar, this.themeService)); this.filterInput.element.style.margin = '5px'; this._register(this.filterInput); - this._register(attachInputBoxStyler(this.filterInput, this.themeService)); this._register(this.filterInput.onDidChange(async () => { await this.applyFilter(); })); diff --git a/src/sql/workbench/services/connection/browser/connectionWidget.ts b/src/sql/workbench/services/connection/browser/connectionWidget.ts index 3a489f2d9b..278e056f3d 100644 --- a/src/sql/workbench/services/connection/browser/connectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts @@ -46,7 +46,7 @@ import { isMssqlAuthProviderEnabled } from 'sql/workbench/services/connection/br import { RequiredIndicatorClassName } from 'sql/base/browser/ui/label/label'; import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset'; import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string"); @@ -309,7 +309,6 @@ export class ConnectionWidget extends lifecycle.Disposable { placeholder: option.placeholder, inputBoxStyles: defaultInputBoxStyles }); - this._register(styler.attachInputBoxStyler(this._customOptionWidgets[i] as InputBox, this._themeService)); break; } this._register(this._customOptionWidgets[i]); @@ -468,7 +467,8 @@ export class ConnectionWidget extends lifecycle.Disposable { strictSelection: false, placeholder: databaseOption.placeholder ?? this._defaultDatabaseName, maxHeight: 125, - ariaLabel: databaseOption.displayName + ariaLabel: databaseOption.displayName, + ...defaultEditableDropdownStyles }); this._register(this._databaseNameInputBox); } @@ -541,10 +541,6 @@ export class ConnectionWidget extends lifecycle.Disposable { protected registerListeners(): void { // Theme styler - this._register(styler.attachInputBoxStyler(this._serverNameInputBox, this._themeService)); - this._register(styler.attachInputBoxStyler(this._connectionNameInputBox, this._themeService)); - this._register(styler.attachInputBoxStyler(this._userNameInputBox, this._themeService)); - this._register(styler.attachInputBoxStyler(this._passwordInputBox, this._themeService)); this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService)); if (this._serverGroupSelectBox) { this._register(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService)); @@ -553,7 +549,6 @@ export class ConnectionWidget extends lifecycle.Disposable { })); } if (this._databaseNameInputBox) { - this._register(styler.attachEditableDropdownStyler(this._databaseNameInputBox, this._themeService)); this._register(this._databaseNameInputBox.onFocus(() => { this._databaseDropdownExpanded = true; if (this.serverName) { @@ -581,10 +576,6 @@ export class ConnectionWidget extends lifecycle.Disposable { })); } - if (this._connectionStringInputBox) { - this._register(styler.attachInputBoxStyler(this._connectionStringInputBox, this._themeService)); - } - if (this._authTypeSelectBox) { // Theme styler this._register(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService)); diff --git a/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts b/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts index fb0d9c5735..cecdb92f89 100644 --- a/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts +++ b/src/sql/workbench/services/connection/browser/passwordChangeDialog.ts @@ -7,7 +7,6 @@ import 'vs/css!./media/passwordDialog'; import { Button } from 'sql/base/browser/ui/button/button'; import { Modal } from 'sql/workbench/browser/modal/modal'; import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; @@ -102,7 +101,6 @@ export class PasswordChangeDialog extends Modal { type: 'password', inputBoxStyles: defaultInputBoxStyles }); - this._register(attachInputBoxStyler(this._passwordValueText, this._themeService)); contentElement.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = confirmPasswordText; const confirmInputContainer = contentElement.appendChild(DOM.$('')); @@ -110,7 +108,6 @@ export class PasswordChangeDialog extends Modal { type: 'password', inputBoxStyles: defaultInputBoxStyles }); - this._register(attachInputBoxStyler(this._confirmValueText, this._themeService)); } protected layout(height?: number): void { diff --git a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts index a1bd786f17..7a84d6e97b 100644 --- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts +++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts @@ -20,7 +20,7 @@ import { Event, Emitter } from 'vs/base/common/event'; import { localize } from 'vs/nls'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { attachInputBoxStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; +import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import * as DOM from 'vs/base/browser/dom'; import * as strings from 'vs/base/common/strings'; import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService'; @@ -227,7 +227,6 @@ export class FileBrowserDialog extends Modal { })); // Theme styler - this._register(attachInputBoxStyler(this._filePathInputBox, this._themeService)); this._register(attachSelectBoxStyler(this._fileFilterSelectBox, this._themeService)); this._register(this._themeService.onDidColorThemeChange(e => this.updateTheme())); diff --git a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts index ee458ef45f..e4fa070955 100644 --- a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts +++ b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./../media/filterDialog'; -import { Button } from 'sql/base/browser/ui/button/button'; import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; import { Modal } from 'sql/workbench/browser/modal/modal' @@ -15,13 +14,10 @@ import { ILogService } from 'vs/platform/log/common/log'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { localize } from 'vs/nls'; import { attachModalDialogStyler } from 'sql/workbench/common/styler'; -//import { attachButtonStyler, attachInputBoxStyler, attachSelectBoxStyler } from 'vs/platform/theme/common/styler'; import * as DOM from 'vs/base/browser/dom'; import * as azdata from 'azdata'; -import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { NodeFilterPropertyDataType, NodeFilterOperator } from 'sql/workbench/api/common/sqlExtHostTypes'; -import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { Table } from 'sql/base/browser/ui/table/table'; import { TableCellEditorFactory } from 'sql/base/browser/ui/table/tableCellEditorFactory'; import { Emitter } from 'vs/base/common/event'; @@ -30,15 +26,14 @@ import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { TableDataView } from 'sql/base/browser/ui/table/tableDataView'; import { TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil'; import { textFormatter } from 'sql/base/browser/ui/table/formatters'; -import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown'; -import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; -import { TabbedPanel } from 'sql/base/browser/ui/panel/panel'; import { attachTableStyler } from 'sql/platform/theme/common/styler'; import { ButtonColumn } from 'sql/base/browser/ui/table/plugins/buttonColumn.plugin'; import Severity from 'vs/base/common/severity'; import { status } from 'vs/base/browser/ui/aria/aria'; import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; +import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; // strings for filter dialog const OkButtonText = localize('objectExplorer.okButtonText', "OK"); @@ -83,7 +78,6 @@ export class FilterDialog extends Modal { private filterTable: Table; private _tableCellEditorFactory: TableCellEditorFactory; - private _onStyleChangeEventEmitter = new Emitter(); private _description: HTMLElement; private _onFilterApplied = new Emitter(); public readonly onFilterApplied = this._onFilterApplied.event; @@ -226,10 +220,9 @@ export class FilterDialog extends Modal { optionsGetter: (item, column): string[] => { return item[column.field].values; }, - editorStyler: (component) => { - this.styleComponent(component); - }, - onStyleChange: this._onStyleChangeEventEmitter.event + inputBoxStyles: defaultInputBoxStyles, + editableDropdownStyles: defaultEditableDropdownStyles, + selectBoxStyles: defaultSelectBoxStyles }, this._contextViewProvider ); const columns: Slick.Column[] = [ @@ -675,17 +668,6 @@ export class FilterDialog extends Modal { }); } - private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table | SelectBox | Button | Dropdown): void { - // if (component instanceof InputBox) { - // this._register(attachInputBoxStyler(component, this._themeService)); - // } else if (component instanceof SelectBox) { - // this._register(attachSelectBoxStyler(component, this._themeService)); - // } else if (component instanceof Table) { - // this._register(attachTableStyler(component, this._themeService)); - // } - } - - /** * This method is used to let user apply filters on the given filters properties. * @param properties Properties on which user can apply filters. diff --git a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts index f7a29a1359..7f6e1f1893 100644 --- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts +++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts @@ -7,7 +7,6 @@ import 'vs/css!./media/profilerFilterDialog'; import { Button } from 'sql/base/browser/ui/button/button'; import { Modal } from 'sql/workbench/browser/modal/modal'; import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/styler'; import { KeyCode } from 'vs/base/common/keyCodes'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; @@ -251,7 +250,6 @@ export class ProfilerFilterDialog extends Modal { ariaLabel: ValueText, inputBoxStyles: defaultInputBoxStyles }); - this._register(attachInputBoxStyler(valueText, this._themeService)); const removeCell = DOM.append(row, DOM.$('td')); const removeClauseButton = DOM.append(removeCell, DOM.$('.profiler-filter-remove-condition.codicon.remove', { diff --git a/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts b/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts index 92e44e0b01..7e44e32ab8 100644 --- a/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts +++ b/src/sql/workbench/services/resourceProvider/browser/firewallRuleDialog.ts @@ -10,7 +10,6 @@ import { Event, Emitter } from 'vs/base/common/event'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { localize } from 'vs/nls'; import { buttonBackground } from 'vs/platform/theme/common/colorRegistry'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey'; import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService'; @@ -266,9 +265,6 @@ export class FirewallRuleDialog extends Modal { // Theme styler this._register(this._createButton!); this._register(this._closeButton!); - this._register(attachInputBoxStyler(this._ruleNameInpuBox!, this._themeService)); - this._register(attachInputBoxStyler(this._fromRangeinputBox!, this._themeService)); - this._register(attachInputBoxStyler(this._toRangeinputBox!, this._themeService)); // handler for firewall rule name change events this._register(this._ruleNameInpuBox!.onDidChange(ruleName => { diff --git a/src/sql/workbench/services/restore/browser/restoreDialog.ts b/src/sql/workbench/services/restore/browser/restoreDialog.ts index efaf0efafb..0fe4692062 100644 --- a/src/sql/workbench/services/restore/browser/restoreDialog.ts +++ b/src/sql/workbench/services/restore/browser/restoreDialog.ts @@ -30,7 +30,7 @@ import { Table } from 'sql/base/browser/ui/table/table'; import { TableDataView } from 'sql/base/browser/ui/table/tableDataView'; import * as DialogHelper from 'sql/workbench/browser/modal/dialogHelper'; import { HideReason, Modal } from 'sql/workbench/browser/modal/modal'; -import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachEditableDropdownStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; import * as TelemetryKeys from 'sql/platform/telemetry/common/telemetryKeys'; import { RestoreViewModel, RestoreOptionParam, SouceDatabaseNamesParam } from 'sql/workbench/services/restore/browser/restoreViewModel'; import * as FileValidationConstants from 'sql/workbench/services/fileBrowser/common/fileValidationServiceConstants'; @@ -51,7 +51,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput'; import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService'; import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; interface FileListElement { logicalFileName: string; @@ -265,7 +265,8 @@ export class RestoreDialog extends Modal { this._databaseDropdown = this._register(new Dropdown(dropdownContainer, this._contextViewService, { strictSelection: false, - ariaLabel: LocalizedStrings.TARGETDATABASE + ariaLabel: LocalizedStrings.TARGETDATABASE, + ...defaultEditableDropdownStyles } )); this._databaseDropdown.onValueChange(s => { @@ -281,7 +282,6 @@ export class RestoreDialog extends Modal { }); this._databaseDropdown.value = this.viewModel.targetDatabaseName!; - attachEditableDropdownStyler(this._databaseDropdown, this._themeService); this._targetDatabaseInputElement = DOM.append(destinationElement, DOM.$('.dialog-input-section')); DOM.append(this._targetDatabaseInputElement, DOM.$('.dialog-label')).innerText = LocalizedStrings.TARGETDATABASE; @@ -303,7 +303,8 @@ export class RestoreDialog extends Modal { const restoreToLabel = localize('restoreTo', "Restore to"); const destinationRestoreToAriaOptions = { - ariaLabel: restoreToLabel + ariaLabel: restoreToLabel, + inputBoxStyles: defaultInputBoxStyles }; this._destinationRestoreToContainer = DOM.append(destinationElement, DOM.$('.dialog-input-section')); DOM.append(this._destinationRestoreToContainer, DOM.$('.dialog-label')).innerText = restoreToLabel; @@ -525,8 +526,7 @@ export class RestoreDialog extends Modal { })); break; case ServiceOptionType.string: - propertyWidget = this.createInputBoxHelper(container, option.description); - this._register(attachInputBoxStyler(propertyWidget, this._themeService)); + propertyWidget = this.createInputBoxHelper(container, option.description, { inputBoxStyles: defaultInputBoxStyles }); this._register(propertyWidget.onLoseFocus(params => { this.onStringOptionChanged(optionName, params); })); @@ -572,7 +572,7 @@ export class RestoreDialog extends Modal { return selectBox; } - private createInputBoxHelper(container: HTMLElement, label: string, options?: IInputOptions): InputBox { + private createInputBoxHelper(container: HTMLElement, label: string, options: IInputOptions): InputBox { const ariaOptions = { ariaLabel: label }; @@ -663,10 +663,6 @@ export class RestoreDialog extends Modal { private registerListeners(): void { // Theme styler - this._register(attachInputBoxStyler(this._targetDatabaseInputBox, this._themeService)); - this._register(attachInputBoxStyler(this._urlInputBox!, this._themeService)); - this._register(attachInputBoxStyler(this._filePathInputBox!, this._themeService)); - this._register(attachInputBoxStyler(this._destinationRestoreToInputBox!, this._themeService)); this._register(attachSelectBoxStyler(this._restoreFromSelectBox!, this._themeService)); this._register(attachSelectBoxStyler(this._sourceDatabaseSelectBox!, this._themeService)); this._register(this._browseFileButton!); diff --git a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts index 1b56c3b749..830086b3b2 100644 --- a/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts +++ b/src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts @@ -11,7 +11,6 @@ import * as DOM from 'vs/base/browser/dom'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode } from 'vs/base/common/keyCodes'; import { IThemeService } from 'vs/platform/theme/common/themeService'; -import { attachInputBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { Event, Emitter } from 'vs/base/common/event'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { localize } from 'vs/nls'; @@ -175,9 +174,6 @@ export class ServerGroupDialog extends Modal { private registerListeners(): void { const renderedDialog = this.withRenderedDialog; - // Theme styler - this._register(attachInputBoxStyler(renderedDialog.groupNameInputBox, this._themeService)); - this._register(attachInputBoxStyler(renderedDialog.groupDescriptionInputBox, this._themeService)); this._register(renderedDialog.addServerButton); this._register(renderedDialog.closeButton); diff --git a/src/vs/base/browser/ui/button/button.ts b/src/vs/base/browser/ui/button/button.ts index 1cf8fa7976..05416b416b 100644 --- a/src/vs/base/browser/ui/button/button.ts +++ b/src/vs/base/browser/ui/button/button.ts @@ -220,6 +220,7 @@ export class Button extends Disposable implements IButton { background = border = 'transparent'; foreground = this.options.buttonSecondaryForeground; fontWeight = fontSize = 'inherit'; + this._element.style.backgroundRepeat = 'no-repeat'; } else { if (this.enabled) { if (this.options.secondary) { diff --git a/src/vs/base/browser/ui/inputbox/inputBox.ts b/src/vs/base/browser/ui/inputbox/inputBox.ts index 9c6c545fb8..a9ea7d7f81 100644 --- a/src/vs/base/browser/ui/inputbox/inputBox.ts +++ b/src/vs/base/browser/ui/inputbox/inputBox.ts @@ -57,6 +57,11 @@ export interface IInputBoxStyles { readonly inputValidationErrorBorder: string | undefined; readonly inputValidationErrorBackground: string | undefined; readonly inputValidationErrorForeground: string | undefined; + // {{SQL CARBON EDIT}} + readonly disabledInputBackground: string | undefined; + readonly disabledInputForeground: string | undefined; + readonly disabledInputBorder: string | undefined; + // {{SQL CARBON EDIT}} - End } export interface IInputValidator { @@ -97,7 +102,12 @@ export const unthemedInboxStyles: IInputBoxStyles = { inputBorder: undefined, inputValidationErrorForeground: undefined, inputValidationInfoForeground: undefined, - inputValidationWarningForeground: undefined + inputValidationWarningForeground: undefined, + // {{SQL CARBON EDIT}} + disabledInputBackground: undefined, + disabledInputForeground: undefined, + disabledInputBorder: undefined + // {{SQL CARBON EDIT}} - End }; export class InputBox extends Widget { @@ -233,9 +243,6 @@ export class InputBox extends Widget { this.applyStyles(); } - public style(styles: IInputBoxStyles): void { // {{SQL CARBON TODO}} - remove this method - } - protected onBlur(): void { this._hideMessage(); if (this.options.showPlaceholderOnFocus) { diff --git a/src/vs/platform/theme/browser/defaultStyles.ts b/src/vs/platform/theme/browser/defaultStyles.ts index 076e139354..86cb91b939 100644 --- a/src/vs/platform/theme/browser/defaultStyles.ts +++ b/src/vs/platform/theme/browser/defaultStyles.ts @@ -16,6 +16,7 @@ import { IListStyles } from 'vs/base/browser/ui/list/listWidget'; import { ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox'; import { Color } from 'vs/base/common/color'; import { IMenuStyles } from 'vs/base/browser/ui/menu/menu'; +import { disabledInputBackground, disabledInputForeground } from 'sql/platform/theme/common/colors'; // {{SQL CARBON EDIT}} export type IStyleOverride = { [P in keyof T]?: ColorIdentifier | undefined; @@ -118,7 +119,12 @@ export const defaultInputBoxStyles: IInputBoxStyles = { inputValidationWarningForeground: asCssVariable(inputValidationWarningForeground), inputValidationErrorBorder: asCssVariable(inputValidationErrorBorder), inputValidationErrorBackground: asCssVariable(inputValidationErrorBackground), - inputValidationErrorForeground: asCssVariable(inputValidationErrorForeground) + inputValidationErrorForeground: asCssVariable(inputValidationErrorForeground), + // {{SQL CARBON EDIT}} + disabledInputBackground: asCssVariable(disabledInputBackground), + disabledInputForeground: asCssVariable(disabledInputForeground), + disabledInputBorder: 'transparent' + // {{SQL CARBON EDIT}} - END }; export function getInputBoxStyle(override: IStyleOverride): IInputBoxStyles {