ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-20 17:22:51 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add and move editable dropdown (#18589)

Browse Source 
* add and move editable dropdown

* merge dropdowns

* merge dropdown cell factories

* add new column and hide in properties

* remove editable property
This commit is contained in:
Aditya Bist
2022-03-03 20:23:20 -08:00
committed by GitHub
parent be6b23eff0
commit a2c39369c9
13 changed files with 119 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -42,6 +42,8 @@ import { DesignerPropertyPathValidator } from 'sql/workbench/browser/designer/de
import { IThemeService } from 'vs/platform/theme/common/themeService';
import { listActiveSelectionBackground, listActiveSelectionForeground } from 'vs/platform/theme/common/colorRegistry';
import { alert } from 'vs/base/browser/ui/aria/aria';
import { Dropdown, IDropdownStyles } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
import { IListStyles } from 'vs/base/browser/ui/list/listWidget';
export interface IDesignerStyle {
tabbedPanelStyles?: ITabbedPanelStyles;
@@ -50,11 +52,12 @@ export interface IDesignerStyle {
selectBoxStyles?: ISelectBoxStyles;
checkboxStyles?: ICheckboxStyles;
buttonStyles?: IButtonStyles;
dropdownStyles?: IListStyles & IInputBoxStyles & IDropdownStyles;
paneSeparator?: Color;
groupHeaderBackground?: Color;
}
export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox;
export type DesignerUIComponent = InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Dropdown;
export type CreateComponentsFunc = (container: HTMLElement, components: DesignerDataPropertyInfo[], parentPath: DesignerPropertyPath) => DesignerUIComponent[];
export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, component: DesignerUIComponent, data: DesignerViewModel) => void;
@@ -191,7 +194,7 @@ export class Designer extends Disposable implements IThemable {
});
}
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button): void {
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button | Dropdown): void {
if (component instanceof InputBox) {
component.style(this._styles.inputBoxStyles);
} else if (component instanceof Checkbox) {
@@ -202,6 +205,8 @@ export class Designer extends Disposable implements IThemable {
component.style(this._styles.tableStyles);
} else if (component instanceof Button) {
component.style(this._styles.buttonStyles);
} else if (component instanceof Dropdown) {
component.style(this._styles.dropdownStyles);
} else {
component.style(this._styles.selectBoxStyles);
}
@@ -607,19 +612,33 @@ export class Designer extends Disposable implements IThemable {
checkbox.checked = checkboxData.checked;
break;
case 'dropdown':
const dropdown = component as SelectBox;
const defaultDropdownData = definition.componentProperties as DropDownProperties;
const dropdownProperties = definition.componentProperties as DropDownProperties;
const dropdownData = viewModel[definition.propertyName] as DropDownProperties;
if (dropdownData.enabled === false) {
dropdown.disable();
} else {
dropdown.enable();
}
const options = (dropdownData.values || defaultDropdownData.values || []) as string[];
dropdown.setOptions(options);
const options = (dropdownData.values || dropdownProperties.values || []) as string[];
const idx = options?.indexOf(dropdownData.value as string);
if (idx > -1) {
dropdown.select(idx);
let dropdown: Dropdown | SelectBox;
if (dropdownProperties.isEditable) {
dropdown = component as Dropdown;
if (dropdownData.enabled === false) {
dropdown.enabled = false;
} else {
dropdown.enabled = true;
}
dropdown.values = options;
if (idx > -1) {
dropdown.value = options[idx];
}
} else {
dropdown = component as SelectBox;
if (dropdownData.enabled === false) {
dropdown.disable();
} else {
dropdown.enable();
}
dropdown.setOptions(options);
if (idx > -1) {
dropdown.select(idx);
}
}
break;
default:
@@ -703,20 +722,36 @@ export class Designer extends Disposable implements IThemable {
container.appendChild(DOM.$('')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? '';
const dropdownContainer = container.appendChild(DOM.$(''));
const dropdownProperties = componentDefinition.componentProperties as DropDownProperties;
const dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined);
dropdown.setAriaLabel(componentDefinition.componentProperties?.title);
dropdown.render(dropdownContainer);
dropdown.selectElem.style.height = '25px';
dropdown.onDidSelect((e) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected });
});
dropdown.onDidFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
let dropdown;
if (dropdownProperties.isEditable) {
dropdown = new Dropdown(dropdownContainer, this._contextViewProvider, { values: dropdownProperties.values as string[] || [] });
dropdown.ariaLabel = componentDefinition.componentProperties?.title;
dropdown.onValueChange((value) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: value });
});
dropdown.onFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
} else {
dropdown = new SelectBox(dropdownProperties.values as string[] || [], undefined, this._contextViewProvider, undefined);
dropdown.setAriaLabel(componentDefinition.componentProperties?.title);
dropdown.render(dropdownContainer);
dropdown.selectElem.style.height = '25px';
dropdown.onDidSelect((e) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected });
});
dropdown.onDidFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
}
component = dropdown;
break;
case 'checkbox':
@@ -803,7 +838,7 @@ export class Designer extends Disposable implements IThemable {
return {
name: dropdownProperties.title,
field: propertyDefinition.propertyName,
editor: this._tableCellEditorFactory.getSelectBoxEditorClass(propertyPath, dropdownProperties.values as string[]),
editor: this._tableCellEditorFactory.getDropdownEditorClass(propertyPath, dropdownProperties.values as string[], dropdownProperties.isEditable),
width: dropdownProperties.width as number
};
default:

1
src/sql/workbench/browser/designer/interfaces.ts
View File

@@ -149,6 +149,7 @@ export interface CategoryValue {
export interface DropDownProperties extends ComponentProperties {
value?: string | CategoryValue;
values?: string[] | CategoryValue[];
isEditable?: boolean;
}
export interface CheckBoxProperties extends ComponentProperties {

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

@@ -12,7 +12,6 @@ import {
import * as azdata from 'azdata';
import { ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { Dropdown, IDropdownOptions } from 'sql/base/parts/editableDropdown/browser/dropdown';
import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
import { attachSelectBoxStyler } from 'vs/platform/theme/common/styler';
@@ -26,6 +25,7 @@ import { onUnexpectedError } from 'vs/base/common/errors';
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';
@Component({
selector: 'modelview-dropdown',

2
src/sql/workbench/contrib/query/browser/queryActions.ts
View File

@@ -27,7 +27,6 @@ import {
import { QueryEditor } from 'sql/workbench/contrib/query/browser/queryEditor';
import { IQueryModelService } from 'sql/workbench/services/query/common/queryModel';
import { attachEditableDropdownStyler } from 'sql/platform/theme/common/styler';
import { Dropdown } from 'sql/base/parts/editableDropdown/browser/dropdown';
import { Task } from 'sql/workbench/services/tasks/browser/tasksRegistry';
import { IObjectExplorerService } from 'sql/workbench/services/objectExplorer/browser/objectExplorerService';
import { IEditorService } from 'vs/workbench/services/editor/common/editorService';
@@ -46,6 +45,7 @@ import { IRange } from 'vs/editor/common/core/range';
import { getErrorMessage, onUnexpectedError } from 'vs/base/common/errors';
import { IActionViewItem } from 'vs/base/browser/ui/actionbar/actionbar';
import { gen3Version, sqlDataWarehouse } from 'sql/platform/connection/common/constants';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
/**
* Action class that query-based Actions will extend. This base class automatically handles activating and

2
src/sql/workbench/services/connection/browser/connectionWidget.ts
View File

@@ -14,7 +14,6 @@ import { IConnectionComponentCallbacks } from 'sql/workbench/services/connection
import { IConnectionProfile } from 'sql/platform/connection/common/interfaces';
import { ConnectionOptionSpecialType } from 'sql/workbench/api/common/sqlExtHostTypes';
import { ConnectionProfileGroup, IConnectionProfileGroup } from 'sql/platform/connection/common/connectionProfileGroup';
import { Dropdown } from 'sql/base/parts/editableDropdown/browser/dropdown';
import { IConnectionManagementService } from 'sql/platform/connection/common/connectionManagement';
import { ICapabilitiesService } from 'sql/platform/capabilities/common/capabilitiesService';
import { ConnectionProfile } from 'sql/platform/connection/common/connectionProfile';
@@ -34,6 +33,7 @@ import { IClipboardService } from 'vs/platform/clipboard/common/clipboardService
import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
import { ILogService } from 'vs/platform/log/common/log';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
export enum AuthenticationType {
SqlLogin = 'SqlLogin',

2
src/sql/workbench/services/restore/browser/restoreDialog.ts
View File

@@ -34,7 +34,6 @@ import { attachTableStyler, attachInputBoxStyler, attachSelectBoxStyler, attachE
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';
import { Dropdown } from 'sql/base/parts/editableDropdown/browser/dropdown';
import { TabbedPanel, PanelTabIdentifier } from 'sql/base/browser/ui/panel/panel';
import { ServiceOptionType } from 'sql/workbench/api/common/sqlExtHostTypes';
import { IClipboardService } from 'sql/platform/clipboard/common/clipboardService';
@@ -46,6 +45,7 @@ import { attachModalDialogStyler, attachTabbedPanelStyler } from 'sql/workbench/
import { fileFiltersSet } from 'sql/workbench/services/restore/common/constants';
import { ILayoutService } from 'vs/platform/layout/browser/layoutService';
import { attachButtonStyler } from 'vs/platform/theme/common/styler';
import { Dropdown } from 'sql/base/browser/ui/editableDropdown/browser/dropdown';
interface FileListElement {
logicalFileName: string;