From 040549d2647358a58d30a3d857292f5570471e72 Mon Sep 17 00:00:00 2001 From: Aditya Bist Date: Tue, 13 Feb 2018 12:38:51 -0800 Subject: [PATCH] Connection Dialog: Database dropdown followup issues fix (#662) * 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 --- build/yarn.lock | 6 +++- extensions-modules/yarn.lock | 2 +- extensions/yarn.lock | 6 +++- .../browser/ui/editableDropdown/dropdown.ts | 4 +-- .../editableDropdown/media/dropdownList.css | 10 +++++++ .../connectionDialog/connectionController.ts | 14 +++++++++- .../connectionDialogService.ts | 28 +++++++++++++------ .../connectionDialogWidget.ts | 13 ++++++++- .../connectionDialog/connectionWidget.ts | 17 ++++++++++- .../browser/ui/contextview/contextview.ts | 2 +- 10 files changed, 84 insertions(+), 18 deletions(-) diff --git a/build/yarn.lock b/build/yarn.lock index faebab31b9..f3873e9e2e 100644 --- a/build/yarn.lock +++ b/build/yarn.lock @@ -384,7 +384,7 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" -"dataprotocol-client@file:../dataprotocol-client": +"dataprotocol-client@file:./../dataprotocol-client": version "1.0.0" dependencies: typescript "2.6.2" @@ -569,7 +569,11 @@ extend@~1.2.1: "extensions-modules@file:../extensions-modules": version "0.1.0" dependencies: +<<<<<<< HEAD + dataprotocol-client "file:./../../../../AppData/Local/Yarn/cache/v1/dataprotocol-client" +======= dataprotocol-client "file:C:/Users/andresse/AppData/Local/Yarn/cache/v1/dataprotocol-client" +>>>>>>> master decompress "^4.2.0" fs-extra-promise "^1.0.1" http-proxy-agent "^2.0.0" diff --git a/extensions-modules/yarn.lock b/extensions-modules/yarn.lock index a93c913679..a1bc841428 100644 --- a/extensions-modules/yarn.lock +++ b/extensions-modules/yarn.lock @@ -337,7 +337,7 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" -"dataprotocol-client@file:../dataprotocol-client": +"dataprotocol-client@file:./../dataprotocol-client": version "1.0.0" dependencies: typescript "2.6.2" diff --git a/extensions/yarn.lock b/extensions/yarn.lock index e5b188723d..ba62dee993 100644 --- a/extensions/yarn.lock +++ b/extensions/yarn.lock @@ -48,7 +48,7 @@ core-util-is@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" -"dataprotocol-client@file:../dataprotocol-client": +"dataprotocol-client@file:./../dataprotocol-client": version "1.0.0" dependencies: typescript "2.6.2" @@ -133,7 +133,11 @@ es6-promisify@^5.0.0: "extensions-modules@file:../extensions-modules": version "0.1.0" dependencies: +<<<<<<< HEAD + dataprotocol-client "file:./../../../../AppData/Local/Yarn/cache/v1/dataprotocol-client" +======= dataprotocol-client "file:C:/Users/andresse/AppData/Local/Yarn/cache/v1/dataprotocol-client" +>>>>>>> master decompress "^4.2.0" fs-extra-promise "^1.0.1" http-proxy-agent "^2.0.0" diff --git a/src/sql/base/browser/ui/editableDropdown/dropdown.ts b/src/sql/base/browser/ui/editableDropdown/dropdown.ts index b7ed50eb8b..6bcc13a61c 100644 --- a/src/sql/base/browser/ui/editableDropdown/dropdown.ts +++ b/src/sql/base/browser/ui/editableDropdown/dropdown.ts @@ -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(); diff --git a/src/sql/base/browser/ui/editableDropdown/media/dropdownList.css b/src/sql/base/browser/ui/editableDropdown/media/dropdownList.css index 9008a6b2c1..77f8c5854a 100644 --- a/src/sql/base/browser/ui/editableDropdown/media/dropdownList.css +++ b/src/sql/base/browser/ui/editableDropdown/media/dropdownList.css @@ -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; +} diff --git a/src/sql/parts/connection/connectionDialog/connectionController.ts b/src/sql/parts/connection/connectionDialog/connectionController.ts index 1e7ecc022e..eeb314422c 100644 --- a/src/sql/parts/connection/connectionDialog/connectionController.ts +++ b/src/sql/parts/connection/connectionDialog/connectionController.ts @@ -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; + } } \ No newline at end of file diff --git a/src/sql/parts/connection/connectionDialog/connectionDialogService.ts b/src/sql/parts/connection/connectionDialog/connectionDialogService.ts index afadbd7101..49d6e03d3d 100644 --- a/src/sql/parts/connection/connectionDialog/connectionDialogService.ts +++ b/src/sql/parts/connection/connectionDialog/connectionDialogService.ts @@ -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 { @@ -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()); diff --git a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts index b3daa13d33..8b3c2b4d23 100644 --- a/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionDialogWidget.ts @@ -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; + } } diff --git a/src/sql/parts/connection/connectionDialog/connectionWidget.ts b/src/sql/parts/connection/connectionDialog/connectionWidget.ts index fadecb1efa..07ff450320 100644 --- a/src/sql/parts/connection/connectionDialog/connectionWidget.ts +++ b/src/sql/parts/connection/connectionDialog/connectionWidget.ts @@ -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', ''); 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 { diff --git a/src/vs/base/browser/ui/contextview/contextview.ts b/src/vs/base/browser/ui/contextview/contextview.ts index c55d36a267..5e57a80739 100644 --- a/src/vs/base/browser/ui/contextview/contextview.ts +++ b/src/vs/base/browser/ui/contextview/contextview.ts @@ -230,7 +230,7 @@ export class ContextView { this.$view.removeClass('top', 'bottom', 'left', 'right'); this.$view.addClass(anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top'); this.$view.addClass(anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right'); - this.$view.style({ top: result.top + 'px', left: result.left + 'px', width: 'initial' }); + this.$view.style({ top: result.top + 'px', left: result.left + 1 + 'px', width: 'initial' }); } public hide(data?: any): void {