EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3811 notifications: Apply new icons to notifications

main
Pau Ferrer Ocaña 2022-01-19 10:59:34 +01:00
parent 2eea8a3413
commit 272f65a8a5
10 changed files with 58 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/addons/notifications/notifications.scss
View File

@ -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;

8
src/addons/notifications/pages/list/list.html
View File

@ -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">

4
src/addons/notifications/pages/list/list.ts
View File

@ -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();

6
src/addons/notifications/pages/notification/notification.html
View File

@ -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">

8
src/addons/notifications/pages/notification/notification.ts
View File

@ -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 || '';

12
src/addons/notifications/services/notifications-helper.ts
View File

@ -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;
};

4
src/core/components/mod-icon/mod-icon.ts
View File

@ -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) || '' : '';

2
src/core/components/user-avatar/core-user-avatar.html
View File

@ -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>

15
src/core/components/user-avatar/user-avatar.scss
View File

@ -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;
}
}

1
src/core/components/user-avatar/user-avatar.ts
View File

@ -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;