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

Connection Dialog: Database dropdown followup issues fix (#662)

Browse Source 
* databases now sorted order in dropdown

* fixed bug ESC bug for conn dialog

* pressing ESC now only closes dropdown instead of conn dialog

* changed dropdown arrow to look similar to other arrows

* align dropdown tree and spacing for all dropdowns

* fixed bug where pressing esc would close conn dialog after option is chosen
This commit is contained in:
Aditya Bist
2018-02-13 12:38:51 -08:00
committed by GitHub
parent 4b51d9b386
commit 040549d264
10 changed files with 84 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/sql/base/browser/ui/editableDropdown/dropdown.ts
View File

@@ -198,7 +198,7 @@ export class Dropdown extends Disposable {
}
}, 0);
let height = filteredLength * this._renderer.getHeight(undefined, undefined) > this._options.maxHeight ? this._options.maxHeight : filteredLength * this._renderer.getHeight(undefined, undefined);
this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) + 'px');
this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
this._tree.layout(parseInt(this.$treeContainer.style('height')));
this._tree.refresh();
}
@@ -239,7 +239,7 @@ export class Dropdown extends Disposable {
this._filter.filterString = '';
this._dataSource.options = vals.map(i => { return { value: i }; });
let height = this._dataSource.options.length * 22 > this._options.maxHeight ? this._options.maxHeight : this._dataSource.options.length * 22;
this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) + 'px');
this.$treeContainer.style('height', height + 'px').style('width', DOM.getContentWidth(this.$input.getHTMLElement()) - 2 + 'px');
this._tree.layout(parseInt(this.$treeContainer.style('height')));
this._tree.setInput(new DropdownModel());
this._input.validate();

10
src/sql/base/browser/ui/editableDropdown/media/dropdownList.css
View File

@@ -25,3 +25,13 @@
.dropdown-tree .list-row {
margin-left: -33px;
}
.connection-input .dropdown .monaco-action-bar .action-label.icon.dropdown-arrow {
background-position: 50%;
background-size: cover;
}
.connection-input .monaco-action-bar .action-item .icon {
width: 8px;
height: 8px;
}

14
src/sql/parts/connection/connectionDialog/connectionController.ts
View File

