close mask when the menu hides

dotCMS · Aug 16, 2024 · 9b10a84 · 9b10a84
1 parent c09d534
commit 9b10a84
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 25 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)="toggleMask()"
         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,4 +1,4 @@
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -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$;
+    vm$ = this.store.vm$;
     @ViewChild('menu') menu: Menu;
-    showMask = signal<boolean>(false);
+    $showMask = signal<boolean>(false);
 
     ngOnInit(): void {
-        this.#store.init();
+        this.store.init();
     }
 
-    toogleMenu(event: CustomEvent): void {
+    toggleMenu(event: CustomEvent): void {
         this.menu.toggle(event);
-        this.showMask.update((value) => !value);
+        this.toggleMask();
+    }
+
+    toggleMask(): void {
+        this.$showMask.update((value) => !value);
     }
 }