MOBILE-4653 core: Add site logo component

crazyserver · Dec 4, 2024 · 89e905f · 89e905f
1 parent 53baee7
commit 89e905f
Show file tree

Hide file tree

Showing 22 changed files with 173 additions and 118 deletions.
diff --git a/src/core/classes/sites/unauthenticated-site.ts b/src/core/classes/sites/unauthenticated-site.ts
@@ -163,7 +163,7 @@ export class CoreUnauthenticatedSite {
     }
 
     /**
-     * Check whether the app should use the local logo instead of the remote one.
+     * Check whether the app should use the local logo instead or the remote one.
      *
      * @returns Whether local logo is forced.
      */
@@ -180,10 +180,10 @@ export class CoreUnauthenticatedSite {
     getLogoUrl(config?: CoreSitePublicConfigResponse): string | undefined {
         config = config ?? this.publicConfig;
         if (!config || this.forcesLocalLogo()) {
-            return 'assets/img/login_logo.png';
+            return;
         }
 
-        return config.logourl || config.compactlogourl || 'assets/img/login_logo.png';
+        return config.logourl || config.compactlogourl || undefined;
     }
 
     /**

diff --git a/src/core/components/site-logo/site-logo.html b/src/core/components/site-logo/site-logo.html
@@ -0,0 +1,13 @@
+<div class="core-logo-container" *ngIf="showLogo && logoLoaded">
+    <img *ngIf="siteLogo" [src]="siteLogo" class="core-logo" [alt]="siteName" core-external-content (error)="imageError()">
+    <img *ngIf="!siteLogo" [src]="fallbackLogo" class="core-logo" [alt]="siteName">
+</div>
+
+<p *ngIf="siteNameMode === 'p' && siteName" class="ion-margin-top ion-no-padding core-logo-sitename">
+    <core-format-text [text]="siteName" [filter]="false" contextLevel="system" [contextInstanceId]="0" />
+</p>
+<core-format-text *ngIf="siteNameMode === '' && siteName" [text]="siteName" contextLevel="system" [contextInstanceId]="0"
+    class="core-logo-sitename" />
+<h2 *ngIf="siteNameMode === 'h2' && siteName" class="ion-margin-top ion-no-padding core-logo-sitename">
+    <core-format-text [text]="siteName" [filter]="false" contextLevel="system" [contextInstanceId]="0" />
+</h2>
diff --git a/src/core/components/site-logo/site-logo.scss b/src/core/components/site-logo/site-logo.scss
@@ -0,0 +1,19 @@
+:host {
+    display: block;
+}
+
+.core-logo-container {
+    display: var(--core-site-logo-display, block);
+    margin-bottom: var(--core-site-logo-margin-bottom, 0px);
+}
+
+img.core-logo {
+    max-height: var(--core-site-logo-maxheight);
+    max-width: 100%;
+}
+
+.core-logo-sitename {
+    display: var(--core-site-logo-sitename-display, block);
+    font: var(--core-site-logo-sitename-font);
+    margin-bottom: var(--core-site-logo-sitename-margin-bottom, 0px);
+}
diff --git a/src/core/components/site-logo/site-logo.ts b/src/core/components/site-logo/site-logo.ts
@@ -0,0 +1,93 @@
+// (C) Copyright 2015 Moodle Pty Ltd.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { CoreSharedModule } from '@/core/shared.module';
+import { CoreSites } from '@services/sites';
+import { CoreEventObserver, CoreEvents } from '@singletons/events';
+import { CoreSite } from '@classes/sites/site';
+
+/**
+ * Component to render the site logo.
+ */
+@Component({
+    selector: 'core-site-logo',
+    templateUrl: 'site-logo.html',
+    styleUrl: 'site-logo.scss',
+    standalone: true,
+    imports: [CoreSharedModule],
+
+})
+export class CoreSiteLogoComponent implements OnInit, OnDestroy {
+
+    @Input() hideOnError = false;
+    @Input() fallbackLogo = 'assets/img/top_logo.png'; // Should be a local path.
+    @Input() siteNameMode: CoreSiteLogoSiteNameMode = CoreSiteLogoSiteNameMode.NOTAG;
+    @Input() showLogo = true;
+    @Input() site?: CoreSite;
+
+    siteName?: string;
+    siteLogo?: string;
+    logoLoaded = false;
+
+    protected updateSiteObserver: CoreEventObserver;
+
+    constructor() {
+        this.updateSiteObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, async () => {
+            await this.loadSiteName();
+        }, CoreSites.getCurrentSiteId());
+    }
+
+    /**
+     * @inheritdoc
+     */
+    async ngOnInit(): Promise<void> {
+        await this.loadSiteName();
+    }
+
+    /**
+     * Function to handle the image error.
+     */
+    imageError(): void {
+        if (this.hideOnError) {
+            this.showLogo = false;
+        }
+        this.siteLogo = undefined;
+    }
+
+    /**
+     * Load the site name.
+     */
+    protected async loadSiteName(): Promise<void> {
+        const site = this.site ?? CoreSites.getRequiredCurrentSite();
+        this.siteName = await site.getSiteName() || '';
+
+        this.siteLogo = site.getLogoUrl() ?? this.fallbackLogo;
+        this.logoLoaded = true;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.updateSiteObserver.off();
+    }
+
+}
+
+export const enum CoreSiteLogoSiteNameMode {
+    HEADING2 = 'h2',
+    PARAGRAPH = 'p',
+    NOTAG = '',
+}
diff --git a/src/core/features/courses/courses-my-lazy.module.ts b/src/core/features/courses/courses-my-lazy.module.ts
@@ -20,6 +20,7 @@ import { CoreBlockComponentsModule } from '@features/block/components/components
 
 import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 import { CoreCoursesMyPage } from '@features/courses/pages/my/my';
