ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-13 17:22:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

Improve experience in "open installed features" dialog (#876)

Browse Source 
* fix keyboard nav and double click issues in open install features dialog

* the focus will be at the first item in the extension list when the dialog is opened
This commit is contained in:
Abbie Petchtes
2018-03-08 15:30:28 -08:00
committed by GitHub
parent 090ac6eab2
commit 45b1ae1fb1
2 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/sql/parts/dashboard/newDashboardTabDialog/media/newDashboardTabDialog.css
View File

@@ -2,17 +2,25 @@
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the Source EULA. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
.extension-view .monaco-split-view .split-view-view .header {
.extension-view .header {
position: relative;
line-height: 22px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
padding-left: 20px;
padding-right: 12px;
overflow: hidden;
display: flex;
}
.extension-view .split-view-view .header .title {
.extension-view .header .title {
display: flex;
justify-content: flex-start;
flex: 1 1 auto;
}
.extension-view .split-view-view .header .count-badge-wrapper {
.extension-view .header .count-badge-wrapper {
justify-content: flex-end;
}

28
src/sql/parts/dashboard/newDashboardTabDialog/newDashboardTabDialog.ts
View File

@@ -20,14 +20,16 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
import { IDelegate, IRenderer } from 'vs/base/browser/ui/list/list';
import { IDelegate, IRenderer, IListMouseEvent } from 'vs/base/browser/ui/list/list';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes';
import { Button } from 'sql/base/browser/ui/button/button';
import { Modal } from 'sql/base/browser/ui/modal/modal';
import { attachModalDialogStyler, attachButtonStyler } from 'sql/common/theme/styler';
import { FixedListView } from 'sql/platform/views/fixedListView';
import * as TelemetryKeys from 'sql/common/telemetryKeys';
import { SplitView } from 'sql/base/browser/ui/splitview/splitview';
import { Orientation } from 'sql/base/browser/ui/splitview/splitview';
import { NewDashboardTabViewModel, IDashboardUITab } from 'sql/parts/dashboard/newDashboardTabDialog/newDashboardTabViewModel';
import { IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
@@ -98,7 +100,6 @@ export class NewDashboardTabDialog extends Modal {
private _cancelButton: Button;
private _extensionList: List<IDashboardUITab>;
private _extensionTabView: FixedListView<IDashboardUITab>;
private _splitView: SplitView;
private _container: HTMLElement;
private _viewModel: NewDashboardTabViewModel;
@@ -139,8 +140,7 @@ export class NewDashboardTabDialog extends Modal {
// MODAL OVERRIDE METHODS //////////////////////////////////////////////
protected layout(height?: number): void {
// Ignore height as it's a subcomponent being laid out
this._splitView.layout(DOM.getContentHeight(this._container));
// Nothing currently laid out in this class
}
public render() {
@@ -156,7 +156,6 @@ export class NewDashboardTabDialog extends Modal {
this._container = container;
let viewBody = DOM.$('div.extension-view');
DOM.append(container, viewBody);
this._splitView = new SplitView(viewBody);
// Create a fixed list view for the account provider
let extensionTabViewContainer = DOM.$('.extensionTab-view');
@@ -177,13 +176,22 @@ export class NewDashboardTabDialog extends Modal {
this._themeService
);
// Append the list view to the split view
this._splitView.addView(this._extensionTabView);
this._extensionList.onMouseDblClick(e => this.onAccept());
this._extensionList.onKeyDown(e => {
let event = new StandardKeyboardEvent(e);
if (event.equals(KeyCode.Enter)) {
this.onAccept();
} else if (event.equals(KeyCode.Escape)) {
this.onClose();
}
});
this._extensionTabView.render(viewBody, Orientation.VERTICAL);
this._register(attachListStyler(this._extensionList, this._themeService));
let listService = <ListService>this._listService;
this._register(listService.register(this._extensionList));
this._splitView.layout(DOM.getContentHeight(this._container));
}
private registerListeners(): void {
@@ -227,8 +235,8 @@ export class NewDashboardTabDialog extends Modal {
this.layout();
if (this._extensionList.length > 0) {
this._extensionList.setSelection([0]);
this._extensionList.domFocus();
this._addNewTabButton.enabled = true;
this._addNewTabButton.focus();
} else {
this._addNewTabButton.enabled = false;
this._cancelButton.focus();