MOBILE-2956 notifications: Improve notifications info

main
Pau Ferrer Ocaña 2019-04-15 13:20:03 +02:00
parent c6e01bfa66
commit 228943eb09
6 changed files with 34 additions and 8 deletions

View File

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

View File

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

View File

@ -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(() => {

View File

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

View File

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

View File

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