ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-26 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

listbox and select box (#23504)

Browse Source 
* listbox

* select box

* fix tests

* one more test
This commit is contained in:
Alan Ren
2023-06-28 11:20:31 -07:00
committed by GitHub
parent e52aa01cf0
commit 6dc1b9b905
31 changed files with 159 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/sql/workbench/browser/designer/designer.ts
View File

@@ -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
});

3
src/sql/workbench/browser/modal/optionsDialogHelper.ts
View File

@@ -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) {

12
src/sql/workbench/browser/modelComponents/dropdown.component.ts
View File

@@ -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<azdata.DropDownProp
@ViewChild('loadingBox', { read: ElementRef }) private _loadingBoxContainer: ElementRef;
constructor(
@Inject(forwardRef(() => 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<azdata.DropDownProp
this._validations.push(() => !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<azdata.DropDownProp
if (this.loading) {
// Lazily create the select box for the loading portion since many dropdowns won't use it
if (!this._loadingBox) {
this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), this.contextViewService, this._loadingBoxContainer.nativeElement);
this._loadingBox = new SelectBox([this.getStatusText()], this.getStatusText(), defaultSelectBoxStyles, this.contextViewService, this._loadingBoxContainer.nativeElement);
this._loadingBox.render(this._loadingBoxContainer.nativeElement);
this._register(this._loadingBox);
this._register(attachSelectBoxStyler(this._loadingBox, this.themeService));
this._loadingBoxContainer.nativeElement.className = ''; // Removing the dropdown arrow icon from the right
}
if (this.ariaLabel !== '') {

10
src/sql/workbench/browser/modelComponents/listbox.component.ts
View File

@@ -13,13 +13,12 @@ import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { ListBox } from 'sql/base/browser/ui/listBox/listBox';
import { attachListBoxStyler } from 'sql/platform/theme/common/styler';
import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService';
import { KeyCode } from 'vs/base/common/keyCodes';
import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/platform/dashboard/browser/interfaces';
import { ILogService } from 'vs/platform/log/common/log';
import { defaultListBoxStyles } from 'sql/platform/theme/browser/defaultStyles';
@Component({
selector: 'modelview-listBox',
@@ -35,7 +34,6 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
constructor(
@Inject(forwardRef(() => 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<azdata.ListBoxProper
ngAfterViewInit(): void {
if (this._inputContainer) {
this._input = new ListBox([], this.contextViewService);
this._input = new ListBox({
items: [],
...defaultListBoxStyles
}, this.contextViewService);
this._input.onKeyDown(e => {
if (this._input.selectedOptions.length > 0) {
const key = e.keyCode;
@@ -68,7 +69,6 @@ export default class ListBoxComponent extends ComponentBase<azdata.ListBoxProper
this._input.render(this._inputContainer.nativeElement);
this._register(this._input);
this._register(attachListBoxStyler(this._input, this.themeService));
this._register(this._input.onDidSelect(e => {
this.selectedRow = e.index;
this.fireEvent({