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 TableHeaderRowHeight = 28;
type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'ContentView';
type DesignerUIArea = 'PropertiesView' | 'ScriptView' | 'TopContentView' | 'TabsView';
export class Designer extends Disposable implements IThemable {
private _loadingSpinner: LoadingSpinner;
@@ -162,7 +162,7 @@ export class Designer extends Disposable implements IThemable {
}, Sizing.Distribute);
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) => {
this.setComponentValue(definition, component, viewModel);
});
@@ -279,7 +279,7 @@ export class Designer extends Disposable implements IThemable {
private initializeDesigner(): void {
const view = this._input.view;
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 => {
this._tabbedPanel.pushTab(this.createTabView(tab));
@@ -426,7 +426,7 @@ export class Designer extends Disposable implements IThemable {
private createTabView(tab: DesignerTab): IPanelTab {
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 {
identifier: tab.title,
@@ -502,7 +502,7 @@ export class Designer extends Disposable implements IThemable {
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
groupHeaders: HTMLElement[],
parentPath: DesignerEditPath,
setWidth: boolean, area: DesignerUIArea): DesignerUIComponent[] {
area: DesignerUIArea): DesignerUIComponent[] {
const uiComponents = [];
const groupNames = [];
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.
if (groupNames.length < 2) {
componentsToCreate.forEach(component => {
uiComponents.push(this.createComponent(container, component, parentPath, componentMap, setWidth, area));
uiComponents.push(this.createComponent(container, component, parentPath, componentMap, area));
});
} else {
groupNames.forEach(group => {
@@ -527,7 +527,7 @@ export class Designer extends Disposable implements IThemable {
groupHeader.innerText = group;
componentsToCreate.forEach(component => {
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,
parentPath: DesignerEditPath,
componentMap: Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>,
setWidth: boolean,
view: DesignerUIArea): DesignerUIComponent {
const propertyPath = [...parentPath, componentDefinition.propertyName];
let component: DesignerUIComponent;
@@ -560,11 +559,11 @@ export class Designer extends Disposable implements IThemable {
input.onInputFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
if (setWidth && inputProperties.width !== undefined) {
if (view === 'TopContentView' && inputProperties.width) {
input.width = inputProperties.width as number;
}
component = input;
@@ -582,7 +581,7 @@ export class Designer extends Disposable implements IThemable {
dropdown.onDidFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
@@ -599,7 +598,7 @@ export class Designer extends Disposable implements IThemable {
checkbox.onFocus(() => {
if (view === 'PropertiesView') {
this._propertiesPane.updateDescription(componentDefinition);
} else if (view === 'ContentView') {
} else if (view === 'TabsView' || view === 'TopContentView') {
this.updatePropertiesPane(DesignerRootObjectPath);
}
});
@@ -707,7 +706,7 @@ export class Designer extends Disposable implements IThemable {
});
table.grid.onActiveCellChanged.subscribe((e, data) => {
if (view === 'ContentView') {
if (view === 'TabsView' || view === 'TopContentView') {
if (data.row !== undefined) {
this.updatePropertiesPane([...propertyPath, data.row]);
} else {