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!);
if (profile.profileName === defaultProfile) {
card.selected = true;
card.focus();
this.setModelValuesByProfile(profile);
}
this._cardContainer!.addItem(card, { flex: '0 0 auto' });

View File

@@ -162,6 +162,7 @@ export class ResourceTypePickerDialog extends DialogBase {
this._selectedResourceType = resourceType;
const card = this._cardResourceTypeMap.get(this._selectedResourceType.name)!;
if (card.selected) {
card.focus();
// clear the selected state of the previously selected card
this._resourceTypeCards.forEach(c => {
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">
<ng-container *ngIf="isVerticalButton || isDetailsCard">
<span *ngIf="hasStatus" class="card-status">

View File

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