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

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'); 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);
}); }, this._instantiationService);
} }
private styleComponent(component: TabbedPanel | InputBox | Checkbox | Table<Slick.SlickData> | SelectBox | Button | Dropdown): void { 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 { DesignerViewModel, DesignerDataPropertyInfo, DesignerPropertyPath } from 'sql/workbench/browser/designer/interfaces';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import { equals } from 'vs/base/common/objects'; import { equals } from 'vs/base/common/objects';
import { MarkdownRenderer } from 'vs/editor/browser/core/markdownRenderer';
import { localize } from 'vs/nls'; import { localize } from 'vs/nls';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export interface ObjectInfo { export interface ObjectInfo {
path: DesignerPropertyPath; path: DesignerPropertyPath;
@@ -18,6 +20,7 @@ export interface ObjectInfo {
} }
export class DesignerPropertiesPane { export class DesignerPropertiesPane {
private readonly _markdownRenderer: MarkdownRenderer;
private _titleElement: HTMLElement; private _titleElement: HTMLElement;
private _contentElement: HTMLElement; private _contentElement: HTMLElement;
private _objectPath: DesignerPropertyPath; private _objectPath: DesignerPropertyPath;
@@ -29,12 +32,17 @@ export class DesignerPropertiesPane {
private _descriptionTitleContainer: HTMLElement; private _descriptionTitleContainer: HTMLElement;
private _descriptionTextContainer: 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')); const titleContainer = container.appendChild(DOM.$('.title-container'));
this._titleElement = titleContainer.appendChild(DOM.$('div')); this._titleElement = titleContainer.appendChild(DOM.$('div'));
this._contentElement = container.appendChild(DOM.$('.properties-content.components-grid')); this._contentElement = container.appendChild(DOM.$('.properties-content.components-grid'));
this._titleElement.innerText = localize('tableDesigner.propertiesPaneTitle', "Properties"); this._titleElement.innerText = localize('tableDesigner.propertiesPaneTitle', "Properties");
this.createDescriptionComponent(container); this.createDescriptionComponent(container);
this._markdownRenderer = instantiationService.createInstance(MarkdownRenderer, {});
} }
public get groupHeaders(): HTMLElement[] { public get groupHeaders(): HTMLElement[] {
@@ -58,7 +66,11 @@ export class DesignerPropertiesPane {
const title: string = definition.componentProperties.title || definition.componentProperties.ariaLabel || ''; 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; DOM.clearNode(this._descriptionTextContainer);
if (description) {
const markdownElement = this._markdownRenderer.render({ value: description }).element;
this._descriptionTextContainer.appendChild(markdownElement);
}
} }
public clear(): void { public clear(): void {