MOBILE-4653 core: Add site logo component

crazyserver · Dec 4, 2024 · 355a033 · 355a033
1 parent 53baee7
commit 355a033
Show file tree

Hide file tree

Showing 14 changed files with 127 additions and 80 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,3 @@
+<img *ngIf="logoLoaded && siteLogo" [src]="siteLogo" class="core-logo" [alt]="siteName" core-external-content (error)="imageError()">
+<img *ngIf="logoLoaded && !siteLogo" [src]="fallbackLogo" class="core-logo" [alt]="siteName">
+<core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" class="core-logo-sitename" />
diff --git a/src/core/components/site-logo/site-logo.scss b/src/core/components/site-logo/site-logo.scss
@@ -0,0 +1,14 @@
+:host {
+    display: block;
+}
+
+img.core-logo {
+    max-height: var(--core-site-logo-maxheight);
+    display: var(--core-site-logo-display);
+    margin-bottom: var(--core-site-logo-margin-bottom, 0px);
+}
+
+.core-logo-sitename {
+    display: var(--core-site-logo-sitename-display);
+    font: var(--core-site-logo-sitename-font);
+}
diff --git a/src/core/components/site-logo/site-logo.ts b/src/core/components/site-logo/site-logo.ts
@@ -0,0 +1,83 @@
+// (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';
+
+/**
+ * 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.
+
+    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.logoLoaded = false;
+        }
+        this.siteLogo = undefined;
+    }
+
+    /**
+     * Load the site name.
+     */
+    protected async loadSiteName(): Promise<void> {
+        const site = CoreSites.getRequiredCurrentSite();
+        this.siteName = await site.getSiteName() || '';
+
+        this.siteLogo = site.getLogoUrl() ?? this.fallbackLogo;
+        this.logoLoaded = true;
+    }
+
+    /**
+     * @inheritdoc
+     */
+    ngOnDestroy(): void {
+        this.updateSiteObserver.off();
+    }
+
+}
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/pages/credentials/credentials.ts b/src/core/features/login/pages/credentials/credentials.ts
@@ -104,7 +104,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             }
 
             this.site = CoreSitesFactory.makeUnauthenticatedSite(siteUrl, this.siteConfig);
-            this.logoUrl = this.site.getLogoUrl(this.siteConfig);
+            this.logoUrl = this.site.getLogoUrl();
             this.urlToOpen = CoreNavigator.getRouteParam('urlToOpen');
             this.supportConfig = this.siteConfig && new CoreUserGuestSupportConfig(this.site, this.siteConfig);
             this.displaySiteUrl = this.site.shouldDisplayInformativeLinks();
@@ -221,7 +221,7 @@ export class CoreLoginCredentialsPage implements OnInit, OnDestroy {
             this.showScanQR = false;
         } else {
             this.siteName = this.siteConfig.sitename;
-            this.logoUrl = this.site.getLogoUrl(this.siteConfig);
+            this.logoUrl = this.site.getLogoUrl();
             this.showScanQR = await CoreLoginHelper.displayQRInCredentialsScreen(this.siteConfig.tool_mobile_qrcodetype);
         }
 

diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.html b/src/core/features/mainmenu/components/user-menu/user-menu.html
@@ -13,30 +13,22 @@ <h1>
     </ion-toolbar>
 </ion-header>
 <ion-content>
-    <core-loading [hideUntil]="siteLogoLoaded && handlersLoaded">
+    <core-loading [hideUntil]="handlersLoaded">
         <ion-list>
             <!-- Site info with URL and clickable. -->
             <ion-item button class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo && displaySiteUrl" lines="full" [detail]="false"
                 [href]="siteUrl" core-link>
                 <ion-label>
                     <!-- Show site logo. -->
-                    <img class="core-usermenu-site-logo" *ngIf="siteLogo && siteLogoLoaded" [src]="siteLogo" role="presentation" alt=""
-                        core-external-content onError="this.class='image-not-found'">
-                    <p class="core-usermenu-sitename">
-                        <core-format-text [text]="siteName" contextLevel="system" [contextInstanceId]="0" [wsNotFiltered]="true" />
-                    </p>
+                    <core-site-logo [hideOnError]="true" />
                     <a [href]="siteUrl" core-link class="core-usermenu-siteurl">{{ siteUrl }}</a>
                 </ion-label>
             </ion-item>
             <!-- Site info without URL and not clickable. -->
             <ion-item class="core-usermenu-siteinfo ion-text-wrap" *ngIf="siteInfo && !displaySiteUrl" lines="full" detail="false">
                 <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" />
-                    </p>
+                    <core-site-logo [hideOnError]="true" />
                 </ion-label>
             </ion-item>
 

diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.scss b/src/core/features/mainmenu/components/user-menu/user-menu.scss
@@ -22,23 +22,17 @@
     }
 }
 
