Merge pull request #3061 from crazyserver/MOBILE-3811

MOBILE-3811 notifications: Apply new icons to notifications

src/addons/notifications/notifications.scss

@@ -1,6 +1,25 @@
 @import "~theme/globals";
 
 :host {
+    ::ng-deep {
+        core-user-avatar .core-avatar-extra {
+            margin: 0 !important;
+            position: absolute;
+            right: -4px;
+            bottom: -4px;
+        }
+        core-user-avatar img.core-avatar-extra {
+            background: none;
+            width: 24px;
+            height: 24px;
+            border-radius: 0 !important;
+        }
+        core-user-avatar core-mod-icon.core-avatar-extra {
+            --size: 16px;
+            padding: 0.2rem;
+        }
+    }
+
     .core-notification-icon {
         width: 34px;
         height: 34px;

src/addons/notifications/pages/list/list.html

@@ -32,7 +32,13 @@
                     : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}">
                 <core-user-avatar *ngIf="notification.useridfrom > 0" [user]="notification" slot="start"
                     [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname"
-                    [userId]="notification.useridfrom" [extraIcon]="notification.iconurl"></core-user-avatar>
+                    [userId]="notification.useridfrom">
+                    <img *ngIf="notification.iconurl && !notification.modname" [src]="notification.iconurl" alt="" role="presentation"
+                        class="core-avatar-extra">
+                    <core-mod-icon *ngIf="notification.modname" [modicon]="notification.iconurl" [modname]="notification.modname"
+                        [showAlt]="false" class="core-avatar-extra">
+                    </core-mod-icon>
+                </core-user-avatar>
 
                 <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt="" role="presentation"
                     class="core-notification-icon" slot="start">

src/addons/notifications/pages/list/list.ts

@@ -53,7 +53,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
     protected pendingRefresh = false;
 
     /**
-     * Component being initialized.
+     * @inheritdoc
      */
     ngOnInit(): void {
         this.fetchNotifications();
@@ -221,7 +221,7 @@ export class AddonNotificationsListPage implements OnInit, OnDestroy {
     }
 
     /**
-     * Page destroyed.
+     * @inheritdoc
      */
     ngOnDestroy(): void {
         this.cronObserver?.off();

src/addons/notifications/pages/notification/notification.html

@@ -12,7 +12,11 @@
     <core-loading [hideUntil]="loaded">
         <ion-item class="ion-text-wrap" lines="none" [attr.aria-label]="subject">
             <core-user-avatar *ngIf="userIdFrom > 0" slot="start" [userId]="userIdFrom" [profileUrl]="profileImageUrlFrom"
-                [fullname]="userFromFullName" [extraIcon]="iconUrl"></core-user-avatar>
+                [fullname]="userFromFullName">
+                <img *ngIf="iconUrl && !modname" [src]="iconUrl" alt="" role="presentation" class="core-avatar-extra">
+                <core-mod-icon *ngIf="modname" [modicon]="iconUrl" [modname]="modname" [showAlt]="false" class="core-avatar-extra">
+                </core-mod-icon>
+            </core-user-avatar>
 
             <img *ngIf="userIdFrom <= 0 && iconUrl" [src]="iconUrl" alt="" role="presentation" class="core-notification-icon" slot="start">
 

src/addons/notifications/pages/notification/notification.ts

@@ -39,6 +39,7 @@ export class AddonNotificationsNotificationPage implements OnInit {
     profileImageUrlFrom?: string; // Avatar of the user who sent the notification.
     userFromFullName?: string; // Name of the user who sent the notification.
     iconUrl?: string; // Icon URL.
+    modname?: string; // Module name.
     loaded = false;
 
     /**
@@ -77,6 +78,13 @@ export class AddonNotificationsNotificationPage implements OnInit {
             this.profileImageUrlFrom = notification.profileimageurlfrom;
             this.userFromFullName = notification.userfromfullname;
             this.iconUrl = notification.iconurl;
+            if (notification.moodlecomponent?.startsWith('mod_') && notification.iconurl) {
+                const modname = notification.moodlecomponent.substring(4);
+                if (notification.iconurl.match('/theme/image.php/[^/]+/' + modname + '/[-0-9]*/') ||
+                        notification.iconurl.match('/theme/image.php/[^/]+/' + notification.moodlecomponent + '/[-0-9]*/')) {
+                    this.modname = modname;
+                }
+            }
         } else {
             this.subject = notification.title || '';
             this.content = notification.message || '';

src/addons/notifications/services/notifications-helper.ts

@@ -41,7 +41,16 @@ export class AddonNotificationsHelperProvider {
         notification: AddonNotificationsNotificationMessageFormatted,
     ): AddonNotificationsNotificationToRender {
         const formattedNotification: AddonNotificationsNotificationToRender = notification;
+
+        if (notification.moodlecomponent?.startsWith('mod_') && notification.iconurl) {
+            const modname = notification.moodlecomponent.substring(4);
+            if (notification.iconurl.match('/theme/image.php/[^/]+/' + modname + '/[-0-9]*/') ||
+                    notification.iconurl.match('/theme/image.php/[^/]+/' + notification.moodlecomponent + '/[-0-9]*/')) {
+                formattedNotification.modname = modname;
+            }
+        } else {
             formattedNotification.iconurl = formattedNotification.iconurl || undefined; // Make sure the property exists.
+        }
 
         return formattedNotification;
     }
@@ -172,4 +181,5 @@ export type AddonNotificationsPreferencesProcessorFormatted = AddonNotifications
  */
 export type AddonNotificationsNotificationToRender = AddonNotificationsNotificationMessageFormatted & {
     iconurl?: string;
+    modname?: string;
 };

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

@@ -53,6 +53,10 @@ export class CoreModIconComponent implements OnInit, OnChanges {
             // Guess module from the icon url.
             const matches = this.modicon.match('/theme/image.php/[^/]+/([^/]+)/[-0-9]*/');
             this.modname = (matches && matches[1]) || '';
+
+            if (this.modname.startsWith('mod_')) {
+                this.modname = this.modname.substring(4);
+            }
         }
 
         this.modNameTranslated = this.modname ? CoreCourse.translateModuleName(this.modname) || '' : '';

src/core/components/user-avatar/core-user-avatar.html

@@ -9,6 +9,4 @@
 <span *ngIf="checkOnline && isOnline()" class="contact-status online" role="status" [attr.aria-label]="'core.online' | translate">
 </span>
 
-<img *ngIf="extraIcon" [src]="extraIcon" alt="" role="presentation" class="core-avatar-extra-icon">
-
 <ng-content></ng-content>

src/core/components/user-avatar/user-avatar.scss

@@ -63,17 +63,6 @@
             background-color: var(--core-online-color);
         }
     }
-
-    .core-avatar-extra-icon {
-        margin: 0 !important;
-        border-radius: 0 !important;
-        background: none;
-        position: absolute;
-        right: -4px;
-        bottom: -4px;
-        width: 24px;
-        height: 24px;
-    }
 }
 
 :host-context(.toolbar) .contact-status {

src/core/components/user-avatar/user-avatar.ts

@@ -41,7 +41,6 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     @Input() userId?: number; // If provided or found it will be used to link the image to the profile.
     @Input() courseId?: number;
     @Input() checkOnline = false; // If want to check and show online status.
-    @Input() extraIcon?: string; // Extra icon to show near the avatar.
 
     avatarUrl?: string;