set focus to default cards when loaded (#8480)

* set focus to default cards when loaded

* add return type
This commit is contained in:
Alan Ren
2019-11-25 20:31:39 -08:00
committed by GitHub
parent 7a38943412
commit ffee69a765
4 changed files with 11 additions and 2 deletions

View File

@@ -182,6 +182,7 @@ export class DeploymentProfilePage extends WizardPageBase<DeployClusterWizard> {
const card = this.createProfileCard(profile, this._view!); const card = this.createProfileCard(profile, this._view!);
if (profile.profileName === defaultProfile) { if (profile.profileName === defaultProfile) {
card.selected = true; card.selected = true;
card.focus();
this.setModelValuesByProfile(profile); this.setModelValuesByProfile(profile);
} }
this._cardContainer!.addItem(card, { flex: '0 0 auto' }); this._cardContainer!.addItem(card, { flex: '0 0 auto' });

View File

@@ -162,6 +162,7 @@ export class ResourceTypePickerDialog extends DialogBase {
this._selectedResourceType = resourceType; this._selectedResourceType = resourceType;
const card = this._cardResourceTypeMap.get(this._selectedResourceType.name)!; const card = this._cardResourceTypeMap.get(this._selectedResourceType.name)!;
if (card.selected) { if (card.selected) {
card.focus();
// clear the selected state of the previously selected card // clear the selected state of the previously selected card
this._resourceTypeCards.forEach(c => { this._resourceTypeCards.forEach(c => {
if (c !== card) { if (c !== card) {

View File

@@ -1,4 +1,4 @@
<div role="radio" *ngIf="label" [class]="getClass()" (click)="onCardClick()" [attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)" <div #cardDiv role="radio" *ngIf="label" [class]="getClass()" (click)="onCardClick()" [attr.aria-checked]="selected" (mouseover)="onCardHoverChanged($event)"
(mouseout)="onCardHoverChanged($event)" tabIndex="0" [style.width]="width" [style.height]="height"> (mouseout)="onCardHoverChanged($event)" tabIndex="0" [style.width]="width" [style.height]="height">
<ng-container *ngIf="isVerticalButton || isDetailsCard"> <ng-container *ngIf="isVerticalButton || isDetailsCard">
<span *ngIf="hasStatus" class="card-status"> <span *ngIf="hasStatus" class="card-status">

View File

@@ -5,7 +5,7 @@
import 'vs/css!./media/card'; import 'vs/css!./media/card';
import { import {
Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, OnDestroy, ViewChild
} from '@angular/core'; } from '@angular/core';
import * as azdata from 'azdata'; import * as azdata from 'azdata';
@@ -29,6 +29,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
private backgroundColor: string; private backgroundColor: string;
@ViewChild('cardDiv', { read: ElementRef }) private cardDiv: ElementRef;
constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef, constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
@Inject(forwardRef(() => ElementRef)) el: ElementRef, @Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService @Inject(IWorkbenchThemeService) private themeService: IWorkbenchThemeService
@@ -53,6 +54,12 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
this.baseDestroy(); this.baseDestroy();
} }
focus(): void {
if (this.cardDiv) {
this.cardDiv.nativeElement.focus();
}
}
private _defaultBorderColor = 'rgb(214, 214, 214)'; private _defaultBorderColor = 'rgb(214, 214, 214)';
private _hasFocus: boolean; private _hasFocus: boolean;