input width in designer (#17714)

This commit is contained in:
Alan Ren
2021-11-19 10:12:47 -08:00
committed by GitHub
parent 8e04d3992a
commit 3136ce1b4d

View File

@@ -56,7 +56,7 @@ export type SetComponentValueFunc = (definition: DesignerDataPropertyInfo, compo
const TableRowHeight = 23; const TableRowHeight = 23;
const TableHeaderRowHeight = 28; const TableHeaderRowHeight = 28;
type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'ContentView'; type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'TopContentView' | 'TabsView';
export class Designer extends Disposable implements IThemable { export class Designer extends Disposable implements IThemable {
private _loadingSpinner: LoadingSpinner; private _loadingSpinner: LoadingSpinner;
@@ -162,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, 'PropertiesView'); return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, 'PropertiesView');
}, (definition, component, viewModel) => { }, (definition, component, viewModel) => {
this.setComponentValue(definition, component, viewModel); this.setComponentValue(definition, component, viewModel);
}); });
@@ -279,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, 'ContentView'); this.createComponents(this._topContentContainer, view.components, this._componentMap, this._groupHeaders, DesignerRootObjectPath, 'TopContentView');
} }
view.tabs.forEach(tab => { view.tabs.forEach(tab => {
this._tabbedPanel.pushTab(this.createTabView(tab)); this._tabbedPanel.pushTab(this.createTabView(tab));
@@ -426,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, 'ContentView'); return this.createComponents(container, components, this._componentMap, this._groupHeaders, identifierGetter, 'TabsView');
}); });
return { return {
identifier: tab.title, identifier: tab.title,
@@ -502,7 +502,7 @@ 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, area: DesignerUIArea): DesignerUIComponent[] { area: DesignerUIArea): DesignerUIComponent[] {
const uiComponents = []; const uiComponents = [];
const groupNames = []; const groupNames = [];
const componentsToCreate = area === 'PropertiesView' ? components.filter(component => component.showInPropertiesView !== false) : components; const componentsToCreate = area === 'PropertiesView' ? components.filter(component => component.showInPropertiesView !== false) : components;
@@ -517,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, area)); uiComponents.push(this.createComponent(container, component, parentPath, componentMap, area));
}); });
} else { } else {
groupNames.forEach(group => { groupNames.forEach(group => {
@@ -527,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, area)); uiComponents.push(this.createComponent(container, component, parentPath, componentMap, area));
} }
}); });
}); });
@@ -539,7 +539,6 @@ export class Designer extends Disposable implements IThemable {
componentDefinition: DesignerDataPropertyInfo, componentDefinition: DesignerDataPropertyInfo,
parentPath: DesignerEditPath, parentPath: DesignerEditPath,
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>, componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
setWidth: boolean,
view: DesignerUIArea): DesignerUIComponent { view: DesignerUIArea): DesignerUIComponent {
const propertyPath = [...parentPath, componentDefinition.propertyName]; const propertyPath = [...parentPath, componentDefinition.propertyName];
let component: DesignerUIComponent; let component: DesignerUIComponent;
@@ -560,11 +559,11 @@ export class Designer extends Disposable implements IThemable {
input.onInputFocus(() => { input.onInputFocus(() => {
if (view === 'PropertiesView') { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') { } else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath); this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
if (setWidth && inputProperties.width !== undefined) { if (view === 'TopContentView' && inputProperties.width) {
input.width = inputProperties.width as number; input.width = inputProperties.width as number;
} }
component = input; component = input;
@@ -582,7 +581,7 @@ export class Designer extends Disposable implements IThemable {
dropdown.onDidFocus(() => { dropdown.onDidFocus(() => {
if (view === 'PropertiesView') { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') { } else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath); this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
@@ -599,7 +598,7 @@ export class Designer extends Disposable implements IThemable {
checkbox.onFocus(() => { checkbox.onFocus(() => {
if (view === 'PropertiesView') { if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition); this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') { } else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath); this.updatePropertiesPane(DesignerRootObjectPath);
} }
}); });
@@ -707,7 +706,7 @@ export class Designer extends Disposable implements IThemable {
}); });
table.grid.onActiveCellChanged.subscribe((e, data) => { table.grid.onActiveCellChanged.subscribe((e, data) => {
if (view === 'ContentView') { if (view === 'TabsView' || view === 'TopContentView') {
if (data.row !== undefined) { if (data.row !== undefined) {
this.updatePropertiesPane([...propertyPath, data.row]); this.updatePropertiesPane([...propertyPath, data.row]);
} else { } else {