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

apply css style at the right element (#14144)

Browse Source 
* apply css style at the right element

* make mergeCss protected
This commit is contained in:
Alan Ren
2021-02-03 10:27:12 -08:00
committed by GitHub
parent b390052c86
commit 52a642f351
26 changed files with 155 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/sql/workbench/browser/modelComponents/splitviewContainer.component.ts
View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/flexContainer';
import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy } from '@angular/core';
import { FlexItemLayout, SplitViewLayout, SplitViewContainer } from 'azdata';
import { FlexItemLayout, SplitViewLayout, SplitViewContainer, CssStyles } from 'azdata';
import { FlexItem } from './flexContainer.component';
import { ContainerBase, ComponentBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { Event } from 'vs/base/common/event';
@@ -37,8 +37,7 @@ class SplitPane implements IView {
@Component({
template: `
<div *ngIf="items" class="splitViewContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent" [style.position]="position"
[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height" [style.width]="width">
<div *ngIf="items" class="splitViewContainer" [ngStyle]="CSSStyles">
<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>
@@ -164,10 +163,24 @@ export default class SplitViewContainerImpl extends ContainerBase<FlexItemLayout
public getItemFlex(item: FlexItem): string {
return item.config ? item.config.flex : '1 1 auto';
}
public getItemOrder(item: FlexItem): number {
return item.config ? item.config.order : 0;
}
public getItemStyles(item: FlexItem): { [key: string]: string } {
return item.config && item.config.CSSStyles ? item.config.CSSStyles : {};
}
public get CSSStyles(): CssStyles {
return this.mergeCss(super.CSSStyles, {
'width': this.getWidth(),
'height': this.getHeight(),
'flexFlow': this.flexFlow,
'justifyContent': this.justifyContent,
'position': this.position,
'alignItems': this.alignItems,
'alignContent': this.alignContent
});
}
}