implementantion(fix): #29534 Login-as popup show's in the incorrect p…

…osition. (#29631) ### Proposed Changes * Hide mask when menu close. ### Before https://github.com/user-attachments/assets/f35abb40-9250-4bf4-8e22-898814bb3e58 ### After https://github.com/user-attachments/assets/d172eb71-8eb7-4997-b1ef-976ead617b36
dotCMS · Aug 20, 2024 · e463b7b · e463b7b
1 parent bffd903
commit e463b7b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 29 deletions.
diff --git a/...p/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html b/...p/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.html
@@ -1,28 +1,27 @@
-<ng-container *ngIf="vm$ | async as vm">
-    <div
-        *ngIf="showMask()"
-        (click)="toogleMenu($event)"
-        class="dot-mask"
-        data-testId="dot-mask"></div>
+@if (vm$ | async; as vm) {
+    @if ($showMask()) {
+        <div (click)="toggleMenu($event)" class="dot-mask" data-testId="dot-mask"></div>
+    }
     <p-avatar
-        (click)="toogleMenu($event)"
+        (click)="toggleMenu($event)"
         [email]="vm.userData.email"
         data-testId="avatar"
         dotGravatar></p-avatar>
     <p-menu
         [model]="vm.items"
         [popup]="true"
         #menu
+        (onHide)="hideMask()"
         appendTo="body"
         styleClass="toolbar-user__menu"></p-menu>
 
-    <dot-my-account
-        *ngIf="vm.showMyAccount"
-        (shutdown)="store.showMyAccount(false)"
-        [visible]="vm.showMyAccount"></dot-my-account>
+    @if (vm.showMyAccount) {
+        <dot-my-account
+            (shutdown)="store.showMyAccount(false)"
+            [visible]="vm.showMyAccount"></dot-my-account>
+    }
 
-    <dot-login-as
-        *ngIf="vm.showLoginAs"
-        (cancel)="store.showLoginAs(false)"
-        [visible]="vm.showLoginAs"></dot-login-as>
-</ng-container>
+    @if (vm.showLoginAs) {
+        <dot-login-as (cancel)="store.showLoginAs(false)" [visible]="vm.showLoginAs"></dot-login-as>
+    }
+}
diff --git a/...iew/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts b/...iew/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.spec.ts
@@ -221,4 +221,17 @@ describe('DotToolbarUserComponent', () => {
         fixture.detectChanges();
         expect(de.query(By.css('[data-testid="dot-mask"]'))).toBeFalsy();
     });
+
+    it('should hide mask when menu hide', () => {
+        fixture.detectChanges();
+        const avatarComponent = de.query(By.css('[data-testid="avatar"]')).nativeElement;
+        avatarComponent.click();
+
+        const menu = de.query(By.css('p-menu'));
+        menu.triggerEventHandler('onHide', {});
+
+        fixture.detectChanges();
+
+        expect(de.query(By.css('[data-testId="dot-mask"]'))).toBeNull();
+    });
 });
diff --git a/...app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts b/...app/view/components/dot-toolbar/components/dot-toolbar-user/dot-toolbar-user.component.ts
@@ -1,11 +1,11 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
     OnInit,
-    ViewChild,
     inject,
-    signal
+    signal,
+    viewChild
 } from '@angular/core';
 
 import { AvatarModule } from 'primeng/avatar';
@@ -33,23 +33,26 @@ import { DotMyAccountModule } from '../dot-my-account/dot-my-account.module';
         DotMyAccountModule,
         DotSafeHtmlPipe,
         MenuModule,
-        AsyncPipe,
-        NgIf
+        AsyncPipe
     ]
 })
 export class DotToolbarUserComponent implements OnInit {
-    readonly #store = inject(DotToolbarUserStore);
+    readonly store = inject(DotToolbarUserStore);
 
-    vm$ = this.#store.vm$;
-    @ViewChild('menu') menu: Menu;
-    showMask = signal<boolean>(false);
+    vm$ = this.store.vm$;
+    $menu = viewChild<Menu>('menu');
+    $showMask = signal<boolean>(false);
 
     ngOnInit(): void {
-        this.#store.init();
+        this.store.init();
     }
 
-    toogleMenu(event: CustomEvent): void {
-        this.menu.toggle(event);
-        this.showMask.update((value) => !value);
+    toggleMenu(event: Event): void {
+        this.$menu().toggle(event);
+        this.$showMask.update((value) => !value);
+    }
+
+    hideMask(): void {
+        this.$showMask.update(() => false);
     }
 }