andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

focus first input element in dialogs

Browse Source
This commit is contained in:
Andreas Huber
2023-02-26 09:46:35 +01:00
parent 3a28e03b6a
commit ea3ccabe56
6 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
pdb-js/src/app/dashboard-page/dashboard/add-plot-dialog/add-plot-dialog.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ElementRef, ViewChild } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
@Component({ @Component({
@@ -8,7 +8,6 @@ import { MatDialogRef } from '@angular/material/dialog';
}) })
export class AddPlotDialogComponent { export class AddPlotDialogComponent {
constructor(public dialogRef: MatDialogRef<string>){ constructor(public dialogRef: MatDialogRef<string>){
} }

2
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.html
View File

@@ -2,7 +2,7 @@
<div mat-dialog-content> <div mat-dialog-content>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Text</mat-label> <mat-label>Text</mat-label>
<textarea matInput [(ngModel)]="text"></textarea> <textarea matInput [(ngModel)]="text" #textElement></textarea>
</mat-form-field> </mat-form-field>
</div> </div>
<div mat-dialog-actions align="end"> <div mat-dialog-actions align="end">

10
pdb-js/src/app/dashboard-page/dashboard/add-text-dialog/add-text-dialog.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core'; import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog'; import { MatDialogRef } from '@angular/material/dialog';
@Component({ @Component({
@@ -6,12 +6,18 @@ import { MatDialogRef } from '@angular/material/dialog';
templateUrl: './add-text-dialog.component.html', templateUrl: './add-text-dialog.component.html',
styleUrls: ['./add-text-dialog.component.scss'] styleUrls: ['./add-text-dialog.component.scss']
}) })
export class AddTextDialogComponent { export class AddTextDialogComponent implements OnInit {
text = ""; text = "";
@ViewChild('textElement') textElement!: ElementRef;
constructor(public dialogRef: MatDialogRef<string>){ constructor(public dialogRef: MatDialogRef<string>){
} }
ngOnInit(): void {
window.setTimeout(() => this.textElement.nativeElement.focus(), 0);
}
onSaveClick(): void { onSaveClick(): void {
this.dialogRef.close(this.text); this.dialogRef.close(this.text);
} }

0
pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.scss
View File

2
pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.html
View File

@@ -2,7 +2,7 @@
<div mat-dialog-content> <div mat-dialog-content>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Name</mat-label> <mat-label>Name</mat-label>
<input matInput [(ngModel)]="data.name"> <input matInput [(ngModel)]="data.name" #name>
</mat-form-field> </mat-form-field>
<mat-form-field appearance="fill"> <mat-form-field appearance="fill">
<mat-label>Description</mat-label> <mat-label>Description</mat-label>

11
pdb-js/src/app/dashboard-page/new-dashboard/new-dashboard.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core'; import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog'; import {MatDialog, MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
import { DashboardCreationData } from 'src/app/dashboard.service'; import { DashboardCreationData } from 'src/app/dashboard.service';
@@ -7,11 +7,18 @@ import { DashboardCreationData } from 'src/app/dashboard.service';
templateUrl: './new-dashboard.component.html', templateUrl: './new-dashboard.component.html',
styleUrls: ['./new-dashboard.component.scss'] styleUrls: ['./new-dashboard.component.scss']
}) })
export class NewDashboardComponent { export class NewDashboardComponent implements OnInit {
@ViewChild('name') nameInput!: ElementRef;
constructor(public dialogRef: MatDialogRef<NewDashboardComponent>, constructor(public dialogRef: MatDialogRef<NewDashboardComponent>,
@Inject(MAT_DIALOG_DATA) public data: DashboardCreationData,){ @Inject(MAT_DIALOG_DATA) public data: DashboardCreationData,){
} }
ngOnInit(): void {
window.setTimeout(() => this.nameInput.nativeElement.focus(), 0);
}
onSaveClick(): void { onSaveClick(): void {
this.dialogRef.close(this.data); this.dialogRef.close(this.data);
} }