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

add option to hide the widget title (#10222)

Browse Source 
* extend widget container

* remove title

* Revert "extend widget container"

* showTitle option

* rename to showHeader

* comments and refactoring
This commit is contained in:
Alan Ren
2020-05-01 16:58:30 -07:00
committed by GitHub
parent 52abcd68af
commit cb2a02d82c
6 changed files with 75 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html
View File

@@ -5,17 +5,17 @@
*--------------------------------------------------------------------------------------------*/
-->
<div class="widgetWrapper">
<div #header>
<div #header *ngIf="!_config.hideHeader">
<div class="widgetHeader">
<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]"></span>
<span *ngIf="_config.name && _showTitle" class="widgetTitle">{{_config.name}}</span>
<span *ngIf="!_config.name" class="noTitle"></span>
<span #actionbar class="actionbar"></span>
<span *ngIf="showActionBar" #actionbar class="actionbar"></span>
</div>
</div>
<ng-template [ngIf]="!collapsed">
<ng-template component-host>
</ng-template>
</ng-template>
<span #bottomActionbar class="bottomActionbar {{collapsed ? 'collapsed' : ''}}"></span>
<span #bottomActionbar *ngIf="showBottomActionBar" class="bottomActionbar {{collapsed ? 'collapsed' : ''}}"></span>
</div>

114
src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts
View File

@@ -122,25 +122,37 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
this.loadWidget();
}
this._changeref.detectChanges();
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
if (this._actions) {
if (this.collapsable) {
this._collapseAction = this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed);
if (this.bottomCollapse) {
this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
this._bottomActionbarRef.nativeElement.style.display = 'block';
} else {
this._actionbar.push(this._collapseAction, { icon: true, label: false });
}
this._collapseAction = this.collapsable ? this.instantiationService.createInstance(CollapseWidgetAction, this._bootstrap.getUnderlyingUri(), this.guid, this.collapsed) : undefined;
// top action bar
if (this.showActionBar) {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
if (this.collapsable && !this.bottomCollapse) {
this._actionbar.push(this._collapseAction, { icon: true, label: false });
}
if (this.toggleMore) {
if (this._actions && this.toggleMore) {
this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
}
}
// bottom action bar
if (this.showBottomActionBar) {
this._bottomActionbar = new ActionBar(this._bottomActionbarRef.nativeElement);
this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
}
this.layout();
}
private get showActionBar(): boolean {
return !this._config.hideHeader && ((this.collapsable && !this.bottomCollapse) || (this._actions && this.toggleMore));
}
private get showBottomActionBar(): boolean {
return this.collapsable && this.bottomCollapse;
}
public refresh(): void {
if (!this.collapsed && this._component && this._component.refresh) {
this._component.refresh();
@@ -241,50 +253,52 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
}
private updateTheme(theme: IColorTheme): void {
const el = <HTMLElement>this._ref.nativeElement;
const headerEl: HTMLElement = this.header.nativeElement;
let borderColor = theme.getColor(themeColors.DASHBOARD_BORDER);
let backgroundColor = theme.getColor(colors.editorBackground, true);
const foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
const border = theme.getColor(colors.contrastBorder, true);
if (!this._config.hideHeader) {
const el = <HTMLElement>this._ref.nativeElement;
const headerEl: HTMLElement = this.header.nativeElement;
let borderColor = theme.getColor(themeColors.DASHBOARD_BORDER);
let backgroundColor = theme.getColor(colors.editorBackground, true);
const foregroundColor = theme.getColor(themeColors.SIDE_BAR_FOREGROUND, true);
const border = theme.getColor(colors.contrastBorder, true);
if (this._config.background_color) {
backgroundColor = theme.getColor(this._config.background_color);
}
if (this._config.background_color) {
backgroundColor = theme.getColor(this._config.background_color);
}
if (this._config.border === 'none') {
borderColor = undefined;
}
if (this._config.border === 'none') {
borderColor = undefined;
}
if (backgroundColor) {
el.style.backgroundColor = backgroundColor.toString();
}
if (backgroundColor) {
el.style.backgroundColor = backgroundColor.toString();
}
if (foregroundColor) {
el.style.color = foregroundColor.toString();
}
if (foregroundColor) {
el.style.color = foregroundColor.toString();
}
let borderString = undefined;
if (border) {
borderString = border.toString();
el.style.borderColor = borderString;
el.style.borderWidth = '1px';
el.style.borderStyle = 'solid';
} else if (borderColor) {
borderString = borderColor;
el.style.border = '1px solid ' + borderColor;
} else {
el.style.border = 'none';
}
let borderString = undefined;
if (border) {
borderString = border.toString();
el.style.borderColor = borderString;
el.style.borderWidth = '1px';
el.style.borderStyle = 'solid';
} else if (borderColor) {
borderString = borderColor;
el.style.border = '1px solid ' + borderColor;
} else {
el.style.border = 'none';
}
if (this._config.fontSize) {
headerEl.style.fontSize = this._config.fontSize;
}
if (this._config.fontWeight) {
headerEl.style.fontWeight = this._config.fontWeight;
}
if (this._config.padding) {
headerEl.style.padding = this._config.padding;
if (this._config.fontSize) {
headerEl.style.fontSize = this._config.fontSize;
}
if (this._config.fontWeight) {
headerEl.style.fontWeight = this._config.fontWeight;
}
if (this._config.padding) {
headerEl.style.padding = this._config.padding;
}
}
}
}

1
src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css
View File

@@ -45,7 +45,6 @@ dashboard-widget-wrapper .actionbar {
dashboard-widget-wrapper .bottomActionbar {
align-self: center;
display: none;
}
dashboard-widget-wrapper .bottomActionbar.collapsed {