ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-12 11:08:31 -05:00
Code Issues Packages Projects Releases Wiki Activity

use markdown for description pane (#20401)

Browse Source
This commit is contained in:
Alan Ren
2022-08-18 10:46:07 -07:00
committed by GitHub
parent b4a5afe199
commit 874c80a5b4
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -206,7 +206,7 @@ export class Designer extends Disposable implements IThemable {
return this.createComponents(container, components, this._propertiesPane.componentMap, this._propertiesPane.groupHeaders, parentPath, 'PropertiesView');
}, (definition, component, viewModel) => {
this.setComponentValue(definition, component, viewModel);
});
}, this._instantiationService);
}
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button | Dropdown): void {

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

@@ -8,7 +8,9 @@ import { CreateComponentsFunc, DesignerUIComponent, SetComponentValueFunc } from
import { DesignerViewModel, DesignerDataPropertyInfo, DesignerPropertyPath } from 'sql/workbench/browser/designer/interfaces';
import * as DOM from 'vs/base/browser/dom';
import { equals } from 'vs/base/common/objects';
import { MarkdownRenderer } from 'vs/editor/browser/core/markdownRenderer';
import { localize } from 'vs/nls';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export interface ObjectInfo {
path: DesignerPropertyPath;
@@ -18,6 +20,7 @@ export interface ObjectInfo {
}
export class DesignerPropertiesPane {
private readonly _markdownRenderer: MarkdownRenderer;
private _titleElement: HTMLElement;
private _contentElement: HTMLElement;
private _objectPath: DesignerPropertyPath;
@@ -29,12 +32,17 @@ export class DesignerPropertiesPane {
private _descriptionTitleContainer: HTMLElement;
private _descriptionTextContainer: HTMLElement;
constructor(container: HTMLElement, private _createComponents: CreateComponentsFunc, private _setComponentValue: SetComponentValueFunc) {
constructor(container: HTMLElement,
private _createComponents: CreateComponentsFunc,
private _setComponentValue: SetComponentValueFunc,
instantiationService: IInstantiationService) {
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);
this._markdownRenderer = instantiationService.createInstance(MarkdownRenderer, {});
}
public get groupHeaders(): HTMLElement[] {
@@ -58,7 +66,11 @@ export class DesignerPropertiesPane {
const title: string = definition.componentProperties.title || definition.componentProperties.ariaLabel || '';
const description: string = definition.description ?? '';
this._descriptionTitleContainer.innerText = title;
this._descriptionTextContainer.innerText = description;
DOM.clearNode(this._descriptionTextContainer);
if (description) {
const markdownElement = this._markdownRenderer.render({ value: description }).element;
this._descriptionTextContainer.appendChild(markdownElement);
}
}
public clear(): void {