diff --git a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html b/npm/ng-packs/packages/account/src/lib/components/login/login.component.html index d9cf92fe8e..170db44a8e 100644 --- a/npm/ng-packs/packages/account/src/lib/components/login/login.component.html +++ b/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 />
diff --git a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html index b834d9c6c4..4590b521ac 100644 --- a/npm/ng-packs/packages/account/src/lib/components/register/register.component.html +++ b/npm/ng-packs/packages/account/src/lib/components/register/register.component.html @@ -8,7 +8,7 @@
* + >
)
- +
Switch Tenant
 @@ -21,7 +21,7 @@
- +

{{ 'AbpUiMultiTenancy::SwitchTenantHint' | abpLocalization }}

diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts index 3937da3a1e..9e822a4823 100644 --- a/npm/ng-packs/packages/core/src/lib/core.module.ts +++ b/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], diff --git a/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts new file mode 100644 index 0000000000..edd7c8497a --- /dev/null +++ b/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); + } +} diff --git a/npm/ng-packs/packages/core/src/lib/directives/index.ts b/npm/ng-packs/packages/core/src/lib/directives/index.ts index a20dd40c55..de5846382c 100644 --- a/npm/ng-packs/packages/core/src/lib/directives/index.ts +++ b/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'; diff --git a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts b/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts index a55b815064..14e05c05b8 100644 --- a/npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts +++ b/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; diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html index 0749ef51ab..a87c23efb7 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html @@ -58,7 +58,7 @@
- +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewRole') | abpLocalization }}

 @@ -68,7 +68,7 @@
* - +
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html index 3801acc6d2..44edb889e6 100644 --- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html +++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html @@ -77,7 +77,7 @@
- +

{{ (selected?.id ? 'AbpIdentity::Edit' : 'AbpIdentity::NewUser') | abpLocalization }}

 @@ -92,7 +92,7 @@
* - +
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html index 94b45d982b..d91bac10c1 100644 --- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html +++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.html @@ -1,4 +1,4 @@ - +

{{ 'AbpPermissionManagement::Permissions' | abpLocalization }} - {{ data.entityName }}

diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html index 102b1fd506..6bf58659ef 100644 --- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html +++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html @@ -88,7 +88,7 @@
- +

{{ selectedModalContent.title | abpLocalization }}

 @@ -112,7 +112,7 @@
- +
@@ -123,7 +123,7 @@
- + diff --git a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html index 76b83162b5..9993242caa 100644 --- a/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html +++ b/npm/ng-packs/packages/theme-basic/src/lib/components/change-password/change-password.component.html @@ -1,4 +1,4 @@ - +

{{ 'AbpIdentity::ChangePassword' | abpLocalization }}

 @@ -6,7 +6,8 @@
* + > *
+

{{ 'AbpIdentity::PersonalInfo' | abpLocalization }}

 @@ -6,7 +6,7 @@
* + > *
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md index bb4f9a7aa2..cf51e03845 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/README.md @@ -3,7 +3,7 @@ Example Usage: ```html - +

Modal Title

 diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts index b4beff5ec7..daea872593 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal.component.ts +++ b/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])], [], ); } diff --git a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts index 348e9ab2aa..12aeadabf5 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts @@ -38,11 +38,11 @@ export default ` /*