Add display property to ModelView components (#7579)

* Add display property to ModelView components

* Update DisplayType property in sqlops as well
This commit is contained in:
Charles Gagnon
2019-10-09 10:28:18 -07:00
committed by GitHub
parent f475c04ce3
commit 33218bb0e5
6 changed files with 75 additions and 4 deletions

View File

@@ -164,6 +164,14 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, position) => { properties.position = position; }, newValue);
}
public get display(): azdata.DisplayType {
return this.getPropertyOrDefault<azdata.ComponentProperties, azdata.DisplayType>((props) => props.display, undefined);
}
public set display(newValue: azdata.DisplayType) {
this.setPropertyFromUI<azdata.ComponentProperties, string>((properties, display) => { properties.display = display; }, newValue);
}
public get CSSStyles(): { [key: string]: string } {
return this.getPropertyOrDefault<azdata.ComponentProperties, { [key: string]: string }>((props) => props.CSSStyles, {});
}

View File

@@ -20,7 +20,7 @@ export class FlexItem {
@Component({
template: `
<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
<div *ngIf="items" class="flexContainer" [style.display]="display" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width" [style.flex-wrap]="flexWrap">
<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">

View File

@@ -18,15 +18,15 @@ import { TitledComponent } from 'sql/workbench/browser/modelComponents/titledCom
@Component({
selector: 'modelview-text',
template: `
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()">
<p [innerHTML]="getValue()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
<div *ngIf="showDiv;else noDiv" style="display:flex;flex-flow:row;align-items:center;" [style.width]="getWidth()">
<p [innerHTML]="getValue()" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
<p *ngIf="requiredIndicator" style="color:red;margin-left:5px;">*</p>
<div *ngIf="description" tabindex="0" class="modelview-text-tooltip" [attr.aria-label]="description">
<div class="modelview-text-tooltip-content" [innerHTML]="description"></div>
</div>
</div>
<ng-template #noDiv>
<p [style.width]="getWidth()" [innerHTML]="getValue()" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
<p [innerHTML]="getValue()" [style.display]="display" [style.width]="getWidth()" [style.height]="getHeight()" [title]="title" [ngStyle]="this.CSSStyles" (click)="onClick()"></p>
</ng-template>`
})
export default class TextComponent extends TitledComponent implements IComponent, OnDestroy, AfterViewInit {