From 6dc1b9b9050e2f29d7e4b88bbc60cebc8672e1b2 Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Wed, 28 Jun 2023 11:20:31 -0700 Subject: [PATCH] listbox and select box (#23504) * listbox * select box * fix tests * one more test --- src/sql/base/browser/ui/listBox/listBox.ts | 117 +++++------------- .../base/browser/ui/selectBox/selectBox.ts | 82 ++---------- .../ui/table/tableCellEditorFactory.ts | 4 +- .../browser/ui/selectBox/selectBox.test.ts | 10 +- .../browser/selectBox/selectBox.component.ts | 7 +- .../platform/theme/browser/defaultStyles.ts | 46 +++++-- src/sql/platform/theme/common/styler.ts | 74 ----------- src/sql/platform/theme/common/vsstyler.ts | 31 +---- .../workbench/browser/designer/designer.ts | 10 +- .../browser/modal/optionsDialogHelper.ts | 3 +- .../modelComponents/dropdown.component.ts | 12 +- .../modelComponents/listbox.component.ts | 10 +- .../backup/browser/backup.component.ts | 23 ++-- .../contrib/charts/browser/chartView.ts | 7 +- .../charts/test/browser/chartView.test.ts | 2 +- .../editData/browser/editDataActions.ts | 11 +- .../executionPlanComparisonEditorView.ts | 13 +- .../widgets/highlightExpensiveNodeWidget.ts | 5 +- .../browser/widgets/nodeSearchWidget.ts | 8 +- .../notebook/browser/notebook.component.ts | 3 - .../notebook/browser/notebookActions.ts | 5 +- .../profiler/browser/profilerEditor.ts | 9 +- .../browser/urlBrowserDialog.ts | 23 ++-- .../connection/browser/cmsConnectionWidget.ts | 3 +- .../browser/connectionDialogWidget.ts | 5 +- .../connection/browser/connectionWidget.ts | 21 +--- .../fileBrowser/browser/fileBrowserDialog.ts | 8 +- .../browser/filterDialog/filterDialog.ts | 4 +- .../profiler/browser/profilerFilterDialog.ts | 5 +- .../services/restore/browser/restoreDialog.ts | 10 +- src/vs/base/browser/ui/selectBox/selectBox.ts | 2 +- 31 files changed, 159 insertions(+), 414 deletions(-) diff --git a/src/sql/base/browser/ui/listBox/listBox.ts b/src/sql/base/browser/ui/listBox/listBox.ts index ac3f730cfd..87ecbf22ab 100644 --- a/src/sql/base/browser/ui/listBox/listBox.ts +++ b/src/sql/base/browser/ui/listBox/listBox.ts @@ -3,8 +3,7 @@ * Licensed under the Source EULA. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { SelectBox, ISelectOptionItem } from 'vs/base/browser/ui/selectBox/selectBox'; -import { Color } from 'vs/base/common/color'; +import { SelectBox, ISelectOptionItem, ISelectBoxStyles } from 'vs/base/browser/ui/selectBox/selectBox'; import { isUndefinedOrNull } from 'vs/base/common/types'; import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import * as dom from 'vs/base/browser/dom'; @@ -12,40 +11,26 @@ import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview'; import { Emitter } from 'vs/base/common/event'; import { renderFormattedText, renderText, FormattedTextRenderOptions } from 'vs/base/browser/formattedTextRenderer'; -import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; const $ = dom.$; -export interface IListBoxStyles { - selectBackground?: Color; - selectForeground?: Color; - selectBorder?: Color; - inputValidationInfoBorder?: Color; - inputValidationInfoBackground?: Color; - inputValidationWarningBorder?: Color; - inputValidationWarningBackground?: Color; - inputValidationErrorBorder?: Color; - inputValidationErrorBackground?: Color; +export interface IListBoxStyles extends ISelectBoxStyles { + inputValidationInfoBorder: string | undefined; + inputValidationInfoBackground: string | undefined; + inputValidationWarningBorder: string | undefined; + inputValidationWarningBackground: string | undefined; + inputValidationErrorBorder: string | undefined; + inputValidationErrorBackground: string | undefined; +} + +export interface IListBoxOptions extends Partial { + items: ISelectOptionItem[]; } /* * Extends SelectBox to allow multiple selection and adding/remove items dynamically */ export class ListBox extends SelectBox { - // private enabledSelectBackground?: Color; - // private enabledSelectForeground?: Color; - // private enabledSelectBorder?: Color; - // private disabledSelectBackground?: Color; - // private disabledSelectForeground?: Color; - // private disabledSelectBorder?: Color; - - private inputValidationInfoBorder?: Color; - private inputValidationInfoBackground?: Color; - private inputValidationWarningBorder?: Color; - private inputValidationWarningBackground?: Color; - private inputValidationErrorBorder?: Color; - private inputValidationErrorBackground?: Color; - private message?: IMessage; private contextViewProvider: IContextViewProvider; private isValid: boolean; @@ -53,11 +38,10 @@ export class ListBox extends SelectBox { private _onKeyDown = new Emitter(); public readonly onKeyDown = this._onKeyDown.event; - constructor( - private options: ISelectOptionItem[], + constructor(private readonly options: IListBoxOptions, contextViewProvider: IContextViewProvider) { - super(options, 0, contextViewProvider, defaultSelectBoxStyles); + super(options.items, 0, contextViewProvider, options); this.contextViewProvider = contextViewProvider; this.isValid = true; this.selectElement.multiple = true; @@ -78,53 +62,20 @@ export class ListBox extends SelectBox { this.selectElement.focus(); })); - // this.enabledSelectBackground = this.selectBackground; - // this.enabledSelectForeground = this.selectForeground; - // this.enabledSelectBorder = this.selectBorder; - //this.disabledSelectBackground = Color.transparent; - - // this.inputValidationInfoBorder = defaultOpts.inputValidationInfoBorder; - // this.inputValidationInfoBackground = defaultOpts.inputValidationInfoBackground; - // this.inputValidationWarningBorder = defaultOpts.inputValidationWarningBorder; - // this.inputValidationWarningBackground = defaultOpts.inputValidationWarningBackground; - // this.inputValidationErrorBorder = defaultOpts.inputValidationErrorBorder; - // this.inputValidationErrorBackground = defaultOpts.inputValidationErrorBackground; - this.onblur(this.selectElement, () => this.onBlur()); this.onfocus(this.selectElement, () => this.onFocus()); } - // {{SQL CARBON TODO}} - apply styles - public style(styles: IListBoxStyles): void { - // let superStyle: ISelectBoxStyles = { - // selectBackground: styles.selectBackground, - // selectForeground: styles.selectForeground, - // selectBorder: styles.selectBorder - // }; - // super.style(superStyle); - // this.enabledSelectBackground = this.selectBackground; - // this.enabledSelectForeground = this.selectForeground; - // this.enabledSelectBorder = this.selectBorder; - - // this.inputValidationInfoBackground = styles.inputValidationInfoBackground; - // this.inputValidationInfoBorder = styles.inputValidationInfoBorder; - // this.inputValidationWarningBackground = styles.inputValidationWarningBackground; - // this.inputValidationWarningBorder = styles.inputValidationWarningBorder; - // this.inputValidationErrorBackground = styles.inputValidationErrorBackground; - // this.inputValidationErrorBorder = styles.inputValidationErrorBorder; - } - public setValidation(isValid: boolean, message?: IMessage): void { this.isValid = isValid; this.message = message; - // {{SQL CARBON TODO}} - apply styles - // if (this.isValid) { - // this.selectElement.style.border = `1px solid ${this.selectBorder}`; - // } else if (this.message) { - // const styles = this.stylesForType(this.message.type); - // this.selectElement.style.border = styles.border ? `1px solid ${styles.border}` : ''; - // } + if (this.isValid) { + this.selectElement.style.border = `1px solid ${this.options.selectBorder}`; + } else if (this.message) { + const styles = this.stylesForType(this.message.type); + this.selectElement.style.border = styles.border ? `1px solid ${styles.border}` : ''; + } } public get isContentValid(): boolean { @@ -153,9 +104,9 @@ export class ListBox extends SelectBox { for (let i = 0; i < indexes.length; i++) { this.selectElement.remove(indexes[i]); - this.options.splice(indexes[i], 1); + this.options.items.splice(indexes[i], 1); } - super.setOptions(this.options); + super.setOptions(this.options.items); } public add(option: string): void { @@ -163,29 +114,21 @@ export class ListBox extends SelectBox { this.selectElement.add(optionObj); // make sure that base options are updated since that is used in selection not selectElement - this.options.push(optionObj); - super.setOptions(this.options); + this.options.items.push(optionObj); + super.setOptions(this.options.items); } public override setOptions(options: ISelectOptionItem[], selected?: number): void { - this.options = options; + this.options.items = options; super.setOptions(options, selected); } public enable(): void { this.selectElement.disabled = false; - // this.selectBackground = this.enabledSelectBackground; - // this.selectForeground = this.enabledSelectForeground; - // this.selectBorder = this.enabledSelectBorder; - // this.applyStyles(); } public disable(): void { this.selectElement.disabled = true; - // this.selectBackground = this.disabledSelectBackground; - // this.selectForeground = this.disabledSelectForeground; - // this.selectBorder = this.disabledSelectBorder; - // this.applyStyles(); } public onBlur(): void { @@ -227,7 +170,7 @@ export class ListBox extends SelectBox { spanElement.classList.add(this.classForType(this.message.type)); const styles = this.stylesForType(this.message.type); - spanElement.style.backgroundColor = styles.background ? styles.background.toString() : ''; + spanElement.style.backgroundColor = styles.background ? styles.background : ''; spanElement.style.border = styles.border ? `1px solid ${styles.border}` : ''; dom.append(div, spanElement); @@ -247,11 +190,11 @@ export class ListBox extends SelectBox { } } - private stylesForType(type?: MessageType): { border?: Color; background?: Color } { + private stylesForType(type?: MessageType): { border: string | undefined; background: string | undefined } { switch (type) { - case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground }; - case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground }; - default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground }; + case MessageType.INFO: return { border: this.options.inputValidationInfoBorder, background: this.options.inputValidationInfoBackground }; + case MessageType.WARNING: return { border: this.options.inputValidationWarningBorder, background: this.options.inputValidationWarningBackground }; + default: return { border: this.options.inputValidationErrorBorder, background: this.options.inputValidationErrorBackground }; } } } diff --git a/src/sql/base/browser/ui/selectBox/selectBox.ts b/src/sql/base/browser/ui/selectBox/selectBox.ts index bb34cdd9d9..34499370c8 100644 --- a/src/sql/base/browser/ui/selectBox/selectBox.ts +++ b/src/sql/base/browser/ui/selectBox/selectBox.ts @@ -6,7 +6,6 @@ import 'vs/css!./media/selectBox'; import { SelectBox as vsSelectBox, ISelectBoxStyles as vsISelectBoxStyles, ISelectBoxOptions, ISelectOptionItem, ISelectData } from 'vs/base/browser/ui/selectBox/selectBox'; -import { Color } from 'vs/base/common/color'; import { IContextViewProvider, AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview'; import * as dom from 'vs/base/browser/dom'; import { IMessage, MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; @@ -18,7 +17,6 @@ import { KeyCode } from 'vs/base/common/keyCodes'; import { SelectBoxList } from 'vs/base/browser/ui/selectBox/selectBoxCustom'; import { Event, Emitter } from 'vs/base/common/event'; import { AdsWidget } from 'sql/base/browser/ui/adsWidget'; -import { defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; const $ = dom.$; @@ -28,17 +26,12 @@ export interface SelectOptionItemSQL extends ISelectOptionItem { } export interface ISelectBoxStyles extends vsISelectBoxStyles { - disabledSelectBackground?: Color; - disabledSelectForeground?: Color; - inputValidationInfoBorder?: Color; - inputValidationInfoBackground?: Color; - inputinputValidationInfoForeground?: Color; - inputValidationWarningBorder?: Color; - inputValidationWarningBackground?: Color; - inputValidationWarningForeground?: Color; - inputValidationErrorBorder?: Color; - inputValidationErrorBackground?: Color; - inputValidationErrorForeground?: Color; + inputValidationInfoBorder: string | undefined; + inputValidationInfoBackground: string | undefined; + inputValidationWarningBorder: string | undefined; + inputValidationWarningBackground: string | undefined; + inputValidationErrorBorder: string | undefined; + inputValidationErrorBackground: string | undefined; } export class SelectBox extends vsSelectBox implements AdsWidget { @@ -46,32 +39,16 @@ export class SelectBox extends vsSelectBox implements AdsWidget { private _dialogOptions: SelectOptionItemSQL[]; private _selectedOption: string; private _selectBoxOptions?: ISelectBoxOptions; - // private enabledSelectBackground?: Color; - // private enabledSelectForeground?: Color; - // private enabledSelectBorder?: Color; - // private disabledSelectBackground?: Color; - // private disabledSelectForeground?: Color; - // private disabledSelectBorder?: Color; private contextViewProvider: IContextViewProvider; private message?: IMessage; private _onDidSelect: Emitter; private _onDidFocus: Emitter; - private inputValidationInfoBorder?: Color; - private inputValidationInfoBackground?: Color; - private inputValidationInfoForeground?: Color; - private inputValidationWarningBorder?: Color; - private inputValidationWarningBackground?: Color; - private inputValidationWarningForeground?: Color; - private inputValidationErrorBorder?: Color; - private inputValidationErrorBackground?: Color; - private inputValidationErrorForeground?: Color; - private element?: HTMLElement; - constructor(options: SelectOptionItemSQL[] | string[], selectedOption: string, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions, id?: string) { + constructor(options: SelectOptionItemSQL[] | string[], selectedOption: string, private readonly _styles: ISelectBoxStyles, contextViewProvider: IContextViewProvider, container?: HTMLElement, selectBoxOptions?: ISelectBoxOptions, id?: string) { let optionItems: SelectOptionItemSQL[] = SelectBox.createOptions(options); - super(optionItems, 0, contextViewProvider, defaultSelectBoxStyles, selectBoxOptions); + super(optionItems, 0, contextViewProvider, _styles, selectBoxOptions); this._onDidSelect = new Emitter(); this._onDidFocus = new Emitter(); @@ -89,13 +66,6 @@ export class SelectBox extends vsSelectBox implements AdsWidget { this._onDidSelect.fire(newSelect); })); - // {{SQL CARBON TODO}} - fix styles - // this.enabledSelectBackground = this.selectBackground; - // this.enabledSelectForeground = this.selectForeground; - // this.enabledSelectBorder = this.selectBorder; - // this.disabledSelectBackground = Color.transparent; - // this.disabledSelectForeground = undefined; - // this.disabledSelectBorder = undefined; this.contextViewProvider = contextViewProvider; if (container) { this.element = dom.append(container, $('.monaco-selectbox.idle')); @@ -180,24 +150,6 @@ export class SelectBox extends vsSelectBox implements AdsWidget { this._dialogOptions = options; } - public style(styles: ISelectBoxStyles): void { - // this.enabledSelectBackground = this.selectBackground; - // this.enabledSelectForeground = this.selectForeground; - // this.enabledSelectBorder = this.selectBorder; - // this.disabledSelectBackground = styles.disabledSelectBackground; - // this.disabledSelectForeground = styles.disabledSelectForeground; - this.inputValidationInfoBorder = styles.inputValidationInfoBorder; - this.inputValidationInfoBackground = styles.inputValidationInfoBackground; - this.inputValidationInfoForeground = styles.inputinputValidationInfoForeground; - this.inputValidationWarningBorder = styles.inputValidationWarningBorder; - this.inputValidationWarningBackground = styles.inputValidationWarningBackground; - this.inputValidationWarningForeground = styles.inputValidationWarningForeground; - this.inputValidationErrorBorder = styles.inputValidationErrorBorder; - this.inputValidationErrorBackground = styles.inputValidationErrorBackground; - this.inputValidationErrorForeground = styles.inputValidationErrorForeground; - //this.applyStyles(); - } - public selectWithOptionName(optionName?: string, selectFirstByDefault: boolean = true, forceSelectionEvent: boolean = false): void { let option: number | undefined; if (optionName !== undefined) { @@ -245,18 +197,10 @@ export class SelectBox extends vsSelectBox implements AdsWidget { public enable(): void { this.selectElement.disabled = false; - // this.selectBackground = this.enabledSelectBackground; - // this.selectForeground = this.enabledSelectForeground; - // this.selectBorder = this.enabledSelectBorder; - //this.applyStyles(); } public disable(): void { this.selectElement.disabled = true; - // this.selectBackground = this.disabledSelectBackground; - // this.selectForeground = this.disabledSelectForeground; - // this.selectBorder = this.disabledSelectBorder; - //this.applyStyles(); } public getAriaLabel(): string { @@ -323,7 +267,7 @@ export class SelectBox extends vsSelectBox implements AdsWidget { spanElement.classList.add(this.classForType(message.type)); const styles = this.stylesForType(message.type); - spanElement.style.backgroundColor = styles.background ? styles.background.toString() : ''; + spanElement.style.backgroundColor = styles.background ? styles.background : ''; spanElement.style.border = styles.border ? `1px solid ${styles.border}` : ''; dom.append(div, spanElement); @@ -363,11 +307,11 @@ export class SelectBox extends vsSelectBox implements AdsWidget { } } - private stylesForType(type: MessageType | undefined): { border: Color | undefined; background: Color | undefined; foreground: Color | undefined } { + private stylesForType(type: MessageType | undefined): { border: string | undefined; background: string | undefined; } { switch (type) { - case MessageType.INFO: return { border: this.inputValidationInfoBorder, background: this.inputValidationInfoBackground, foreground: this.inputValidationInfoForeground }; - case MessageType.WARNING: return { border: this.inputValidationWarningBorder, background: this.inputValidationWarningBackground, foreground: this.inputValidationWarningForeground }; - default: return { border: this.inputValidationErrorBorder, background: this.inputValidationErrorBackground, foreground: this.inputValidationErrorForeground }; + case MessageType.INFO: return { border: this._styles.inputValidationInfoBorder, background: this._styles.inputValidationInfoBackground }; + case MessageType.WARNING: return { border: this._styles.inputValidationWarningBorder, background: this._styles.inputValidationWarningBackground }; + default: return { border: this._styles.inputValidationErrorBorder, background: this._styles.inputValidationErrorBackground }; } } diff --git a/src/sql/base/browser/ui/table/tableCellEditorFactory.ts b/src/sql/base/browser/ui/table/tableCellEditorFactory.ts index f56479231e..b27fdfec44 100644 --- a/src/sql/base/browser/ui/table/tableCellEditorFactory.ts +++ b/src/sql/base/browser/ui/table/tableCellEditorFactory.ts @@ -12,7 +12,7 @@ import { Dropdown, IEditableDropdownStyles } from 'sql/base/browser/ui/editableD 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'; +import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox'; const InverseKeyCodeMap: { [k: string]: number } = Object.fromEntries(Object.entries(EVENT_KEY_CODE_MAP).map(([key, value]) => [value, Number(key)])); @@ -169,7 +169,7 @@ export class TableCellEditorFactory { await this.commitEdit(); }); } else { - this._component = new SelectBox([], undefined, self._contextViewProvider); + this._component = new SelectBox([], undefined, self._options.selectBoxStyles, self._contextViewProvider); this._component.render(container); this._component.selectElem.style.height = '100%'; this._component.onDidSelect(async () => { diff --git a/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts b/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts index 34c06b32dd..2efe8b0718 100644 --- a/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts +++ b/src/sql/base/test/browser/ui/selectBox/selectBox.test.ts @@ -4,7 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as assert from 'assert'; -import { SelectBox, SelectOptionItemSQL } from 'sql/base/browser/ui/selectBox/selectBox'; +import { ISelectBoxStyles, SelectBox, SelectOptionItemSQL } from 'sql/base/browser/ui/selectBox/selectBox'; import { deepClone, equals } from 'vs/base/common/objects'; const options: SelectOptionItemSQL[] = [ @@ -15,13 +15,13 @@ const options: SelectOptionItemSQL[] = [ suite('Select Box tests', () => { test('default value', () => { - const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!); + const sb = new SelectBox(options, options[1].value, {}, undefined!, undefined!, undefined!); assert(sb.value === options[1].value); }); test('values change', () => { - const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!); + const sb = new SelectBox(options, options[1].value, {}, undefined!, undefined!, undefined!); const newOptions = deepClone(options); { const moreOptions: SelectOptionItemSQL[] = [ @@ -37,7 +37,7 @@ suite('Select Box tests', () => { }); test('the selected option changes', () => { - const sb = new SelectBox(options, options[1].value, undefined!, undefined!, undefined!); + const sb = new SelectBox(options, options[1].value, {}, undefined!, undefined!, undefined!); sb.onSelect({ index: 0, @@ -50,7 +50,7 @@ suite('Select Box tests', () => { test('values get auto populated', () => { const newOptions = deepClone(options).map(s => { return { text: s.text, value: s.text }; }); - const sb = new SelectBox(newOptions, undefined!, undefined!, undefined!, undefined!); + const sb = new SelectBox(newOptions, undefined!, {}, undefined!, undefined!, undefined!); assert(equals(sb.values, newOptions.map(s => s.text))); }); diff --git a/src/sql/platform/browser/selectBox/selectBox.component.ts b/src/sql/platform/browser/selectBox/selectBox.component.ts index 4984bb422f..dfc5d38c55 100644 --- a/src/sql/platform/browser/selectBox/selectBox.component.ts +++ b/src/sql/platform/browser/selectBox/selectBox.component.ts @@ -13,8 +13,7 @@ import { AngularDisposable } from 'sql/base/browser/lifecycle'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { ISelectData } from 'vs/base/browser/ui/selectBox/selectBox'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; @Component({ selector: 'select-box', @@ -34,14 +33,13 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges { constructor( @Inject(forwardRef(() => ElementRef)) private _el: ElementRef, - @Inject(IThemeService) private themeService: IThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService ) { super(); } ngOnInit(): void { - this._selectbox = new sqlSelectBox(this.options, this.selectedOption, this.contextViewService, undefined, { ariaLabel: this.ariaLabel }); + this._selectbox = new sqlSelectBox(this.options, this.selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.ariaLabel }); this._selectbox.render(this._el.nativeElement); this._selectbox.onDidSelect(e => { if (this.onlyEmitOnChange) { @@ -53,7 +51,6 @@ export class SelectBox extends AngularDisposable implements OnInit, OnChanges { this.onDidSelect.emit(e); } }); - this._register(attachSelectBoxStyler(this._selectbox, 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 5acdc27437..1365f5c8d6 100644 --- a/src/sql/platform/theme/browser/defaultStyles.ts +++ b/src/sql/platform/theme/browser/defaultStyles.ts @@ -5,16 +5,18 @@ 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 { IListBoxStyles } from 'sql/base/browser/ui/listBox/listBox'; +import { ISelectBoxStyles } from 'sql/base/browser/ui/selectBox/selectBox'; 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, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { asCssVariable, editorBackground, inputBorder, inputForeground } from 'vs/platform/theme/common/colorRegistry'; +import { IStyleOverride, defaultButtonStyles, defaultCountBadgeStyles, defaultInputBoxStyles, defaultListStyles, defaultSelectBoxStyles as vsDefaultSelectBoxStyles, overrideStyles } from 'vs/platform/theme/browser/defaultStyles'; +import * as cr from 'vs/platform/theme/common/colorRegistry'; export const defaultCheckboxStyles: ICheckboxStyles = { - disabledCheckboxForeground: asCssVariable(disabledCheckboxForeground) + disabledCheckboxForeground: cr.asCssVariable(disabledCheckboxForeground) }; export function getCheckboxStyles(override: IStyleOverride): ICheckboxStyles { @@ -22,10 +24,10 @@ export function getCheckboxStyles(override: IStyleOverride): IC } export const defaultInfoButtonStyles: IButtonStyles = { - buttonBackground: asCssVariable(sqlcr.infoButtonBackground), - buttonForeground: asCssVariable(sqlcr.infoButtonForeground), - buttonBorder: asCssVariable(sqlcr.infoButtonBorder), - buttonHoverBackground: asCssVariable(sqlcr.infoButtonHoverBackground), + buttonBackground: cr.asCssVariable(sqlcr.infoButtonBackground), + buttonForeground: cr.asCssVariable(sqlcr.infoButtonForeground), + buttonBorder: cr.asCssVariable(sqlcr.infoButtonBorder), + buttonHoverBackground: cr.asCssVariable(sqlcr.infoButtonHoverBackground), buttonSeparator: undefined, buttonSecondaryBackground: undefined, buttonSecondaryForeground: undefined, @@ -37,8 +39,8 @@ export const defaultInfoButtonStyles: IButtonStyles = { } export const defaultEditableDropdownStyles: IEditableDropdownStyles = { - contextBackground: asCssVariable(editorBackground), - contextBorder: asCssVariable(inputBorder), + contextBackground: cr.asCssVariable(cr.editorBackground), + contextBorder: cr.asCssVariable(cr.inputBorder), ...defaultInputBoxStyles, ...defaultListStyles } @@ -51,7 +53,27 @@ export const defaultTableFilterStyles: ITableFilterStyles = { } export const defaultDropdownStyles: IDropdownStyles = { - foregroundColor: asCssVariable(inputForeground), - borderColor: asCssVariable(inputBorder), - backgroundColor: asCssVariable(editorBackground) + foregroundColor: cr.asCssVariable(cr.inputForeground), + borderColor: cr.asCssVariable(cr.inputBorder), + backgroundColor: cr.asCssVariable(cr.editorBackground) +} + +export const defaultListBoxStyles: IListBoxStyles = { + inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder), + inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground), + inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder), + inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground), + inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder), + inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground), + ...vsDefaultSelectBoxStyles +} + +export const defaultSelectBoxStyles: ISelectBoxStyles = { + inputValidationInfoBorder: cr.asCssVariable(cr.inputValidationInfoBorder), + inputValidationInfoBackground: cr.asCssVariable(cr.inputValidationInfoBackground), + inputValidationWarningBorder: cr.asCssVariable(cr.inputValidationWarningBorder), + inputValidationWarningBackground: cr.asCssVariable(cr.inputValidationWarningBackground), + inputValidationErrorBorder: cr.asCssVariable(cr.inputValidationErrorBorder), + inputValidationErrorBackground: cr.asCssVariable(cr.inputValidationErrorBackground), + ...vsDefaultSelectBoxStyles } diff --git a/src/sql/platform/theme/common/styler.ts b/src/sql/platform/theme/common/styler.ts index e045421118..bea5cb6d89 100644 --- a/src/sql/platform/theme/common/styler.ts +++ b/src/sql/platform/theme/common/styler.ts @@ -11,78 +11,6 @@ import * as sqlcr from 'sql/platform/theme/common/colorRegistry'; import { IThemable, attachStyler, computeStyles, IStyleOverrides } from 'sql/platform/theme/common/vsstyler'; import { IDisposable } from 'vs/base/common/lifecycle'; -export interface ISelectBoxStyleOverrides extends IStyleOverrides { - selectBackground?: cr.ColorIdentifier, - selectListBackground?: cr.ColorIdentifier, - selectForeground?: cr.ColorIdentifier, - selectBorder?: cr.ColorIdentifier, - disabledSelectBackground?: cr.ColorIdentifier, - disabledSelectForeground?: cr.ColorIdentifier, - inputValidationInfoBorder?: cr.ColorIdentifier, - inputValidationInfoBackground?: cr.ColorIdentifier, - inputValidationWarningBorder?: cr.ColorIdentifier, - inputValidationWarningBackground?: cr.ColorIdentifier, - inputValidationErrorBorder?: cr.ColorIdentifier, - inputValidationErrorBackground?: cr.ColorIdentifier, - focusBorder?: cr.ColorIdentifier, - listFocusBackground?: cr.ColorIdentifier, - listFocusForeground?: cr.ColorIdentifier, - listFocusOutline?: cr.ColorIdentifier, - listHoverBackground?: cr.ColorIdentifier, - listHoverForeground?: cr.ColorIdentifier -} - -export const defaultSelectBoxStyles: ISelectBoxStyleOverrides = { - selectBackground: cr.selectBackground, - selectListBackground: cr.selectListBackground, - selectForeground: cr.selectForeground, - selectBorder: cr.selectBorder, - disabledSelectBackground: colors.disabledInputBackground, - disabledSelectForeground: colors.disabledInputForeground, - inputValidationInfoBorder: cr.inputValidationInfoBorder, - inputValidationInfoBackground: cr.inputValidationInfoBackground, - inputValidationWarningBorder: cr.inputValidationWarningBorder, - inputValidationWarningBackground: cr.inputValidationWarningBackground, - inputValidationErrorBorder: cr.inputValidationErrorBorder, - inputValidationErrorBackground: cr.inputValidationErrorBackground, - focusBorder: cr.focusBorder, - listFocusBackground: cr.listFocusBackground, - listFocusForeground: cr.listFocusForeground, - listFocusOutline: cr.activeContrastBorder, - listHoverBackground: cr.listHoverBackground, - listHoverForeground: cr.listHoverForeground, - listHoverOutline: cr.activeContrastBorder -}; - -export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { ...defaultSelectBoxStyles, ...(style || {}) }, widget); -} - -export function attachListBoxStyler(widget: IThemable, themeService: IThemeService, style?: - { - selectBackground?: cr.ColorIdentifier, - selectForeground?: cr.ColorIdentifier, - selectBorder?: cr.ColorIdentifier, - inputValidationInfoBorder?: cr.ColorIdentifier, - inputValidationInfoBackground?: cr.ColorIdentifier, - inputValidationWarningBorder?: cr.ColorIdentifier, - inputValidationWarningBackground?: cr.ColorIdentifier, - inputValidationErrorBorder?: cr.ColorIdentifier, - inputValidationErrorBackground?: cr.ColorIdentifier - }): IDisposable { - return attachStyler(themeService, { - selectBackground: (style && style.selectBackground) || cr.selectBackground, - selectForeground: (style && style.selectForeground) || cr.selectForeground, - selectBorder: (style && style.selectBorder) || cr.selectBorder, - inputValidationInfoBorder: (style && style.inputValidationInfoBorder) || cr.inputValidationInfoBorder, - inputValidationInfoBackground: (style && style.inputValidationInfoBackground) || cr.inputValidationInfoBackground, - inputValidationWarningBorder: (style && style.inputValidationWarningBorder) || cr.inputValidationWarningBorder, - inputValidationWarningBackground: (style && style.inputValidationWarningBackground) || cr.inputValidationWarningBackground, - inputValidationErrorBorder: (style && style.inputValidationErrorBorder) || cr.inputValidationErrorBorder, - inputValidationErrorBackground: (style && style.inputValidationErrorBackground) || cr.inputValidationErrorBackground - }, widget); -} - export interface ITableStyleOverrides extends IStyleOverrides { listFocusBackground?: cr.ColorIdentifier, listFocusForeground?: cr.ColorIdentifier, @@ -157,10 +85,8 @@ export interface IInfoButtonStyleOverrides { export function attachDesignerStyler(widget: any, themeService: IThemeService): IDisposable { function applyStyles(): void { const colorTheme = themeService.getColorTheme(); - const selectBoxStyles = computeStyles(colorTheme, defaultSelectBoxStyles); const tableStyles = computeStyles(colorTheme, defaultTableStyles); widget.style({ - selectBoxStyles: selectBoxStyles, tableStyles: tableStyles, 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 97a5d84725..61158e8cb5 100644 --- a/src/sql/platform/theme/common/vsstyler.ts +++ b/src/sql/platform/theme/common/vsstyler.ts @@ -5,8 +5,7 @@ import { Color } from 'vs/base/common/color'; import { IDisposable } from 'vs/base/common/lifecycle'; -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 { activeContrastBorder, breadcrumbsActiveSelectionForeground, breadcrumbsBackground, breadcrumbsFocusForeground, breadcrumbsForeground, buttonBackground, buttonBorder, buttonForeground, buttonHoverBackground, buttonSecondaryBackground, buttonSecondaryForeground, buttonSecondaryHoverBackground, ColorIdentifier, ColorTransform, ColorValue, contrastBorder, editorWidgetBackground, editorWidgetForeground, 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, problemsErrorIconForeground, problemsInfoIconForeground, problemsWarningIconForeground, progressBarBackground, resolveColorValue, scrollbarShadow, scrollbarSliderActiveBackground, scrollbarSliderBackground, scrollbarSliderHoverBackground, 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 { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; //export type styleFn = (colors: { [name: string]: Color | undefined }) => void; @@ -60,34 +59,6 @@ export function attachStyler(themeService: IThemeServic return themeService.onDidColorThemeChange(applyStyles); } -export interface ISelectBoxStyleOverrides extends IStyleOverrides, IListStyleOverrides { - selectBackground?: ColorIdentifier; - selectListBackground?: ColorIdentifier; - selectForeground?: ColorIdentifier; - decoratorRightForeground?: ColorIdentifier; - selectBorder?: ColorIdentifier; - focusBorder?: ColorIdentifier; -} - -export function attachSelectBoxStyler(widget: IThemable, themeService: IThemeService, style?: ISelectBoxStyleOverrides): IDisposable { - return attachStyler(themeService, { - selectBackground: style?.selectBackground || selectBackground, - selectListBackground: style?.selectListBackground || selectListBackground, - selectForeground: style?.selectForeground || selectForeground, - decoratorRightForeground: style?.pickerGroupForeground || pickerGroupForeground, - selectBorder: style?.selectBorder || selectBorder, - focusBorder: style?.focusBorder || focusBorder, - listFocusBackground: style?.listFocusBackground || quickInputListFocusBackground, - listInactiveSelectionIconForeground: style?.listInactiveSelectionIconForeground || quickInputListFocusIconForeground, - listFocusForeground: style?.listFocusForeground || quickInputListFocusForeground, - listFocusOutline: style?.listFocusOutline || ((theme: IColorTheme) => isHighContrast(theme.type) ? activeContrastBorder : Color.transparent), - listHoverBackground: style?.listHoverBackground || listHoverBackground, - listHoverForeground: style?.listHoverForeground || listHoverForeground, - listHoverOutline: style?.listFocusOutline || activeContrastBorder, - selectListBorder: style?.selectListBorder || editorWidgetBorder - } as ISelectBoxStyleOverrides, 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 d7346b4418..9c2f6449e3 100644 --- a/src/sql/workbench/browser/designer/designer.ts +++ b/src/sql/workbench/browser/designer/designer.ts @@ -19,7 +19,7 @@ import 'vs/css!./media/designer'; import { ITableStyles } from 'sql/base/browser/ui/table/interfaces'; import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox'; import { Table } from 'sql/base/browser/ui/table/table'; -import { ISelectBoxStyles, SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; +import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; import { TableDataView } from 'sql/base/browser/ui/table/tableDataView'; import { localize } from 'vs/nls'; import { TableCellEditorFactory } from 'sql/base/browser/ui/table/tableCellEditorFactory'; @@ -53,14 +53,13 @@ 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, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; import { ThemeIcon } from 'vs/base/common/themables'; -import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export interface IDesignerStyle { tabbedPanelStyles?: ITabbedPanelStyles; tableStyles?: ITableStyles; - selectBoxStyles?: ISelectBoxStyles; paneSeparator?: Color; groupHeaderBackground?: Color; } @@ -222,7 +221,6 @@ export class Designer extends Disposable { component.style(this._styles.tableStyles); } else if (component instanceof Dropdown) { } else { - component.style(this._styles.selectBoxStyles); } } @@ -800,7 +798,7 @@ export class Designer extends Disposable { } }); } else { - dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined, { + dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, defaultSelectBoxStyles, this._contextViewProvider, undefined, { ariaLabel: componentDefinition.componentProperties?.title, ariaDescription: componentDefinition.description }); diff --git a/src/sql/workbench/browser/modal/optionsDialogHelper.ts b/src/sql/workbench/browser/modal/optionsDialogHelper.ts index d1f5440152..80f105ca4b 100644 --- a/src/sql/workbench/browser/modal/optionsDialogHelper.ts +++ b/src/sql/workbench/browser/modal/optionsDialogHelper.ts @@ -13,6 +13,7 @@ import * as azdata from 'azdata'; import { localize } from 'vs/nls'; import { ServiceOptionType } from 'sql/platform/connection/common/interfaces'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export interface IOptionElement { optionWidget: any; @@ -49,7 +50,7 @@ export function createOptionElement(option: azdata.ServiceOption, rowContainer: optionWidget.value = optionValue; inputElement = findElement(rowContainer, 'input'); } else if (option.valueType === ServiceOptionType.category || option.valueType === ServiceOptionType.boolean) { - optionWidget = new SelectBox(possibleInputs, optionValue.toString(), contextViewService, undefined, { ariaLabel: option.displayName }, option.name); + optionWidget = new SelectBox(possibleInputs, optionValue.toString(), defaultSelectBoxStyles, contextViewService, undefined, { ariaLabel: option.displayName }, option.name); DialogHelper.appendInputSelectBox(rowContainer, optionWidget); inputElement = findElement(rowContainer, 'monaco-select-box'); } else if (option.valueType === ServiceOptionType.string || option.valueType === ServiceOptionType.password) { diff --git a/src/sql/workbench/browser/modelComponents/dropdown.component.ts b/src/sql/workbench/browser/modelComponents/dropdown.component.ts index 3e5ecf5fb7..abc64f86ff 100644 --- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts +++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts @@ -13,9 +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 { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; - -import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces'; @@ -25,7 +22,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'; +import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; @Component({ selector: 'modelview-dropdown', @@ -68,7 +65,6 @@ export default class DropDownComponent extends ComponentBase ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService, @Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(IConfigurationService) private readonly configurationService: IConfigurationService, @@ -107,10 +103,9 @@ export default class DropDownComponent extends ComponentBase !this.required || !this.editable || !!this._editableDropdown.value); } if (this._dropDownContainer) { - this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), this.contextViewService, this._dropDownContainer.nativeElement); + this._selectBox = new SelectBox(this.getValues(), this.getSelectedValue(), defaultSelectBoxStyles, this.contextViewService, this._dropDownContainer.nativeElement); this._selectBox.render(this._dropDownContainer.nativeElement); this._register(this._selectBox); - this._register(attachSelectBoxStyler(this._selectBox, this.themeService)); this._register(this._selectBox.onDidSelect(async e => { // also update the selected value here while in accessibility mode since the read-only selectbox // is used even if the editable flag is true @@ -203,10 +198,9 @@ export default class DropDownComponent extends ComponentBase ChangeDetectorRef)) changeRef: ChangeDetectorRef, - @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService, @Inject(IContextViewService) private contextViewService: IContextViewService, @Inject(IClipboardService) private clipboardService: IClipboardService, @Inject(forwardRef(() => ElementRef)) el: ElementRef, @@ -46,7 +44,10 @@ export default class ListBoxComponent extends ComponentBase { if (this._input.selectedOptions.length > 0) { const key = e.keyCode; @@ -68,7 +69,6 @@ export default class ListBoxComponent extends ComponentBase { this.selectedRow = e.index; this.fireEvent({ diff --git a/src/sql/workbench/contrib/backup/browser/backup.component.ts b/src/sql/workbench/contrib/backup/browser/backup.component.ts index 1e988c11c7..c5e261bbf8 100644 --- a/src/sql/workbench/contrib/backup/browser/backup.component.ts +++ b/src/sql/workbench/contrib/backup/browser/backup.component.ts @@ -11,7 +11,6 @@ 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, 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'; @@ -38,7 +37,7 @@ import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { DatabaseEngineEdition } from 'sql/workbench/api/common/sqlExtHostTypes'; import { IBackupRestoreUrlBrowserDialogService } from 'sql/workbench/services/backupRestoreUrlBrowser/common/urlBrowserDialogService'; import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; -import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultListBoxStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export const BACKUP_SELECTOR: string = 'backup-component'; @@ -241,7 +240,7 @@ export class BackupComponent extends AngularDisposable { inputBoxStyles: defaultInputBoxStyles })); // Set backup type - this.backupTypeSelectBox = this._register(new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.BACKUP_TYPE })); + this.backupTypeSelectBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.BACKUP_TYPE })); this.backupTypeSelectBox.render(this.backupTypeElement!.nativeElement); // Set copy-only check box @@ -311,7 +310,10 @@ export class BackupComponent extends AngularDisposable { })); this._register(this.urlInputBox.onDidChange((value) => this.onUrlInputBoxChanged(value))); - this.pathListBox = this._register(new ListBox([], this.contextViewService)); + this.pathListBox = this._register(new ListBox({ + items: [], + ...defaultListBoxStyles + }, this.contextViewService)); this.pathListBox.setAriaLabel(LocalizedStrings.BACKUP_DEVICE); this._register(this.pathListBox.onKeyDown(e => { if (this.pathListBox!.selectedOptions.length > 0) { @@ -345,13 +347,13 @@ export class BackupComponent extends AngularDisposable { this.removeFilePathButton.title = localize('removeFile', "Remove files"); // Set compression - this.compressionSelectBox = this._register(new SelectBox(this.compressionOptions, this.compressionOptions[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.SET_BACKUP_COMPRESSION })); + this.compressionSelectBox = this._register(new SelectBox(this.compressionOptions, this.compressionOptions[0], defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.SET_BACKUP_COMPRESSION })); this.compressionSelectBox.render(this.compressionElement!.nativeElement); // Set encryption - this.algorithmSelectBox = this._register(new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], this.contextViewService, undefined, { ariaLabel: this.localizedStrings.ALGORITHM })); + this.algorithmSelectBox = this._register(new SelectBox(this.encryptionAlgorithms, this.encryptionAlgorithms[0], defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.ALGORITHM })); this.algorithmSelectBox.render(this.encryptionAlgorithmElement!.nativeElement); - this.encryptorSelectBox = this._register(new SelectBox([], '', this.contextViewService, undefined, { ariaLabel: this.localizedStrings.CERTIFICATE_OR_ASYMMETRIC_KEY })); + this.encryptorSelectBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: this.localizedStrings.CERTIFICATE_OR_ASYMMETRIC_KEY })); this.encryptorSelectBox.render(this.encryptorElement!.nativeElement); // Set media @@ -605,13 +607,6 @@ export class BackupComponent extends AngularDisposable { } private registerListeners(): void { - // Theme styler - 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(this.backupTypeSelectBox!.onDidSelect(selected => this.onBackupTypeChanged())); this._register(this.addUrlPathButton!.onDidClick(() => this.onAddUrlClick())); this._register(this.addFilePathButton!.onDidClick(() => this.onAddFileClick())); diff --git a/src/sql/workbench/contrib/charts/browser/chartView.ts b/src/sql/workbench/contrib/charts/browser/chartView.ts index 8861bc87c0..85226c0c4c 100644 --- a/src/sql/workbench/contrib/charts/browser/chartView.ts +++ b/src/sql/workbench/contrib/charts/browser/chartView.ts @@ -25,11 +25,10 @@ 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 { 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'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const insightRegistry = Registry.as(Extensions.InsightContribution); @@ -89,7 +88,6 @@ export class ChartView extends Disposable implements IPanelView { constructor( private readonly _isQueryEditorChart: boolean, @IContextViewService private _contextViewService: IContextViewService, - @IThemeService private _themeService: IThemeService, @IInstantiationService private _instantiationService: IInstantiationService, @INotificationService private readonly _notificationService: INotificationService, @IConfigurationService private readonly _configurationService: IConfigurationService @@ -347,7 +345,7 @@ export class ChartView extends Disposable implements IPanelView { break; case ControlType.combo: //pass options into changeAltNames in order for SelectBox to show user-friendly names. - let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, this._contextViewService); + let dropdown = new SelectBox(option.displayableOptions || this.changeToAltNames(option.options!), undefined!, defaultSelectBoxStyles, this._contextViewService); dropdown.setAriaLabel(option.label); dropdown.select(option.options!.indexOf(value)); dropdown.render(optionInput); @@ -364,7 +362,6 @@ export class ChartView extends Disposable implements IPanelView { dropdown.select(option.options!.indexOf(val)); } }; - this.optionDisposables.push(attachSelectBoxStyler(dropdown, this._themeService)); break; case ControlType.input: let input = new InputBox(optionInput, this._contextViewService, { diff --git a/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts b/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts index b0852e5e93..3f00270e9f 100644 --- a/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts +++ b/src/sql/workbench/contrib/charts/test/browser/chartView.test.ts @@ -43,5 +43,5 @@ function createChartView(isQueryEditorChart: boolean): ChartView { const notificationService = new TestNotificationService(); const configurationService = new TestConfigurationService(); instantiationService.stub(IThemeService, themeService); - return new ChartView(isQueryEditorChart, contextViewService, themeService, instantiationService, notificationService, configurationService); + return new ChartView(isQueryEditorChart, contextViewService, instantiationService, notificationService, configurationService); } diff --git a/src/sql/workbench/contrib/editData/browser/editDataActions.ts b/src/sql/workbench/contrib/editData/browser/editDataActions.ts index e0f10b7472..b2ba20e57d 100644 --- a/src/sql/workbench/contrib/editData/browser/editDataActions.ts +++ b/src/sql/workbench/contrib/editData/browser/editDataActions.ts @@ -14,9 +14,8 @@ import * as dom from 'vs/base/browser/dom'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { INotificationService } from 'vs/platform/notification/common/notification'; import Severity from 'vs/base/common/severity'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; -import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const $ = dom.$; /** @@ -158,17 +157,14 @@ export class ChangeMaxRowsActionItem extends Disposable implements IActionViewIt constructor( private _editor: EditDataEditor, public action: IAction, - @IContextViewService contextViewService: IContextViewService, - @IThemeService private _themeService: IThemeService) { + @IContextViewService contextViewService: IContextViewService) { super(); this._options = ['200', '1000', '10000']; this._currentOptionsIndex = 0; - this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], contextViewService); + this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], defaultSelectBoxStyles, contextViewService); this._registerListeners(); this._refreshOptions(); this.defaultRowCount = Number(this._options[this._currentOptionsIndex]); - - this._register(attachSelectBoxStyler(this.selectBox, _themeService)); } public render(container: HTMLElement): void { @@ -213,7 +209,6 @@ export class ChangeMaxRowsActionItem extends Disposable implements IActionViewIt this._currentOptionsIndex = this._options.findIndex(x => x === selection.selected); this._editor.editDataInput.onRowDropDownSet(Number(selection.selected)); })); - this._register(attachSelectBoxStyler(this.selectBox, this._themeService)); } } diff --git a/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts b/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts index 3c7d5a6553..d1e169e9ae 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/executionPlanComparisonEditorView.ts @@ -15,7 +15,7 @@ import { Action } from 'vs/base/common/actions'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IFileDialogService } from 'vs/platform/dialogs/common/dialogs'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; -import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; +import { IColorTheme, ICssStyleCollector, registerThemingParticipant } from 'vs/platform/theme/common/themeService'; import * as DOM from 'vs/base/browser/dom'; import { ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { localize } from 'vs/nls'; @@ -26,7 +26,6 @@ import { INotificationService } from 'vs/platform/notification/common/notificati import { LoadingSpinner } from 'sql/base/browser/ui/loadingSpinner/loadingSpinner'; import { contrastBorder, editorWidgetBackground, errorForeground, listHoverBackground, textLinkForeground, widgetShadow } from 'vs/platform/theme/common/colorRegistry'; import { ExecutionPlanViewHeader } from 'sql/workbench/contrib/executionPlan/browser/executionPlanViewHeader'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; import { IProgressService, ProgressLocation } from 'vs/platform/progress/common/progress'; import { generateUuid } from 'vs/base/common/uuid'; import { IAdsTelemetryService } from 'sql/platform/telemetry/common/telemetry'; @@ -35,6 +34,7 @@ import { NodeSearchWidget } from 'sql/workbench/contrib/executionPlan/browser/wi import { Button } from 'sql/base/browser/ui/button/button'; import { Disposable } from 'vs/base/common/lifecycle'; import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const ADD_EXECUTION_PLAN_STRING = localize('epCompare.addExecutionPlanLabel', 'Add execution plan'); @@ -126,7 +126,6 @@ export class ExecutionPlanComparisonEditorView extends Disposable { constructor( parentContainer: HTMLElement, @IInstantiationService private readonly _instantiationService: IInstantiationService, - @IThemeService private themeService: IThemeService, @IExecutionPlanService private _executionPlanService: IExecutionPlanService, @IFileDialogService private _fileDialogService: IFileDialogService, @IContextViewService readonly contextViewService: IContextViewService, @@ -235,7 +234,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable { this._topPlanContainer = DOM.$('.plan-container'); this.planSplitViewContainer.appendChild(this._topPlanContainer); this._topPlanDropdownContainer = DOM.$('.dropdown-container'); - this._topPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', this.contextViewService, this._topPlanDropdownContainer)); + this._topPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', defaultSelectBoxStyles, this.contextViewService, this._topPlanDropdownContainer)); this._topPlanDropdown.render(this._topPlanDropdownContainer); this._register(this._topPlanDropdown.onDidSelect(async (e) => { @@ -253,7 +252,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable { await this.getSkeletonNodes(); })); - this._register(attachSelectBoxStyler(this._topPlanDropdown, this.themeService)); + this._topPlanContainer.appendChild(this._topPlanDropdownContainer); this._topPlanRecommendations = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, this._topPlanContainer, undefined)); @@ -262,7 +261,7 @@ export class ExecutionPlanComparisonEditorView extends Disposable { this._bottomPlanContainer = DOM.$('.plan-container'); this.planSplitViewContainer.appendChild(this._bottomPlanContainer); this._bottomPlanDropdownContainer = DOM.$('.dropdown-container'); - this._bottomPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', this.contextViewService, this._bottomPlanDropdownContainer)); + this._bottomPlanDropdown = this._register(new SelectBox(['option 1', 'option2'], 'option1', defaultSelectBoxStyles, this.contextViewService, this._bottomPlanDropdownContainer)); this._bottomPlanDropdown.render(this._bottomPlanDropdownContainer); this._register(this._bottomPlanDropdown.onDidSelect(async (e) => { @@ -280,8 +279,6 @@ export class ExecutionPlanComparisonEditorView extends Disposable { await this.getSkeletonNodes(); })); - this._register(attachSelectBoxStyler(this._bottomPlanDropdown, this.themeService)); - this._bottomPlanContainer.appendChild(this._bottomPlanDropdownContainer); this._bottomPlanRecommendations = this._register(this._instantiationService.createInstance(ExecutionPlanViewHeader, this._bottomPlanContainer, undefined)); } diff --git a/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts b/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts index ffd471c645..82d05ebb6f 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/highlightExpensiveNodeWidget.ts @@ -10,7 +10,6 @@ import { localize } from 'vs/nls'; import * as errors from 'vs/base/common/errors'; import { Codicon } from 'vs/base/common/codicons'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; -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'; @@ -23,6 +22,7 @@ import { IConfigurationService } from 'vs/platform/configuration/common/configur import { IStorageService, StorageScope, StorageTarget } from 'vs/platform/storage/common/storage'; import { ThemeIcon } from 'vs/base/common/themables'; import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const SELECT_EXPENSE_METRIC_TITLE = localize('executionPlanSelectExpenseMetricTitle', 'Select expense metric'); @@ -86,11 +86,10 @@ export class HighlightExpensiveOperationWidget extends ExecutionPlanWidgetBase { this.container.appendChild(this._expenseMetricSelectBoxContainer); const selectBoxOptions = this.getSelectBoxOptionsFromExecutionPlanDiagram(); - this.expenseMetricSelectBox = this._register(new SelectBox(selectBoxOptions, COST_STRING, this.contextViewService, this._expenseMetricSelectBoxContainer)); + this.expenseMetricSelectBox = this._register(new SelectBox(selectBoxOptions, COST_STRING, defaultSelectBoxStyles, this.contextViewService, this._expenseMetricSelectBoxContainer)); this.expenseMetricSelectBox.setAriaLabel(SELECT_EXPENSE_METRIC_TITLE); this.expenseMetricSelectBox.render(this._expenseMetricSelectBoxContainer); - this._register(attachSelectBoxStyler(this.expenseMetricSelectBox, this.themeService)); this._expenseMetricSelectBoxContainer.style.width = '200px'; this._expenseMetricSelectBoxContainer.style.marginRight = '5px'; diff --git a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts index f7eb8a8c09..b7b174ba46 100644 --- a/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts +++ b/src/sql/workbench/contrib/executionPlan/browser/widgets/nodeSearchWidget.ts @@ -10,7 +10,6 @@ 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 { 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'; @@ -19,6 +18,7 @@ import { AzdataGraphView, SearchType } from 'sql/workbench/contrib/executionPlan import { ExecutionPlanWidgetController } from 'sql/workbench/contrib/executionPlan/browser/executionPlanWidgetController'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; import { ThemeIcon } from 'vs/base/common/themables'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const SELECT_PROPERTY_TITLE = localize('executionPlanSelectPropertyTitle', 'Select property'); const SELECT_SEARCH_TYPE_TITLE = localize('executionPlanSelectSearchTypeTitle', 'Select search type'); @@ -71,9 +71,8 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase { this._propertyNameSelectBoxContainer.style.width = '120px'; const propDropdownOptions = this._executionPlanDiagram.getUniqueElementProperties(); - this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], this.contextViewService, this._propertyNameSelectBoxContainer)); + this._propertyNameSelectBox = this._register(new SelectBox(propDropdownOptions, propDropdownOptions[0], defaultSelectBoxStyles, this.contextViewService, this._propertyNameSelectBoxContainer)); this._propertyNameSelectBox.setAriaLabel(SELECT_PROPERTY_TITLE); - this._register(attachSelectBoxStyler(this._propertyNameSelectBox, this.themeService)); this._propertyNameSelectBox.render(this._propertyNameSelectBoxContainer); this._register(this._propertyNameSelectBox.onDidSelect(e => { @@ -93,10 +92,9 @@ export class NodeSearchWidget extends ExecutionPlanWidgetBase { GREATER_EQUAL_DISPLAY_STRING, LESSER_EQUAL_DISPLAY_STRING, LESSER_AND_GREATER_DISPLAY_STRING - ], EQUALS_DISPLAY_STRING, this.contextViewService, this._searchTypeSelectBoxContainer)); + ], EQUALS_DISPLAY_STRING, defaultSelectBoxStyles, this.contextViewService, this._searchTypeSelectBoxContainer)); this._searchTypeSelectBox.setAriaLabel(SELECT_SEARCH_TYPE_TITLE); this._searchTypeSelectBox.render(this._searchTypeSelectBoxContainer); - this._register(attachSelectBoxStyler(this._searchTypeSelectBox, this.themeService)); this._register(this._searchTypeSelectBox.onDidSelect(e => { this._usePreviousSearchResult = false; diff --git a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts index d8d8fff697..dcec5c2116 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebook.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebook.component.ts @@ -13,7 +13,6 @@ import { localize } from 'vs/nls'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { IContextMenuService, IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { MenuId, IMenuService, MenuItemAction } from 'vs/platform/actions/common/actions'; import { IAction, Action, SubmenuAction } from 'vs/base/common/actions'; import { IContextKeyService, RawContextKey } from 'vs/platform/contextkey/common/contextkey'; @@ -508,13 +507,11 @@ export class NotebookComponent extends AngularDisposable implements OnInit, OnDe let kernelContainer = document.createElement('li'); let kernelDropdown = this.instantiationService.createInstance(KernelsDropdown, kernelContainer, this.contextViewService, this.modelReady); kernelDropdown.render(kernelContainer); - attachSelectBoxStyler(kernelDropdown, this.themeService); let attachToContainer = document.createElement('li'); let attachToDropdown = new AttachToDropdown(attachToContainer, this.contextViewService, this.modelReady, this.connectionManagementService, this.connectionDialogService, this.notificationService, this.capabilitiesService, this._configurationService); attachToDropdown.render(attachToContainer); - attachSelectBoxStyler(attachToDropdown, this.themeService); let spacerElement = document.createElement('li'); spacerElement.style.marginLeft = 'auto'; diff --git a/src/sql/workbench/contrib/notebook/browser/notebookActions.ts b/src/sql/workbench/contrib/notebook/browser/notebookActions.ts index 98de8306fa..dbc30e6d57 100644 --- a/src/sql/workbench/contrib/notebook/browser/notebookActions.ts +++ b/src/sql/workbench/contrib/notebook/browser/notebookActions.ts @@ -44,6 +44,7 @@ import { IConnectionProfile } from 'sql/platform/connection/common/interfaces'; import { Action2 } from 'vs/platform/actions/common/actions'; import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const msgLoading = localize('loading', "Loading kernels..."); export const msgChanging = localize('changing', "Changing kernel..."); @@ -600,7 +601,7 @@ export class KernelsDropdown extends SelectBox { private _showAllKernels: boolean = false; constructor(container: HTMLElement, contextViewProvider: IContextViewProvider, modelReady: Promise, @IConfigurationService private _configurationService: IConfigurationService, ) { - super([msgLoading], msgLoading, contextViewProvider, container, { labelText: kernelLabel, labelOnTop: false, ariaLabel: kernelLabel, id: kernelDropdownElementId } as ISelectBoxOptionsWithLabel); + super([msgLoading], msgLoading, defaultSelectBoxStyles, contextViewProvider, container, { labelText: kernelLabel, labelOnTop: false, ariaLabel: kernelLabel, id: kernelDropdownElementId } as ISelectBoxOptionsWithLabel); if (modelReady) { modelReady @@ -691,7 +692,7 @@ export class AttachToDropdown extends SelectBox { @ICapabilitiesService private _capabilitiesService: ICapabilitiesService, @IConfigurationService private _configurationService: IConfigurationService ) { - super([msgLoadingContexts], msgLoadingContexts, contextViewProvider, container, { labelText: attachToLabel, labelOnTop: false, ariaLabel: attachToLabel, id: attachToDropdownElementId } as ISelectBoxOptionsWithLabel); + super([msgLoadingContexts], msgLoadingContexts, defaultSelectBoxStyles, contextViewProvider, container, { labelText: attachToLabel, labelOnTop: false, ariaLabel: attachToLabel, id: attachToDropdownElementId } as ISelectBoxOptionsWithLabel); if (modelReady) { modelReady .then(model => { diff --git a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts index 34cde72c82..3900536266 100644 --- a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts +++ b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts @@ -30,7 +30,6 @@ import { KeyMod, KeyCode } from 'vs/base/common/keyCodes'; import { ContextKeyExpr, IContextKeyService, IContextKey } from 'vs/platform/contextkey/common/contextkey'; import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry'; import * as types from 'vs/base/common/types'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { ColorScheme } from 'vs/platform/theme/common/theme'; import { CancellationToken } from 'vs/base/common/cancellation'; import { IStorageService } from 'vs/platform/storage/common/storage'; @@ -57,6 +56,7 @@ import { CommonFindController, FindStartFocusAction } from 'vs/editor/contrib/fi 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 { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; class BasicView implements IView { public get element(): HTMLElement { @@ -255,7 +255,7 @@ export class ProfilerEditor extends EditorPane { this._clearFilterAction = this._instantiationService.createInstance(Actions.ProfilerClearSessionFilter, Actions.ProfilerClearSessionFilter.ID, Actions.ProfilerClearSessionFilter.LABEL); this._clearFilterAction.enabled = true; this._viewTemplates = this._profilerService.getViewTemplates(); - this._viewTemplateSelector = new SelectBox(this._viewTemplates.map(i => i.name), 'Standard View', this._contextViewService); + this._viewTemplateSelector = new SelectBox(this._viewTemplates.map(i => i.name), 'Standard View', defaultSelectBoxStyles, this._contextViewService); this._viewTemplateSelector.setAriaLabel(nls.localize('profiler.viewSelectAccessibleName', "Select View")); this._register(this._viewTemplateSelector.onDidSelect(e => { if (this.input) { @@ -268,7 +268,7 @@ export class ProfilerEditor extends EditorPane { this._viewTemplateSelector.render(viewTemplateContainer); this._sessionsList = ['']; - this._sessionSelector = new SelectBox(this._sessionsList, '', this._contextViewService); + this._sessionSelector = new SelectBox(this._sessionsList, '', defaultSelectBoxStyles, this._contextViewService); this._sessionSelector.setAriaLabel(nls.localize('profiler.sessionSelectAccessibleName', "Select Session")); this._register(this._sessionSelector.onDidSelect(e => { if (this.input) { @@ -281,9 +281,6 @@ export class ProfilerEditor extends EditorPane { sessionsContainer.style.paddingRight = '5px'; this._sessionSelector.render(sessionsContainer); - this._register(attachSelectBoxStyler(this._viewTemplateSelector, this.themeService)); - this._register(attachSelectBoxStyler(this._sessionSelector, this.themeService)); - this._actionBar.setContent([ { action: this._createAction }, { element: Taskbar.createTaskbarSeparator() }, diff --git a/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts b/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts index ca1e4f3034..65b1f34bac 100644 --- a/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts +++ b/src/sql/workbench/services/backupRestoreUrlBrowser/browser/urlBrowserDialog.ts @@ -13,7 +13,6 @@ 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 { 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'; @@ -33,6 +32,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti import { onUnexpectedError } from 'vs/base/common/errors'; import { Deferred } from 'sql/base/common/promise'; import { defaultButtonStyles, defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; /** * This function adds one year to the current date and returns it in the UTC format. @@ -120,7 +120,7 @@ export class BackupRestoreUrlBrowserDialog extends Modal { tableContainer.setAttribute('role', 'presentation'); let azureAccountLabel = localize('backupRestoreUrlBrowserDialog.account', "Azure Account"); - this._accountSelectorBox = this._register(new SelectBox([''], '', this._contextViewService, null, { ariaLabel: azureAccountLabel })); + this._accountSelectorBox = this._register(new SelectBox([''], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: azureAccountLabel })); this._accountSelectorBox.disable(); let accountSelector = DialogHelper.appendRow(tableContainer, azureAccountLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(accountSelector, this._accountSelectorBox); @@ -151,25 +151,25 @@ export class BackupRestoreUrlBrowserDialog extends Modal { linkAccountButton.appendChild(linkAccount.el); let tenantLabel = localize('backupRestoreUrlBrowserDialog.tenant', "Azure AD Tenant"); - this._tenantSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: tenantLabel })); + this._tenantSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: tenantLabel })); this._tenantSelectorBox.disable(); let tenantSelector = DialogHelper.appendRow(tableContainer, tenantLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(tenantSelector, this._tenantSelectorBox); let subscriptionLabel = localize('backupRestoreUrlBrowserDialog.subscription', "Azure subscription"); - this._subscriptionSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: subscriptionLabel })); + this._subscriptionSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: subscriptionLabel })); this._subscriptionSelectorBox.disable(); let subscriptionSelector = DialogHelper.appendRow(tableContainer, subscriptionLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(subscriptionSelector, this._subscriptionSelectorBox); let storageAccountLabel = localize('backupRestoreUrlBrowserDialog.storageAccount', "Storage account"); - this._storageAccountSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: storageAccountLabel })); + this._storageAccountSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: storageAccountLabel })); this._storageAccountSelectorBox.disable(); let storageAccountSelector = DialogHelper.appendRow(tableContainer, storageAccountLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(storageAccountSelector, this._storageAccountSelectorBox); let blobContainerLabel = localize('backupRestoreUrlBrowserDialog.blobContainer', "Blob container"); - this._blobContainerSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: blobContainerLabel })); + this._blobContainerSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: blobContainerLabel })); this._blobContainerSelectorBox.disable(); let blobContainerSelector = DialogHelper.appendRow(tableContainer, blobContainerLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(blobContainerSelector, this._blobContainerSelectorBox); @@ -194,7 +194,7 @@ export class BackupRestoreUrlBrowserDialog extends Modal { let backupFileLabel = localize('backupRestoreUrlBrowserDialog.backupFile', "Backup file"); if (this._restoreDialog) { - this._backupFileSelectorBox = this._register(new SelectBox([], '', this._contextViewService, null, { ariaLabel: backupFileLabel })); + this._backupFileSelectorBox = this._register(new SelectBox([], '', defaultSelectBoxStyles, this._contextViewService, null, { ariaLabel: backupFileLabel })); let backupFileSelector = DialogHelper.appendRow(tableContainer, backupFileLabel, 'url-input-label', 'url-input-box', null, true); DialogHelper.appendInputSelectBox(backupFileSelector, this._backupFileSelectorBox); this._backupFileSelectorBox.setOptions([]); @@ -440,15 +440,6 @@ export class BackupRestoreUrlBrowserDialog extends Modal { private registerThemeStylers(): void { - this._register(attachSelectBoxStyler(this._tenantSelectorBox, this._themeService)); - this._register(attachSelectBoxStyler(this._accountSelectorBox, this._themeService)); - this._register(attachSelectBoxStyler(this._subscriptionSelectorBox, this._themeService)); - this._register(attachSelectBoxStyler(this._storageAccountSelectorBox, this._themeService)); - this._register(attachSelectBoxStyler(this._blobContainerSelectorBox, this._themeService)); - if (this._backupFileSelectorBox) { - this._register(attachSelectBoxStyler(this._backupFileSelectorBox, this._themeService)); - } - this._register(this._sasButton); this._register(this._okButton); this._register(this._cancelButton); diff --git a/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts b/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts index 52a074f989..1919f5f43c 100644 --- a/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/cmsConnectionWidget.ts @@ -27,6 +27,7 @@ import { ILogService } from 'vs/platform/log/common/log'; import { IErrorMessageService } from 'sql/platform/errorMessage/common/errorMessageService'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; /** * Connection Widget clas for CMS Connections @@ -55,7 +56,7 @@ export class CmsConnectionWidget extends ConnectionWidget { if (authTypeOption) { let authTypeDefault = this.getAuthTypeDefault(authTypeOption, OS); let authTypeDefaultDisplay = this.getAuthTypeDisplayName(authTypeDefault); - this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }); + this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }); } } diff --git a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts index 5fd3d09d15..4ba1914ae3 100644 --- a/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionDialogWidget.ts @@ -47,6 +47,7 @@ import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilit import { onUnexpectedError } from 'vs/base/common/errors'; import { FieldSet } from 'sql/base/browser/ui/fieldset/fieldset'; import { KeyCode } from 'vs/base/common/keyCodes'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export interface OnShowUIResponse { selectedProviderDisplayName: string; @@ -191,7 +192,7 @@ export class ConnectionDialogWidget extends Modal { this._body = DOM.append(container, DOM.$('.connection-dialog')); const connectTypeLabel = localize('connectType', "Connection type"); - this._providerTypeSelectBox = new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, this.contextViewService, undefined, { ariaLabel: connectTypeLabel }); + this._providerTypeSelectBox = new SelectBox(this.providerDisplayNameOptions, this.selectedProviderType, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: connectTypeLabel }); // Recent connection tab const recentConnectionTab = DOM.$('.connection-recent-tab'); const recentConnectionContainer = DOM.append(recentConnectionTab, DOM.$('.connection-recent', { id: 'recentConnection' })); @@ -279,8 +280,6 @@ export class ConnectionDialogWidget extends Modal { } private registerListeners(): void { - // Theme styler - this._register(styler.attachSelectBoxStyler(this._providerTypeSelectBox, this._themeService)); this._register(this._providerTypeSelectBox.onDidSelect(selectedProviderType => { this.onProviderTypeSelected(selectedProviderType.selected); })); diff --git a/src/sql/workbench/services/connection/browser/connectionWidget.ts b/src/sql/workbench/services/connection/browser/connectionWidget.ts index 278e056f3d..1cadf2d3b4 100644 --- a/src/sql/workbench/services/connection/browser/connectionWidget.ts +++ b/src/sql/workbench/services/connection/browser/connectionWidget.ts @@ -15,7 +15,6 @@ import { IConnectionProfile, ServiceOptionType } from 'sql/platform/connection/c import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes'; import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup'; 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'; @@ -46,7 +45,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, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const ConnectionStringText = localize('connectionWidget.connectionString', "Connection string"); @@ -144,7 +143,7 @@ export class ConnectionWidget extends lifecycle.Disposable { if (authTypeOption) { let authTypeDefault = this.getAuthTypeDefault(authTypeOption, OS); let authTypeDefaultDisplay = this.getAuthTypeDisplayName(authTypeDefault); - this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }); + this._authTypeSelectBox = new SelectBox(authTypeOption.categoryValues.map(c => c.displayName), authTypeDefaultDisplay, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: authTypeOption.displayName }); this._register(this._authTypeSelectBox); } this._providerName = providerName; @@ -177,7 +176,7 @@ export class ConnectionWidget extends lifecycle.Disposable { public createConnectionWidget(container: HTMLElement, authTypeChanged: boolean = false): void { this._serverGroupOptions = [this.DefaultServerGroup]; - this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString }); + this._serverGroupSelectBox = new SelectBox(this._serverGroupOptions.map(g => g.name), this.DefaultServerGroup.name, defaultSelectBoxStyles, this._contextViewService, undefined, { ariaLabel: this._serverGroupDisplayString }); this._register(this._serverGroupSelectBox); this._previousGroupOption = this._serverGroupSelectBox.value; this._container = DOM.append(container, DOM.$('div.connection-table')); @@ -299,9 +298,8 @@ export class ConnectionWidget extends lifecycle.Disposable { return { text: v.displayName, value: v.value } as SelectOptionItemSQL; }); - this._customOptionWidgets[i] = new SelectBox(options, selectedValue, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName }, option.name); + this._customOptionWidgets[i] = new SelectBox(options, selectedValue, defaultSelectBoxStyles, this._contextViewService, customOptionsContainer, { ariaLabel: option.displayName }, option.name); DialogHelper.appendInputSelectBox(customOptionsContainer, this._customOptionWidgets[i] as SelectBox); - this._register(styler.attachSelectBoxStyler(this._customOptionWidgets[i] as SelectBox, this._themeService)); break; default: this._customOptionWidgets[i] = new InputBox(customOptionsContainer, this._contextViewService, { @@ -442,7 +440,7 @@ export class ConnectionWidget extends lifecycle.Disposable { // Azure account picker let accountLabel = localize('connection.azureAccountDropdownLabel', "Account"); let accountDropdown = DialogHelper.appendRow(this._tableContainer, accountLabel, 'connection-label', 'connection-input', 'azure-account-row'); - this._azureAccountDropdown = new SelectBox([], undefined, this._contextViewService, accountDropdown, { ariaLabel: accountLabel }); + this._azureAccountDropdown = new SelectBox([], undefined, defaultSelectBoxStyles, this._contextViewService, accountDropdown, { ariaLabel: accountLabel }); this._register(this._azureAccountDropdown); DialogHelper.appendInputSelectBox(accountDropdown, this._azureAccountDropdown); let refreshCredentials = DialogHelper.appendRow(this._tableContainer, '', 'connection-label', 'connection-input', ['azure-account-row', 'refresh-credentials-link']); @@ -452,7 +450,7 @@ export class ConnectionWidget extends lifecycle.Disposable { // Azure tenant picker let tenantLabel = localize('connection.azureTenantDropdownLabel', "Azure AD tenant"); let tenantDropdown = DialogHelper.appendRow(this._tableContainer, tenantLabel, 'connection-label', 'connection-input', ['azure-account-row', 'azure-tenant-row']); - this._azureTenantDropdown = new SelectBox([], undefined, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel }); + this._azureTenantDropdown = new SelectBox([], undefined, defaultSelectBoxStyles, this._contextViewService, tenantDropdown, { ariaLabel: tenantLabel }); this._register(this._azureTenantDropdown); DialogHelper.appendInputSelectBox(tenantDropdown, this._azureTenantDropdown); } @@ -540,10 +538,7 @@ export class ConnectionWidget extends lifecycle.Disposable { } protected registerListeners(): void { - // Theme styler - this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService)); if (this._serverGroupSelectBox) { - this._register(styler.attachSelectBoxStyler(this._serverGroupSelectBox, this._themeService)); this._register(this._serverGroupSelectBox.onDidSelect(selectedGroup => { this.onGroupSelected(selectedGroup.selected); })); @@ -577,8 +572,6 @@ export class ConnectionWidget extends lifecycle.Disposable { } if (this._authTypeSelectBox) { - // Theme styler - this._register(styler.attachSelectBoxStyler(this._authTypeSelectBox, this._themeService)); this._register(this._authTypeSelectBox.onDidSelect(selectedAuthType => { this.onAuthTypeSelected(selectedAuthType.selected, true); this.setConnectButton(); @@ -586,14 +579,12 @@ export class ConnectionWidget extends lifecycle.Disposable { } if (this._azureAccountDropdown) { - this._register(styler.attachSelectBoxStyler(this._azureAccountDropdown, this._themeService)); this._register(this._azureAccountDropdown.onDidSelect(() => { this.onAzureAccountSelected().catch(err => this._logService.error(`Unexpected error handling Azure Account dropdown click : ${err}`)); })); } if (this._azureTenantDropdown) { - this._register(styler.attachSelectBoxStyler(this._azureTenantDropdown, this._themeService)); this._register(this._azureTenantDropdown.onDidSelect((selectInfo) => { this.onAzureTenantSelected(selectInfo.index); })); diff --git a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts index 7a84d6e97b..1d31641639 100644 --- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts +++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserDialog.ts @@ -20,7 +20,6 @@ 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 { 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'; @@ -32,6 +31,7 @@ import { attachModalDialogStyler } from 'sql/workbench/common/styler'; import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; export class FileBrowserDialog extends Modal { private _viewModel: FileBrowserViewModel; @@ -95,7 +95,7 @@ export class FileBrowserDialog extends Modal { }); let filterLabel = localize('fileFilter', "Files of type"); - this._fileFilterSelectBox = new SelectBox(['*'], '*', this._contextViewService); + this._fileFilterSelectBox = new SelectBox(['*'], '*', defaultSelectBoxStyles, this._contextViewService); this._fileFilterSelectBox.setAriaLabel(filterLabel); let filterBuilder = DialogHelper.appendRow(tableContainer, filterLabel, 'file-input-label', 'file-input-box'); DialogHelper.appendInputSelectBox(filterBuilder, this._fileFilterSelectBox); @@ -225,10 +225,6 @@ export class FileBrowserDialog extends Modal { this._register(this._filePathInputBox.onLoseFocus((params: OnLoseFocusParams) => { this.onFilePathBlur(params).catch(err => onUnexpectedError(err)); })); - - // Theme styler - 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 9e04f4a612..a413ff3907 100644 --- a/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts +++ b/src/sql/workbench/services/objectExplorer/browser/filterDialog/filterDialog.ts @@ -32,8 +32,8 @@ 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'; +import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; // strings for filter dialog const OkButtonText = localize('objectExplorer.okButtonText', "OK"); diff --git a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts index 7f6e1f1893..ec1cf8d889 100644 --- a/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts +++ b/src/sql/workbench/services/profiler/browser/profilerFilterDialog.ts @@ -15,7 +15,6 @@ import { localize } from 'vs/nls'; import { ProfilerInput } from 'sql/workbench/browser/editor/profiler/profilerInput'; import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox'; import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox'; -import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler'; import { IContextViewService } from 'vs/platform/contextview/browser/contextView'; import { generateUuid } from 'vs/base/common/uuid'; import * as DOM from 'vs/base/browser/dom'; @@ -29,6 +28,7 @@ import { ILayoutService } from 'vs/platform/layout/browser/layoutService'; import { ITextResourcePropertiesService } from 'vs/editor/common/services/textResourceConfiguration'; import * as aria from 'vs/base/browser/ui/aria/aria'; import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles'; +import { defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; const ClearText: string = localize('profilerFilterDialog.clear', "Clear all"); const ApplyText: string = localize('profilerFilterDialog.apply', "Apply"); @@ -187,9 +187,8 @@ export class ProfilerFilterDialog extends Modal { } private createSelectBox(container: HTMLElement, options: string[], selectedOption: string, ariaLabel: string): SelectBox { - const dropdown = new SelectBox(options, selectedOption, this.contextViewService, undefined, { ariaLabel: ariaLabel }); + const dropdown = new SelectBox(options, selectedOption, defaultSelectBoxStyles, this.contextViewService, undefined, { ariaLabel: ariaLabel }); dropdown.render(container); - this._register(attachSelectBoxStyler(dropdown, this._themeService)); return dropdown; } diff --git a/src/sql/workbench/services/restore/browser/restoreDialog.ts b/src/sql/workbench/services/restore/browser/restoreDialog.ts index 0fe4692062..1e079172dc 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, attachSelectBoxStyler } from 'sql/platform/theme/common/styler'; +import { attachTableStyler } 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, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles'; +import { defaultCheckboxStyles, defaultEditableDropdownStyles, defaultSelectBoxStyles } from 'sql/platform/theme/browser/defaultStyles'; interface FileListElement { logicalFileName: string; @@ -520,7 +520,6 @@ export class RestoreDialog extends Modal { break; case ServiceOptionType.category: propertyWidget = this.createSelectBoxHelper(container, option.description, option.categoryValues.map(c => c.displayName), DialogHelper.getCategoryDisplayName(option.categoryValues, option.defaultValue)!); - this._register(attachSelectBoxStyler(propertyWidget, this._themeService)); this._register(propertyWidget.onDidSelect(selectedDatabase => { this.onCatagoryOptionChanged(optionName); })); @@ -567,7 +566,7 @@ export class RestoreDialog extends Modal { const inputContainer = DOM.append(container, DOM.$('.dialog-input-section')); DOM.append(inputContainer, DOM.$('.dialog-label')).innerText = label; const inputCellContainer = DOM.append(inputContainer, DOM.$('.dialog-input')); - const selectBox = this._register(new SelectBox(options, selectedOption, this._contextViewService, inputCellContainer, { ariaLabel: label })); + const selectBox = this._register(new SelectBox(options, selectedOption, defaultSelectBoxStyles, this._contextViewService, inputCellContainer, { ariaLabel: label })); selectBox.render(inputCellContainer); return selectBox; } @@ -662,9 +661,6 @@ export class RestoreDialog extends Modal { } private registerListeners(): void { - // Theme styler - this._register(attachSelectBoxStyler(this._restoreFromSelectBox!, this._themeService)); - this._register(attachSelectBoxStyler(this._sourceDatabaseSelectBox!, this._themeService)); this._register(this._browseFileButton!); this._register(this._browseUrlButton!); this._register(this._scriptButton!); diff --git a/src/vs/base/browser/ui/selectBox/selectBox.ts b/src/vs/base/browser/ui/selectBox/selectBox.ts index fe4b6821e9..fc370fe456 100644 --- a/src/vs/base/browser/ui/selectBox/selectBox.ts +++ b/src/vs/base/browser/ui/selectBox/selectBox.ts @@ -70,7 +70,7 @@ export const unthemedSelectBoxStyles: ISelectBoxStyles = { decoratorRightForeground: undefined, selectListBackground: undefined, selectListBorder: undefined, - focusBorder: undefined, + focusBorder: undefined }; export interface ISelectData {