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

Fix flex container and card layout issues (#1195)

Browse Source 
* Fix main layout issues and add box around card
- Need to improve box size as it's taking too much space

* Fix UI issues with flexContainer and cards

* Simplify card HTML
This commit is contained in:
Kevin Cunnane
2018-04-23 09:54:44 -07:00
committed by GitHub
parent 3d6fb7a8fa
commit 619c816e7f
6 changed files with 65 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,8 @@ class FlexItem {
@Component({
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">
<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
</model-component-wrapper>
@@ -34,6 +35,8 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
@Input() modelStore: IModelStore;
private _flexFlow: string;
private _justifyContent: string;
private _alignItems: string;
private _alignContent: string;
@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
@@ -65,6 +68,8 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
public setLayout (layout: FlexLayout): void {
this._flexFlow = layout.flexFlow ? layout.flexFlow : '';
this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
this._alignItems= layout.alignItems ? layout.alignItems : '';
this._alignContent= layout.alignContent ? layout.alignContent : '';
this.layout();
}
@@ -77,8 +82,16 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
return this._justifyContent;
}
public get alignItems(): string {
return this._alignItems;
}
public get alignContent(): string {
return this._alignContent;
}
private getItemFlex(item: FlexItem): string {
return item.config ? item.config.flex : '';
return item.config ? item.config.flex : '1 1 auto';
}
private getItemOrder(item: FlexItem): number {
return item.config ? item.config.order : 0;