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
2020-03-26 20:41:09 -07:00
committed by GitHub
parent fa43e26650
commit be83b31e37
77 changed files with 1187 additions and 302 deletions

View File

@@ -19,10 +19,13 @@ import { CloseTabAction } from 'sql/base/browser/ui/panel/tabActions';
@Component({
selector: 'tab-header',
template: `
<div #actionHeader role="presentation" class="tab-header" style="flex: 0 0; flex-direction: row; height: 100%" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
<span class="tab" (click)="selectTab(tab)" role="tab" [attr.aria-selected]="tab.active" [attr.aria-controls]="tab.title">
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
</a>
<div #actionHeader role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title" class="tab-header" style="flex: 0 0; flex-direction: row; height: 100%" [class.active]="tab.active" tabindex="0" (click)="selectTab(tab)" (keyup)="onKey($event)">
<span class="tab" role="presentation">
<div role="presentation">
<a #tabIcon></a>
<a class="tabLabel" [class.active]="tab.active" #tabLabel>
</a>
</div>
</span>
<span #actionbar style="flex: 0 0 auto; align-self: end; margin-top: auto; margin-bottom: auto;" ></span>
</div>
@@ -34,16 +37,23 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
@Input() public active?: boolean;
@Output() public onSelectTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@Output() public onCloseTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
@Output() public onFocusTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
private _actionbar!: ActionBar;
@ViewChild('actionHeader', { read: ElementRef }) private _actionHeaderRef!: ElementRef;
@ViewChild('actionbar', { read: ElementRef }) private _actionbarRef!: ElementRef;
@ViewChild('tabLabel', { read: ElementRef }) private _tabLabelRef!: ElementRef;
@ViewChild('tabIcon', { read: ElementRef }) private _tabIconRef!: ElementRef;
constructor() {
super();
}
public get nativeElement(): HTMLElement {
return this._actionHeaderRef.nativeElement;
}
ngAfterContentInit(): void {
if (this.tab.canClose || this.tab.actions) {
this._actionbar = new ActionBar(this._actionbarRef.nativeElement);
@@ -56,15 +66,14 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
}
}
let tabLabelcontainer = this._tabLabelRef.nativeElement as HTMLElement;
const tabLabelContainer = this._tabLabelRef.nativeElement as HTMLElement;
if (this.showIcon && this.tab.iconClass) {
tabLabelcontainer.className = 'tabLabel codicon';
tabLabelcontainer.classList.add(this.tab.iconClass);
} else {
tabLabelcontainer.className = 'tabLabel';
tabLabelcontainer.textContent = this.tab.title;
const tabIconContainer = this._tabIconRef.nativeElement as HTMLElement;
tabIconContainer.className = 'tabIcon codicon';
tabIconContainer.classList.add(this.tab.iconClass);
}
tabLabelcontainer.title = this.tab.title;
tabLabelContainer.textContent = this.tab.title;
}
ngOnDestroy() {
@@ -90,7 +99,7 @@ export class TabHeaderComponent extends Disposable implements AfterContentInit,
onKey(e: Event) {
if (DOM.isAncestor(<HTMLElement>e.target, this._actionHeaderRef.nativeElement) && e instanceof KeyboardEvent) {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter)) {
if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
this.onSelectTab.emit(this.tab);
e.stopPropagation();
}