mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-18 17:22:45 -05:00
dashboard improvement (#9730)
* dashboard improvement - WIP (#8836) * wip * wip * tabgroup * tab group * agent views * clean up * formats * feedback * fix error * contribute top level server/db dashboard tab (#8868) * tabbedPanel component (#8861) * tabbed panel * tabbed panel * fix errors * revert main.ts changes * use margin * address comments * remove orientation property * content tab group (#8878) * add databases tab * use more extensible approach * remove unnecessary code * add when expression * objects tab for database dashboard (#8892) * fix build errors * fix build error * Dashboard toolbar (#9118) * remove old toolbar with only edit and refresh * remove tasks widgets from server and databases dashboards * adding toolbar to dashboardpage and clicking new query works * restore and new notebook now do something * add backup to toolbar for database dashboards * new notebook connects to db * only show backup and restore for non-azure * new backup and restore svgs * clean up * got toolbar actions to show up from contribution * some cleanup and add database dashboard toolbar contributions * don't show all tasks when there should be no tasks * fix toolbar showing multiple times when switching opening another dashboard from OE * only show toolbar for home page * update to new icons - same icons for light and dark theme * don't show separator if there aren't any actions * read toolbar actions from tasks-widget * remove tasks widget from home dashboard page * show extension's actions in toolbar * clean up * more cleaning up * fix extension actions not always loading the first time * add configure dashboard * remove old edit icon css * change tasks back to original order * make sure tasks widget is the one being removed * collapsible tab panel (#9221) * collapsible vertical tab panel * fix lint error * comments batch 1 * pr comments * update new query icon (#9351) * Update toolbar actions (#9313) * remove edit and configure dashboard and add refresh to toolbar for other dashboard pages too * Add refresh for tabs that have container type with refresh implemented * change refresh to only refresh the current tab * remove map for tab to actions * add back configure dashboard to home toolbar * check if index is -1 before trying to remove tasks widget from widgets * Move objects widget back to database home tab (#9432) * move objects widget back to database home tab and reorder toolbar * change order of actions back to previous order * Allow extensions to add actions to home toolbar (#9269) * add support for extensions to add actions to home toolbar * fix spacing * use menu contribution point * undo previous changes that added dashboardToolbarHomeAction contribution * remove home from name * add context key for tab name * allow actions to also be added to the toolbar of other tabs * add extension contributed actions even if no tasks-widget * fix refresh being added twice after merging * hide the tab list when collapsed (#9529) * update the order of css selectors (#9606) * Update dashboard style to be closer to mockups (#9570) * update style to be closer to mockups * tab panel styling * change back tab styling for tabs in a tab contributed by an extension * change color of borders when theme changes * set dark theme active tab background to same as OE for now * update border colors * move colors to theme file * fix a few issues (#9690) * couple fixes * comments * small dashboard toolbar fixes (#9695) * fix backup icon in toolbar * fix database page toolbar border color * add back center center in common-icons.css (#9703) * change padding so bottom border shows again (#9710) * tab panel fixes (#9724) * tab panel fixes * fix package.nls.json * feedbacks (#9761) * feedbacks * remove comments Co-authored-by: Kim Santiago <31145923+kisantia@users.noreply.github.com>
This commit is contained in:
Alan Ren
@@ -0,0 +1,53 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
.tabbedpanel-component {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel .tabContainer {
|
||||
border-style: solid;
|
||||
border-color: rgb(237, 235, 233);
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.vs-dark .tabbedpanel-component .tabbedPanel .tabContainer, .hc-black .tabbedpanel-component .tabbedPanel .tabContainer {
|
||||
border-color: rgba(128, 128, 128, 0.5);;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel.vertical .tabContainer {
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel.horizontal .tabContainer {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel .tab>.tabLabel.active {
|
||||
border-bottom: 0px solid;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel.vertical .tabList .tab-header {
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel.horizontal .tabList .tab-header {
|
||||
border-color: rgb(214, 214, 214);
|
||||
border-width: 0 1px 0 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabbedPanel .tabList .tab .tabLabel {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tabbedpanel-component .tabList .tab-header.active {
|
||||
background-color: rgb(237, 235, 233);
|
||||
}
|
||||
|
||||
.vs-dark .tabbedpanel-component .tabList .tab-header.active, .hc-black .tabbedpanel-component .tabList .tab-header.active {
|
||||
background-color: rgba(128, 128, 128, 0.5);
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
<!--
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
-->
|
||||
<div class="tabbedpanel-component">
|
||||
<panel (onTabChange)="handleTabChange($event)">
|
||||
<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
|
||||
[identifier]="tab.id" [type]="tab.type">
|
||||
<ng-template>
|
||||
<ng-container *ngIf="tab.type === 'tab'">
|
||||
{{tab.title}}
|
||||
<model-component-wrapper [descriptor]="tab.content" [modelStore]="modelStore">
|
||||
</model-component-wrapper>
|
||||
</ng-container>
|
||||
</ng-template>
|
||||
</tab>
|
||||
</panel>
|
||||
</div>
|
||||
@@ -0,0 +1,96 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the Source EULA. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, forwardRef, Inject, Input, OnDestroy, ViewChild } from '@angular/core';
|
||||
import { NavigationBarLayout, PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
|
||||
import { TabType } from 'sql/base/browser/ui/panel/tab.component';
|
||||
// eslint-disable-next-line code-import-patterns
|
||||
import { TabOrientation, TabbedPanelLayout } from 'sql/workbench/api/common/sqlExtHostTypes';
|
||||
import { ContainerBase } from 'sql/workbench/browser/modelComponents/componentBase';
|
||||
import { ComponentEventType, IComponent, IComponentDescriptor, IModelStore } from 'sql/platform/dashboard/browser/interfaces';
|
||||
import 'vs/css!./media/tabbedPanel';
|
||||
|
||||
export interface TabConfig {
|
||||
title: string;
|
||||
id?: string;
|
||||
group: string;
|
||||
}
|
||||
|
||||
interface Tab {
|
||||
title: string;
|
||||
content?: IComponentDescriptor;
|
||||
id?: string;
|
||||
type: TabType;
|
||||
}
|
||||
|
||||
@Component({
|
||||
templateUrl: decodeURI(require.toUrl('./tabbedPanel.component.html'))
|
||||
})
|
||||
export default class TabbedPanelComponent extends ContainerBase<TabConfig> implements IComponent, OnDestroy, AfterViewInit {
|
||||
@Input() descriptor: IComponentDescriptor;
|
||||
@Input() modelStore: IModelStore;
|
||||
@ViewChild(PanelComponent) private _panel: PanelComponent;
|
||||
|
||||
private _tabs: Tab[] = [];
|
||||
private _itemIndexToProcess: number = 0;
|
||||
|
||||
constructor(
|
||||
@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
|
||||
@Inject(forwardRef(() => ElementRef)) el: ElementRef) {
|
||||
super(changeRef, el);
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.baseInit();
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.baseDestroy();
|
||||
}
|
||||
|
||||
setLayout(layout: TabbedPanelLayout): void {
|
||||
this._panel.options = {
|
||||
showTabsWhenOne: true,
|
||||
layout: layout.orientation === TabOrientation.Horizontal ? NavigationBarLayout.horizontal : NavigationBarLayout.vertical,
|
||||
showIcon: false
|
||||
};
|
||||
}
|
||||
|
||||
handleTabChange(event: any): void {
|
||||
this.fireEvent({
|
||||
eventType: ComponentEventType.onDidChange,
|
||||
args: event.identifier
|
||||
});
|
||||
}
|
||||
|
||||
get tabs(): Tab[] {
|
||||
if (this.items.length > this._itemIndexToProcess) {
|
||||
let currentGroup: string | undefined = this.items.length === 1 ? undefined : this.items[this._itemIndexToProcess - 1].config.group;
|
||||
for (let i = this._itemIndexToProcess; i < this.items.length; i++) {
|
||||
const item = this.items[i];
|
||||
if (item.config.group !== currentGroup) {
|
||||
currentGroup = item.config.group;
|
||||
if (currentGroup) {
|
||||
this._tabs.push({
|
||||
title: currentGroup,
|
||||
type: 'group-header'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this._tabs.push({
|
||||
title: item.config.title,
|
||||
id: item.config.id,
|
||||
content: item.descriptor,
|
||||
type: 'tab'
|
||||
});
|
||||
}
|
||||
this._itemIndexToProcess = this.items.length;
|
||||
}
|
||||
return this._tabs;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user