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

Designer: property descriptions (#17668)

Browse Source 
* format

* added strings

* format doc

* use codicon instead

* show descriptions in property pane only

* fix ssdt string bug

* fix overflow option

* review comments

* review comments

* changes
This commit is contained in:
Aditya Bist
2021-11-16 14:50:05 -08:00
committed by GitHub
parent 6725e07ece
commit 2a127beb28
8 changed files with 119 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -551,6 +551,11 @@ export class Designer extends Disposable implements IThemable {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: args.value });
}
});
input.onInputFocus(() => {
if (!isMainView) {
this._propertiesPane.updateDescription(componentDefinition);
}
});
if (setWidth && inputProperties.width !== undefined) {
input.width = inputProperties.width as number;
}
@@ -566,6 +571,11 @@ export class Designer extends Disposable implements IThemable {
dropdown.onDidSelect((e) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: e.selected });
});
dropdown.onDidFocus(() => {
if (!isMainView) {
this._propertiesPane.updateDescription(componentDefinition);
}
});
component = dropdown;
break;
case 'checkbox':
@@ -578,6 +588,11 @@ export class Designer extends Disposable implements IThemable {
checkbox.onChange((newValue) => {
this.handleEdit({ type: DesignerEditType.Update, path: propertyPath, value: newValue });
});
checkbox.onFocus(() => {
if (!isMainView) {
this._propertiesPane.updateDescription(componentDefinition);
}
});
component = checkbox;
break;
case 'table':

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

@@ -23,11 +23,17 @@ export class DesignerPropertiesPane {
private _componentMap = new Map<string, { defintion: DesignerDataPropertyInfo, component: DesignerUIComponent }>();
private _groupHeaders: HTMLElement[] = [];
// Description variables
private _descriptionContainer: HTMLElement;
private _descriptionTitleContainer: HTMLElement;
private _descriptionTextContainer: HTMLElement;
constructor(container: HTMLElement, private _createComponents: CreateComponentsFunc, private _setComponentValue: SetComponentValueFunc) {
const titleContainer = container.appendChild(DOM.$('.title-container'));
this._titleElement = titleContainer.appendChild(DOM.$('div'));
this._contentElement = container.appendChild(DOM.$('.properties-content.components-grid'));
this._titleElement.innerText = localize('tableDesigner.propertiesPaneTitle', "Properties");
this.createDescriptionComponent(container);
}
public get groupHeaders(): HTMLElement[] {
@@ -42,6 +48,15 @@ export class DesignerPropertiesPane {
return this._objectPath;
}
public updateDescription(definition: DesignerDataPropertyInfo) {
const title: string = definition.componentProperties.title;
const description: string = definition.description;
if (title && description) {
this._descriptionTitleContainer.innerText = title;
this._descriptionTextContainer.innerText = description;
}
}
public clear(): void {
this._componentMap.forEach((value) => {
value.component.dispose();
@@ -52,6 +67,15 @@ export class DesignerPropertiesPane {
this._objectPath = undefined;
}
private createDescriptionComponent(container: HTMLElement) {
this._descriptionContainer = container.appendChild(DOM.$('.description-component'));
this._descriptionTitleContainer = this._descriptionContainer.appendChild(DOM.$('')).appendChild(DOM.$('.description-component-label'));
this._descriptionTitleContainer.classList.add('codicon', 'info');
this._descriptionTextContainer = this._descriptionContainer.appendChild(DOM.$('.description-component-content'));
this._descriptionTitleContainer.innerText = '';
this._descriptionTextContainer.innerText = '';
}
public show(item: ObjectInfo): void {
if (!equals(item.path, this._objectPath)) {
this.clear();

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

@@ -102,3 +102,25 @@
font-weight: bold;
line-height: 25px;
}
.designer-component .description-component {
margin: 15px;
height: 90px;
overflow-y: auto;
}
.designer-component .description-component-label.codicon.info {
background-repeat: no-repeat;
background-position: 2px center;
padding-left: 25px;
background-size: 16px;
font-size: 15px;
font-weight: 600;
margin-block-start: 0px;
scroll-margin-block-end: 0px;
}
.designer-component .description-component-content {
padding-top: 10px;
padding-left: 25px;
}