-.core-usermenu-sitename {
-    font: var(--mdl-typography-subtitle-font-lg);
-}
-
-img.core-usermenu-site-logo {
-    margin-bottom: 8px;
-    max-height: var(--core-user-menu-site-logo-max-height);
-}
+core-site-logo {
+    --core-site-logo-margin-bottom: 8px;
+    --core-site-logo-maxheight: var(--core-user-menu-site-logo-max-height);
+    --core-site-logo-sitename-display: block;
 
-img.image-not-found {
-    display: none;
+    --core-site-logo-sitename-font: var(--mdl-typography-subtitle-font-lg);
 }
 
-
 @if ($core-user-hide-sitename) {
-    .core-usermenu-sitename {
-        display: none;
+    core-site-logo {
+        --core-site-logo-sitename-display: none;
     }
 }
 

diff --git a/src/core/features/mainmenu/components/user-menu/user-menu.ts b/src/core/features/mainmenu/components/user-menu/user-menu.ts
@@ -15,7 +15,6 @@
 import { CoreConstants } from '@/core/constants';
 import { CoreSharedModule } from '@/core/shared.module';
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { CoreSite } from '@classes/sites/site';
 import { CoreSiteInfo } from '@classes/sites/unauthenticated-site';
 import { CoreFilter } from '@features/filter/services/filter';
 import { CoreUserAuthenticatedSupportConfig } from '@features/user/classes/support/authenticated-support-config';
@@ -31,10 +30,10 @@ import { CoreModals } from '@services/modals';
 import { CoreNavigator } from '@services/navigator';
 import { CoreSites } from '@services/sites';
 import { CoreDomUtils } from '@services/utils/dom';
-import { CorePromiseUtils } from '@singletons/promise-utils';
 import { ModalController } from '@singletons';
 import { Subscription } from 'rxjs';
 import { CoreLoginHelper } from '@features/login/services/login-helper';
+import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
 
 /**
  * Component to display a user menu.
@@ -46,15 +45,14 @@ import { CoreLoginHelper } from '@features/login/services/login-helper';
     standalone: true,
     imports: [
         CoreSharedModule,
+        CoreSiteLogoComponent,
     ],
 })
 export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
 
     siteId?: string;
     siteInfo?: CoreSiteInfo;
     siteName?: string;
-    siteLogo?: string;
-    siteLogoLoaded = false;
     siteUrl?: string;
     displaySiteUrl = false;
     handlers: CoreUserProfileHandlerData[] = [];
@@ -81,8 +79,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
         this.removeAccountOnLogout = !!CoreConstants.CONFIG.removeaccountonlogout;
         this.displaySiteUrl = currentSite.shouldDisplayInformativeLinks();
 
-        this.loadSiteLogo(currentSite);
-
         if (!this.siteInfo) {
             return;
         }
@@ -127,25 +123,6 @@ export class CoreMainMenuUserMenuComponent implements OnInit, OnDestroy {
             });
     }
 
-    /**
-     * Load site logo from current site public config.
-     *
-     * @param currentSite Current site object.
-     * @returns Promise resolved when done.
-     */
-    protected async loadSiteLogo(currentSite: CoreSite): Promise<void> {
-        if (currentSite.forcesLocalLogo()) {
-            this.siteLogo = currentSite.getLogoUrl();
-            this.siteLogoLoaded = true;
-
-            return;
-        }
-
-        const siteConfig = await CorePromiseUtils.ignoreErrors(currentSite.getPublicConfig());
-        this.siteLogo = currentSite.getLogoUrl(siteConfig);
-        this.siteLogoLoaded = true;
-    }
-
     /**
      * Opens User profile page.
      *

diff --git a/src/core/features/mainmenu/mainmenu-home-lazy.module.ts b/src/core/features/mainmenu/mainmenu-home-lazy.module.ts
@@ -22,6 +22,7 @@ import { CoreMainMenuHomeHandlerService } from '@features/mainmenu/services/hand
 import { CoreMainMenuComponentsModule } from '@features/mainmenu/components/components.module';
 import { resolveHomeRoutes } from '@features/mainmenu/mainmenu-home-routing.module';
 import { CoreMainMenuHomePage } from '@features/mainmenu/pages/home/home';
+import { CoreSiteLogoComponent } from '@/core/components/site-logo/site-logo';
 
 /**
  * Build module routes.
@@ -49,6 +50,7 @@ function buildRoutes(injector: Injector): Routes {
     imports: [
         CoreSharedModule,
         CoreMainMenuComponentsModule,
+        CoreSiteLogoComponent,
     ],
     providers: [
         { provide: ROUTES, multi: true, useFactory: buildRoutes, deps: [Injector] },

diff --git a/src/core/features/mainmenu/pages/home/home.html b/src/core/features/mainmenu/pages/home/home.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/theme/components/ion-header.scss b/src/theme/components/ion-header.scss
@@ -69,15 +69,10 @@ ion-header.header-md {
             display: inline !important;
         }
 
-        h1 {
-            .core-header-logo {
-                max-height: var(--core-mainpage-headerlogo-maxheight);
-                display: var( --core-mainpage-headerlogo-display);
-            }
-
-            .core-header-sitename {
-                display: var(--core-mainpage-sitename-display);
-            }
+        h1 core-site-logo {
+            --core-site-logo-maxheight: var(--core-mainpage-headerlogo-maxheight);
+            --core-site-logo-display: var(--core-mainpage-headerlogo-display);
+            --core-site-logo-sitename-display: var(--core-mainpage-sitename-display);
         }
 
         h1, h2, .subheading {