ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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: ` template: `
<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" <div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width"> [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 [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>
</div> </div>
@@ -108,4 +108,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
private getItemOrder(item: FlexItem): number { private getItemOrder(item: FlexItem): number {
return item.config ? item.config.order : 0; 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({ @Component({
selector: 'modelview-content', selector: 'modelview-content',
template: ` 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 style="display: block; height: 100%" [descriptor]="rootDescriptor" [modelStore]="modelStore">
</model-component-wrapper> </model-component-wrapper>
</div> </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> <h1 class="wizardPageTitle">{{_dialogPane.title}}</h1>
<div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div> <div *ngIf="_dialogPane.description">{{_dialogPane.description}}</div>
</div> </div>
<modelview-content [modelViewId]="modelViewId"> <modelview-content [modelViewId]="modelViewId" style="flex: 1 1 auto; position: relative;">
</modelview-content> </modelview-content>
</div> </div>
<modelview-content [modelViewId]="modelViewId" *ngIf="!_dialogPane || !_dialogPane.displayPageTitle"> <modelview-content [modelViewId]="modelViewId" *ngIf="!_dialogPane || !_dialogPane.displayPageTitle">

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

@@ -59,5 +59,7 @@
.dialogContainer { .dialogContainer {
display: flex; 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". * Default is "1 1 auto".
*/ */
flex?: string; flex?: string;
/**
* Matches the CSS style key and its available values.
*/
CSSStyles?: { [key: string]: string }
} }
export interface FormItemLayout { export interface FormItemLayout {