Focus on the first focus-able when toggle result and message (#1147)

* when focus on the first focusable when toggle result and message

* minor change
This commit is contained in:
Abbie Petchtes
2018-04-12 17:26:49 -07:00
committed by GitHub
parent 06bab6a38c
commit 9a5f51bfbf
3 changed files with 30 additions and 9 deletions

View File

@@ -23,7 +23,7 @@ import { DataService } from 'sql/parts/grid/services/dataService';
import * as actions from 'sql/parts/grid/views/gridActions';
import * as Services from 'sql/parts/grid/services/sharedServices';
import * as GridContentEvents from 'sql/parts/grid/common/gridContentEvents';
import { ResultsVisibleContext, ResultsGridFocussedContext, ResultsMessagesFocussedContext } from 'sql/parts/query/common/queryContext';
import { ResultsVisibleContext, ResultsGridFocussedContext, ResultsMessagesFocussedContext, QueryEditorVisibleContext } from 'sql/parts/query/common/queryContext';
import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
import { error } from 'sql/base/common/log';
@@ -74,6 +74,7 @@ export abstract class GridParentComponent {
private resultsVisibleContextKey: IContextKey<boolean>;
private gridFocussedContextKey: IContextKey<boolean>;
private messagesFocussedContextKey: IContextKey<boolean>;
private queryEditorVisible: IContextKey<boolean>;
// All datasets
// Place holder data sets to buffer between data sets and rendered data sets
@@ -187,6 +188,9 @@ export abstract class GridParentComponent {
private bindKeys(contextKeyService: IContextKeyService): void {
if (contextKeyService) {
this.queryEditorVisible = QueryEditorVisibleContext.bindTo(contextKeyService);
this.queryEditorVisible.set(true);
let gridContextKeyService = this._bootstrapService.contextKeyService.createScoped(this._el.nativeElement);
this.toDispose.push(gridContextKeyService);
this.resultsVisibleContextKey = ResultsVisibleContext.bindTo(gridContextKeyService);
@@ -201,7 +205,7 @@ export abstract class GridParentComponent {
this.toDispose = dispose(this.toDispose);
}
private toggleResultPane(): void {
protected toggleResultPane(): void {
this.resultActive = !this.resultActive;
if (this.resultActive) {
this.resizeGrids();
@@ -209,7 +213,7 @@ export abstract class GridParentComponent {
this._cd.detectChanges();
}
private toggleMessagePane(): void {
protected toggleMessagePane(): void {
this.messageActive = !this.messageActive;
}

View File

@@ -46,7 +46,7 @@
<span> {{LocalizedConstants.messagePaneLabel}} </span>
<span class="queryResultsShortCut"> {{messageShortcut}} </span>
</div>
<div id="messages" class="scrollable messages" [class.hidden]="!messageActive && dataSets.length !== 0"
<div #messagesContainer id="messages" class="scrollable messages" [class.hidden]="!messageActive && dataSets.length !== 0"
(contextmenu)="openMessagesContextMenu($event)" (focusin)="onMessagesFocus()" (focusout)="onMessagesFocusout()"
tabindex=0>
<div class="messagesTopSpacing"></div>

View File

@@ -153,6 +153,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
// tslint:disable-next-line:no-unused-variable
@ViewChild('resultsPane', { read: ElementRef }) private _resultsPane: ElementRef;
@ViewChild('queryLink', { read: ElementRef }) private _queryLinkElement: ElementRef;
@ViewChild('messagesContainer', { read: ElementRef }) private _messagesContainer: ElementRef;
constructor(
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(forwardRef(() => ChangeDetectorRef)) cd: ChangeDetectorRef,
@@ -524,7 +525,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
*/
navigateToGrid(targetIndex: number): boolean {
// check if the target index is valid
if (targetIndex >= this.renderedDataSets.length || targetIndex < 0 || !this.hasFocus()) {
if (targetIndex >= this.renderedDataSets.length || !this.hasFocus()) {
return false;
}
@@ -577,16 +578,32 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
}
}
protected toggleResultPane(): void {
this.resultActive = !this.resultActive;
this._cd.detectChanges();
if (this.resultActive) {
this.resizeGrids();
this.slickgrids.toArray()[this.activeGrid].setActive();
}
}
protected toggleMessagePane(): void {
this.messageActive = !this.messageActive;
this._cd.detectChanges();
if (this.messageActive && this._messagesContainer) {
let header = <HTMLElement>this._messagesContainer.nativeElement;
header.focus();
}
}
/* Helper function to toggle messages and results panes */
// tslint:disable-next-line:no-unused-variable
private togglePane(pane: PaneType): void {
if (pane === 'messages') {
this._messageActive = !this._messageActive;
this.toggleMessagePane();
} else if (pane === 'results') {
this.resultActive = !this.resultActive;
this.toggleResultPane();
}
this._cd.detectChanges();
this.resizeGrids();
}
layout() {