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

properties pane improvements (#17700)

Browse Source
This commit is contained in:
Alan Ren
2021-11-18 10:41:12 -08:00
committed by GitHub
parent 7c26e14605
commit a273c54ebb
4 changed files with 43 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,6 +56,8 @@ export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, compo
const TableRowHeight = 23; const TableRowHeight = 23;
const TableHeaderRowHeight = 28; const TableHeaderRowHeight = 28;
type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'ContentView';
export class Designer extends Disposable implements IThemable { export class Designer extends Disposable implements IThemable {
private _loadingSpinner: LoadingSpinner; private _loadingSpinner: LoadingSpinner;
private _horizontalSplitViewContainer: HTMLElement; private _horizontalSplitViewContainer: HTMLElement;
@@ -160,7 +162,7 @@ export class Designer extends Disposable implements IThemable {
}, Sizing.Distribute); }, Sizing.Distribute);
this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, components, parentPath) => { this._propertiesPane = new DesignerPropertiesPane(this._propertiesPaneContainer, (container, components, parentPath) => {
return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, false, false); return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, false, 'PropertiesView');
}, (definition, component, viewModel) => { }, (definition, component, viewModel) => {
this.setComponentValue(definition, component, viewModel); this.setComponentValue(definition, component, viewModel);
}); });
@@ -217,6 +219,8 @@ export class Designer extends Disposable implements IThemable {
this._propertiesPane.groupHeaders.forEach((header) => { this._propertiesPane.groupHeaders.forEach((header) => {
this.styleGroupHeader(header); this.styleGroupHeader(header);
}); });
this._propertiesPane.descriptionElement.style.borderColor = styles.paneSeparator.toString();
} }
public layout(dimension: DOM.Dimension) { public layout(dimension: DOM.Dimension) {
@@ -275,7 +279,7 @@ export class Designer extends Disposable implements IThemable {
private initializeDesigner(): void { private initializeDesigner(): void {
const view = this._input.view; const view = this._input.view;
if (view.components) { if (view.components) {
this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, true, true); this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, true, 'ContentView');
} }
view.tabs.forEach(tab => { view.tabs.forEach(tab => {
this._tabbedPanel.pushTab(this.createTabView(tab)); this._tabbedPanel.pushTab(this.createTabView(tab));
@@ -422,7 +426,7 @@ export class Designer extends Disposable implements IThemable {
private createTabView(tab: DesignerTab): IPanelTab { private createTabView(tab: DesignerTab): IPanelTab {
const view = new DesignerTabPanelView(tab, (container, components, identifierGetter) => { const view = new DesignerTabPanelView(tab, (container, components, identifierGetter) => {
return this.createComponents(container, components, this._componentMap, this._groupHeaders, identifierGetter, true, true); return this.createComponents(container, components, this._componentMap, this._groupHeaders, identifierGetter, true, 'ContentView');
}); });
return { return {
identifier: tab.title, identifier: tab.title,
@@ -498,10 +502,10 @@ export class Designer extends Disposable implements IThemable {
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>, componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
groupHeaders: HTMLElement[], groupHeaders: HTMLElement[],
parentPath: DesignerEditPath, parentPath: DesignerEditPath,
setWidth: boolean, isMainView: boolean): DesignerUIComponent[] { setWidth: boolean, area: DesignerUIArea): DesignerUIComponent[] {
const uiComponents = []; const uiComponents = [];
const groupNames = []; const groupNames = [];
const componentsToCreate = !isMainView ? components.filter(component => component.showInPropertiesView !== false) : components; const componentsToCreate = area === 'PropertiesView' ? components.filter(component => component.showInPropertiesView !== false) : components;
componentsToCreate.forEach(component => { componentsToCreate.forEach(component => {
// Set the default group name if not set (undefined or null). // Set the default group name if not set (undefined or null).
component.group = component.group || localize('designer.generalGroupName', "General"); component.group = component.group || localize('designer.generalGroupName', "General");
@@ -513,7 +517,7 @@ export class Designer extends Disposable implements IThemable {
// only show groups when there are multiple of them. // only show groups when there are multiple of them.
if (groupNames.length < 2) { if (groupNames.length < 2) {
componentsToCreate.forEach(component => { componentsToCreate.forEach(component => {
uiComponents.push(this.createComponent(container, component, parentPath, componentMap, setWidth, isMainView)); uiComponents.push(this.createComponent(container, component, parentPath, componentMap, setWidth, area));
}); });
} else { } else {
groupNames.forEach(group => { groupNames.forEach(group => {
@@ -523,7 +527,7 @@ export class Designer extends Disposable implements IThemable {
groupHeader.innerText = group; groupHeader.innerText = group;
componentsToCreate.forEach(component => { componentsToCreate.forEach(component => {
if (component.group === group) { if (component.group === group) {
uiComponents.push(this.createComponent(container, component, parentPath, componentMap, setWidth, isMainView)); uiComponents.push(this.createComponent(container, component, parentPath, componentMap, setWidth, area));
} }
}); });
}); });
@@ -536,7 +540,7 @@ export class Designer extends Disposable implements IThemable {
parentPath: DesignerEditPath, parentPath: DesignerEditPath,
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>, componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
setWidth: boolean, setWidth: boolean,
isMainView: boolean): DesignerUIComponent { view: DesignerUIArea): DesignerUIComponent {
const propertyPath = [...parentPath, componentDefinition.propertyName]; const propertyPath = [...parentPath, componentDefinition.propertyName];
let component: DesignerUIComponent; let component: DesignerUIComponent;
switch (componentDefinition.componentType) { switch (componentDefinition.componentType) {
@@ -554,8 +558,10 @@ export class Designer extends Disposable implements IThemable {
} }
}); });
input.onInputFocus(() => { input.onInputFocus(() => {
if (!isMainView) { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
if (setWidth && inputProperties.width !== undefined) { if (setWidth && inputProperties.width !== undefined) {
@@ -574,8 +580,10 @@ export class Designer extends Disposable implements IThemable {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected }); this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected });
}); });
dropdown.onDidFocus(() => { dropdown.onDidFocus(() => {
if (!isMainView) { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
component = dropdown; component = dropdown;
@@ -589,14 +597,16 @@ export class Designer extends Disposable implements IThemable {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue }); this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue });
}); });
checkbox.onFocus(() => { checkbox.onFocus(() => {
if (!isMainView) { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
component = checkbox; component = checkbox;
break; break;
case 'table': case 'table':
if (!isMainView) { if (view === 'PropertiesView') {
container.appendChild(DOM.$('.full-row')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? ''; container.appendChild(DOM.$('.full-row')).appendChild(DOM.$('span.component-label')).innerText = componentDefinition.componentProperties?.title ?? '';
} }
const tableProperties = componentDefinition.componentProperties as DesignerTableProperties; const tableProperties = componentDefinition.componentProperties as DesignerTableProperties;
@@ -695,15 +705,21 @@ export class Designer extends Disposable implements IThemable {
table.grid.onBeforeEditCell.subscribe((e, data): boolean => { table.grid.onBeforeEditCell.subscribe((e, data): boolean => {
return data.item[data.column.field].enabled !== false; return data.item[data.column.field].enabled !== false;
}); });
if (isMainView === true) {
table.grid.onActiveCellChanged.subscribe((e, data) => { table.grid.onActiveCellChanged.subscribe((e, data) => {
if (view === 'ContentView') {
if (data.row !== undefined) { if (data.row !== undefined) {
this.updatePropertiesPane([...propertyPath, data.row]); this.updatePropertiesPane([...propertyPath, data.row]);
} else { } else {
this.updatePropertiesPane(DesignerRootObjectPath); this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); } else if (view === 'PropertiesView') {
} if (data.row !== undefined) {
this._propertiesPane.updateDescription(componentDefinition);
}
}
});
component = table; component = table;
break; break;
default: default:

6
src/sql/workbench/browser/designer/designerPropertiesPane.ts
View File

@@ -40,6 +40,10 @@ export class DesignerPropertiesPane {
return this._groupHeaders; return this._groupHeaders;
} }
public get descriptionElement(): HTMLElement {
return this._descriptionContainer;
}
public get componentMap(): Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }> { public get componentMap(): Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }> {
return this._componentMap; return this._componentMap;
} }
@@ -50,7 +54,7 @@ export class DesignerPropertiesPane {
public updateDescription(definition: DesignerDataPropertyInfo) { public updateDescription(definition: DesignerDataPropertyInfo) {
this._descriptionContainer.style.display = 'block'; this._descriptionContainer.style.display = 'block';
const title: string = definition.componentProperties.title ?? ''; const title: string = definition.componentProperties.title || definition.componentProperties.ariaLabel || '';
const description: string = definition.description ?? ''; const description: string = definition.description ?? '';
this._descriptionTitleContainer.innerText = title; this._descriptionTitleContainer.innerText = title;
this._descriptionTextContainer.innerText = description; this._descriptionTextContainer.innerText = description;

10
src/sql/workbench/browser/designer/media/designer.css
View File

@@ -103,9 +103,10 @@
} }
.designer-component .description-component { .designer-component .description-component {
margin: 15px; padding: 10px;
height: 90px; flex: 0 0 auto;
overflow-y: auto; border-width: 1px 0 0 0;
border-style: solid;
} }
.designer-component .description-component-label.codicon.info { .designer-component .description-component-label.codicon.info {
@@ -113,8 +114,7 @@
background-position: 2px center; background-position: 2px center;
padding-left: 25px; padding-left: 25px;
background-size: 16px; background-size: 16px;
font-size: 15px; font-weight: bold;
font-weight: 600;
margin-block-start: 0px; margin-block-start: 0px;
scroll-margin-block-end: 0px; scroll-margin-block-end: 0px;
} }

1
src/sql/workbench/services/tableDesigner/browser/tableDesignerComponentInput.ts
View File

@@ -374,6 +374,7 @@ export class TableDesignerComponentInput implements DesignerComponentInput {
{ {
componentType: 'table', componentType: 'table',
propertyName: designers.TableForeignKeyProperty.Columns, propertyName: designers.TableForeignKeyProperty.Columns,
description: localize('designer.foreignkey.description.columnMapping', "The mapping between foreign key columns and primary key columns."),
group: localize('tableDesigner.foreignKeyColumns', "Column Mapping"), group: localize('tableDesigner.foreignKeyColumns', "Column Mapping"),
componentProperties: <DesignerTableProperties>{ componentProperties: <DesignerTableProperties>{
ariaLabel: localize('tableDesigner.foreignKeyColumns', "Column Mapping"), ariaLabel: localize('tableDesigner.foreignKeyColumns', "Column Mapping"),