From 272f65a8a50f9da2ba9a2387bcceed54d47d0b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 19 Jan 2022 10:59:34 +0100 Subject: [PATCH] MOBILE-3811 notifications: Apply new icons to notifications --- src/addons/notifications/notifications.scss | 19 +++++++++++++++++++ src/addons/notifications/pages/list/list.html | 8 +++++++- src/addons/notifications/pages/list/list.ts | 4 ++-- .../pages/notification/notification.html | 6 +++++- .../pages/notification/notification.ts | 8 ++++++++ .../services/notifications-helper.ts | 12 +++++++++++- src/core/components/mod-icon/mod-icon.ts | 4 ++++ .../user-avatar/core-user-avatar.html | 2 -- .../components/user-avatar/user-avatar.scss | 15 ++------------- .../components/user-avatar/user-avatar.ts | 1 - 10 files changed, 58 insertions(+), 21 deletions(-) diff --git a/src/addons/notifications/notifications.scss b/src/addons/notifications/notifications.scss index 98b92c030..360723b32 100644 --- a/src/addons/notifications/notifications.scss +++ b/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; diff --git a/src/addons/notifications/pages/list/list.html b/src/addons/notifications/pages/list/list.html index 18af2d97b..0a4462816 100644 --- a/src/addons/notifications/pages/list/list.html +++ b/src/addons/notifications/pages/list/list.html @@ -32,7 +32,13 @@ : 'addon.notifications.unreadnotification' | translate: {$a: notification.subject}"> + [userId]="notification.useridfrom"> + + + + diff --git a/src/addons/notifications/pages/list/list.ts b/src/addons/notifications/pages/list/list.ts index 5968a852e..acff71cb5 100644 --- a/src/addons/notifications/pages/list/list.ts +++ b/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(); diff --git a/src/addons/notifications/pages/notification/notification.html b/src/addons/notifications/pages/notification/notification.html index b227ffc7f..520e6dc3b 100644 --- a/src/addons/notifications/pages/notification/notification.html +++ b/src/addons/notifications/pages/notification/notification.html @@ -12,7 +12,11 @@ + [fullname]="userFromFullName"> + + + + diff --git a/src/addons/notifications/pages/notification/notification.ts b/src/addons/notifications/pages/notification/notification.ts index f2594a9e4..9fb04f294 100644 --- a/src/addons/notifications/pages/notification/notification.ts +++ b/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 || ''; diff --git a/src/addons/notifications/services/notifications-helper.ts b/src/addons/notifications/services/notifications-helper.ts index ec2758f5b..8ccd98f55 100644 --- a/src/addons/notifications/services/notifications-helper.ts +++ b/src/addons/notifications/services/notifications-helper.ts @@ -41,7 +41,16 @@ export class AddonNotificationsHelperProvider { notification: AddonNotificationsNotificationMessageFormatted, ): AddonNotificationsNotificationToRender { const formattedNotification: AddonNotificationsNotificationToRender = notification; - formattedNotification.iconurl = formattedNotification.iconurl || undefined; // Make sure the property exists. + + 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; }; diff --git a/src/core/components/mod-icon/mod-icon.ts b/src/core/components/mod-icon/mod-icon.ts index 7f0262038..f0362138b 100644 --- a/src/core/components/mod-icon/mod-icon.ts +++ b/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) || '' : ''; diff --git a/src/core/components/user-avatar/core-user-avatar.html b/src/core/components/user-avatar/core-user-avatar.html index 9007a6d40..1e90d6bf3 100644 --- a/src/core/components/user-avatar/core-user-avatar.html +++ b/src/core/components/user-avatar/core-user-avatar.html @@ -9,6 +9,4 @@ - - diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss index f0e1ff20d..d7c33997c 100644 --- a/src/core/components/user-avatar/user-avatar.scss +++ b/src/core/components/user-avatar/user-avatar.scss @@ -44,7 +44,7 @@ max-height: var(--core-header-toolbar-button-image-size); border-radius: 50%; display: block; - + img { padding: 4px; border-radius: 50%; @@ -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 { @@ -89,4 +78,4 @@ :host-context(ion-item) { margin-top: 12px; margin-bottom: 12px; -} \ No newline at end of file +} diff --git a/src/core/components/user-avatar/user-avatar.ts b/src/core/components/user-avatar/user-avatar.ts index e450fe45c..e192d15af 100644 --- a/src/core/components/user-avatar/user-avatar.ts +++ b/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;