implement the style for dropdown, inputbox and table filter (#23502)

* dropdown, inputbox, headerfilter styles * fix missing reference * remove unused import
2026-01-26 01:25:38 -05:00 · 2023-06-27 19:36:31 -07:00
parent f0d496d9ab
commit 4abcc20781
44 changed files with 155 additions and 559 deletions
--- a/src/sql/workbench/browser/designer/designer.ts
+++ b/src/sql/workbench/browser/designer/designer.ts
@@ -14,7 +14,7 @@ import * as DOM from 'vs/base/browser/dom';
 import { Emitter, Event } from 'vs/base/common/event';
 import { Orientation, Sizing, SplitView } from 'vs/base/browser/ui/splitview/splitview';
 import { Disposable, DisposableStore } from 'vs/base/common/lifecycle';
-import { IInputBoxStyles, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
+import { InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
 import 'vs/css!./media/designer';
 import { ITableStyles } from 'sql/base/browser/ui/table/interfaces';
 import { Checkbox } from 'sql/base/browser/ui/checkbox/checkbox';
@@ -41,8 +41,7 @@ import { IColorTheme, ICssStyleCollector, IThemeService, registerThemingParticip
 import { listActiveSelectionBackground, listActiveSelectionForeground, listHoverBackground } from 'vs/platform/theme/common/colorRegistry';
 import { alert } from 'vs/base/browser/ui/aria/aria';
 import { layoutDesignerTable, TableHeaderRowHeight, TableRowHeight } from 'sql/workbench/browser/designer/designerTableUtil';
-import { Dropdown, IDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
-import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
+import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
 import { IAction } from 'vs/base/common/actions';
 import { InsertAfterSelectedRowAction, InsertBeforeSelectedRowAction, AddRowAction, DesignerTableActionContext, MoveRowDownAction, MoveRowUpAction, DesignerTableAction } from 'sql/workbench/browser/designer/tableActions';
 import { RowMoveManager, RowMoveOnDragEventData } from 'sql/base/browser/ui/table/plugins/rowMoveManager.plugin';
@@ -54,16 +53,14 @@ import { onUnexpectedError } from 'vs/base/common/errors';
 import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility';
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultInputBoxStyles, defaultSelectBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
 import { ThemeIcon } from 'vs/base/common/themables';
-import { defaultCheckboxStyles } from 'sql/platform/theme/browser/defaultStyles';
+import { defaultCheckboxStyles, defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';

 export interface IDesignerStyle {
 	tabbedPanelStyles?: ITabbedPanelStyles;
-	inputBoxStyles?: IInputBoxStyles;
 	tableStyles?: ITableStyles;
 	selectBoxStyles?: ISelectBoxStyles;
-	dropdownStyles?: IListStyles & IInputBoxStyles & IDropdownStyles;
 	paneSeparator?: Color;
 	groupHeaderBackground?: Color;
 }
@@ -136,10 +133,9 @@ export class Designer extends Disposable {
 				optionsGetter: (item, column): string[] => {
 					return item[column.field].values;
 				},
-				editorStyler: (component) => {
-					this.styleComponent(component);
-				},
-				onStyleChange: this._onStyleChangeEventEmitter.event
+				inputBoxStyles: defaultInputBoxStyles,
+				editableDropdownStyles: defaultEditableDropdownStyles,
+				selectBoxStyles: defaultSelectBoxStyles
 			}, this._contextViewProvider
 		);
 		this._loadingSpinner = new LoadingSpinner(this._container, { showText: true, fullSize: true });
@@ -218,7 +214,6 @@ export class Designer extends Disposable {

 	private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown): void {
 		if (component instanceof InputBox) {
-			component.style(this._styles.inputBoxStyles);
 		} else if (component instanceof Checkbox) {
 		} else if (component instanceof TabbedPanel) {
 			component.style(this._styles.tabbedPanelStyles);
@@ -226,7 +221,6 @@ export class Designer extends Disposable {
 			this.removeTableSelectionStyles();
 			component.style(this._styles.tableStyles);
 		} else if (component instanceof Dropdown) {
-			component.style(this._styles.dropdownStyles);
 		} else {
 			component.style(this._styles.selectBoxStyles);
 		}
@@ -252,7 +246,7 @@ export class Designer extends Disposable {
 	public style(styles: IDesignerStyle): void {
 		this._styles = styles;
 		this._componentMap.forEach((value, key, map) => {
-			if (!(value.component instanceof Checkbox)) {
+			if (value.component instanceof Table) {
 				if (value.component.style) {
 					this.styleComponent(value.component);
 				}
@@ -792,7 +786,8 @@ export class Designer extends Disposable {
 					dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, {
 						values: dropdownProperties.values as string[] || [],
 						ariaLabel: componentDefinition.componentProperties?.title,
-						ariaDescription: componentDefinition.description
+						ariaDescription: componentDefinition.description,
+						...defaultEditableDropdownStyles
 					});
 					dropdown.onValueChange((value) => {
 						this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value, source: view });
--- a/src/sql/workbench/browser/modelComponents/dropdown.component.ts
+++ b/src/sql/workbench/browser/modelComponents/dropdown.component.ts
@@ -13,7 +13,6 @@ import * as azdata from 'azdata';

 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
-import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
 import { attachSelectBoxStyler } from 'sql/platform/theme/common/vsstyler';

 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
@@ -26,6 +25,7 @@ import { ILogService } from 'vs/platform/log/common/log';
 import { registerThemingParticipant, IColorTheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
 import { errorForeground, inputValidationErrorBorder } from 'vs/platform/theme/common/colorRegistry';
 import { Dropdown, IDropdownOptions } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
+import { defaultEditableDropdownStyles } from 'sql/platform/theme/browser/defaultStyles';

@Component({
 	selector: 'modelview-dropdown',
@@ -88,13 +88,11 @@ export default class DropDownComponent extends ComponentBase<azdata.DropDownProp
 				strictSelection: false,
 				placeholder: this.placeholder,
 				maxHeight: 125,
-				ariaLabel: ''
+				ariaLabel: '',
+				...defaultEditableDropdownStyles
 			};
-			this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this.contextViewService,
-				dropdownOptions);
-
+			this._editableDropdown = new Dropdown(this._editableDropDownContainer.nativeElement, this.contextViewService, dropdownOptions);
 			this._register(this._editableDropdown);
-			this._register(attachEditableDropdownStyler(this._editableDropdown, this.themeService));
 			this._register(this._editableDropdown.onValueChange(async e => {
 				if (this.editable) {
 					this.setSelectedValue(e);
--- a/src/sql/workbench/browser/modelComponents/inputbox.component.ts
+++ b/src/sql/workbench/browser/modelComponents/inputbox.component.ts
@@ -12,13 +12,11 @@ import * as azdata from 'azdata';

 import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
 import { IInputOptions, InputBox } from 'sql/base/browser/ui/inputBox/inputBox';
-import { attachInputBoxStyler } from 'sql/platform/theme/common/styler';

 import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
-import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import * as nls from 'vs/nls';
-import { inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
+import { asCssVariable, inputBackground, inputBorder } from 'vs/platform/theme/common/colorRegistry';
 import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { KeyCode } from 'vs/base/common/keyCodes';
 import * as DOM from 'vs/base/browser/dom';
@@ -27,7 +25,7 @@ import { isNumber } from 'vs/base/common/types';
 import { convertSize, convertSizeToNumber } from 'sql/base/browser/dom';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { ILogService } from 'vs/platform/log/common/log';
-import { defaultInputBoxStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { getInputBoxStyle } from 'vs/platform/theme/browser/defaultStyles';

@Component({
 	selector: 'modelview-inputBox',
@@ -46,7 +44,6 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 	@ViewChild('textarea', { read: ElementRef }) private _textareaContainer: ElementRef;
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
-		@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService,
 		@Inject(IContextViewService) private contextViewService: IContextViewService,
 		@Inject(forwardRef(() => ElementRef)) el: ElementRef,
 		@Inject(ILogService) logService: ILogService
@@ -71,7 +68,10 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 				}
 			},
 			useDefaultValidation: true,
-			inputBoxStyles: defaultInputBoxStyles
+			inputBoxStyles: getInputBoxStyle({
+				inputValidationInfoBackground: asCssVariable(inputBackground),
+				inputValidationInfoBorder: asCssVariable(inputBorder),
+			})
 		};
 		if (this._inputContainer) {
 			inputOptions.requireForceValidations = true; // Non-text area input boxes handle our own validations when the text changes so don't run the base ones
@@ -132,10 +132,6 @@ export default class InputBoxComponent extends ComponentBase<azdata.InputBoxProp
 			this._validations.push(() => !input.inputElement.validationMessage);

 			this._register(input);
-			this._register(attachInputBoxStyler(input, this.themeService, {
-				inputValidationInfoBackground: inputBackground,
-				inputValidationInfoBorder: inputBorder,
-			}));
 			this._register(input.onDidChange(async e => {
 				if (checkOption()) {
 					this.value = input.value;
--- a/src/sql/workbench/browser/modelComponents/table.component.ts
+++ b/src/sql/workbench/browser/modelComponents/table.component.ts
@@ -15,7 +15,7 @@ import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBa

 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { attachTableFilterStyler, attachTableStyler } from 'sql/platform/theme/common/styler';
+import { attachTableStyler } from 'sql/platform/theme/common/styler';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { getContentHeight, getContentWidth, Dimension, isAncestor } from 'vs/base/browser/dom';
 import { RowSelectionModel } from 'sql/base/browser/ui/table/plugins/rowSelectionModel.plugin';
@@ -41,7 +41,7 @@ import { IAccessibilityService } from 'vs/platform/accessibility/common/accessib
 import { IQuickInputService } from 'vs/platform/quickinput/common/quickInput';
 import { IComponentContextService } from 'sql/workbench/services/componentContext/browser/componentContextService';
 import { deepClone, equals } from 'vs/base/common/objects';
-import { defaultButtonStyles } from 'vs/platform/theme/browser/defaultStyles';
+import { defaultTableFilterStyles } from 'sql/platform/theme/browser/defaultStyles';

 export enum ColumnSizingMode {
 	ForceFit = 0,	// all columns will be sized to fit in viewable space, no horiz scroll bar
@@ -607,8 +607,7 @@ export default class TableComponent extends ComponentBase<azdata.TableComponentP


 	private registerFilterPlugin() {
-		const filterPlugin = new HeaderFilter<Slick.SlickData>({ buttonStyles: defaultButtonStyles }, this.contextViewService);
-		this._register(attachTableFilterStyler(filterPlugin, this.themeService));
+		const filterPlugin = new HeaderFilter<Slick.SlickData>(defaultTableFilterStyles, this.contextViewService);
 		this._filterPlugin = filterPlugin;
 		this._filterPlugin.onFilterApplied.subscribe((e, args) => {
 			let filterValues = (<any>args).column.filterValues;