MOBILE-3811 mod: Use new module icons on 4.0+ sites

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

@@ -1,3 +1,5 @@
+@import "~theme/globals";
+
 :host {
     --size: var(--module-icon-size);
     --margin-end: 0px;
@@ -6,6 +8,19 @@
     margin-top: var(--margin-vertical);
     margin-bottom: var(--margin-vertical);
     margin-right: var(--margin-end);
+    border-radius: 4px;
+    padding: 0.7rem;
+    background-color: $gray-lighter;
+
+    @each $type, $value in $activity-icon-colors {
+        &.#{$type} {
+            background-color: var(--activity#{$type});
+            img {
+                filter: brightness(0) invert(1);
+            }
+        }
+    }
+
 }
 
 img {
@@ -23,7 +38,7 @@ img {
 
 :host-context(ion-item) {
     --margin-vertical: 12px;
-    --margin-end: 32px;
+    --margin-end: 1rem;
 }
 
 :host-context(ion-card ion-item) {
@@ -34,4 +49,4 @@ img {
 :host-context([dir=rtl]) {
     margin-right: unset;
     margin-left: var(--margin-end);
-}
+}

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

@@ -12,8 +12,11 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
+import { CoreConstants } from '@/core/constants';
+import { Component, ElementRef, Input, OnChanges, OnInit, SimpleChange } from '@angular/core';
 import { CoreCourse } from '@features/course/services/course';
+import { CoreCourseModuleDelegate } from '@features/course/services/module-delegate';
+import { CoreSites } from '@services/sites';
 
 const assetsPath = 'assets/img/';
 const fallbackModName = 'external-tool';
@@ -38,11 +41,31 @@ export class CoreModIconComponent implements OnInit, OnChanges {
     isLocalUrl = true;
     linkIconWithComponent = false;
 
+    protected legacyIcon = true; // @deprecatedonmoodle since Moodle 3.11.
+
+    constructor(protected el: ElementRef) { }
+
     /**
      * @inheritdoc
      */
     async ngOnInit(): Promise<void> {
+        if (!this.modname && this.modicon) {
+            // Guess module from the icon url.
+            const matches = this.modicon.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/');
+            this.modname = (matches && matches[1]) || '';
+        }
+
         this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : '';
+        if (CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) {
+            this.legacyIcon = false;
+            const purposeClass =
+                CoreCourseModuleDelegate.supportsFeature<string>(this.modname, CoreConstants.FEATURE_MOD_PURPOSE, '');
+
+            if (purposeClass != '') {
+                const element: HTMLElement = this.el.nativeElement;
+                element.classList.add(purposeClass);
+            }
+        }
 
         this.setIcon();
     }
@@ -82,7 +105,13 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             ? fallbackModName
             : this.modname;
 
-        this.icon = assetsPath + moduleName + '.svg';
+        let path = assetsPath + 'mod/';
+        if (this.legacyIcon) {
+            // @deprecatedonmoodle since Moodle 3.11.
+            path = assetsPath + 'mod_legacy/';
+        }
+
+        this.icon = path + moduleName + '.svg';
     }
 
 }

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

@@ -58,7 +58,7 @@
             </div>
         </ion-item>
         <ion-item *ngIf="hasInfo" id="core-course-module-{{module.id}}-info"
-            class="ion-text-wrap core-course-module-handler core-module-module-info {{module.handlerData.class}}" [ngClass]="{
+            class="ion-text-wrap core-course-module-handler core-course-module-info {{module.handlerData.class}}" [ngClass]="{
                 'item-media': module.handlerData.icon,
                 'item-dimmed': module.visible === 0 || module.uservisible === false
             }" detail="false">

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

@@ -31,7 +31,7 @@
         }
     }
 
-    .core-module-module-info {
+    .core-course-module-info {
         ion-badge {
             text-align: start;
         }
@@ -51,7 +51,7 @@
         clear: both;
     }
 
-    .core-module-main-item + .core-module-module-info ion-label {
+    .core-module-main-item + .core-course-module-info ion-label {
         margin-top: 0px;
     }
 
@@ -59,8 +59,4 @@
         --inner-border-width: 0px;
     }
 
-    .core-module-module-info ion-label {
-        margin-inline-start: 50px;
-    }
-
 }

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

@@ -125,9 +125,8 @@ export class CoreCourseProvider {
     static readonly COMPONENT = 'CoreCourse';
 
     readonly CORE_MODULES = [
-        'assign', 'assignment', 'book', 'chat', 'choice', 'data', 'database', 'date', 'external-tool',
+        'assign', 'bigbluebuttonbn', 'book', 'chat', 'choice', 'data', 'feedback', 'folder', 'forum', 'glossary', 'h5pactivity',
-        'feedback', 'file', 'folder', 'forum', 'glossary', 'ims', 'imscp', 'label', 'lesson', 'lti', 'page', 'quiz',
+        'imscp', 'label', 'lesson', 'lti', 'page', 'quiz', 'resource', 'scorm', 'survey', 'url', 'wiki', 'workshop',
-        'resource', 'scorm', 'survey', 'url', 'wiki', 'workshop', 'h5pactivity', 'bigbluebuttonbn',
     ];
 
     protected logger: CoreLogger;
@@ -726,8 +725,14 @@ export class CoreCourseProvider {
             moduleName = 'external-tool';
         }
 
+        let path = 'assets/img/mod/';
+        if (!CoreSites.getCurrentSite()?.isVersionGreaterEqualThan('4.0')) {
+            // @deprecatedonmoodle since Moodle 3.11.
+            path = 'assets/img/mod_legacy/';
+        }
+
         // Use default icon on core modules.
-        return 'assets/img/mod/' + moduleName + '.svg';
+        return path + moduleName + '.svg';
     }
 
     /**

src/core/lang.json

@@ -164,12 +164,10 @@
     "minutes": "minutes",
     "misc": "Miscellaneous",
     "mod_assign": "Assignment",
-    "mod_assignment": "Assignment 2.2 (Disabled)",
     "mod_book": "Book",
     "mod_chat": "Chat",
     "mod_choice": "Choice",
     "mod_data": "Database",
-    "mod_database": "Database",
     "mod_external-tool": "External tool",
     "mod_feedback": "Feedback",
     "mod_file": "File",
@@ -177,7 +175,6 @@
     "mod_forum": "Forum",
     "mod_glossary": "Glossary",
     "mod_h5pactivity": "H5P",
-    "mod_ims": "IMS content package",
     "mod_imscp": "IMS content package",
     "mod_label": "Label",
     "mod_lesson": "Lesson",

src/theme/globals.variables.scss

@@ -139,5 +139,11 @@ $core-user-hide-siteinfo: $core-more-hide-siteinfo !default;
 $core-user-hide-sitename: $core-more-hide-sitename !default;
 $core-user-hide-siteurl: $core-more-hide-siteurl !default;
 
-
+$activity-icon-colors: (
-
+    administration: #5d63f6,
+    assessment: #eb66a2,
+    collaboration: #f7634d,
+    communication: #11a676,
+    content: #399be2,
+    interface: #a378ff
+) !default;

src/theme/theme.light.scss

@@ -316,4 +316,9 @@
         --core-dd-question-color-#{$i + 1}: #{nth($core-dd-question-colors, $i + 1)};
         --core-dd-question-color-#{$i + 1}-contrast: #{get_contrast_color(nth($core-dd-question-colors, $i + 1))};
     }
+
+    // Make activtity colours available for custom modules.
+    @each $type, $value in $activity-icon-colors {
+        --activity#{$type}: #{$value};
+    }
 }