mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-22 01:25:38 -05:00
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:
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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() {
|
||||
|
||||
Reference in New Issue
Block a user