MOBILE-3814 user-menu: Add loading spinner
Pau Ferrer Ocaña
parent
b0165e87e4
commit
74670a2702
|
|
@ -13,59 +13,61 @@
|
|||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
|
||||
core-link auto-login="yes">
|
||||
<ion-label>
|
||||
<!-- Show site logo. -->
|
||||
<img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
|
||||
onError="this.class='image-not-found'">
|
||||
<p class="core-usermenu-sitename">
|
||||
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
|
||||
detail="true" [attr.aria-label]="'core.user.profile' | translate">
|
||||
<core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
|
||||
<ion-label>
|
||||
<h2>{{ siteInfo.fullname }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
|
||||
<ion-list>
|
||||
<ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
|
||||
core-link auto-login="yes">
|
||||
<ion-label>
|
||||
<!-- Show site logo. -->
|
||||
<img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
|
||||
onError="this.class='image-not-found'">
|
||||
<p class="core-usermenu-sitename">
|
||||
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
|
||||
</core-format-text>
|
||||
</p>
|
||||
<a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
|
||||
detail="true" [attr.aria-label]="'core.user.profile' | translate">
|
||||
<core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
|
||||
<ion-label>
|
||||
<h2>{{ siteInfo.fullname }}</h2>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
|
||||
<ion-label>
|
||||
<ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
<ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
|
||||
<ion-label>
|
||||
<ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
|
||||
[ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
|
||||
[attr.aria-label]="handler.title | translate" detail="true">
|
||||
<ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ handler.title | translate }}</p>
|
||||
</ion-label>
|
||||
<ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
|
||||
{{handler.badge}}
|
||||
</ion-badge>
|
||||
<span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
|
||||
{{ handler.badgeA11yText | translate: {$a : handler.badge } }}
|
||||
</span>
|
||||
<ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
|
||||
</ion-spinner>
|
||||
</ion-item>
|
||||
<ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)"
|
||||
[ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
|
||||
[attr.aria-label]="handler.title | translate" detail="true">
|
||||
<ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ handler.title | translate }}</p>
|
||||
</ion-label>
|
||||
<ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
|
||||
{{handler.badge}}
|
||||
</ion-badge>
|
||||
<span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
|
||||
{{ handler.badgeA11yText | translate: {$a : handler.badge } }}
|
||||
</span>
|
||||
<ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
|
||||
</ion-spinner>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
|
||||
class="core-user-menu-preferences">
|
||||
<ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
|
||||
class="core-user-menu-preferences">
|
||||
<ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
|
||||
<ion-label>
|
||||
<p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
|
||||
</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</core-loading>
|
||||
</ion-content>
|
||||
<ion-footer>
|
||||
<ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">
|
||||
|
|
|
|||
|
|
@ -49,7 +49,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
|
|||
siteUrl?: string;
|
||||
handlers: CoreUserProfileHandlerData[] = [];
|
||||
handlersLoaded = false;
|
||||
loaded = false;
|
||||
user?: CoreUserProfile;
|
||||
displaySwitchAccount = true;
|
||||
removeAccountOnLogout = false;
|
||||
|
|
@ -68,8 +67,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
|
|||
this.displaySwitchAccount = !currentSite.isFeatureDisabled('NoDelegate_SwitchAccount');
|
||||
this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout;
|
||||
|
||||
this.loaded = true;
|
||||
|
||||
this.loadSiteLogo(currentSite);
|
||||
|
||||
// Load the handlers.
|
||||
|
|
|
|||
Loading…
Reference in New Issue