|
40 | 40 | </ion-label> |
41 | 41 | </ion-item> |
42 | 42 |
|
43 | | - <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)" |
| 43 | + <ion-item button class="core-usermenu-profile ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)" |
44 | 44 | [detail]="true" [attr.aria-label]="'core.user.profile' | translate"> |
45 | 45 | <core-user-avatar [site]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start" /> |
46 | 46 | <ion-label> |
47 | 47 | <p class="item-heading">{{ siteInfo.fullname }}</p> |
48 | 48 | </ion-label> |
49 | 49 | </ion-item> |
50 | 50 |
|
51 | | - <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded"> |
| 51 | + @if (handlers.length + accountHandlers.length > 0) { |
| 52 | + <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)" |
| 53 | + [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden" |
| 54 | + [attr.aria-label]="handler.title | translate" [detail]="true"> |
| 55 | + <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" /> |
52 | 56 | <ion-label> |
53 | | - <ion-spinner [attr.aria-label]="'core.loading' | translate" /> |
| 57 | + <p class="item-heading">{{ handler.title | translate }}</p> |
54 | 58 | </ion-label> |
| 59 | + <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true"> |
| 60 | + {{handler.badge}} |
| 61 | + </ion-badge> |
| 62 | + <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only"> |
| 63 | + {{ handler.badgeA11yText | translate: {$a : handler.badge } }} |
| 64 | + </span> |
| 65 | + <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate" /> |
55 | 66 | </ion-item> |
56 | 67 |
|
57 | | - <ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)" |
58 | | - [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden" |
59 | | - [attr.aria-label]="handler.title | translate" [detail]="true"> |
| 68 | + <ion-item button *ngFor="let handler of accountHandlers; let first = first" class="ion-text-wrap" |
| 69 | + (click)="handlerClicked($event, handler)" |
| 70 | + [ngClass]="['core-user-account-menu-handler', handler.class || '', first ? 'core-user-menu-separator' : '']" |
| 71 | + [hidden]="handler.hidden" [attr.aria-label]="handler.title | translate" [detail]="true"> |
60 | 72 | <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true" /> |
61 | 73 | <ion-label> |
62 | 74 | <p class="item-heading">{{ handler.title | translate }}</p> |
|
69 | 81 | </span> |
70 | 82 | <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate" /> |
71 | 83 | </ion-item> |
| 84 | + } @else { |
| 85 | + <ion-item class="ion-text-center"> |
| 86 | + <ion-label> |
| 87 | + <ion-spinner [attr.aria-label]="'core.loading' | translate" /> |
| 88 | + </ion-label> |
| 89 | + </ion-item> |
| 90 | + } |
| 91 | + |
| 92 | + |
| 93 | + |
72 | 94 |
|
73 | 95 | <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" [detail]="true" |
74 | | - class="core-user-menu-preferences"> |
| 96 | + class="core-user-menu-preferences core-user-menu-separator"> |
75 | 97 | <ion-icon name="fas-wrench" slot="start" aria-hidden="true" /> |
76 | 98 | <ion-label> |
77 | 99 | <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p> |
|
0 commit comments