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

Add display property to ModelView components (#7579)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

28
src/sql/azdata.d.ts vendored
View File

@@ -2619,6 +2619,12 @@ declare module 'azdata' {
updateCssStyles(cssStyles: { [key: string]: string }): Thenable<void>;
enabled: boolean;
/**
* Corresponds to the display CSS property for the element
*/
display: DisplayType;
/**
* Event fired to notify that the component's validity has changed
*/
@@ -2721,12 +2727,34 @@ declare module 'azdata' {
}
/**
* Valid values for the align-items CSS property
*/
export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
/**
* Valid values for the justify-content CSS property
*/
export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
/**
* Valid values for the align-content CSS property
*/
export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
/**
* Valid values for flex-wrap CSS property
*/
export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
/**
* Valid values for the text-align CSS property
*/
export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
/**
* Valid values for the position CSS property
*/
export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
/**
* Valid values for the display CSS property
*/
export type DisplayType = 'inline' | 'block' | 'contents' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'run-in' | 'table' | 'table-caption' | ' table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'table-cell' | 'table-column' | 'table-row' | 'none' | 'initial' | 'inherit' | '';
/**
* The config for a FlexBox-based container. This supports easy

28
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -169,6 +169,12 @@ declare module 'sqlops' {
updateCssStyles(cssStyles: { [key: string]: string }): Thenable<void>;
enabled: boolean;
/**
* Corresponds to the display CSS property for the element
*/
display: DisplayType;
/**
* Event fired to notify that the component's validity has changed
*/
@@ -270,12 +276,34 @@ declare module 'sqlops' {
}
/**
* Valid values for the align-items CSS property
*/
export type AlignItemsType = 'normal' | 'stretch' | 'center' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'baseline' | 'first baseline' | 'last baseline' | 'safe center' | 'unsafe center' | 'inherit' | 'initial' | 'unset';
/**
* Valid values for the justify-content CSS property
*/
export type JustifyContentType = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'initial' | 'inherit';
/**
* Valid values for the align-content CSS property
*/
export type AlignContentType = 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'initial' | 'inherit';
/**
* Valid values for flex-wrap CSS property
*/
export type FlexWrapType = 'nowrap' | 'wrap' | 'wrap-reverse';
/**
* Valid values for the text-align CSS property
*/
export type TextAlignType = 'left' | 'right' | 'center' | 'justify' | 'initial' | 'inherit';
/**
* Valid values for the position CSS property
*/
export type PositionType = 'static' | 'absolute' | 'fixed' | 'relative' | 'sticky' | 'initial' | 'inherit';
/**
* Valid values for the display CSS property
*/
export type DisplayType = 'inline' | 'block' | 'contents' | 'flex' | 'grid' | 'inline-block' | 'inline-flex' | 'inline-grid' | 'inline-table' | 'list-item' | 'run-in' | 'table' | 'table-caption' | ' table-column-group' | 'table-header-group' | 'table-footer-group' | 'table-row-group' | 'table-cell' | 'table-column' | 'table-row' | 'none' | 'initial' | 'inherit' | '';
/**
* The config for a FlexBox-based container. This supports easy

7
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -539,6 +539,13 @@ class ComponentWrapper implements azdata.Component {
this.setProperty('required', v);
}
public get display(): azdata.DisplayType {
return this.properties['display'];
}
public set display(v: azdata.DisplayType) {
this.setProperty('display', v);
}
public get CSSStyles(): { [key: string]: string } {
return this.properties['CSSStyles'];
}

8
src/sql/workbench/browser/modelComponents/componentBase.ts
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, {});
}

2
src/sql/workbench/browser/modelComponents/flexContainer.component.ts
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">

6
src/sql/workbench/browser/modelComponents/text.component.ts
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 {