Browse Source

fix(user-menu): use distinct popover refs so both full and icon triggers close on Account/Logout

PROD-followup on the new-menu review: both #menuPopover template refs in
UserMenuComponent's template resolved to only one popover instance, so
menuPopover?.hide() inside the shared userMenuTpl closed only one of the
two mutually-exclusive trigger buttons (they swap via lt-lg media query).
Rename to #menuPopoverFull / #menuPopoverIcon and call .hide() on both
from the shared Account/Logout menu items so whichever button is visible
for the current breakpoint always closes cleanly.

Also drop legacy commented-out selectors in menu-toggle.component.scss
and tighten HomeService.toggleSideBar to EventEmitter<void>.
pull/15888/head
Igor Kulikov 4 months ago
parent
commit
da9158f7ed
  1. 2
      ui-ngx/src/app/core/services/home.service.ts
  2. 4
      ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss
  3. 8
      ui-ngx/src/app/shared/components/user-menu.component.html

2
ui-ngx/src/app/core/services/home.service.ts

@ -38,7 +38,7 @@ export class HomeService {
return this.hideLoadingBarSubject.asObservable().pipe(distinctUntilChanged(), shareReplay(1)); return this.hideLoadingBarSubject.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
} }
toggleSideBar = new EventEmitter(); toggleSideBar = new EventEmitter<void>();
constructor(private activeComponentService: ActiveComponentService) { constructor(private activeComponentService: ActiveComponentService) {
this.activeComponentService.onActiveComponentChanged().subscribe(activeComponent => { this.activeComponentService.onActiveComponentChanged().subscribe(activeComponent => {

4
ui-ngx/src/app/modules/home/menu/menu-toggle.component.scss

@ -62,13 +62,9 @@
transition-property: height; transition-property: height;
a.mat-mdc-button { a.mat-mdc-button {
//padding: 0 16px 0 32px;
.mat-icon { .mat-icon {
visibility: hidden; visibility: hidden;
} }
/* font-weight: 500;
text-transform: none !important;
text-rendering: optimizeLegibility;*/
} }
} }
} }

8
ui-ngx/src/app/shared/components/user-menu.component.html

@ -15,7 +15,7 @@
limitations under the License. limitations under the License.
--> -->
<button #menuButton #menuPopover="tbPopover" mat-button class="tb-user-menu" [class.tb-collapsed]="collapsed" <button #menuButton #menuPopoverFull="tbPopover" mat-button class="tb-user-menu" [class.tb-collapsed]="collapsed"
(click)="$event.stopPropagation();" (click)="$event.stopPropagation();"
tb-popover tb-popover
tbPopoverTrigger="click" tbPopoverTrigger="click"
@ -33,7 +33,7 @@
} }
</div> </div>
</button> </button>
<button #menuPopover="tbPopover" mat-icon-button class="tb-user-menu-icon" <button #menuPopoverIcon="tbPopover" mat-icon-button class="tb-user-menu-icon"
(click)="$event.stopPropagation();" (click)="$event.stopPropagation();"
tb-popover tb-popover
tbPopoverTrigger="click" tbPopoverTrigger="click"
@ -48,11 +48,11 @@
<div class="tb-user-email"> <div class="tb-user-email">
{{ userEmail$ | async }} {{ userEmail$ | async }}
</div> </div>
<button mat-button (click)="menuPopover?.hide(); openAccount()"> <button mat-button (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); openAccount()">
<tb-icon matButtonIcon>mdi:account-circle-outline</tb-icon> <tb-icon matButtonIcon>mdi:account-circle-outline</tb-icon>
<span translate>account.account</span> <span translate>account.account</span>
</button> </button>
<button mat-button class="tb-logout" (click)="menuPopover?.hide(); logout()"> <button mat-button class="tb-logout" (click)="menuPopoverFull?.hide(); menuPopoverIcon?.hide(); logout()">
<tb-icon matButtonIcon>logout</tb-icon> <tb-icon matButtonIcon>logout</tb-icon>
<span translate>home.logout</span> <span translate>home.logout</span>
</button> </button>

Loading…
Cancel
Save