ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix connection dialog scroll issue (#12956)

Browse Source
This commit is contained in:
Alan Ren
2020-10-16 11:09:30 -07:00
committed by GitHub
parent 767465edbf
commit 49983a6f05
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -107,6 +107,10 @@ export class TabbedPanel extends Disposable {
this._register(DOM.addDisposableListener(this.header, DOM.EventType.FOCUS, e => this.focusCurrentTab())); this._register(DOM.addDisposableListener(this.header, DOM.EventType.FOCUS, e => this.focusCurrentTab()));
} }
public get element(): HTMLElement {
return this.parent;
}
public dispose() { public dispose() {
this.header.remove(); this.header.remove();
this.tabList.remove(); this.tabList.remove();
@@ -250,7 +254,8 @@ export class TabbedPanel extends Disposable {
tab.tab.view.onShow(); tab.tab.view.onShow();
} }
if (this._currentDimensions) { if (this._currentDimensions) {
this._layoutCurrentTab(new DOM.Dimension(this._currentDimensions.width, this._currentDimensions.height - this.headersize)); const tabHeight = this._currentDimensions.height - (this._headerVisible ? this.headersize : 0);
this._layoutCurrentTab(new DOM.Dimension(this._currentDimensions.width, tabHeight));
} }
} }

26
src/sql/workbench/services/connection/browser/connectionDialogWidget.ts
View File

@@ -56,6 +56,8 @@ export class ConnectionDialogWidget extends Modal {
private _noRecentConnection: HTMLElement; private _noRecentConnection: HTMLElement;
private _savedConnection: HTMLElement; private _savedConnection: HTMLElement;
private _noSavedConnection: HTMLElement; private _noSavedConnection: HTMLElement;
private _recentConnectionActionBarContainer: HTMLElement;
private _connectionTypeContainer: HTMLElement;
private _connectionDetailTitle: HTMLElement; private _connectionDetailTitle: HTMLElement;
private _connectButton: Button; private _connectButton: Button;
private _closeButton: Button; private _closeButton: Button;
@@ -93,8 +95,6 @@ export class ConnectionDialogWidget extends Modal {
private _connecting = false; private _connecting = false;
private orthogonalSize = 0;
constructor( constructor(
private providerDisplayNameOptions: string[], private providerDisplayNameOptions: string[],
private selectedProviderType: string, private selectedProviderType: string,
@@ -198,6 +198,7 @@ export class ConnectionDialogWidget extends Modal {
DOM.hide(this._savedConnection); DOM.hide(this._savedConnection);
this._panel = new TabbedPanel(this._body); this._panel = new TabbedPanel(this._body);
this._panel.element.style.margin = '0px 10px';
attachTabbedPanelStyler(this._panel, this._themeService); attachTabbedPanelStyler(this._panel, this._themeService);
this._recentConnectionTabId = this._panel.pushTab({ this._recentConnectionTabId = this._panel.pushTab({
identifier: 'recent_connection', identifier: 'recent_connection',
@@ -206,7 +207,9 @@ export class ConnectionDialogWidget extends Modal {
render: c => { render: c => {
c.append(recentConnectionTab); c.append(recentConnectionTab);
}, },
layout: () => { }, layout: (dimension: DOM.Dimension) => {
this._recentConnectionTree.layout(dimension.height - DOM.getTotalHeight(this._recentConnectionActionBarContainer));
},
focus: () => this._recentConnectionTree.domFocus() focus: () => this._recentConnectionTree.domFocus()
} }
}); });
@@ -215,7 +218,9 @@ export class ConnectionDialogWidget extends Modal {
identifier: 'saved_connection', identifier: 'saved_connection',
title: localize('savedConnectionTitle', "Saved Connections"), title: localize('savedConnectionTitle', "Saved Connections"),
view: { view: {
layout: () => { }, layout: (dimension: DOM.Dimension) => {
this._savedConnectionTree.layout(dimension.height, dimension.width);
},
render: c => { render: c => {
c.append(savedConnectionTab); c.append(savedConnectionTab);
}, },
@@ -284,8 +289,8 @@ export class ConnectionDialogWidget extends Modal {
this._connectionDetailTitle.innerText = localize('connectionDetailsTitle', "Connection Details"); this._connectionDetailTitle.innerText = localize('connectionDetailsTitle', "Connection Details");
const tableContainer = DOM.append(this._body, DOM.$('.connection-type')); this._connectionTypeContainer = DOM.append(this._body, DOM.$('.connection-type'));
const table = DOM.append(tableContainer, DOM.$('table.connection-table-content')); const table = DOM.append(this._connectionTypeContainer, DOM.$('table.connection-table-content'));
DialogHelper.appendInputSelectBox( DialogHelper.appendInputSelectBox(
DialogHelper.appendRow(table, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox); DialogHelper.appendRow(table, connectTypeLabel, 'connection-label', 'connection-input'), this._providerTypeSelectBox);
@@ -379,8 +384,8 @@ export class ConnectionDialogWidget extends Modal {
private createRecentConnectionList(): void { private createRecentConnectionList(): void {
const recentConnectionContainer = DOM.append(this._recentConnection, DOM.$('.connection-recent-content')); const recentConnectionContainer = DOM.append(this._recentConnection, DOM.$('.connection-recent-content'));
const container = DOM.append(recentConnectionContainer, DOM.$('.recent-titles-container')); this._recentConnectionActionBarContainer = DOM.append(recentConnectionContainer, DOM.$('.recent-titles-container'));
const actionsContainer = DOM.append(container, DOM.$('.connection-history-actions')); const actionsContainer = DOM.append(this._recentConnectionActionBarContainer, DOM.$('.connection-history-actions'));
this._actionbar = this._register(new ActionBar(actionsContainer, { animated: false })); this._actionbar = this._register(new ActionBar(actionsContainer, { animated: false }));
const clearAction = this.instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL); const clearAction = this.instantiationService.createInstance(ClearRecentConnectionsAction, ClearRecentConnectionsAction.ID, ClearRecentConnectionsAction.LABEL);
clearAction.useConfirmationMessage = true; clearAction.useConfirmationMessage = true;
@@ -506,10 +511,7 @@ export class ConnectionDialogWidget extends Modal {
} }
protected layout(height: number): void { protected layout(height: number): void {
// Height is the overall height. Since we're laying out a specific component, always get its actual height this._panel.layout(new DOM.Dimension(this._panel.element.clientWidth, this._panel.element.clientHeight));
const width = DOM.getContentWidth(this._body);
this.orthogonalSize = width;
this._panel.layout(new DOM.Dimension(this.orthogonalSize, height - 38 - 35 - 326)); // height - connection title - connection type input - connection widget
} }
/** /**

5
src/sql/workbench/services/connection/browser/media/connectionDialog.css
View File

@@ -167,8 +167,3 @@
/* Hide twisties */ /* Hide twisties */
display: none !important; display: none !important;
} }
.connection-dialog .tabbedPanel .tabList,
.connection-dialog .tabbedPanel .tabBody {
padding-left: 10px;
}