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

fix layout and add css styling for flex item (#2231)

Browse Source
This commit is contained in:
Abbie Petchtes
2018-08-14 15:33:03 -07:00
committed by GitHub
parent d9134d6085
commit 298ddc4195
5 changed files with 13 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/sql/parts/modelComponents/flexContainer.component.ts
View File

@@ -26,7 +26,7 @@ class FlexItem {
template: `
<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.textAlign]="textAlign" [style.order]="getItemOrder(item)" >
<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">
</model-component-wrapper>
</div>
@@ -108,4 +108,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
private getItemOrder(item: FlexItem): number {
return item.config ? item.config.order : 0;
}
private getItemStyles(item: FlexItem): { [key: string]: string } {
return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
}
}

2
src/sql/parts/modelComponents/modelViewContent.component.ts
View File

@@ -25,7 +25,7 @@ import * as sqlops from 'sqlops';
@Component({
selector: 'modelview-content',
template: `
<div *ngIf="rootDescriptor" style="width: 100%; height: 100%;">
<div *ngIf="rootDescriptor" style="width: 100%; height: 100%; position: absolute;">
<model-component-wrapper style="display: block; height: 100%" [descriptor]="rootDescriptor" [modelStore]="modelStore">
</model-component-wrapper>
</div>

2
src/sql/platform/dialog/dialogContainer.component.ts
View File

@@ -30,7 +30,7 @@ export interface DialogComponentParams extends IBootstrapParams {
<h1 class="wizardPageTitle">{{_dialogPane.title}}</h1>
<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
</div>
<modelview-content [modelViewId]="modelViewId">
<modelview-content [modelViewId]="modelViewId" style="flex: 1 1 auto; position: relative;">
</modelview-content>
</div>
<modelview-content [modelViewId]="modelViewId" *ngIf="!_dialogPane || !_dialogPane.displayPageTitle">

4
src/sql/platform/dialog/media/dialogModal.css
View File

@@ -59,5 +59,7 @@
.dialogContainer {
display: flex;
flex-direction: column
flex-direction: column;
height: 100%;
width: 100%;
}

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

@@ -270,6 +270,10 @@ declare module 'sqlops' {
* Default is "1 1 auto".
*/
flex?: string;
/**
* Matches the CSS style key and its available values.
*/
CSSStyles?: { [key: string]: string }
}
export interface FormItemLayout {