Merge pull request #1574 from abpframework/feature/autofocus

feature/autofocus

npm/ng-packs/packages/account/src/lib/components/login/login.component.html

@@ -14,6 +14,7 @@
             type="text"
             id="login-input-user-name-or-email-address"
             formControlName="username"
+            autofocus
           />
         </div>
         <div class="form-group">

npm/ng-packs/packages/account/src/lib/components/register/register.component.html

@@ -8,7 +8,7 @@
         <div class="form-group">
           <label for="input-user-name">{{ 'AbpAccount::UserName' | abpLocalization }}</label
           ><span> * </span
-          ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" />
+          ><input autofocus type="text" id="input-user-name" class="form-control" formControlName="username" autofocus/>
         </div>
         <div class="form-group">
           <label for="input-email-address">{{ 'AbpAccount::EmailAddress' | abpLocalization }}</label

npm/ng-packs/packages/account/src/lib/components/tenant-box/tenant-box.component.html

@@ -12,7 +12,7 @@
   >)
 </div>
 
-<abp-modal *ngIf="isModalVisible" [(visible)]="isModalVisible">
+<abp-modal [(visible)]="isModalVisible" size="md">
   <ng-template #abpHeader>
     <h5>Switch Tenant</h5>
   </ng-template>
@@ -21,7 +21,7 @@
       <div class="mt-2">
         <div class="form-group">
           <label for="name">{{ 'AbpUiMultiTenancy::Name' | abpLocalization }}</label>
-          <input type="text" id="name" name="tenant" class="form-control" [(ngModel)]="selected.name" />
+          <input [(ngModel)]="selected.name" type="text" id="name" name="tenant" class="form-control" autofocus />
         </div>
         <p>{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}</p>
       </div>

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -19,6 +19,7 @@ import { ProfileState } from './states/profile.state';
 import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
 import { EllipsisDirective } from './directives/ellipsis.directive';
