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

Properties widget updates (#9893)

Browse Source 
* move properties widget collapse to bottom

* fix double bottom border for high contrast

* show title when collapsed

* move css to classes

* vertical center collapse icon
This commit is contained in:
Kim Santiago
2020-04-08 14:41:31 -07:00
committed by GitHub
parent ffdde0209b
commit b93f43d1c2
9 changed files with 111 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,18 +4,18 @@
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
-->
<div style="display: flex; flex-flow: column; overflow: hidden; height: 100%; width: 100%">
<div class="widgetWrapper">
<div #header>
<div style="display: flex; flex: 0 0; padding: 3px 0 3px 0;">
<span *ngIf="_config.icon" [ngClass]="['icon', _config.icon]" style="display: inline-block; padding: 10px; margin-left: 5px"></span>
<span *ngIf="_config.name" style="margin-left: 5px;flex:1 1;">{{_config.name}}</span>
<span *ngIf="!_config.name" style="flex:1 1"></span>
<span #actionbar style="flex: 0 0 auto; align-self: end"></span>
<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>
</div>
</div>
<ng-template [ngIf]="!collapsed">
<ng-template component-host>
</ng-template>
</ng-template>
<span #bottomActionbar class="bottomActionbar"></span>
</div>

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

@@ -51,9 +51,12 @@ const componentMap: { [x: string]: Type<IDashboardWidget> } = {
export class DashboardWidgetWrapper extends AngularDisposable implements OnInit {
@Input() private _config: WidgetConfig;
@Input() private collapsable = false;
@Input() private bottomCollapse = false;
@Input() private toggleMore = true;
private _collapseAction: CollapseWidgetAction;
private _collapsed = false;
private _showTitle = true;
public get collapsed(): boolean {
return this._collapsed;
@@ -71,6 +74,14 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
}
}
public get showTitle(): boolean {
return this._showTitle;
}
public set showTitle(val: boolean) {
this._showTitle = val;
}
@memoize
public get guid(): string {
return generateUuid();
@@ -79,9 +90,11 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
private _actions: Array<Action>;
private _component: IDashboardWidget;
private _actionbar: ActionBar;
private _bottomActionbar: ActionBar;
@ViewChild('header', { read: ElementRef }) private header: ElementRef;
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
@ViewChild('bottomActionbar', { read: ElementRef }) private _bottomActionbarRef: ElementRef;
@ViewChild(ComponentHostDirective) componentHost: ComponentHostDirective;
constructor(
@@ -110,12 +123,19 @@ export class DashboardWidgetWrapper extends AngularDisposable implements OnInit
}
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);
this._actionbar.push(this._collapseAction, { icon: true, label: false });
if (this.bottomCollapse) {
this._bottomActionbar.push(this._collapseAction, { icon: true, label: false });
} else {
this._actionbar.push(this._collapseAction, { icon: true, label: false });
}
}
if (this.toggleMore) {
this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
}
this._actionbar.push(this.instantiationService.createInstance(ToggleMoreWidgetAction, this._actions as Array<IAction>, this._component.actionsContext), { icon: true, label: false });
}
this.layout();
}

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

@@ -6,3 +6,43 @@
dashboard-widget-wrapper .action-label {
padding: 7px;
}
dashboard-widget-wrapper .widgetWrapper {
display: flex;
flex-flow: column;
overflow: hidden;
height: 100%;
width: 100%;
}
dashboard-widget-wrapper .widgetHeader {
display: flex;
flex: 0 0;
padding: 3px 0 3px 0;
}
dashboard-widget-wrapper .icon {
display: inline-block;
padding: 10px;
margin-left: 5px;
}
dashboard-widget-wrapper .widgetTitle {
margin-left: 5px;
flex: 1 1;
}
dashboard-widget-wrapper .noTitle {
flex:1 1;
}
dashboard-widget-wrapper .actionbar {
flex: 0 0 auto;
align-self: end;
}
dashboard-widget-wrapper .bottomActionbar {
flex: 0 0 auto;
align-self: center;
margin-top: -28px;
}