MOBILE-3814 user: Add site logo to user account menu
parent
07df82153a
commit
55a46f20c6
|
@ -17,6 +17,9 @@
|
||||||
<ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
|
<ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo" lines="full" detail="false" [href]="siteUrl"
|
||||||
core-link auto-login="yes">
|
core-link auto-login="yes">
|
||||||
<ion-label>
|
<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">
|
<p class="core-usermenu-sitename">
|
||||||
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
|
<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true">
|
||||||
</core-format-text>
|
</core-format-text>
|
||||||
|
|
|
@ -8,6 +8,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-usermenu-siteinfo {
|
.core-usermenu-siteinfo {
|
||||||
|
text-align: center;
|
||||||
|
ion-label {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
--padding-top: 10px;
|
--padding-top: 10px;
|
||||||
--padding-bottom: 10px;
|
--padding-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
@ -19,9 +23,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.core-usermenu-sitename {
|
.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) {
|
@if ($core-user-hide-sitename) {
|
||||||
.core-usermenu-sitename {
|
.core-usermenu-sitename {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -12,8 +12,9 @@
|
||||||
// See the License for the specific language governing permissions and
|
// See the License for the specific language governing permissions and
|
||||||
// limitations under the License.
|
// limitations under the License.
|
||||||
|
|
||||||
|
import { CoreConstants } from '@/core/constants';
|
||||||
import { Component, OnDestroy, OnInit } from '@angular/core';
|
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 { CoreLoginSitesComponent } from '@features/login/components/sites/sites';
|
||||||
import { CoreLoginHelper } from '@features/login/services/login-helper';
|
import { CoreLoginHelper } from '@features/login/services/login-helper';
|
||||||
import { CoreUser, CoreUserProfile } from '@features/user/services/user';
|
import { CoreUser, CoreUserProfile } from '@features/user/services/user';
|
||||||
|
@ -36,12 +37,13 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
siteInfo?: CoreSiteInfo;
|
siteInfo?: CoreSiteInfo;
|
||||||
siteName?: string;
|
siteName?: string;
|
||||||
|
siteLogo?: string;
|
||||||
|
siteLogoLoaded = false;
|
||||||
siteUrl?: string;
|
siteUrl?: string;
|
||||||
handlers: CoreUserProfileHandlerData[] = [];
|
handlers: CoreUserProfileHandlerData[] = [];
|
||||||
handlersLoaded = false;
|
handlersLoaded = false;
|
||||||
loaded = false;
|
loaded = false;
|
||||||
user?: CoreUserProfile;
|
user?: CoreUserProfile;
|
||||||
moreSites = false;
|
|
||||||
|
|
||||||
protected subscription!: Subscription;
|
protected subscription!: Subscription;
|
||||||
|
|
||||||
|
@ -49,10 +51,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
async ngOnInit(): Promise<void> {
|
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();
|
const currentSite = CoreSites.getRequiredCurrentSite();
|
||||||
this.siteInfo = currentSite.getInfo();
|
this.siteInfo = currentSite.getInfo();
|
||||||
this.siteName = currentSite.getSiteName();
|
this.siteName = currentSite.getSiteName();
|
||||||
|
@ -60,6 +58,8 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
|
|
||||||
|
this.loadSiteLogo(currentSite);
|
||||||
|
|
||||||
// Load the handlers.
|
// Load the handlers.
|
||||||
if (this.siteInfo) {
|
if (this.siteInfo) {
|
||||||
this.user = await CoreUser.getProfile(this.siteInfo.userid);
|
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.
|
* Opens User profile page.
|
||||||
*
|
*
|
||||||
|
|
|
@ -264,6 +264,8 @@
|
||||||
--core-course-module-navigation-max-height: 56px;
|
--core-course-module-navigation-max-height: 56px;
|
||||||
--core-course-module-navigation-background: var(--contrast-background);
|
--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-category-color: var(--purple);
|
||||||
--addon-calendar-event-course-color: var(--red);
|
--addon-calendar-event-course-color: var(--red);
|
||||||
--addon-calendar-event-group-color: var(--yellow);
|
--addon-calendar-event-group-color: var(--yellow);
|
||||||
|
|
Loading…
Reference in New Issue