From cb2a02d82c1890da0989b82259db9dc381d04c1b Mon Sep 17 00:00:00 2001 From: Alan Ren Date: Fri, 1 May 2020 16:58:30 -0700 Subject: [PATCH] add option to hide the widget title (#10222) * extend widget container * remove title * Revert "extend widget container" * showTitle option * rename to showHeader * comments and refactoring --- .../dashboardWidgetWrapper.component.html | 6 +- .../dashboardWidgetWrapper.component.ts | 114 ++++++++++-------- .../contents/dashboardWidgetWrapper.css | 1 - .../browser/core/dashboardTab.contribution.ts | 6 +- .../dashboard/browser/core/dashboardWidget.ts | 1 + .../pages/dashboardPageContribution.ts | 4 + 6 files changed, 75 insertions(+), 57 deletions(-) diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html index b8bb60ba37..39da3d750b 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.html @@ -5,17 +5,17 @@ *--------------------------------------------------------------------------------------------*/ -->
-
+
{{_config.name}} - +
- +
diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts index e51bc2b180..27a724feb0 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.component.ts @@ -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, 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 = 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 = 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; + } } } } diff --git a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css index 851bc84886..7533ddf821 100644 --- a/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css +++ b/src/sql/workbench/contrib/dashboard/browser/contents/dashboardWidgetWrapper.css @@ -45,7 +45,6 @@ dashboard-widget-wrapper .actionbar { dashboard-widget-wrapper .bottomActionbar { align-self: center; - display: none; } dashboard-widget-wrapper .bottomActionbar.collapsed { diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardTab.contribution.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardTab.contribution.ts index 6bc86994c0..ce6efaf6b8 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardTab.contribution.ts +++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardTab.contribution.ts @@ -281,14 +281,14 @@ const CommonTabs: IDashboardTab[] = [ container: { 'widgets-container': [ { - name: localize('databasesWidgetTitle', "Search"), gridItemConfig: { sizex: 3, - sizey: 3 + sizey: 2 }, widget: { 'explorer-widget': {} - } + }, + hideHeader: true } ] } diff --git a/src/sql/workbench/contrib/dashboard/browser/core/dashboardWidget.ts b/src/sql/workbench/contrib/dashboard/browser/core/dashboardWidget.ts index f2ec77ab70..c3f9953ee5 100644 --- a/src/sql/workbench/contrib/dashboard/browser/core/dashboardWidget.ts +++ b/src/sql/workbench/contrib/dashboard/browser/core/dashboardWidget.ts @@ -34,6 +34,7 @@ export interface WidgetConfig { fontSize?: string; fontWeight?: string; padding?: string; + hideHeader?: boolean; } export interface TabConfig extends IDashboardTab { diff --git a/src/sql/workbench/contrib/dashboard/browser/pages/dashboardPageContribution.ts b/src/sql/workbench/contrib/dashboard/browser/pages/dashboardPageContribution.ts index 8afa5454f3..7497c8e584 100644 --- a/src/sql/workbench/contrib/dashboard/browser/pages/dashboardPageContribution.ts +++ b/src/sql/workbench/contrib/dashboard/browser/pages/dashboardPageContribution.ts @@ -57,6 +57,10 @@ export function generateDashboardWidgetSchema(type?: 'database' | 'server', exte properties: schemas, minItems: 1, maxItems: 1 + }, + hideHeader: { + type: 'boolean', + description: localize('azdata.extension.contributes.widget.hideHeader', "Whether to hide the header of the widget, default value is false") } } };