ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

remove builder references from panel (#4149)

Browse Source
This commit is contained in:
Anthony Dresser
2019-02-25 12:43:00 -08:00
committed by GitHub
parent f3b0a50db7
commit 779ca13d48
1 changed files with 29 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/sql/base/browser/ui/panel/panel.ts
View File

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