+import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
 
 const routes: Routes = [
     {
@@ -34,6 +35,7 @@ const routes: Routes = [
         CoreSharedModule,
         CoreBlockComponentsModule,
         CoreMainMenuComponentsModule,
+        CoreSiteLogoComponent,
     ],
     declarations: [
         CoreCoursesMyPage,

diff --git a/src/core/features/courses/pages/my/my.html b/src/core/features/courses/pages/my/my.html
@@ -5,8 +5,7 @@
         </ion-buttons>
         <ion-title>
             <h1>
-                <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-header-sitename" />
-                <img src="assets/img/top_logo.png" class="core-header-logo" [alt]="siteName">
+                <core-site-logo />
             </h1>
         </ion-title>
         <ion-buttons slot="end">

diff --git a/src/core/features/courses/pages/my/my.ts b/src/core/features/courses/pages/my/my.ts
@@ -48,7 +48,6 @@ export class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirective {
 
     @ViewChild(CoreBlockComponent) block!: CoreBlockComponent;
 
-    siteName = '';
     downloadCoursesEnabled = false;
     userId: number;
     loadedBlock?: Partial<CoreCourseBlock>;
@@ -66,8 +65,6 @@ export class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirective {
         // Refresh the enabled flags if site is updated.
         this.updateSiteObserver = CoreEvents.on(CoreEvents.SITE_UPDATED, async () => {
             this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite();
-            await this.loadSiteName();
-
         }, CoreSites.getCurrentSiteId());
 
         this.userId = CoreSites.getCurrentSiteUserId();
@@ -98,8 +95,6 @@ export class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirective {
 
         CoreSites.loginNavigationFinished();
 
-        await this.loadSiteName();
-
         this.loadContent(true);
     }
 
@@ -156,14 +151,6 @@ export class CoreCoursesMyPage implements OnInit, OnDestroy, AsyncDirective {
         this.logView();
     }
 
-    /**
-     * Load the site name.
-     */
-    protected async loadSiteName(): Promise<void> {
-        const site = CoreSites.getRequiredCurrentSite();
-        this.siteName = await site.getSiteName() || '';
-    }
-
     /**
      * Load fallback blocks.
      */

diff --git a/src/core/features/login/login-credentials-lazy.module.ts b/src/core/features/login/login-credentials-lazy.module.ts
@@ -18,6 +18,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginComponentsModule } from '@features/login/components/components.module';
 import { CoreLoginCredentialsPage } from '@features/login/pages/credentials/credentials';
+import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
 
 const routes: Routes = [
     {
@@ -31,6 +32,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         CoreLoginComponentsModule,
+        CoreSiteLogoComponent,
     ],
     declarations: [
         CoreLoginCredentialsPage,

diff --git a/src/core/features/login/login-reconnect-lazy.module.ts b/src/core/features/login/login-reconnect-lazy.module.ts
@@ -18,6 +18,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreLoginComponentsModule } from '@features/login/components/components.module';
 import { CoreLoginReconnectPage } from '@features/login/pages/reconnect/reconnect';
+import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
 
 const routes: Routes = [
     {
@@ -31,6 +32,7 @@ const routes: Routes = [
         RouterModule.forChild(routes),
         CoreSharedModule,
         CoreLoginComponentsModule,
+        CoreSiteLogoComponent,
     ],
     declarations: [
         CoreLoginReconnectPage,

diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
@@ -29,20 +29,20 @@
         margin-bottom: 32px;
 
         .core-login-site {
-            .core-login-site-logo {
+            .core-login-site-logo,
+            core-site-logo {
+                --core-site-logo-maxheight: 104px;
+                --core-site-logo-sitename-margin-bottom: 8px;
+                --core-site-logo-sitename-font: var(--mdl-typography-subtitle-font-lg);
+
                 width: 90%;
                 max-width: 300px;
                 margin: 0px auto;
-
-                img {
-                    max-width: 100%;
-                    max-height: 104px;
-                }
             }
 
-            .core-sitename {
-                font-size: 1.2rem;
-                margin-bottom: 8px;
+            .core-login-site-logo img {
+                max-width: 100%;
+                max-height: 104px;
             }
 
             .core-siteurl {
@@ -89,9 +89,12 @@
     }
 
     @if ($core-fixed-url) {
-        .core-sitename, .core-siteurl {
+        .core-siteurl {
             display: none;
         }
+        core-site-logo {
+            --core-site-logo-sitename-display: none;
+        }
     }
 
     @if ($core-login-button-outline) {

diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
@@ -23,16 +23,7 @@ <h1>{{ 'core.login.login' | translate }}</h1>
         <ng-container *ngIf="!siteCheckError && site && credForm">
             <div class="ion-text-wrap ion-text-center core-login-info-box">
                 <div class="core-login-site">
-                    <div class="core-login-site-logo">
-                        <!-- Show site logo or a default image. -->
-                        <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" core-external-content
-                            onError="this.src='assets/img/login_logo.png'">
-                        <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
-                    </div>
-
-                    <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
-                        <core-format-text [text]="siteName" [filter]="false" />
-                    </h2>
+                    <core-site-logo fallbackLogo="assets/img/login_logo.png" siteNameMode="h2" [site]="site" />
                     <p class="core-siteurl" *ngIf="displaySiteUrl">{{site.siteUrl}}</p>
                 </div>
 

diff --git a/src/core/features/login/pages/credentials/credentials.ts b/src/core/features/login/pages/credentials/credentials.ts
@@ -57,8 +57,6 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
 
     credForm!: FormGroup;
     site!: CoreUnauthenticatedSite;
-    siteName?: string;
-    logoUrl?: string;
     authInstructions?: string;
     canSignup?: boolean;
     pageLoaded = false;
@@ -104,11 +102,9 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             }
 
             this.site = CoreSitesFactory.makeUnauthenticatedSite(siteUrl, this.siteConfig);
-            this.logoUrl = this.site.getLogoUrl(this.siteConfig);
             this.urlToOpen = CoreNavigator.getRouteParam('urlToOpen');
             this.supportConfig = this.siteConfig && new CoreUserGuestSupportConfig(this.site, this.siteConfig);
             this.displaySiteUrl = this.site.shouldDisplayInformativeLinks();
-            this.siteName = await this.site.getSiteName();
         } catch (error) {
             CoreDomUtils.showErrorModal(error);
 
@@ -220,8 +216,6 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
         if (this.site.isDemoModeSite()) {
             this.showScanQR = false;
         } else {
-            this.siteName = this.siteConfig.sitename;
-            this.logoUrl = this.site.getLogoUrl(this.siteConfig);
             this.showScanQR = await CoreLoginHelper.displayQRInCredentialsScreen(this.siteConfig.tool_mobile_qrcodetype);
         }
 

diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
@@ -31,16 +31,8 @@ <h1>{{ 'core.login.reconnect' | translate }}</h1>
 
             <div class="ion-text-wrap ion-text-center core-login-info-box">
                 <div class="core-login-site">
-                    <div class="core-login-site-logo" *ngIf="!showUserAvatar">
-                        <!-- Show site logo or a default image. -->
-                        <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt=""
-                            core-external-content [siteId]="siteId">
-                        <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
-                    </div>
+                    <core-site-logo fallbackLogo="assets/img/login_logo.png" siteNameMode="p" [showLogo]="!showUserAvatar" [site]="site" />
 
-                    <p *ngIf="siteInfo?.siteName" class="ion-no-margin ion-no-padding core-sitename">
-                        <core-format-text [text]="siteInfo?.siteName" [filter]="false" />
-                    </p>
                     <p class="core-siteurl" *ngIf="displaySiteUrl">{{site.siteUrl}}</p>
                 </div>
 

diff --git a/src/core/features/login/pages/reconnect/reconnect.ts b/src/core/features/login/pages/reconnect/reconnect.ts
@@ -49,7 +49,6 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
 
     credForm: FormGroup;
     site!: CoreSite;
-    logoUrl?: string;
     displaySiteUrl = false;
     showForgottenPassword = true;
     showUserAvatar = false;
@@ -202,7 +201,6 @@ export class CoreLoginReconnectPage implements OnInit, OnDestroy {
         }
 
         this.isBrowserSSO = CoreLoginHelper.isSSOLoginNeeded(this.siteConfig.typeoflogin);
-        this.logoUrl = this.site.getLogoUrl();
 
         await CoreSites.checkApplication(this.siteConfig);
     }

diff --git a/src/core/features/login/pages/site/site.scss b/src/core/features/login/pages/site/site.scss
@@ -99,7 +99,8 @@
 }
 
 @include media-breakpoint-up(md) {
-    ion-content .core-login-site-logo {
+    ion-content .core-login-site-logo,
+    ion-content core-site-logo {
         margin-top: 20%;
         &.hidden {
             margin-top: 0;