MOBILE-3814 user: Add site logo to user account menu

main
Pau Ferrer Ocaña 2022-01-21 17:17:51 +01:00
parent 07df82153a
commit 55a46f20c6
4 changed files with 53 additions and 7 deletions

View File

@ -17,6 +17,9 @@
<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>

View File

@ -8,6 +8,10 @@
}
.core-usermenu-siteinfo {
text-align: center;
ion-label {
margin: 0;
}
--padding-top: 10px;
--padding-bottom: 10px;
}
@ -19,9 +23,21 @@
}
.core-usermenu-sitename {
font-size: 16px;
font-weight: bold;
font-size: 20px;
line-height: 24px;
}
img.core-usermenu-site-logo {
margin-bottom: 8px;
max-height: var(--core-user-menu-site-logo-max-height);
}
img.image-not-found {
display: none;
}
@if ($core-user-hide-sitename) {
.core-usermenu-sitename {
display: none;

View File

@ -12,8 +12,9 @@
// See the License for the specific language governing permissions and
// limitations under the License.
import { CoreConstants } from '@/core/constants';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { CoreSiteInfo } from '@classes/site';
import { CoreSite, CoreSiteInfo } from '@classes/site';
import { CoreLoginSitesComponent } from '@features/login/components/sites/sites';
import { CoreLoginHelper } from '@features/login/services/login-helper';
import { CoreUser, CoreUserProfile } from '@features/user/services/user';
@ -36,12 +37,13 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
siteInfo?: CoreSiteInfo;
siteName?: string;
siteLogo?: string;
siteLogoLoaded = false;
siteUrl?: string;
handlers: CoreUserProfileHandlerData[] = [];
handlersLoaded = false;
loaded = false;
user?: CoreUserProfile;
moreSites = false;
protected subscription!: Subscription;
@ -49,10 +51,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
* @inheritdoc
*/
async ngOnInit(): Promise<void> {
// Check if there are more sites to switch.
const sites = await CoreSites.getSites();
this.moreSites = sites.length > 1;
const currentSite = CoreSites.getRequiredCurrentSite();
this.siteInfo = currentSite.getInfo();
this.siteName = currentSite.getSiteName();
@ -60,6 +58,8 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
this.loaded = true;
this.loadSiteLogo(currentSite);
// Load the handlers.
if (this.siteInfo) {
this.user = await CoreUser.getProfile(this.siteInfo.userid);
@ -82,6 +82,31 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
}
}
/**
* Load site logo from current site public config.
*
* @param currentSite Current site object.
* @return Promise resolved when done.
*/
protected async loadSiteLogo(currentSite: CoreSite): Promise<void> {
if (CoreConstants.CONFIG.forceLoginLogo) {
this.siteLogo = 'assets/img/login_logo.png';
this.siteLogoLoaded = true;
return;
}
try {
const siteConfig = await currentSite.getPublicConfig();
this.siteLogo = CoreLoginHelper.getLogoUrl(siteConfig);
} catch {
// Ignore errors.
} finally {
this.siteLogoLoaded = true;
}
}
/**
* Opens User profile page.
*

View File

@ -264,6 +264,8 @@
--core-course-module-navigation-max-height: 56px;
--core-course-module-navigation-background: var(--contrast-background);
--core-user-menu-site-logo-max-height: 32px;
--addon-calendar-event-category-color: var(--purple);
--addon-calendar-event-course-color: var(--red);
--addon-calendar-event-group-color: var(--yellow);