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

fix arrow keys not working in server group dialog (#16825)

Browse Source 
* fix arro keys not working in server group dialog

* use existing container instead of dom element

* proper fix with code cleaning
This commit is contained in:
Aditya Bist
2021-08-18 17:10:59 -07:00
committed by GitHub
parent ad75b03565
commit 2aabc1ea9b
1 changed files with 3 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/sql/workbench/services/serverGroup/browser/serverGroupDialog.ts
View File

@@ -9,7 +9,7 @@ import { Colorbox } from 'sql/base/browser/ui/colorbox/colorbox';
import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox'; import { MessageType } from 'vs/base/browser/ui/inputbox/inputBox';
import * as DOM from 'vs/base/browser/dom'; import * as DOM from 'vs/base/browser/dom';
import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; import { KeyCode } from 'vs/base/common/keyCodes';
import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IThemeService } from 'vs/platform/theme/common/themeService';
import { attachInputBoxStyler, attachCheckboxStyler, attachButtonStyler } from 'vs/platform/theme/common/styler'; import { attachInputBoxStyler, attachCheckboxStyler, attachButtonStyler } from 'vs/platform/theme/common/styler';
import { Event, Emitter } from 'vs/base/common/event'; import { Event, Emitter } from 'vs/base/common/event';
@@ -120,14 +120,8 @@ export class ServerGroupDialog extends Modal {
this._serverGroupContainer = DOM.append(body, DOM.$('.group-color-options')); this._serverGroupContainer = DOM.append(body, DOM.$('.group-color-options'));
this.fillGroupColors(this._serverGroupContainer); this.fillGroupColors(this._serverGroupContainer);
DOM.addStandardDisposableListener(body, DOM.EventType.KEY_DOWN, (event: StandardKeyboardEvent) => { DOM.addStandardDisposableListener(this._serverGroupContainer, DOM.EventType.KEY_DOWN, (event: StandardKeyboardEvent) => {
if (event.equals(KeyMod.Shift | KeyCode.Tab)) { if (event.equals(KeyCode.RightArrow) || event.equals(KeyCode.LeftArrow)) {
this.preventDefaultKeyboardEvent(event);
this.focusPrevious();
} else if (event.equals(KeyCode.Tab)) {
this.preventDefaultKeyboardEvent(event);
this.focusNext();
} else if (event.equals(KeyCode.RightArrow) || event.equals(KeyCode.LeftArrow)) {
this.preventDefaultKeyboardEvent(event); this.preventDefaultKeyboardEvent(event);
this.focusNextColor(event.equals(KeyCode.RightArrow)); this.focusNextColor(event.equals(KeyCode.RightArrow));
} }
@@ -139,48 +133,6 @@ export class ServerGroupDialog extends Modal {
e.stopPropagation(); e.stopPropagation();
} }
private isFocusOnColors(): boolean {
let result = false;
this._colorColorBoxesMap.forEach(({ colorbox: colorbox }) => {
if (document.activeElement === colorbox.domNode) {
result = true;
}
});
return result;
}
private focusNext(): void {
const renderedDialog = this.withRenderedDialog;
if (renderedDialog.groupNameInputBox.hasFocus()) {
renderedDialog.groupDescriptionInputBox.focus();
} else if (renderedDialog.groupDescriptionInputBox.hasFocus()) {
this._colorColorBoxesMap[this._selectedColorOption ?? 0].colorbox.focus();
} else if (this.isFocusOnColors()) {
renderedDialog.addServerButton.enabled ? renderedDialog.addServerButton.focus() : renderedDialog.closeButton.focus();
} else if (document.activeElement === renderedDialog.addServerButton.element) {
renderedDialog.closeButton.focus();
}
else if (document.activeElement === renderedDialog.closeButton.element) {
renderedDialog.groupNameInputBox.focus();
}
}
private focusPrevious(): void {
const renderedDialog = this.withRenderedDialog;
if (document.activeElement === renderedDialog.closeButton.element) {
renderedDialog.addServerButton.enabled ? renderedDialog.addServerButton.focus() : this._colorColorBoxesMap[this._selectedColorOption ?? 0].colorbox.focus();
} else if (document.activeElement === renderedDialog.addServerButton.element) {
this._colorColorBoxesMap[this._selectedColorOption ?? 0].colorbox.focus();
} else if (this.isFocusOnColors()) {
renderedDialog.groupDescriptionInputBox.focus();
} else if (renderedDialog.groupDescriptionInputBox.hasFocus()) {
renderedDialog.groupNameInputBox.focus();
} else if (renderedDialog.groupNameInputBox.hasFocus()) {
renderedDialog.closeButton.focus();
}
}
private focusNextColor(moveRight: boolean): void { private focusNextColor(moveRight: boolean): void {
let focusIndex: number = -1; let focusIndex: number = -1;
for (let i = 0; i < this._colorColorBoxesMap.length; i++) { for (let i = 0; i < this._colorColorBoxesMap.length; i++) {