@@ -34,7 +34,7 @@ export class ConnectionController implements IConnectionComponentController {
sqlCapabilities: data.DataProtocolServerCapabilities,
callback: IConnectionComponentCallbacks,
providerName: string,
@IInstantiationService private _instantiationService: IInstantiationService, ) {
@IInstantiationService private _instantiationService: IInstantiationService ) {
this._container = container;
this._connectionManagementService = connectionManagementService;
this._callback = callback;
@@ -180,4 +180,16 @@ export class ConnectionController implements IConnectionComponentController {
public handleResetConnection(): void {
this._connectionWidget.handleResetConnection();
}
public closeDatabaseDropdown(): void {
this._connectionWidget.closeDatabaseDropdown();
}
public get databaseDropdownExpanded(): boolean {
return this._connectionWidget.databaseDropdownExpanded;
}
public set databaseDropdownExpanded(val: boolean) {
this._connectionWidget.databaseDropdownExpanded = val;
}
}

28
src/sql/parts/connection/connectionDialog/connectionDialogService.ts
View File

@@ -54,6 +54,8 @@ export interface IConnectionComponentController {
handleOnConnecting(): void;
handleResetConnection(): void;
focusOnOpen(): void;
closeDatabaseDropdown(): void;
databaseDropdownExpanded: boolean;
}
export class ConnectionDialogService implements IConnectionDialogService {
@@ -149,16 +151,21 @@ export class ConnectionDialogService implements IConnectionDialogService {
}
private handleOnCancel(params: INewConnectionParams): void {
if (params && params.input && params.connectionType === ConnectionType.editor) {
this._connectionManagementService.cancelEditorConnection(params.input);
if (this.uiController.databaseDropdownExpanded) {
this.uiController.closeDatabaseDropdown();
} else {
this._connectionManagementService.cancelConnection(this._model);
if (params && params.input && params.connectionType === ConnectionType.editor) {
this._connectionManagementService.cancelEditorConnection(params.input);
} else {
this._connectionManagementService.cancelConnection(this._model);
}
if (params && params.input && params.input.onConnectReject) {
params.input.onConnectReject();
}
this._connectionDialog.resetConnection();
this._connecting = false;
}
if (params && params.input && params.input.onConnectReject) {
params.input.onConnectReject();
}
this._connectionDialog.resetConnection();
this._connecting = false;
this.uiController.databaseDropdownExpanded = false;
}
private handleDefaultOnConnect(params: INewConnectionParams, connection: IConnectionProfile): Thenable<void> {
@@ -326,7 +333,10 @@ export class ConnectionDialogService implements IConnectionDialogService {
let container = withElementById(this._partService.getWorkbenchElementId()).getHTMLElement().parentElement;
this._container = container;
this._connectionDialog = this._instantiationService.createInstance(ConnectionDialogWidget, this._providerTypes, this._providerNameToDisplayNameMap[this._model.providerName]);
this._connectionDialog.onCancel(() => this.handleOnCancel(this._connectionDialog.newConnectionParams));
this._connectionDialog.onCancel(() => {
this._connectionDialog.databaseDropdownExpanded = this.uiController.databaseDropdownExpanded;
this.handleOnCancel(this._connectionDialog.newConnectionParams);
});
this._connectionDialog.onConnect((profile) => this.handleOnConnect(this._connectionDialog.newConnectionParams, profile));
this._connectionDialog.onShowUiComponent((input) => this.handleShowUiComponent(input));
this._connectionDialog.onInitDialog(() => this.handleInitDialog());

13
src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts
View File

@@ -56,6 +56,7 @@ export class ConnectionDialogWidget extends Modal {
private _recentConnectionTree: ITree;
private _savedConnectionTree: ITree;
private $connectionUIContainer: Builder;
private _databaseDropdownExpanded: boolean;
private _panel: TabbedPanel;
private _recentConnectionTabId: PanelTabIdentifier;
@@ -244,7 +245,9 @@ export class ConnectionDialogWidget extends Modal {
private cancel() {
this._onCancel.fire();
this.close();
if (!this._databaseDropdownExpanded) {
this.close();
}
}
public close() {
@@ -452,4 +455,12 @@ export class ConnectionDialogWidget extends Modal {
this._providerTypeSelectBox.selectWithOptionName(displayName);
this.onProviderTypeSelected(displayName);
}
public set databaseDropdownExpanded(val: boolean) {
this._databaseDropdownExpanded = val;
}
public get databaseDropdownExpanded(): boolean {
return this._databaseDropdownExpanded;
}
}

17
src/sql/parts/connection/connectionDialog/connectionWidget.ts
View File

@@ -52,6 +52,7 @@ export class ConnectionWidget {
[Constants.mssqlProviderName]: [new AuthenticationType(Constants.integrated, false), new AuthenticationType(Constants.sqlLogin, true)]
};
private _saveProfile: boolean;
private _databaseDropdownExpanded: boolean = false;
private _defaultDatabaseName: string = localize('defaultDatabaseOption', '<Default>');
private _loadingDatabaseName: string = localize('loadingDatabaseOption', 'Loading...');
public DefaultServerGroup: IConnectionProfileGroup = {
@@ -244,11 +245,12 @@ export class ConnectionWidget {
}));
this._toDispose.push(this._databaseNameInputBox.onFocus(() => {
this._databaseDropdownExpanded = true;
if (this.serverName) {
this._databaseNameInputBox.values = [this._loadingDatabaseName];
this._callbacks.onFetchDatabases(this.serverName, this.authenticationType, this.userName, this._password).then(databases => {
if (databases) {
this._databaseNameInputBox.values = databases;
this._databaseNameInputBox.values = databases.sort((a, b) => a.localeCompare(b));
} else {
this._databaseNameInputBox.values = [this._defaultDatabaseName];
}
@@ -267,6 +269,7 @@ export class ConnectionWidget {
this._databaseNameInputBox.value = s;
}
}));
}
private onGroupSelected(selectedGroup: string) {
@@ -540,6 +543,18 @@ export class ConnectionWidget {
const authType = this._authTypeMap[this._providerName];
return authType ? authType.find(authType => this.getAuthTypeDisplayName(authType.name) === displayName) : undefined;
}
public closeDatabaseDropdown(): void {
this._databaseNameInputBox.blur();
}
public get databaseDropdownExpanded(): boolean {
return this._databaseDropdownExpanded;
}
public set databaseDropdownExpanded(val: boolean) {
this._databaseDropdownExpanded = val;
}
}
class AuthenticationType {