+import { AutofocusDirective } from './directives/autofocus.directive';
 
 @NgModule({
   imports: [
@@ -34,10 +35,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive';
   declarations: [
     RouterOutletComponent,
     DynamicLayoutComponent,
+    AutofocusDirective,
+    EllipsisDirective,
+    LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
-    LocalizationPipe,
-    EllipsisDirective,
   ],
   exports: [
     CommonModule,
@@ -47,9 +49,11 @@ import { EllipsisDirective } from './directives/ellipsis.directive';
     RouterModule,
     RouterOutletComponent,
     DynamicLayoutComponent,
+    AutofocusDirective,
+    EllipsisDirective,
+    LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
-    EllipsisDirective,
     LocalizationPipe,
   ],
   providers: [LocalizationPipe],

npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts

@@ -0,0 +1,15 @@
+import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
+
+@Directive({
+  selector: '[autofocus]',
+})
+export class AutofocusDirective implements AfterViewInit {
+  @Input('autofocus')
+  delay: number = 0;
+
+  constructor(private elRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this.elRef.nativeElement.focus(), this.delay);
+  }
+}

npm/ng-packs/packages/core/src/lib/directives/index.ts

@@ -1,3 +1,4 @@
+export * from './autofocus.directive';
 export * from './ellipsis.directive';
 export * from './permission.directive';
 export * from './visibility.directive';

npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts

@@ -45,7 +45,7 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a
   wrappers = abpRoutes.filter(ar => ar.wrapper);
   const transformed = [] as ABP.FullRoute[];
   routes
-    .filter(route => route.component || route.loadChildren || (route.data || {}).routes)
+    .filter(route => (route.data || {}).routes && (route.component || route.loadChildren))
     .forEach(route => {
       const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase());
       const { length } = transformed;

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -58,7 +58,7 @@
   </div>
 </div>
 
-<abp-modal size="md" [(visible)]="isModalVisible" *ngIf="isModalVisible" [centered]="true">
+<abp-modal [(visible)]="isModalVisible" [centered]="true">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}</h3>
   </ng-template>
@@ -68,7 +68,7 @@
       <div class="form-group">
         <label for="role-name">{{ 'AbpIdentity::RoleName' | abpLocalization }}</label
         ><span> * </span>
-        <input type="text" id="role-name" class="form-control" formControlName="name" />
+        <input type="text" id="role-name" class="form-control" formControlName="name" autofocus/>
       </div>
 
       <div class="custom-checkbox custom-control mb-2">

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -77,7 +77,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" *ngIf="isModalVisible">
+<abp-modal [(visible)]="isModalVisible">
   <ng-template #abpHeader>
     <h3>{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}</h3>
   </ng-template>
@@ -92,7 +92,7 @@
                 <div class="form-group">
                   <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                   ><span> * </span>
-                  <input type="text" id="user-name" class="form-control" formControlName="userName" />
+                  <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus/>
                 </div>
 
                 <div class="form-group">

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html

@@ -1,4 +1,4 @@
-<abp-modal [(visible)]="visible" *ngIf="visible" size="lg">
+<abp-modal [(visible)]="visible">
   <ng-container *ngIf="{ entityName: entityName$ | async } as data">
     <ng-template #abpHeader>
       <h4>{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}</h4>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -88,7 +88,7 @@
   </div>
 </div>
 
-<abp-modal [(visible)]="isModalVisible" *ngIf="isModalVisible">
+<abp-modal [(visible)]="isModalVisible">
   <ng-template #abpHeader>
     <h3>{{ selectedModalContent.title | abpLocalization }}</h3>
   </ng-template>
@@ -112,7 +112,7 @@
     <div class="mt-2">
       <div class="form-group">
         <label for="name">{{ 'AbpTenantManagement::TenantName' | abpLocalization }}</label>
-        <input type="text" id="name" class="form-control" formControlName="name" />
+        <input type="text" id="name" class="form-control" formControlName="name" autofocus/>
       </div>
     </div>
   </form>
@@ -123,7 +123,7 @@
     <div class="mt-2">
       <div class="form-group">
         <div class="form-check">
-          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" />
+          <input id="useSharedDatabase" type="checkbox" class="form-check-input" formControlName="useSharedDatabase" autofocus/>
           <label for="useSharedDatabase" class="font-check-label">{{
             'AbpTenantManagement::DisplayName:UseSharedDatabase' | abpLocalization
           }}</label>

npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html

@@ -1,4 +1,4 @@
-<abp-modal *ngIf="visible" [(visible)]="visible">
+<abp-modal [(visible)]="visible">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::ChangePassword' | abpLocalization }}</h4>
   </ng-template>
@@ -6,7 +6,8 @@
     <form [formGroup]="form" novalidate>
       <div class="form-group">
         <label for="current-password">{{ 'AbpIdentity::DisplayName:CurrentPassword' | abpLocalization }}</label
-        ><span> * </span><input type="password" id="current-password" class="form-control" formControlName="password" />
+        ><span> * </span
+        ><input type="password" id="current-password" class="form-control" formControlName="password" autofocus />
       </div>
       <div class="form-group">
         <label for="new-password">{{ 'AbpIdentity::DisplayName:NewPassword' | abpLocalization }}</label

npm/ng-packs/packages/theme-basic/src/lib/components/profile/profile.component.html

@@ -1,4 +1,4 @@
-<abp-modal *ngIf="visible" [(visible)]="visible">
+<abp-modal [(visible)]="visible">
   <ng-template #abpHeader>
     <h4>{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}</h4>
   </ng-template>
@@ -6,7 +6,7 @@
     <form *ngIf="form" [formGroup]="form" novalidate>
       <div class="form-group">
         <label for="username">{{ 'AbpIdentity::DisplayName:UserName' | abpLocalization }}</label
-        ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" />
+        ><span> * </span><input type="text" id="username" class="form-control" formControlName="userName" autofocus/>
       </div>
       <div class="row">
         <div class="col col-md-6">

npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md

@@ -3,7 +3,7 @@
 Example Usage:
 
 ```html
-<abp-modal size="lg" [(visible)]="isModalShow" [centered]="true">
+<abp-modal size="md" [(visible)]="isModalShow" [centered]="false">
   <ng-template #abpHeader>
     <h3>Modal Title</h3>
   </ng-template>

npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts

@@ -17,6 +17,8 @@ import { Toaster } from '../../models/toaster';
 
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 
+const ANIMATION_TIMEOUT = 200;
+
 @Component({
   selector: 'abp-modal',
   templateUrl: './modal.component.html',
@@ -30,10 +32,12 @@ export class ModalComponent implements OnDestroy {
     if (typeof value !== 'boolean') return;
 
     if (!this.modalContent) {
-      setTimeout(() => {
-        this.showModal = value;
-        this.visible = value;
-      }, 0);
+      if (value) {
+        setTimeout(() => {
+          this.showModal = value;
+          this.visible = value;
+        }, 0);
+      }
       return;
     }
 
@@ -47,7 +51,7 @@ export class ModalComponent implements OnDestroy {
         this.setVisible(value);
         // this.renderer.removeClass(this.modalContent.nativeElement, 'fade-out-top');
         this.ngOnDestroy();
-      }, 350);
+      }, ANIMATION_TIMEOUT - 10);
     }
   }
 
@@ -91,7 +95,7 @@ export class ModalComponent implements OnDestroy {
     this.showModal = value;
 
     value
-      ? timer(500)
+      ? timer(ANIMATION_TIMEOUT + 100)
           .pipe(take(1))
           .subscribe(_ => (this.closable = true))
       : (this.closable = false);
@@ -100,7 +104,7 @@ export class ModalComponent implements OnDestroy {
   listen() {
     fromEvent(document, 'click')
       .pipe(
-        debounceTime(350),
+        debounceTime(100),
         takeUntil(this.destroy$),
         filter((event: MouseEvent) => {
           const isOpenConfirmation = this.isOpenConfirmation || document.querySelector('p-toastitem');
@@ -120,8 +124,8 @@ export class ModalComponent implements OnDestroy {
     fromEvent(document, 'keyup')
       .pipe(
         takeUntil(this.destroy$),
+        debounceTime(250),
         filter((key: KeyboardEvent) => key && key.code === 'Escape' && this.closable),
-        debounceTime(350),
       )
       .subscribe(_ => {
         this.close();
@@ -133,7 +137,6 @@ export class ModalComponent implements OnDestroy {
       .pipe(
         takeUntil(this.destroy$),
         filter(() => !!(this.closable && this.modalContent)),
-        debounceTime(350),
       )
       .subscribe(() => this.close());
   }
@@ -150,7 +153,7 @@ export class ModalComponent implements OnDestroy {
       this.confirmationService
         .warn('AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpAccount::AreYouSure')
         .subscribe((status: Toaster.Status) => {
-          timer(400).subscribe(() => {
+          timer(ANIMATION_TIMEOUT).subscribe(() => {
             this.isOpenConfirmation = false;
           });
 
@@ -166,7 +169,7 @@ export class ModalComponent implements OnDestroy {
 
 function getFlatNodes(nodes: NodeList): HTMLElement[] {
   return Array.from(nodes).reduce(
-    (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? Array.from(val.childNodes) : [val])],
+    (acc, val) => [...acc, ...(val.childNodes && val.childNodes.length ? getFlatNodes(val.childNodes) : [val])],
     [],
   );
 }

npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts

@@ -38,11 +38,11 @@ export default `
 /* <animations */
 
 .fade-in-top {
-  animation: fadeInTop 0.4s ease-in-out;
+  animation: fadeInTop 0.2s ease-in-out;
 }
 
 .fade-out-top {
-  animation: fadeOutTop 0.4s ease-in-out;
+  animation: fadeOutTop 0.2s ease-in-out;
 }