Merge pull request #3582 from crazyserver/MOBILE-4250

MOBILE-4250 course: Remove module name from course module info component

src/addons/storagemanager/pages/course-storage/course-storage.html

@@ -105,7 +105,7 @@
                             <ion-item class="core-course-storage-activity"
                                 *ngIf="downloadEnabled || (!module.calculatingSize && module.totalSize > 0)">
                                 <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon"
-                                    [modname]="module.modname" [componentId]="module.instance">
+                                    [modname]="module.modname" [componentId]="module.instance" [fallbackTranslation]="module.modplural">
                                 </core-mod-icon>
                                 <ion-label class="ion-text-wrap">
                                     <p class="item-heading {{module.handlerData!.class}} addon-storagemanager-module-size">

src/core/components/mod-icon/mod-icon.ts

@@ -31,7 +31,8 @@ const fallbackModName = 'external-tool';
 })
 export class CoreModIconComponent implements OnInit, OnChanges {
 
-    @Input() modname?: string; // The module name. Used also as component if set.
+    @Input() modname = ''; // The module name. Used also as component if set.
+    @Input() fallbackTranslation = ''; // Fallback translation string if cannot auto translate.
     @Input() componentId?: number; // Component Id for external icons.
     @Input() modicon?: string; // Module icon url or local url.
     @Input() noFilter?: boolean; // Whether to disable filters.
@@ -63,7 +64,7 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             }
         }
 
-        this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : '';
+        this.modNameTranslated = CoreCourse.translateModuleName(this.modname, this.fallbackTranslation);
         if (CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) {
             this.legacyIcon = false;
 

src/core/features/course/components/module-info/core-course-module-info.html

@@ -2,7 +2,6 @@
     <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
     </core-mod-icon>
     <ion-label>
-        <div class="core-modulename" *ngIf="moduleNameTranslated">{{moduleNameTranslated}}</div>
         <h1>
             <core-format-text [text]="module.name" contextLevel="module" [component]="component" [componentId]="componentId"
                 [contextInstanceId]="module.id" [courseId]="courseId">

src/core/features/course/components/module-info/course-module-info.scss

@@ -8,10 +8,6 @@
 
     @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
-    .core-modulename {
-        text-transform: uppercase;
-    }
-
     core-mod-icon {
         align-self: flex-start;
     }

src/core/features/course/components/module-info/module-info.ts

@@ -61,7 +61,7 @@ export class CoreCourseModuleInfoComponent implements OnInit {
     async ngOnInit(): Promise<void> {
         this.modicon = await CoreCourseModuleDelegate.getModuleIconSrc(this.module.modname, this.module.modicon, this.module);
 
-        this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname || '');
+        this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
         this.showCompletion = CoreSites.getRequiredCurrentSite().isVersionGreaterEqualThan('3.11');
     }
 

src/core/features/course/components/module-summary/module-summary.html

@@ -14,7 +14,8 @@
         <ion-item class="ion-text-wrap" *ngIf="module" lines="full">
             <ion-label>
                 <p *ngIf="moduleNameTranslated" class="core-modulename">
-                    <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance">
+                    <core-mod-icon slot="start" [modicon]="modicon" [modname]="module.modname" [componentId]="module.instance"
+                        [fallbackTranslation]="module.modplural">
                     </core-mod-icon>
                     {{moduleNameTranslated}}
                 </p>

src/core/features/course/components/module-summary/module-summary.ts

@@ -174,7 +174,7 @@ export class CoreCourseModuleSummaryComponent implements OnInit, OnDestroy {
         this.componentId = this.module.id;
         this.externalUrl = this.module.url;
         this.courseId = this.courseId || this.module.course;
-        this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname || '');
+        this.moduleNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
 
         this.blog = await AddonBlog.isPluginEnabled();
 

src/core/features/course/components/module/core-course-module.html

@@ -8,7 +8,7 @@
             }">
 
             <core-mod-icon slot="start" *ngIf="module.handlerData.icon" [modicon]="module.handlerData.icon" [modname]="module.modname"
-                [componentId]="module.instance">
+                [componentId]="module.instance" [fallbackTranslation]="module.modplural">
             </core-mod-icon>
 
             <ion-label class="core-module-title">

src/core/features/course/components/module/module.ts

@@ -69,7 +69,7 @@ export class CoreCourseModuleComponent implements OnInit, OnDestroy {
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
-        this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname) || '';
+        this.modNameTranslated = CoreCourse.translateModuleName(this.module.modname, this.module.modplural);
         this.showLegacyCompletion = this.showLegacyCompletion ??
             CoreConstants.CONFIG.uselegacycompletion ??
             !CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('3.11');

src/core/features/course/services/course.ts

@@ -1509,17 +1509,17 @@ export class CoreCourseProvider {
      * Translate a module name to current language.
      *
      * @param moduleName The module name.
+     * @param fallback Fallback text to use if not translated. Will use moduleName otherwise.
+     *
      * @returns Translated name.
      */
-    translateModuleName(moduleName: string): string {
+    translateModuleName(moduleName: string, fallback?: string): string {
-        if (this.CORE_MODULES.indexOf(moduleName) < 0) {
-            moduleName = 'external-tool';
-        }
-
         const langKey = 'core.mod_' + moduleName;
         const translated = Translate.instant(langKey);
 
-        return translated !== langKey ? translated : moduleName;
+        return translated !== langKey ?
+            translated :
+            (fallback || moduleName);
     }
 
     /**

src/theme/theme.base.scss

@@ -1601,9 +1601,6 @@ ion-alert:focus-visible,
 ion-popover:focus-visible,
 ion-modal:focus-visible {
     box-shadow: none;
-}
-
-ion-loading:focus-visible {
     border-radius: 0;
 }