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

Add headingLevel to textComponent (#16320)

Browse Source 
* Add headingLevel to textComponent

* fixes

* comment

* Add valid heading level check

* change check

* Heading level type

* one more
This commit is contained in:
Charles Gagnon
2021-07-19 19:32:39 -07:00
committed by GitHub
parent a7c6a98ad9
commit 3eefc70cbe
4 changed files with 61 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/sql/workbench/browser/modelComponents/text.component.ts
View File

@@ -24,17 +24,15 @@ import { IThemeService } from 'vs/platform/theme/common/themeService';
selector: 'modelview-text',
template: `
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()" [style.height]="getHeight()">
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
<span #textContainer></span>
<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
<p [title]="title" [ngStyle]="this.CSSStyles" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden"></p>
<div #textContainer id="textContainer"></div>
<span *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</span>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description" role="img">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div>
</div>
<ng-template #noDiv>
<p [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles">
<span #textContainer></span>
</p>
<div #textContainer id="textContainer" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [attr.role]="ariaRole" [attr.aria-hidden]="ariaHidden" [ngStyle]="this.CSSStyles"></div>
</ng-template>`
})
export default class TextComponent extends TitledComponent<azdata.TextComponentProperties> implements IComponent, OnDestroy, AfterViewInit {
@@ -91,6 +89,14 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
return this.getPropertyOrDefault<boolean>((props) => props.requiredIndicator, false);
}
public get headingLevel(): azdata.HeadingLevel | undefined {
return this.getPropertyOrDefault<azdata.HeadingLevel | undefined>(props => props.headingLevel, undefined);
}
public set headingLevel(newValue: azdata.HeadingLevel | undefined) {
this.setPropertyFromUI<azdata.HeadingLevel | undefined>((properties, value) => { properties.headingLevel = value; }, newValue);
}
public override setProperties(properties: { [key: string]: any; }): void {
super.setProperties(properties);
this.updateText();
@@ -113,9 +119,9 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
// First insert any text from the start of the current string fragment up to the placeholder
let curText = text.slice(0, placeholderIndex);
if (curText) {
const textSpan = DOM.$('span');
textSpan.innerText = text.slice(0, placeholderIndex);
(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
const textElement = this.createTextElement();
textElement.innerText = text.slice(0, placeholderIndex);
(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
}
// Now insert the link element
@@ -140,13 +146,31 @@ export default class TextComponent extends TitledComponent<azdata.TextComponentP
// If we have any text left over now insert that in directly
if (text) {
const textSpan = DOM.$('span');
textSpan.innerText = text;
(<HTMLElement>this.textContainer.nativeElement).appendChild(textSpan);
const textElement = this.createTextElement();
textElement.innerText = text;
(<HTMLElement>this.textContainer.nativeElement).appendChild(textElement);
}
}
public get showDiv(): boolean {
return this.requiredIndicator || !!this.description;
}
/**
* Creates the appropriate text element based on the type of text component (regular or header) this is
* @returns The text element
*/
private createTextElement(): HTMLElement {
let headingLevel = this.headingLevel;
let element: HTMLElement;
if (!headingLevel) { // Undefined or 0
element = DOM.$('span');
} else {
element = DOM.$(`h${headingLevel}`);
}
// Manually set the font-size and font-weight since that is set by the base style sheets which may not be what the user wants
element.style.fontSize = this.CSSStyles['font-size']?.toString();
element.style.fontWeight = this.CSSStyles['font-weight']?.toString();
return element;
}
}