apply css style at the right element (#14144)

* 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

View File

@@ -9,7 +9,7 @@ import {
ElementRef, OnDestroy, AfterViewInit
} from '@angular/core';
import { GroupLayout, GroupContainerProperties } from 'azdata';
import { GroupLayout, GroupContainerProperties, CssStyles } from 'azdata';
import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
import { endsWith } from 'vs/base/common/strings';
@@ -25,7 +25,7 @@ import { ILogService } from 'vs/platform/log/common/log';
<div *ngIf="hasHeader()" [class]="getHeaderClass()" (click)="changeState()" (keydown)="onKeyDown($event)" [tabindex]="isCollapsible()? 0 : -1" [attr.role]="isCollapsible() ? 'button' : null" [attr.aria-expanded]="isCollapsible() ? !collapsed : null">
{{_containerLayout.header}}
</div>
<div #container *ngIf="items" class="modelview-group-container" [style.width]="getContainerWidth()" [style.display]="getContainerDisplayStyle()">
<div #container *ngIf="items" class="modelview-group-container" [ngStyle]="CSSStyles">
<ng-container *ngFor="let item of items">
<div class="modelview-group-row" >
<div class="modelview-group-cell">
@@ -132,4 +132,11 @@ export default class GroupContainer extends ContainerBase<GroupLayout, GroupCont
this._changeRef.detectChanges();
}
}
public get CSSStyles(): CssStyles {
return this.mergeCss(super.CSSStyles, {
'display': this.getContainerDisplayStyle(),
'width': this.getContainerWidth(),
});
}
}