EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3814 user-menu: Add loading spinner

main
Pau Ferrer Ocaña 2022-03-09 16:39:51 +01:00
parent b0165e87e4
commit 74670a2702
2 changed files with 52 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
src/core/features/mainmenu/components/user-menu/user-menu.html
View File

@ -13,59 +13,61 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-list> <core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
<ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl" <ion-list>
core-link auto-login="yes"> <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
<ion-label> core-link auto-login="yes">
<!-- Show site logo. --> <ion-label>
<img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt="" <!-- Show site logo. -->
onError="this.class='image-not-found'"> <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
<p class="core-usermenu-sitename"> onError="this.class='image-not-found'">
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true"> <p class="core-usermenu-sitename">
</core-format-text> <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
</p> </core-format-text>
<a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a> </p>
</ion-label> <a [href]="siteUrl" core-link auto-login="yes" class="core-usermenu-siteurl">{{ siteUrl }}</a>
</ion-item> </ion-label>
<ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)" </ion-item>
detail="true" [attr.aria-label]="'core.user.profile' | translate"> <ion-item button class="core-usermenu-handler ion-text-wrap" *ngIf="siteInfo" lines="full" (click)="openUserProfile($event)"
<core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar> detail="true" [attr.aria-label]="'core.user.profile' | translate">
<ion-label> <core-user-avatar [user]="siteInfo" [userId]="siteInfo.userid" [linkProfile]="false" slot="start"></core-user-avatar>
<h2>{{ siteInfo.fullname }}</h2> <ion-label>
</ion-label> <h2>{{ siteInfo.fullname }}</h2>
</ion-item> </ion-label>
</ion-item>
<ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded"> <ion-item class="ion-text-center" *ngIf="(!handlers || !handlers.length) && !handlersLoaded">
<ion-label> <ion-label>
<ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner> <ion-spinner [attr.aria-label]="'core.loading' | translate"></ion-spinner>
</ion-label> </ion-label>
</ion-item> </ion-item>
<ion-item button *ngFor="let handler of handlers" class="ion-text-wrap" (click)="handlerClicked($event, handler)" <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" [ngClass]="['core-user-menu-handler', handler.class || '']" [hidden]="handler.hidden"
[attr.aria-label]="handler.title | translate" detail="true"> [attr.aria-label]="handler.title | translate" detail="true">
<ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon> <ion-icon *ngIf="handler.icon" [name]="handler.icon" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ handler.title | translate }}</p> <p class="item-heading">{{ handler.title | translate }}</p>
</ion-label> </ion-label>
<ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true"> <ion-badge slot="end" *ngIf="handler.showBadge" [hidden]="handler.loading || !handler.badge" aria-hidden="true">
{{handler.badge}} {{handler.badge}}
</ion-badge> </ion-badge>
<span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only"> <span *ngIf="handler.showBadge && handler.badge && handler.badgeA11yText" class="sr-only">
{{ handler.badgeA11yText | translate: {$a : handler.badge } }} {{ handler.badgeA11yText | translate: {$a : handler.badge } }}
</span> </span>
<ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate"> <ion-spinner slot="end" *ngIf="handler.showBadge && handler.loading" [attr.aria-label]="'core.loading' | translate">
</ion-spinner> </ion-spinner>
</ion-item> </ion-item>
<ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true" <ion-item button (click)="openPreferences($event)" [attr.aria-label]="'core.settings.preferences' | translate" detail="true"
class="core-user-menu-preferences"> class="core-user-menu-preferences">
<ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon> <ion-icon name="fas-wrench" slot="start" aria-hidden="true"></ion-icon>
<ion-label> <ion-label>
<p class="item-heading">{{ 'core.settings.preferences' | translate }}</p> <p class="item-heading">{{ 'core.settings.preferences' | translate }}</p>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </ion-list>
</core-loading>
</ion-content> </ion-content>
<ion-footer> <ion-footer>
<ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap"> <ion-item *ngIf="displaySwitchAccount" button lines="full" (click)="switchAccounts($event)" detail="true" class="ion-text-wrap">

3
src/core/features/mainmenu/components/user-menu/user-menu.ts
View File

@ -49,7 +49,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
siteUrl?: string; siteUrl?: string;
handlers: CoreUserProfileHandlerData[] = []; handlers: CoreUserProfileHandlerData[] = [];
handlersLoaded = false; handlersLoaded = false;
loaded = false;
user?: CoreUserProfile; user?: CoreUserProfile;
displaySwitchAccount = true; displaySwitchAccount = true;
removeAccountOnLogout = false; removeAccountOnLogout = false;
@ -68,8 +67,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
this.displaySwitchAccount = !currentSite.isFeatureDisabled('NoDelegate_SwitchAccount'); this.displaySwitchAccount = !currentSite.isFeatureDisabled('NoDelegate_SwitchAccount');
this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout; this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout;
this.loaded = true;
this.loadSiteLogo(currentSite); this.loadSiteLogo(currentSite);
// Load the handlers. // Load the handlers.