Merge pull request #1885 from crazyserver/MOBILE-2956

MOBILE-2956 notifications: Improve notifications info

src/addon/notifications/pages/list/list.html

@@ -18,11 +18,16 @@
             </button>
         </div>
         <ion-card *ngFor="let notification of notifications">
-            <ion-item>
+            <ion-item text-wrap>
-                <ion-avatar core-user-avatar [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom"></ion-avatar>
+                <ion-avatar *ngIf="notification.useridfrom > 0" core-user-avatar [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom" [extraIcon]="notification.iconurl"></ion-avatar>
-                <h2>{{notification.userfromfullname}}</h2>
+                <img *ngIf="notification.useridfrom <= 0 && notification.iconurl" [src]="notification.iconurl" alt="" role="presentation" class="core-notification-icon" item-start>
-                <div item-end *ngIf="!notification.timeread"><core-icon name="fa-circle" color="primary"></core-icon></div>
+                <h2><core-format-text [text]="notification.subject"></core-format-text></h2>
-                <p>{{notification.timecreated | coreDateDayOrTime}}</p>
+                <p><ion-note float-end padding-left text-end>
+                        {{notification.timecreated | coreDateDayOrTime}}
+                        <span *ngIf="!notification.timeread"><core-icon name="fa-circle" color="primary"></core-icon></span>
+                    </ion-note>
+                </p>
+                <p *ngIf="notification.userfromfullname"><core-format-text [text]="notification.userfromfullname"></core-format-text></p>
             </ion-item>
             <ion-item text-wrap>
                 <p><core-format-text [text]="notification.mobiletext | coreCreateLinks"></core-format-text></p>

src/addon/notifications/pages/list/list.scss

@@ -0,0 +1,5 @@
+page-addon-notifications-list .core-notification-icon {
+    width: 34px;
+    height: 34px;
+    margin: 10px !important;
+}

src/addon/notifications/providers/notifications.ts

@@ -52,9 +52,12 @@ export class AddonNotificationsProvider {
      */
     protected formatNotificationsData(notifications: any[], read?: boolean): Promise<any> {
         const promises = notifications.map((notification) => {
+
             // Set message to show.
-            if (notification.contexturl && notification.contexturl.indexOf('/mod/forum/') >= 0) {
+            if (notification.component && notification.component == 'mod_forum') {
                 notification.mobiletext = notification.smallmessage;
+            } else if (notification.component && notification.component == 'moodle' && notification.name == 'insights') {
+                notification.mobiletext = notification.fullmessagehtml;
             } else {
                 notification.mobiletext = notification.fullmessage;
             }
@@ -73,10 +76,10 @@ export class AddonNotificationsProvider {
             // Try to set courseid the notification belongs to.
             if (notification.customdata && notification.customdata.courseid) {
                 notification.courseid = notification.customdata.courseid;
-            } else {
+            } else if (!notification.courseid) {
                 const cid = notification.fullmessagehtml.match(/course\/view\.php\?id=([^"]*)/);
                 if (cid && cid[1]) {
-                    notification.courseid = cid[1];
+                    notification.courseid = parseInt(cid[1], 10);
                 }
             }
 
@@ -84,6 +87,7 @@ export class AddonNotificationsProvider {
                 // Try to get the profile picture of the user.
                 return this.userProvider.getProfile(notification.useridfrom, notification.courseid, true).then((user) => {
                     notification.profileimageurlfrom = user.profileimageurl;
+                    notification.userfromfullname = user.fullname;
 
                     return notification;
                 }).catch(() => {

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

@@ -1,4 +1,5 @@
 <img *ngIf="avatarUrl" [src]="avatarUrl" [alt]="'core.pictureof' | translate:{$a: fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'" role="presentation" [siteId]="siteId || null" (click)="gotoProfile($event)">
 <img *ngIf="!avatarUrl" src="assets/img/user-avatar.png" [alt]="'core.pictureof' | translate:{$a: fullname}" role="presentation" (click)="gotoProfile($event)">
 <span *ngIf="checkOnline && isOnline()" class="contact-status online"></span>
+<img *ngIf="extraIcon" [src]="extraIcon" alt="" role="presentation" class="core-avatar-extra-icon">
 <ng-content></ng-content>

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

@@ -12,6 +12,16 @@ ion-avatar[core-user-avatar] {
             background-color: $core-online-color;
         }
     }
+
+    .core-avatar-extra-icon {
+        margin: 0 !important;
+        border-radius: 0 !important;
+        background: none;
+        position: absolute;
+        @include position(null, -4px, -4px, null);
+        width: 24px;
+        height: 24px;
+    }
 }
 
 .toolbar ion-avatar[core-user-avatar] .contact-status {

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

@@ -38,6 +38,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges, OnDestroy {
     @Input() protected userId?: number; // If provided or found it will be used to link the image to the profile.
     @Input() protected 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;