mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-23 09:35:39 -05:00
remove builder references from panel (#4149)
This commit is contained in:
@@ -5,14 +5,13 @@
|
||||
|
||||
import { IThemable } from 'vs/platform/theme/common/styler';
|
||||
import { Event, Emitter } from 'vs/base/common/event';
|
||||
import { Dimension, EventType, $, addDisposableListener } from 'vs/base/browser/dom';
|
||||
import { $ as qb } from 'sql/base/browser/builder';
|
||||
import * as DOM from 'vs/base/browser/dom';
|
||||
import { IAction } from 'vs/base/common/actions';
|
||||
import { IActionOptions, ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
|
||||
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
|
||||
import { KeyCode } from 'vs/base/common/keyCodes';
|
||||
import './panelStyles';
|
||||
import { Disposable } from 'vs/base/common/lifecycle';
|
||||
import { Disposable, IDisposable, dispose } from 'vs/base/common/lifecycle';
|
||||
|
||||
export interface IPanelStyles {
|
||||
}
|
||||
@@ -23,7 +22,7 @@ export interface IPanelOptions {
|
||||
|
||||
export interface IPanelView {
|
||||
render(container: HTMLElement): void;
|
||||
layout(dimension: Dimension): void;
|
||||
layout(dimension: DOM.Dimension): void;
|
||||
remove?(): void;
|
||||
}
|
||||
|
||||
@@ -35,6 +34,7 @@ export interface IPanelTab {
|
||||
|
||||
interface IInternalPanelTab extends IPanelTab {
|
||||
header: HTMLElement;
|
||||
disposables: IDisposable[];
|
||||
label: HTMLElement;
|
||||
body: HTMLElement;
|
||||
}
|
||||
@@ -54,7 +54,7 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
private body: HTMLElement;
|
||||
private parent: HTMLElement;
|
||||
private _actionbar: ActionBar;
|
||||
private _currentDimensions: Dimension;
|
||||
private _currentDimensions: DOM.Dimension;
|
||||
private _collapsed = false;
|
||||
private _headerVisible: boolean;
|
||||
|
||||
@@ -65,14 +65,14 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
|
||||
constructor(container: HTMLElement, private options: IPanelOptions = defaultOptions) {
|
||||
super();
|
||||
this.parent = $('.tabbedPanel');
|
||||
this.parent = DOM.$('.tabbedPanel');
|
||||
container.appendChild(this.parent);
|
||||
this.header = $('.composite.title');
|
||||
this.tabList = $('.tabList');
|
||||
this.header = DOM.$('.composite.title');
|
||||
this.tabList = DOM.$('.tabList');
|
||||
this.tabList.setAttribute('role', 'tablist');
|
||||
this.tabList.style.height = this.headersize + 'px';
|
||||
this.header.appendChild(this.tabList);
|
||||
let actionbarcontainer = $('.title-actions');
|
||||
let actionbarcontainer = DOM.$('.title-actions');
|
||||
this._actionbar = new ActionBar(actionbarcontainer);
|
||||
this.header.appendChild(actionbarcontainer);
|
||||
if (options.showHeaderWhenSingleView) {
|
||||
@@ -81,7 +81,7 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
} else {
|
||||
this._headerVisible = false;
|
||||
}
|
||||
this.body = $('.tabBody');
|
||||
this.body = DOM.$('.tabBody');
|
||||
this.body.setAttribute('role', 'tabpanel');
|
||||
this.body.setAttribute('tabindex', '0');
|
||||
this.parent.appendChild(this.body);
|
||||
@@ -100,6 +100,7 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
|
||||
public pushTab(tab: IPanelTab): PanelTabIdentifier {
|
||||
let internalTab = tab as IInternalPanelTab;
|
||||
internalTab.disposables = [];
|
||||
this._tabMap.set(tab.identifier, internalTab);
|
||||
this._createTab(internalTab);
|
||||
if (!this._shownTab) {
|
||||
@@ -122,24 +123,24 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
}
|
||||
|
||||
private _createTab(tab: IInternalPanelTab): void {
|
||||
let tabHeaderElement = $('.tab-header');
|
||||
let tabHeaderElement = DOM.$('.tab-header');
|
||||
tabHeaderElement.setAttribute('tabindex', '0');
|
||||
tabHeaderElement.setAttribute('role', 'tab');
|
||||
tabHeaderElement.setAttribute('aria-selected', 'false');
|
||||
tabHeaderElement.setAttribute('aria-controls', tab.identifier);
|
||||
let tabElement = $('.tab');
|
||||
let tabElement = DOM.$('.tab');
|
||||
tabHeaderElement.appendChild(tabElement);
|
||||
let tabLabel = $('a.tabLabel');
|
||||
let tabLabel = DOM.$('a.tabLabel');
|
||||
tabLabel.innerText = tab.title;
|
||||
tabElement.appendChild(tabLabel);
|
||||
addDisposableListener(tabHeaderElement, EventType.CLICK, e => this.showTab(tab.identifier));
|
||||
addDisposableListener(tabHeaderElement, EventType.KEY_DOWN, (e: KeyboardEvent) => {
|
||||
tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.CLICK, e => this.showTab(tab.identifier)));
|
||||
tab.disposables.push(DOM.addDisposableListener(tabHeaderElement, DOM.EventType.KEY_DOWN, (e: KeyboardEvent) => {
|
||||
let event = new StandardKeyboardEvent(e);
|
||||
if (event.equals(KeyCode.Enter)) {
|
||||
this.showTab(tab.identifier);
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
});
|
||||
}));
|
||||
this.tabList.appendChild(tabHeaderElement);
|
||||
tab.header = tabHeaderElement;
|
||||
tab.label = tabLabel;
|
||||
@@ -151,8 +152,8 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
}
|
||||
|
||||
if (this._shownTab) {
|
||||
qb(this._tabMap.get(this._shownTab).label).removeClass('active');
|
||||
qb(this._tabMap.get(this._shownTab).header).removeClass('active');
|
||||
DOM.removeClass(this._tabMap.get(this._shownTab).label, 'active');
|
||||
DOM.removeClass(this._tabMap.get(this._shownTab).header, 'active');
|
||||
this._tabMap.get(this._shownTab).header.setAttribute('aria-selected', 'false');
|
||||
}
|
||||
|
||||
@@ -165,19 +166,19 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
this.tabHistory.push(id);
|
||||
let tab = this._tabMap.get(this._shownTab);
|
||||
if (!tab.body) {
|
||||
tab.body = $('.tab-container');
|
||||
tab.body = DOM.$('.tab-container');
|
||||
tab.body.style.width = '100%';
|
||||
tab.body.style.height = '100%';
|
||||
tab.view.render(tab.body);
|
||||
}
|
||||
this.body.appendChild(tab.body);
|
||||
this.body.setAttribute('aria-labelledby', tab.identifier);
|
||||
qb(tab.label).addClass('active');
|
||||
qb(tab.header).addClass('active');
|
||||
DOM.addClass(tab.label, 'active');
|
||||
DOM.addClass(tab.header, 'active');
|
||||
tab.header.setAttribute('aria-selected', 'true');
|
||||
this._onTabChange.fire(id);
|
||||
if (this._currentDimensions) {
|
||||
this._layoutCurrentTab(new Dimension(this._currentDimensions.width, this._currentDimensions.height - this.headersize));
|
||||
this._layoutCurrentTab(new DOM.Dimension(this._currentDimensions.width, this._currentDimensions.height - this.headersize));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -186,8 +187,9 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
if (actualTab.view.remove) {
|
||||
actualTab.view.remove();
|
||||
}
|
||||
qb(actualTab.header).destroy();
|
||||
qb(actualTab.body).destroy();
|
||||
actualTab.header.remove();
|
||||
actualTab.body.remove();
|
||||
dispose(actualTab.disposables);
|
||||
this._tabMap.delete(tab);
|
||||
if (this._shownTab === tab) {
|
||||
this._shownTab = undefined;
|
||||
@@ -215,7 +217,7 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
|
||||
}
|
||||
|
||||
public layout(dimension: Dimension): void {
|
||||
public layout(dimension: DOM.Dimension): void {
|
||||
if (dimension) {
|
||||
this._currentDimensions = dimension;
|
||||
this.parent.style.height = dimension.height + 'px';
|
||||
@@ -224,11 +226,11 @@ export class TabbedPanel extends Disposable implements IThemable {
|
||||
this.body.style.width = dimension.width + 'px';
|
||||
const bodyHeight = dimension.height - (this._headerVisible ? this.headersize : 0);
|
||||
this.body.style.height = bodyHeight + 'px';
|
||||
this._layoutCurrentTab(new Dimension(dimension.width, bodyHeight));
|
||||
this._layoutCurrentTab(new DOM.Dimension(dimension.width, bodyHeight));
|
||||
}
|
||||
}
|
||||
|
||||
private _layoutCurrentTab(dimension: Dimension): void {
|
||||
private _layoutCurrentTab(dimension: DOM.Dimension): void {
|
||||
if (this._shownTab) {
|
||||
let tab = this._tabMap.get(this._shownTab);
|
||||
tab.body.style.width = dimension.width + 'px';
|
||||
|
||||
Reference in New Issue
Block a user