From 5e4e4fc75f50126b686626ef63524df1c62ee6a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 15 Nov 2018 16:09:55 +0100
Subject: [PATCH 1/3] MOBILE-1486 user: Show status indicator on user avatar

---
 .../course/addon-competency-course.html       |   7 +-
 .../pages/competency/competency.html          |  11 +-
 src/addon/competency/pages/plan/plan.html     |   7 +-
 .../contacts/addon-messages-contacts.html     |   4 +-
 .../addon-messages-discussions.html           |   8 +-
 .../addon-mod-assign-submission.html          |  12 +-
 .../submission-list/submission-list.html      |   4 +-
 src/addon/mod/chat/pages/chat/chat.html       |   4 +-
 src/addon/mod/chat/pages/users/users.html     |   4 +-
 .../index/addon-mod-choice-index.html         |   4 +-
 .../mod/feedback/pages/attempt/attempt.html   |   6 +-
 .../pages/nonrespondents/nonrespondents.html  |   4 +-
 .../pages/respondents/respondents.html        |   4 +-
 .../index/addon-mod-forum-index.html          |   8 +-
 .../components/post/addon-mod-forum-post.html |   4 +-
 src/addon/mod/glossary/pages/entry/entry.html |   4 +-
 .../index/addon-mod-lesson-index.html         |   4 +-
 .../lesson/pages/user-retake/user-retake.html |   4 +-
 .../addon-mod-workshop-assessment.html        |   4 +-
 .../addon-mod-workshop-submission.html        |  12 +-
 .../workshop/pages/assessment/assessment.html |   9 +-
 .../workshop/pages/submission/submission.html |   8 +-
 .../components/list/addon-notes-list.html     |   4 +-
 src/addon/notifications/pages/list/list.html  |   4 +-
 src/components/chrono/chrono.ts               |   2 +-
 src/components/components.module.ts           |   7 +-
 .../user-avatar/core-user-avatar.html         |   2 +
 src/components/user-avatar/user-avatar.scss   |  15 +++
 src/components/user-avatar/user-avatar.ts     | 113 ++++++++++++++++++
 src/core/comments/pages/viewer/viewer.html    |   4 +-
 .../pages/course-preview/course-preview.html  |   6 +-
 src/core/mainmenu/pages/more/more.html        |   6 +-
 .../participants/core-user-participants.html  |   4 +-
 src/theme/variables.scss                      |   2 +
 34 files changed, 179 insertions(+), 126 deletions(-)
 create mode 100644 src/components/user-avatar/core-user-avatar.html
 create mode 100644 src/components/user-avatar/user-avatar.scss
 create mode 100644 src/components/user-avatar/user-avatar.ts

diff --git a/src/addon/competency/components/course/addon-competency-course.html b/src/addon/competency/components/course/addon-competency-course.html
index 6480199c9..2bf0cce65 100644
--- a/src/addon/competency/components/course/addon-competency-course.html
+++ b/src/addon/competency/components/course/addon-competency-course.html
@@ -28,12 +28,7 @@
         <h3 margin-horizontal *ngIf="competencies && competencies.statistics.competencycount > 0">{{ 'addon.competency.competencies' | translate }}</h3>
         <ion-card *ngIf="user">
              <ion-item text-wrap>
-                <ion-avatar *ngIf="user.profileimageurl && user.profileimageurl !== true" item-start>
-                    <img [src]="user.profileimageurl" [alt]="'core.pictureof' | translate:{$a: user.fullname}" core-external-content>
-                </ion-avatar>
-                <span *ngIf="user.profileimageurl === true" item-start>
-                    <ion-icon name="person"></ion-icon>
-                </span>
+                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
         </ion-card>
diff --git a/src/addon/competency/pages/competency/competency.html b/src/addon/competency/pages/competency/competency.html
index e5fb5af37..060264283 100644
--- a/src/addon/competency/pages/competency/competency.html
+++ b/src/addon/competency/pages/competency/competency.html
@@ -10,12 +10,7 @@
     <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="user">
             <ion-item text-wrap>
-                <ion-avatar *ngIf="user.profileimageurl && user.profileimageurl !== true" item-start>
-                    <img  [src]="user.profileimageurl" [alt]="'core.pictureof' | translate:{$a: user.fullname}" core-external-content>
-                </ion-avatar>
-                <span *ngIf="user.profileimageurl === true" item-start>
-                    <ion-icon name="person"></ion-icon>
-                </span>
+                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
         </ion-card>
@@ -78,9 +73,7 @@
             </p>
             <ion-card *ngFor="let evidence of competency.evidence">
                 <a ion-item text-wrap *ngIf="evidence.actionuser" (click)="openUserProfile(evidence.actionuser.id)">
-                    <ion-avatar item-start>
-                        <img core-external-content [src]="evidence.actionuser.profileimageurlsmall" [alt]="'core.pictureof' | translate:{$a: evidence.actionuser.fullname}" role="presentation">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="evidence.actionuser" item-start></ion-avatar>
                     <h2>{{ evidence.actionuser.fullname }}</h2>
                     <p>{{ evidence.timemodified | coreToLocaleString }}</p>
                 </a>
diff --git a/src/addon/competency/pages/plan/plan.html b/src/addon/competency/pages/plan/plan.html
index ce74e7eea..8b368ae8f 100644
--- a/src/addon/competency/pages/plan/plan.html
+++ b/src/addon/competency/pages/plan/plan.html
@@ -10,12 +10,7 @@
     <core-loading [hideUntil]="planLoaded">
         <ion-card *ngIf="user">
             <ion-item text-wrap>
-                <ion-avatar *ngIf="user.profileimageurl && user.profileimageurl !== true" item-start>
-                    <img  [src]="user.profileimageurl" [alt]="'core.pictureof' | translate:{$a: user.fullname}" core-external-content>
-                </ion-avatar>
-                <span *ngIf="user.profileimageurl === true" item-start>
-                    <ion-icon name="person"></ion-icon>
-                </span>
+                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
        </ion-card>
diff --git a/src/addon/messages/components/contacts/addon-messages-contacts.html b/src/addon/messages/components/contacts/addon-messages-contacts.html
index a531c3391..8ee810583 100644
--- a/src/addon/messages/components/contacts/addon-messages-contacts.html
+++ b/src/addon/messages/components/contacts/addon-messages-contacts.html
@@ -19,9 +19,7 @@
                 <ng-container *ngFor="let contact of contacts[contactType]">
                     <!-- Don't show deleted users -->
                     <a ion-item text-wrap *ngIf="contact.profileimageurl || contact.profileimageurlsmall"  [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" [class.core-split-item-selected]="contact.id == discussionUserId" detail-none>
-                        <ion-avatar item-start>
-                            <img src="{{contact.profileimageurl || contact.profileimageurlsmall}}" [alt]="'core.pictureof' | translate:{$a: contact.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                        </ion-avatar>
+                        <ion-avatar class="user-avatar" [user]="contact" item-start></ion-avatar>
                         <h2><core-format-text [text]="contact.fullname"></core-format-text></h2>
                     </a>
                 </ng-container>
diff --git a/src/addon/messages/components/discussions/addon-messages-discussions.html b/src/addon/messages/components/discussions/addon-messages-discussions.html
index 5fcb5dfcc..eaf478467 100644
--- a/src/addon/messages/components/discussions/addon-messages-discussions.html
+++ b/src/addon/messages/components/discussions/addon-messages-discussions.html
@@ -17,9 +17,7 @@
                 <ion-note item-end>{{ search.results.length }}</ion-note>
             </ion-item-divider>
             <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)" [class.core-split-item-selected]="result.userid == discussionUserId" detail-none>
-                <ion-avatar item-start>
-                    <img src="{{result.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: result.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="result" item-start></ion-avatar>
                 <h2><core-format-text [text]="result.fullname"></core-format-text></h2>
                 <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text></p>
             </a>
@@ -27,9 +25,7 @@
 
         <ion-list *ngIf="!search.showResults" no-margin>
             <a ion-item text-wrap *ngFor="let discussion of discussions" [title]="discussion.fullname" (click)="gotoDiscussion(discussion.message.user)" [class.core-split-item-selected]="discussion.message.user == discussionUserId" detail-none>
-                <ion-avatar item-start>
-                    <img src="{{discussion.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: discussion.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="discussion" item-start></ion-avatar>
                 <h2>
                     <core-format-text [text]="discussion.fullname"></core-format-text>
                     <ion-note *ngIf="discussion.message.timecreated > 0 || discussion.unread">
diff --git a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
index 2a2030d30..e0dfbf922 100644
--- a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -2,9 +2,7 @@
 
     <!-- User and status of the submission. -->
     <a ion-item text-wrap *ngIf="!blindMarking && user" (click)="openUserProfile(submitId)" [title]="user.fullname">
-        <ion-avatar item-start>
-            <img [src]="user.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: user.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-        </ion-avatar>
+        <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
         <h2>{{ user.fullname }}</h2>
         <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
     </a>
@@ -113,9 +111,7 @@
                     <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                     <div *ngFor="let user of membersToSubmit">
                         <a ion-item text-wrap *ngIf="user.fullname" (click)="openUserProfile(user.id)" [title]="user.fullname">
-                            <ion-avatar item-start>
-                                <img [src]="user.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: user.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                            </ion-avatar>
+                            <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
                             <h2>{{ user.fullname }}</h2>
                         </a>
                         <ion-item text-wrap *ngIf="!user.fullname">
@@ -213,9 +209,7 @@
 
                 <!-- Data about the grader (teacher who graded). -->
                 <a ion-item text-wrap *ngIf="grader" (click)="openUserProfile(grader.id)" [title]="grader.fullname" detail-push>
-                    <ion-avatar item-start>
-                        <img [src]="grader.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: grader.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="grader" item-start></ion-avatar>
                     <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
                     <h2>{{ grader.fullname }}</h2>
                     <p *ngIf="feedback.gradeddate">{{ feedback.gradeddate * 1000 | coreFormatDate:"dfmediumdate" }}</p>
diff --git a/src/addon/mod/assign/pages/submission-list/submission-list.html b/src/addon/mod/assign/pages/submission-list/submission-list.html
index 70b209bbb..3df9c921f 100644
--- a/src/addon/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addon/mod/assign/pages/submission-list/submission-list.html
@@ -18,9 +18,7 @@
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions">
                     <a ion-item text-wrap (click)="loadSubmission(submission)" [class.core-split-item-selected]="submission.id == selectedSubmissionId">
-                        <ion-avatar item-start *ngIf="submission.userprofileimageurl">
-                            <img [src]="submission.userprofileimageurl" [alt]="'core.pictureof' | translate:{$a: submission.userfullname}" core-external-content role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                        </ion-avatar>
+                        <ion-avatar class="user-avatar" [user]="submission" item-start></ion-avatar>
                         <h2 *ngIf="submission.userfullname">{{submission.userfullname}}</h2>
                         <h2 *ngIf="!submission.userfullname">{{ 'addon.mod_assign.hiddenuser' | translate }}{{submission.blindid}}</h2>
                         <p *ngIf="assign.teamsubmission">
diff --git a/src/addon/mod/chat/pages/chat/chat.html b/src/addon/mod/chat/pages/chat/chat.html
index c440dce08..52fe5ab1a 100644
--- a/src/addon/mod/chat/pages/chat/chat.html
+++ b/src/addon/mod/chat/pages/chat/chat.html
@@ -38,9 +38,7 @@
                 </div>
 
                 <ion-item text-wrap *ngIf="!message.system && message.message.substr(0, 4) != 'beep'" class="addon-mod-chat-message">
-                    <ion-avatar item-start>
-                        <img [src]="message.userprofileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: message.userfullname}" role="presentation">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="message" item-start></ion-avatar>
                     <h2>
                         <p float-end>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
                         <core-format-text [text]="message.userfullname"></core-format-text>
diff --git a/src/addon/mod/chat/pages/users/users.html b/src/addon/mod/chat/pages/users/users.html
index 3ef49895e..f31b4429a 100644
--- a/src/addon/mod/chat/pages/users/users.html
+++ b/src/addon/mod/chat/pages/users/users.html
@@ -11,9 +11,7 @@
 <ion-content>
     <core-loading [hideUntil]="usersLoaded">
         <ion-item text-wrap *ngFor="let user of users" [class.addon-mod-chat-user]="currentUserId != user.id && isOnline">
-            <ion-avatar item-start>
-                <img [src]="user.profileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: user.fullname}" role="presentation">
-            </ion-avatar>
+            <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
             <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             <ng-container *ngIf="currentUserId != user.id && isOnline">
                 <button ion-button clear icon-left (click)="talkTo(user)">
diff --git a/src/addon/mod/choice/components/index/addon-mod-choice-index.html b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
index a0c95cbe7..8c49728e8 100644
--- a/src/addon/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
@@ -82,9 +82,7 @@
                             <p>{{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }} ({{ 'core.percentagenumber' | translate: {$a: result.percentageamount} }})</p>
                         </ion-item-divider>
                         <a ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseid" [userId]="user.userid" [title]="user.fullname" text-wrap>
-                            <ion-avatar item-start>
-                                <img [src]="user.profileimageurl" [alt]="'core.pictureof' | translate:{$a: user.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                            </ion-avatar>
+                            <ion-avatar class="user-avatar" [user]="user" item-start [courseId]="courseid"></ion-avatar>
                             <p>{{user.fullname}}</p>
                         </a>
                     </ion-item-group>
diff --git a/src/addon/mod/feedback/pages/attempt/attempt.html b/src/addon/mod/feedback/pages/attempt/attempt.html
index 7fbaa7ea5..66f78fbfb 100644
--- a/src/addon/mod/feedback/pages/attempt/attempt.html
+++ b/src/addon/mod/feedback/pages/attempt/attempt.html
@@ -6,10 +6,8 @@
 <ion-content>
     <core-loading [hideUntil]="feedbackLoaded">
         <ion-list no-margin>
-            <a *ngIf="attempt.fullname" ion-item text-wrap core-user-link [userId]="attempt.userid" [attr.aria-label]=" 'core.user.viewprofile' | translate" core-user-link [courseId]="attempt.courseid" [title]="attempt.fullname">
-                <ion-avatar item-start>
-                    <img [src]="attempt.profileimageurl" [alt]="'core.pictureof' | translate:{$a: attempt.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+            <a *ngIf="attempt.fullname" ion-item text-wrap core-user-link [userId]="attempt.userid" [attr.aria-label]=" 'core.user.viewprofile' | translate" [courseId]="attempt.courseid" [title]="attempt.fullname">
+                <ion-avatar class="user-avatar" [user]="attempt" item-start></ion-avatar>
                 <h2>{{attempt.fullname}}</h2>
                 <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate:"LLL"}}</p>
             </a>
diff --git a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
index 488e484a9..621a59687 100644
--- a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -21,9 +21,7 @@
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
                 <ion-item *ngFor="let user of users" text-wrap>
-                    <ion-avatar item-start>
-                        <img [src]="user.profileimageurl" [alt]="'core.pictureof' | translate:{$a: user.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
                     <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
                     <p>
                         <ion-badge color="success" *ngIf="user.started">
diff --git a/src/addon/mod/feedback/pages/respondents/respondents.html b/src/addon/mod/feedback/pages/respondents/respondents.html
index 189d1e90e..49d1b315a 100644
--- a/src/addon/mod/feedback/pages/respondents/respondents.html
+++ b/src/addon/mod/feedback/pages/respondents/respondents.html
@@ -22,9 +22,7 @@
                         {{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of responses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
-                        <ion-avatar item-start>
-                            <img [src]="attempt.profileimageurl" [alt]="'core.pictureof' | translate:{$a: attempt.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                        </ion-avatar>
+                        <ion-avatar class="user-avatar" [user]="attempt" item-start></ion-avatar>
                         <h2><core-format-text [text]="attempt.fullname"></core-format-text></h2>
                         <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate: "LLL"}}</p>
                     </a>
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index dc4b05221..39abe5a41 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -27,9 +27,7 @@
             <ng-container *ngIf="forum && discussions.length > 0">
                 <ion-card *ngFor="let discussion of offlineDiscussions" (click)="openNewDiscussion(discussion.timecreated)" [class.addon-forum-discussion-selected]="discussion.timecreated == -selectedDiscussion">
                     <ion-item text-wrap>
-                        <ion-avatar item-start core-user-link [userId]="discussion.userid" [courseId]="courseId">
-                            <img [src]="discussion.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: discussion.userfullname}" role="presentation">
-                        </ion-avatar>
+                        <ion-avatar class="user-avatar" [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
                         <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p *ngIf="discussion.userfullname">
                             <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
@@ -45,9 +43,7 @@
                 </ion-card>
                 <ion-card *ngFor="let discussion of discussions" (click)="openDiscussion(discussion)" [class.addon-forum-discussion-selected]="discussion.discussion == selectedDiscussion">
                     <ion-item text-wrap>
-                        <ion-avatar item-start core-user-link [userId]="discussion.userid" [courseId]="courseId">
-                            <img [src]="discussion.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: discussion.userfullname}" role="presentation">
-                        </ion-avatar>
+                        <ion-avatar class="user-avatar" [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
                         <h2><core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p>
                             <ion-note float-end padding-left text-end>
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
index 061c4b748..d0f43c172 100644
--- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html
+++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
@@ -1,8 +1,6 @@
 <ion-card-header text-wrap no-padding >
     <ion-item text-wrap>
-        <ion-avatar item-start (click)="openUserProfile(post.userid)">
-            <img [src]="post.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: post.userfullname}" role="presentation">
-        </ion-avatar>
+        <ion-avatar class="user-avatar" [user]="post" item-start (click)="openUserProfile(post.userid)"></ion-avatar>
         <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
         <p>
             <ion-note float-end padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
diff --git a/src/addon/mod/glossary/pages/entry/entry.html b/src/addon/mod/glossary/pages/entry/entry.html
index 4b4d63b05..d530f6a2b 100644
--- a/src/addon/mod/glossary/pages/entry/entry.html
+++ b/src/addon/mod/glossary/pages/entry/entry.html
@@ -11,9 +11,7 @@
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="entry">
             <ion-item text-wrap *ngIf="showAuthor">
-                <ion-avatar item-start (click)="openUserProfile(post.userid)">
-                    <img [src]="entry.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: entry.userfullname}" role="presentation">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="entry" (click)="openUserProfile(post.userid)" item-start></ion-avatar>
                 <h2><core-format-text [text]="entry.concept"></core-format-text></h2>
                 <ion-note item-end *ngIf="showDate">{{ entry.timemodified | coreDateDayOrTime }}</ion-note>
                 <p><core-format-text [text]="entry.userfullname"></core-format-text></p>
diff --git a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
index bb8f16671..e64803cfe 100644
--- a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -233,9 +233,7 @@
                         </ion-card-header>
 
                         <a ion-item text-wrap *ngFor="let student of overview.students" [navPush]="'AddonModLessonUserRetakePage'" [navParams]="{courseId: courseId, lessonId: lesson.id, userId: student.id}">
-                            <ion-avatar item-start *ngIf="student.profileimageurl" core-user-link [userId]="student.id" [courseId]="courseId">
-                                <img [src]="student.profileimageurl" [alt]="'core.pictureof' | translate:{$a: student.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'" role="presentation">
-                            </ion-avatar>
+                            <ion-avatar class="user-avatar" [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
                             <h2>{{ student.fullname }}</h2>
                             <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
                         </a>
diff --git a/src/addon/mod/lesson/pages/user-retake/user-retake.html b/src/addon/mod/lesson/pages/user-retake/user-retake.html
index 872363c46..3912c02bd 100644
--- a/src/addon/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addon/mod/lesson/pages/user-retake/user-retake.html
@@ -12,9 +12,7 @@
         <ion-list *ngIf="student">
             <!-- Student data. -->
             <a ion-item text-wrap core-user-link [userId]="student.id" [courseId]="courseId" [title]="student.fullname">
-                <ion-avatar *ngIf="student.profileimageurl" item-start>
-                    <img [src]="student.profileimageurl" [alt]="'core.pictureof' | translate:{$a: student.fullname}" core-external-content role="presentation">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
                 <h2>{{student.fullname}}</h2>
                 <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
             </a>
diff --git a/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html b/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
index 56f433a49..7b00b7d2a 100644
--- a/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@@ -1,8 +1,6 @@
 <core-loading [hideUntil]="loaded">
     <a ion-item *ngIf="summary" text-wrap [attr.detail-none]="canViewAssessment && !canSelfAssess? null : true" (click)="gotoAssessment()">
-        <ion-avatar item-start>
-            <img [src]="profile && profile.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: profile && profile.fullname}" core-user-link [courseId]="courseId" [userId]="profile && profile.id" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-        </ion-avatar>
+        <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
 
         <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
         <p *ngIf="showGrade(assessment.grade)">
diff --git a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
index 04b9ebd54..dbb4106d4 100644
--- a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -1,9 +1,7 @@
 <core-loading [hideUntil]="loaded">
     <div *ngIf="!summary">
         <ion-list-header text-wrap>
-            <ion-avatar item-start>
-                <img [src]="profile && profile.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: profile && profile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-            </ion-avatar>
+            <ion-avatar class="user-avatar" [user]="profile" item-start></ion-avatar>
             <h2>{{submission.title}}</h2>
             <p *ngIf="profile && profile.fullname">{{profile.fullname}}</p>
             <p *ngIf="showGrade(submission.submissiongrade)" [class.addon-has-overriden-grade]="showGrade(submission.submissiongradeover)">
@@ -34,9 +32,7 @@
             <core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file>
         </ion-item>
         <ion-item text-wrap *ngIf="viewDetails && submission.feedbackauthor">
-            <ion-avatar item-start *ngIf="evaluateByProfile">
-                <img [src]="evaluateByProfile.profileimageurl" core-external-content core-user-link [courseId]="courseId" [userId]="evaluateByProfile.id" [alt]="'core.pictureof' | translate:{$a: evaluateByProfile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-            </ion-avatar>
+            <ion-avatar class="user-avatar" [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
 
             <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}</h2>
             <core-format-text [text]="submission.feedbackauthor"></core-format-text>
@@ -50,9 +46,7 @@
     </div>
 
     <a ion-item text-wrap *ngIf="summary" [attr.detail-none]="submission.timemodified ? null : true" (click)="gotoSubmission()">
-        <ion-avatar item-start>
-            <img [src]="profile && profile.profileimageurl" core-external-content [alt]="'core.pictureof' | translate:{$a: profile && profile.fullname}" core-user-link [courseId]="courseId" [userId]="profile && profile.id" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-        </ion-avatar>
+        <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
 
         <h2>{{submission.title}}</h2>
         <p *ngIf="profile && profile.fullname">{{profile.fullname}}</p>
diff --git a/src/addon/mod/workshop/pages/assessment/assessment.html b/src/addon/mod/workshop/pages/assessment/assessment.html
index bb82a445f..58be7fad8 100644
--- a/src/addon/mod/workshop/pages/assessment/assessment.html
+++ b/src/addon/mod/workshop/pages/assessment/assessment.html
@@ -15,9 +15,8 @@
     <core-loading [hideUntil]="loaded">
 
         <ion-item text-wrap>
-            <ion-avatar item-start *ngIf="profile">
-                <img [src]="profile.profileimageurl" core-external-content core-user-link [courseId]="courseId" [userId]="profile.id" [alt]="'core.pictureof' | translate:{$a: profile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-            </ion-avatar>
+            <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile.id"></ion-avatar>
+
             <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
 
             <p *ngIf="workshop && assessment && showGrade(assessment.grade)">
@@ -66,9 +65,7 @@
         </form>
         <ion-list *ngIf="!evaluating && evaluate && evaluate.text">
             <ion-item text-wrap>
-                <ion-avatar item-start *ngIf="evaluateGradingByProfile">
-                    <img [src]="evaluateGradingByProfile.profileimageurl" core-external-content core-user-link [courseId]="courseId" [userId]="evaluateGradingByProfile.id" [alt]="'core.pictureof' | translate:{$a: evaluateGradingByProfile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}</h2>
                 <core-format-text [text]="evaluate.text"></core-format-text>
             </ion-item>
diff --git a/src/addon/mod/workshop/pages/submission/submission.html b/src/addon/mod/workshop/pages/submission/submission.html
index d2373d42c..bbadc5cf3 100644
--- a/src/addon/mod/workshop/pages/submission/submission.html
+++ b/src/addon/mod/workshop/pages/submission/submission.html
@@ -36,9 +36,7 @@
 
         <ion-list *ngIf="!canAddFeedback && evaluate && evaluate.text">
             <ion-item text-wrap>
-                <ion-avatar item-start *ngIf="evaluateByProfile">
-                    <img [src]="evaluateByProfile.profileimageurl" core-external-content core-user-link [courseId]="courseId" [userId]="evaluateByProfile.id" [alt]="'core.pictureof' | translate:{$a: evaluateByProfile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}</h2>
                 <core-format-text [text]="evaluate.text"></core-format-text>
             </ion-item>
@@ -97,9 +95,7 @@
 
         <ion-list *ngIf="assessmentId && !access.assessingallowed && assessment.feedbackreviewer">
             <ion-item text-wrap>
-                <ion-avatar item-start *ngIf="evaluateGradingByProfile">
-                    <img [src]="evaluateGradingByProfile.profileimageurl" core-external-content core-user-link [courseId]="courseId" [userId]="evaluateGradingByProfile.id" [alt]="'core.pictureof' | translate:{$a: evaluateGradingByProfile.fullname}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}</h2>
                 <core-format-text [text]="assessment.feedbackreviewer"></core-format-text>
             </ion-item>
diff --git a/src/addon/notes/components/list/addon-notes-list.html b/src/addon/notes/components/list/addon-notes-list.html
index 21f24aba2..c66e1e2f6 100644
--- a/src/addon/notes/components/list/addon-notes-list.html
+++ b/src/addon/notes/components/list/addon-notes-list.html
@@ -27,9 +27,7 @@
         <ion-list *ngIf="notes && notes.length > 0">
             <ion-card *ngFor="let note of notes">
                 <ion-item text-wrap>
-                    <ion-avatar item-start>
-                        <img [src]="note.userprofileimageurl || 'assets/img/user-avatar.png'" core-external-content core-user-link [userId]="note.userid" [courseId]="note.courseid" [alt]="'core.pictureof' | translate:{$a: note.userfullname}" role="presentation">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="note" item-start></ion-avatar>
                     <h2>{{note.userfullname}}</h2>
                     <p *ngIf="!note.offline" item-end>{{note.lastmodified | coreDateDayOrTime}}</p>
                     <p *ngIf="note.offline" item-end><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
diff --git a/src/addon/notifications/pages/list/list.html b/src/addon/notifications/pages/list/list.html
index 0ee4eb357..32d742ccf 100644
--- a/src/addon/notifications/pages/list/list.html
+++ b/src/addon/notifications/pages/list/list.html
@@ -19,9 +19,7 @@
         </div>
         <ion-card *ngFor="let notification of notifications">
             <ion-item>
-                <ion-avatar item-start core-user-link [userId]="notification.useridfrom" [courseId]="notification.courseid">
-                    <img [src]="notification.profileimageurlfrom || 'assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: notification.userfromfullname}" role="presentation">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom" [courseId]="notification.courseid"></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>
diff --git a/src/components/chrono/chrono.ts b/src/components/chrono/chrono.ts
index ca8757a41..5770db45f 100644
--- a/src/components/chrono/chrono.ts
+++ b/src/components/chrono/chrono.ts
@@ -52,7 +52,7 @@ export class CoreChronoComponent implements OnChanges, OnDestroy {
     }
 
     /**
-     * Component being initialized.
+     * Component being changed.
      */
     ngOnChanges(changes: { [name: string]: SimpleChange }): void {
         if (changes && changes.running) {
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
index 487778e49..0e631c2b9 100644
--- a/src/components/components.module.ts
+++ b/src/components/components.module.ts
@@ -50,6 +50,7 @@ import { CoreAttachmentsComponent } from './attachments/attachments';
 import { CoreIonTabsComponent } from './ion-tabs/ion-tabs';
 import { CoreIonTabComponent } from './ion-tabs/ion-tab';
 import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loading';
+import { CoreUserAvatarComponent } from './user-avatar/user-avatar';
 
 @NgModule({
     declarations: [
@@ -85,7 +86,8 @@ import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loadin
         CoreAttachmentsComponent,
         CoreIonTabsComponent,
         CoreIonTabComponent,
-        CoreInfiniteLoadingComponent
+        CoreInfiniteLoadingComponent,
+        CoreUserAvatarComponent
     ],
     entryComponents: [
         CoreContextMenuPopoverComponent,
@@ -128,7 +130,8 @@ import { CoreInfiniteLoadingComponent } from './infinite-loading/infinite-loadin
         CoreAttachmentsComponent,
         CoreIonTabsComponent,
         CoreIonTabComponent,
-        CoreInfiniteLoadingComponent
+        CoreInfiniteLoadingComponent,
+        CoreUserAvatarComponent
     ]
 })
 export class CoreComponentsModule {}
diff --git a/src/components/user-avatar/core-user-avatar.html b/src/components/user-avatar/core-user-avatar.html
new file mode 100644
index 000000000..d98bbdece
--- /dev/null
+++ b/src/components/user-avatar/core-user-avatar.html
@@ -0,0 +1,2 @@
+<img src="{{profileUrl}}" [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)">
+<span *ngIf="isOnline()" class="contact-status online"></span>
\ No newline at end of file
diff --git a/src/components/user-avatar/user-avatar.scss b/src/components/user-avatar/user-avatar.scss
new file mode 100644
index 000000000..ad4989164
--- /dev/null
+++ b/src/components/user-avatar/user-avatar.scss
@@ -0,0 +1,15 @@
+ion-avatar.user-avatar {
+    position: relative;
+
+    .contact-status {
+        position: absolute;
+        @include position(null, 0, 0, null);
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        &.online {
+            border: 1px solid white;
+            background-color: $core-online-color;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/user-avatar/user-avatar.ts b/src/components/user-avatar/user-avatar.ts
new file mode 100644
index 000000000..3755c7bd4
--- /dev/null
+++ b/src/components/user-avatar/user-avatar.ts
@@ -0,0 +1,113 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component, Input, OnInit, OnChanges, SimpleChange } from '@angular/core';
+import { NavController } from 'ionic-angular';
+import { CoreSitesProvider } from '@providers/sites';
+
+/**
+ * Component to display a "user avatar".
+ *
+ * Example: <core-user-avatar [user]="participant"></core-user-avatar>
+ */
+@Component({
+    selector: 'ion-avatar.user-avatar',
+    templateUrl: 'core-user-avatar.html'
+})
+export class CoreUserAvatarComponent implements OnInit, OnChanges {
+    @Input() user: any;
+    // The following params will override the ones in user object.
+    @Input() profileUrl?: string;
+    @Input() fullname?: string;
+    @Input() protected userId?: number; // If provided or found it will be used to link the image to the profile.
+    @Input() protected courseId?: number;
+
+    // Variable to check if we consider this user online or not.
+    protected timetoshowusers = 300000; // Miliseconds default.
+    protected myUser = false;
+    protected currentUserId: number;
+
+    constructor(private navCtrl: NavController, private sitesProvider: CoreSitesProvider) {
+        this.currentUserId = this.sitesProvider.getCurrentSiteUserId();
+    }
+
+    /**
+     * Component being initialized.
+     */
+    ngOnInit(): void {
+        console.error(this.user);
+        this.setFields();
+
+        // @TODO: This setting is not currently available so we are always using the default setting.
+        /*if (!this.myUser) {
+            let minutes = 5;
+            this.sitesProvider.getCurrentSite().getConfig('block_online_users_timetosee').then((timetosee) => {
+                minutes = timetosee || minutes;
+            }).catch(() => {
+                // Ignore errors.
+            }).finally(() => {
+                this.timetoshowusers = minutes * 60000;
+            });
+        }*/
+    }
+
+    /**
+     * Listen to changes.
+     */
+    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
+        // If something change, update the fields.
+        if (changes) {
+            this.setFields();
+        }
+    }
+
+    /**
+     * Set fields from user.
+     */
+    protected setFields(): void {
+        this.profileUrl = this.profileUrl || this.user.profileimageurl || this.user.userprofileimageurl ||
+            this.user.userpictureurl || this.user.profileimageurlsmall;
+
+        this.fullname = this.fullname || this.user.fullname || this.user.userfullname;
+
+        this.userId = this.userId || this.user.userid;
+        this.courseId = this.courseId || this.user.courseid;
+
+        // If not available we cannot ensure the avatar is from the current user.
+        this.myUser = this.userId && this.userId == this.currentUserId;
+    }
+
+    /**
+     * Helper function for checking the time meets the 'online' condition.
+     *
+     * @return boolean
+     */
+    isOnline(): boolean {
+        const time = new Date().getTime() - this.timetoshowusers;
+
+        return !this.myUser && ((this.user.lastaccess && this.user.lastaccess * 1000 >= time) || this.user.isonline);
+    }
+
+    /**
+     * Function executed image clicked.
+     */
+    gotoProfile(event: any): void {
+        // If the event prevented default action, do nothing.
+        if (!event.defaultPrevented && this.userId) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
+        }
+    }
+}
diff --git a/src/core/comments/pages/viewer/viewer.html b/src/core/comments/pages/viewer/viewer.html
index 5087edd96..a9e7de661 100644
--- a/src/core/comments/pages/viewer/viewer.html
+++ b/src/core/comments/pages/viewer/viewer.html
@@ -12,9 +12,7 @@
 
         <ion-card *ngFor="let comment of comments">
             <ion-item text-wrap>
-                <ion-avatar item-start>
-                    <img [src]="comment.profileimageurl" onError="this.src='assets/img/user-avatar.png'" core-external-content core-user-link [userId]="comment.userid" [alt]="'core.pictureof' | translate:{$a: comment.fullname}" role="presentation">
-                </ion-avatar>
+                <ion-avatar class="user-avatar" [user]="comment" item-start></ion-avatar>
                 <h2>{{ comment.fullname }}</h2>
                 <p>{{ comment.time }}</p>
             </ion-item>
diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index 2a52bad10..9300ed0c9 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/src/core/courses/pages/course-preview/course-preview.html
@@ -26,10 +26,8 @@
 
             <ng-container text-wrap *ngIf="course.contacts && course.contacts.length">
                 <ion-item-divider color="light">{{ 'core.teachers' | translate }}</ion-item-divider>
-                <a ion-item text-wrap *ngFor="let contact of course.contacts" core-user-link userId="{{contact.id}}" courseId="{{isEnrolled ? course.id : null}}" [attr.aria-label]="'core.viewprofile' | translate">
-                    <ion-avatar item-start>
-                        <img [src]="contact.userpictureurl" onError="this.src='assets/img/user-avatar.png'" core-external-content [alt]="'core.pictureof' | translate:{$a: contact.userfullname}" role="presentation">
-                    </ion-avatar>
+                <a ion-item text-wrap *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id" [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate">
+                    <ion-avatar class="user-avatar" [user]="contact" item-start [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"></ion-avatar>
                     <h2>{{contact.fullname}}</h2>
                 </a>
                 <ion-item-divider color="light"></ion-item-divider>
diff --git a/src/core/mainmenu/pages/more/more.html b/src/core/mainmenu/pages/more/more.html
index b7b585c76..3b2c070cb 100644
--- a/src/core/mainmenu/pages/more/more.html
+++ b/src/core/mainmenu/pages/more/more.html
@@ -5,10 +5,8 @@
 </ion-header>
 <ion-content>
     <ion-list>
-        <a ion-item core-user-link userId="{{siteInfo.userid}}">
-            <ion-avatar item-start>
-                <img [src]="siteInfo.userpictureurl" core-external-content alt="{{ 'core.pictureof' | translate:{$a: siteInfo.fullname} }}" role="presentation">
-            </ion-avatar>
+        <a ion-item core-user-link [userId]="siteInfo.userid">
+            <ion-avatar class="user-avatar" [user]="siteInfo" item-start></ion-avatar>
             <p>{{siteInfo.fullname}}</p>
         </a>
         <ion-item-divider color="light"></ion-item-divider>
diff --git a/src/core/user/components/participants/core-user-participants.html b/src/core/user/components/participants/core-user-participants.html
index 287c76baa..14a9ef664 100644
--- a/src/core/user/components/participants/core-user-participants.html
+++ b/src/core/user/components/participants/core-user-participants.html
@@ -9,9 +9,7 @@
 
             <ion-list *ngIf="participants && participants.length > 0" no-margin>
                 <a ion-item text-wrap *ngFor="let participant of participants" [title]="participant.fullname" (click)="gotoParticipant(participant.id)" [class.core-split-item-selected]="participant.id == participantId">
-                    <ion-avatar item-start>
-                        <img src="{{participant.profileimageurl}}" [alt]="'core.pictureof' | translate:{$a: participant.fullname}" core-external-content onError="this.src='assets/img/user-avatar.png'">
-                    </ion-avatar>
+                    <ion-avatar class="user-avatar" [user]="participant" item-start [userId]="participant.id"></ion-avatar>
                     <h2><core-format-text [text]="participant.fullname"></core-format-text></h2>
                     <p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
                 </a>
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index 44d572b52..7eeb788e9 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -111,6 +111,8 @@ $button-md-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0,
 
 $refresher-icon-color: $core-color !default;
 
+$core-online-color: #5cb85c;
+
 
 // Moodle Mobile variables
 // --------------------------------------------------

From dbf3c85f739e25dd2cfbbb95dd17bfa1db60d7f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 16 Nov 2018 14:41:26 +0100
Subject: [PATCH 2/3] MOBILE-1486 user: Add online status to the user profile

---
 .../course/addon-competency-course.html       |  2 +-
 .../pages/competency/competency.html          |  4 +-
 src/addon/competency/pages/plan/plan.html     |  2 +-
 .../contacts/addon-messages-contacts.html     |  2 +-
 .../addon-messages-discussions.html           |  4 +-
 .../addon-mod-assign-submission.html          |  6 +--
 .../submission-list/submission-list.html      |  2 +-
 src/addon/mod/chat/pages/chat/chat.html       |  2 +-
 src/addon/mod/chat/pages/users/users.html     |  2 +-
 .../index/addon-mod-choice-index.html         |  2 +-
 .../mod/feedback/pages/attempt/attempt.html   |  2 +-
 .../pages/nonrespondents/nonrespondents.html  |  2 +-
 .../pages/respondents/respondents.html        |  2 +-
 .../index/addon-mod-forum-index.html          |  4 +-
 .../components/post/addon-mod-forum-post.html |  2 +-
 src/addon/mod/glossary/pages/entry/entry.html |  2 +-
 .../index/addon-mod-lesson-index.html         |  2 +-
 .../lesson/pages/user-retake/user-retake.html |  2 +-
 .../addon-mod-workshop-assessment.html        |  2 +-
 .../addon-mod-workshop-submission.html        |  6 +--
 .../workshop/pages/assessment/assessment.html |  4 +-
 .../workshop/pages/submission/submission.html |  4 +-
 .../components/list/addon-notes-list.html     |  2 +-
 src/addon/notifications/pages/list/list.html  |  2 +-
 src/app/app.scss                              |  1 +
 .../user-avatar/core-user-avatar.html         |  3 +-
 src/components/user-avatar/user-avatar.scss   |  2 +-
 src/components/user-avatar/user-avatar.ts     | 38 ++++++++-----------
 src/core/comments/pages/viewer/viewer.html    |  2 +-
 .../pages/course-preview/course-preview.html  |  2 +-
 src/core/mainmenu/pages/more/more.html        |  2 +-
 .../participants/core-user-participants.html  |  2 +-
 src/core/user/pages/profile/profile.html      |  5 +--
 src/core/user/pages/profile/profile.scss      | 22 ++++++++++-
 34 files changed, 78 insertions(+), 67 deletions(-)

diff --git a/src/addon/competency/components/course/addon-competency-course.html b/src/addon/competency/components/course/addon-competency-course.html
index 2bf0cce65..dc9954809 100644
--- a/src/addon/competency/components/course/addon-competency-course.html
+++ b/src/addon/competency/components/course/addon-competency-course.html
@@ -28,7 +28,7 @@
         <h3 margin-horizontal *ngIf="competencies && competencies.statistics.competencycount > 0">{{ 'addon.competency.competencies' | translate }}</h3>
         <ion-card *ngIf="user">
              <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
         </ion-card>
diff --git a/src/addon/competency/pages/competency/competency.html b/src/addon/competency/pages/competency/competency.html
index 060264283..c6980360c 100644
--- a/src/addon/competency/pages/competency/competency.html
+++ b/src/addon/competency/pages/competency/competency.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="competencyLoaded">
         <ion-card *ngIf="user">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
         </ion-card>
@@ -73,7 +73,7 @@
             </p>
             <ion-card *ngFor="let evidence of competency.evidence">
                 <a ion-item text-wrap *ngIf="evidence.actionuser" (click)="openUserProfile(evidence.actionuser.id)">
-                    <ion-avatar class="user-avatar" [user]="evidence.actionuser" item-start></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="evidence.actionuser" item-start></ion-avatar>
                     <h2>{{ evidence.actionuser.fullname }}</h2>
                     <p>{{ evidence.timemodified | coreToLocaleString }}</p>
                 </a>
diff --git a/src/addon/competency/pages/plan/plan.html b/src/addon/competency/pages/plan/plan.html
index 8b368ae8f..f434688db 100644
--- a/src/addon/competency/pages/plan/plan.html
+++ b/src/addon/competency/pages/plan/plan.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="planLoaded">
         <ion-card *ngIf="user">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             </ion-item>
        </ion-card>
diff --git a/src/addon/messages/components/contacts/addon-messages-contacts.html b/src/addon/messages/components/contacts/addon-messages-contacts.html
index 8ee810583..acf4e4028 100644
--- a/src/addon/messages/components/contacts/addon-messages-contacts.html
+++ b/src/addon/messages/components/contacts/addon-messages-contacts.html
@@ -19,7 +19,7 @@
                 <ng-container *ngFor="let contact of contacts[contactType]">
                     <!-- Don't show deleted users -->
                     <a ion-item text-wrap *ngIf="contact.profileimageurl || contact.profileimageurlsmall"  [title]="contact.fullname" (click)="gotoDiscussion(contact.id)" [class.core-split-item-selected]="contact.id == discussionUserId" detail-none>
-                        <ion-avatar class="user-avatar" [user]="contact" item-start></ion-avatar>
+                        <ion-avatar core-user-avatar [user]="contact" item-start></ion-avatar>
                         <h2><core-format-text [text]="contact.fullname"></core-format-text></h2>
                     </a>
                 </ng-container>
diff --git a/src/addon/messages/components/discussions/addon-messages-discussions.html b/src/addon/messages/components/discussions/addon-messages-discussions.html
index eaf478467..c43a1c08f 100644
--- a/src/addon/messages/components/discussions/addon-messages-discussions.html
+++ b/src/addon/messages/components/discussions/addon-messages-discussions.html
@@ -17,7 +17,7 @@
                 <ion-note item-end>{{ search.results.length }}</ion-note>
             </ion-item-divider>
             <a ion-item text-wrap *ngFor="let result of search.results" [title]="result.fullname" (click)="gotoDiscussion(result.userid, result.messageid)" [class.core-split-item-selected]="result.userid == discussionUserId" detail-none>
-                <ion-avatar class="user-avatar" [user]="result" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="result" item-start></ion-avatar>
                 <h2><core-format-text [text]="result.fullname"></core-format-text></h2>
                 <p><core-format-text clean="true" singleLine="true" [text]="result.lastmessage"></core-format-text></p>
             </a>
@@ -25,7 +25,7 @@
 
         <ion-list *ngIf="!search.showResults" no-margin>
             <a ion-item text-wrap *ngFor="let discussion of discussions" [title]="discussion.fullname" (click)="gotoDiscussion(discussion.message.user)" [class.core-split-item-selected]="discussion.message.user == discussionUserId" detail-none>
-                <ion-avatar class="user-avatar" [user]="discussion" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="discussion" item-start></ion-avatar>
                 <h2>
                     <core-format-text [text]="discussion.fullname"></core-format-text>
                     <ion-note *ngIf="discussion.message.timecreated > 0 || discussion.unread">
diff --git a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
index e0dfbf922..adc60f8de 100644
--- a/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
+++ b/src/addon/mod/assign/components/submission/addon-mod-assign-submission.html
@@ -2,7 +2,7 @@
 
     <!-- User and status of the submission. -->
     <a ion-item text-wrap *ngIf="!blindMarking && user" (click)="openUserProfile(submitId)" [title]="user.fullname">
-        <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+        <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
         <h2>{{ user.fullname }}</h2>
         <ng-container *ngTemplateOutlet="submissionStatus"></ng-container>
     </a>
@@ -111,7 +111,7 @@
                     <h2>{{ 'addon.mod_assign.userswhoneedtosubmit' | translate: {$a: ''} }}</h2>
                     <div *ngFor="let user of membersToSubmit">
                         <a ion-item text-wrap *ngIf="user.fullname" (click)="openUserProfile(user.id)" [title]="user.fullname">
-                            <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+                            <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                             <h2>{{ user.fullname }}</h2>
                         </a>
                         <ion-item text-wrap *ngIf="!user.fullname">
@@ -209,7 +209,7 @@
 
                 <!-- Data about the grader (teacher who graded). -->
                 <a ion-item text-wrap *ngIf="grader" (click)="openUserProfile(grader.id)" [title]="grader.fullname" detail-push>
-                    <ion-avatar class="user-avatar" [user]="grader" item-start></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="grader" item-start></ion-avatar>
                     <h2>{{ 'addon.mod_assign.gradedby' | translate }}</h2>
                     <h2>{{ grader.fullname }}</h2>
                     <p *ngIf="feedback.gradeddate">{{ feedback.gradeddate * 1000 | coreFormatDate:"dfmediumdate" }}</p>
diff --git a/src/addon/mod/assign/pages/submission-list/submission-list.html b/src/addon/mod/assign/pages/submission-list/submission-list.html
index 3df9c921f..36d502c74 100644
--- a/src/addon/mod/assign/pages/submission-list/submission-list.html
+++ b/src/addon/mod/assign/pages/submission-list/submission-list.html
@@ -18,7 +18,7 @@
                 <!-- List of submissions. -->
                 <ng-container *ngFor="let submission of submissions">
                     <a ion-item text-wrap (click)="loadSubmission(submission)" [class.core-split-item-selected]="submission.id == selectedSubmissionId">
-                        <ion-avatar class="user-avatar" [user]="submission" item-start></ion-avatar>
+                        <ion-avatar core-user-avatar [user]="submission" item-start></ion-avatar>
                         <h2 *ngIf="submission.userfullname">{{submission.userfullname}}</h2>
                         <h2 *ngIf="!submission.userfullname">{{ 'addon.mod_assign.hiddenuser' | translate }}{{submission.blindid}}</h2>
                         <p *ngIf="assign.teamsubmission">
diff --git a/src/addon/mod/chat/pages/chat/chat.html b/src/addon/mod/chat/pages/chat/chat.html
index 52fe5ab1a..02eb8e71a 100644
--- a/src/addon/mod/chat/pages/chat/chat.html
+++ b/src/addon/mod/chat/pages/chat/chat.html
@@ -38,7 +38,7 @@
                 </div>
 
                 <ion-item text-wrap *ngIf="!message.system && message.message.substr(0, 4) != 'beep'" class="addon-mod-chat-message">
-                    <ion-avatar class="user-avatar" [user]="message" item-start></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="message" item-start></ion-avatar>
                     <h2>
                         <p float-end>{{ message.timestamp * 1000 | coreFormatDate:"dftimedate" }}</p>
                         <core-format-text [text]="message.userfullname"></core-format-text>
diff --git a/src/addon/mod/chat/pages/users/users.html b/src/addon/mod/chat/pages/users/users.html
index f31b4429a..815715335 100644
--- a/src/addon/mod/chat/pages/users/users.html
+++ b/src/addon/mod/chat/pages/users/users.html
@@ -11,7 +11,7 @@
 <ion-content>
     <core-loading [hideUntil]="usersLoaded">
         <ion-item text-wrap *ngFor="let user of users" [class.addon-mod-chat-user]="currentUserId != user.id && isOnline">
-            <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+            <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
             <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
             <ng-container *ngIf="currentUserId != user.id && isOnline">
                 <button ion-button clear icon-left (click)="talkTo(user)">
diff --git a/src/addon/mod/choice/components/index/addon-mod-choice-index.html b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
index 8c49728e8..82d44f856 100644
--- a/src/addon/mod/choice/components/index/addon-mod-choice-index.html
+++ b/src/addon/mod/choice/components/index/addon-mod-choice-index.html
@@ -82,7 +82,7 @@
                             <p>{{ 'addon.mod_choice.numberofuser' | translate }}: {{ result.numberofuser }} ({{ 'core.percentagenumber' | translate: {$a: result.percentageamount} }})</p>
                         </ion-item-divider>
                         <a ion-item *ngFor="let user of result.userresponses" core-user-link [courseId]="courseid" [userId]="user.userid" [title]="user.fullname" text-wrap>
-                            <ion-avatar class="user-avatar" [user]="user" item-start [courseId]="courseid"></ion-avatar>
+                            <ion-avatar core-user-avatar [user]="user" item-start [courseId]="courseid"></ion-avatar>
                             <p>{{user.fullname}}</p>
                         </a>
                     </ion-item-group>
diff --git a/src/addon/mod/feedback/pages/attempt/attempt.html b/src/addon/mod/feedback/pages/attempt/attempt.html
index 66f78fbfb..01ec496c8 100644
--- a/src/addon/mod/feedback/pages/attempt/attempt.html
+++ b/src/addon/mod/feedback/pages/attempt/attempt.html
@@ -7,7 +7,7 @@
     <core-loading [hideUntil]="feedbackLoaded">
         <ion-list no-margin>
             <a *ngIf="attempt.fullname" ion-item text-wrap core-user-link [userId]="attempt.userid" [attr.aria-label]=" 'core.user.viewprofile' | translate" [courseId]="attempt.courseid" [title]="attempt.fullname">
-                <ion-avatar class="user-avatar" [user]="attempt" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="attempt" item-start></ion-avatar>
                 <h2>{{attempt.fullname}}</h2>
                 <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate:"LLL"}}</p>
             </a>
diff --git a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
index 621a59687..e269f5e31 100644
--- a/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
+++ b/src/addon/mod/feedback/pages/nonrespondents/nonrespondents.html
@@ -21,7 +21,7 @@
             </ion-item-divider>
             <ng-container *ngIf="total > 0">
                 <ion-item *ngFor="let user of users" text-wrap>
-                    <ion-avatar class="user-avatar" [user]="user" item-start></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="user" item-start></ion-avatar>
                     <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
                     <p>
                         <ion-badge color="success" *ngIf="user.started">
diff --git a/src/addon/mod/feedback/pages/respondents/respondents.html b/src/addon/mod/feedback/pages/respondents/respondents.html
index 49d1b315a..bee8066c9 100644
--- a/src/addon/mod/feedback/pages/respondents/respondents.html
+++ b/src/addon/mod/feedback/pages/respondents/respondents.html
@@ -22,7 +22,7 @@
                         {{ 'addon.mod_feedback.non_anonymous_entries' | translate : {$a: responses.total } }}
                     </ion-item-divider>
                     <a *ngFor="let attempt of responses.attempts" ion-item text-wrap (click)="gotoAttempt(attempt)" [class.core-split-item-selected]="attempt.id == attemptId">
-                        <ion-avatar class="user-avatar" [user]="attempt" item-start></ion-avatar>
+                        <ion-avatar core-user-avatar [user]="attempt" item-start></ion-avatar>
                         <h2><core-format-text [text]="attempt.fullname"></core-format-text></h2>
                         <p *ngIf="attempt.timemodified">{{attempt.timemodified * 1000 | coreFormatDate: "LLL"}}</p>
                     </a>
diff --git a/src/addon/mod/forum/components/index/addon-mod-forum-index.html b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
index 39abe5a41..82a95ac50 100644
--- a/src/addon/mod/forum/components/index/addon-mod-forum-index.html
+++ b/src/addon/mod/forum/components/index/addon-mod-forum-index.html
@@ -27,7 +27,7 @@
             <ng-container *ngIf="forum && discussions.length > 0">
                 <ion-card *ngFor="let discussion of offlineDiscussions" (click)="openNewDiscussion(discussion.timecreated)" [class.addon-forum-discussion-selected]="discussion.timecreated == -selectedDiscussion">
                     <ion-item text-wrap>
-                        <ion-avatar class="user-avatar" [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
+                        <ion-avatar core-user-avatar [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
                         <h2><core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p *ngIf="discussion.userfullname">
                             <ion-note float-end padding-left><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
@@ -43,7 +43,7 @@
                 </ion-card>
                 <ion-card *ngFor="let discussion of discussions" (click)="openDiscussion(discussion)" [class.addon-forum-discussion-selected]="discussion.discussion == selectedDiscussion">
                     <ion-item text-wrap>
-                        <ion-avatar class="user-avatar" [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
+                        <ion-avatar core-user-avatar [user]="discussion" item-start [courseId]="courseId"></ion-avatar>
                         <h2><core-icon name="fa-map-pin" *ngIf="discussion.pinned"></core-icon> <core-format-text [text]="discussion.subject"></core-format-text></h2>
                         <p>
                             <ion-note float-end padding-left text-end>
diff --git a/src/addon/mod/forum/components/post/addon-mod-forum-post.html b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
index d0f43c172..cad199ead 100644
--- a/src/addon/mod/forum/components/post/addon-mod-forum-post.html
+++ b/src/addon/mod/forum/components/post/addon-mod-forum-post.html
@@ -1,6 +1,6 @@
 <ion-card-header text-wrap no-padding >
     <ion-item text-wrap>
-        <ion-avatar class="user-avatar" [user]="post" item-start (click)="openUserProfile(post.userid)"></ion-avatar>
+        <ion-avatar core-user-avatar [user]="post" item-start (click)="openUserProfile(post.userid)"></ion-avatar>
         <h2><span [class.core-bold]="post.parent == 0"><core-format-text [text]="post.subject"></core-format-text></span></h2>
         <p>
             <ion-note float-end padding-left *ngIf="!post.modified"><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</ion-note>
diff --git a/src/addon/mod/glossary/pages/entry/entry.html b/src/addon/mod/glossary/pages/entry/entry.html
index d530f6a2b..28dc4be7a 100644
--- a/src/addon/mod/glossary/pages/entry/entry.html
+++ b/src/addon/mod/glossary/pages/entry/entry.html
@@ -11,7 +11,7 @@
     <core-loading [hideUntil]="loaded">
         <ng-container *ngIf="entry">
             <ion-item text-wrap *ngIf="showAuthor">
-                <ion-avatar class="user-avatar" [user]="entry" (click)="openUserProfile(post.userid)" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="entry" (click)="openUserProfile(post.userid)" item-start></ion-avatar>
                 <h2><core-format-text [text]="entry.concept"></core-format-text></h2>
                 <ion-note item-end *ngIf="showDate">{{ entry.timemodified | coreDateDayOrTime }}</ion-note>
                 <p><core-format-text [text]="entry.userfullname"></core-format-text></p>
diff --git a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
index e64803cfe..2aca8f933 100644
--- a/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
+++ b/src/addon/mod/lesson/components/index/addon-mod-lesson-index.html
@@ -233,7 +233,7 @@
                         </ion-card-header>
 
                         <a ion-item text-wrap *ngFor="let student of overview.students" [navPush]="'AddonModLessonUserRetakePage'" [navParams]="{courseId: courseId, lessonId: lesson.id, userId: student.id}">
-                            <ion-avatar class="user-avatar" [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
+                            <ion-avatar core-user-avatar [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
                             <h2>{{ student.fullname }}</h2>
                             <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
                         </a>
diff --git a/src/addon/mod/lesson/pages/user-retake/user-retake.html b/src/addon/mod/lesson/pages/user-retake/user-retake.html
index 3912c02bd..afe8b48cc 100644
--- a/src/addon/mod/lesson/pages/user-retake/user-retake.html
+++ b/src/addon/mod/lesson/pages/user-retake/user-retake.html
@@ -12,7 +12,7 @@
         <ion-list *ngIf="student">
             <!-- Student data. -->
             <a ion-item text-wrap core-user-link [userId]="student.id" [courseId]="courseId" [title]="student.fullname">
-                <ion-avatar class="user-avatar" [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
+                <ion-avatar core-user-avatar [user]="student" item-start [userId]="student.id" [courseId]="courseId"></ion-avatar>
                 <h2>{{student.fullname}}</h2>
                 <core-progress-bar [progress]="student.bestgrade"></core-progress-bar>
             </a>
diff --git a/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html b/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
index 7b00b7d2a..8c876cfd1 100644
--- a/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
+++ b/src/addon/mod/workshop/components/assessment/addon-mod-workshop-assessment.html
@@ -1,6 +1,6 @@
 <core-loading [hideUntil]="loaded">
     <a ion-item *ngIf="summary" text-wrap [attr.detail-none]="canViewAssessment && !canSelfAssess? null : true" (click)="gotoAssessment()">
-        <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
+        <ion-avatar core-user-avatar [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
 
         <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
         <p *ngIf="showGrade(assessment.grade)">
diff --git a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
index dbb4106d4..2637cc500 100644
--- a/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
+++ b/src/addon/mod/workshop/components/submission/addon-mod-workshop-submission.html
@@ -1,7 +1,7 @@
 <core-loading [hideUntil]="loaded">
     <div *ngIf="!summary">
         <ion-list-header text-wrap>
-            <ion-avatar class="user-avatar" [user]="profile" item-start></ion-avatar>
+            <ion-avatar core-user-avatar [user]="profile" item-start></ion-avatar>
             <h2>{{submission.title}}</h2>
             <p *ngIf="profile && profile.fullname">{{profile.fullname}}</p>
             <p *ngIf="showGrade(submission.submissiongrade)" [class.addon-has-overriden-grade]="showGrade(submission.submissiongradeover)">
@@ -32,7 +32,7 @@
             <core-local-file *ngIf="attachment.name" [file]="attachment"></core-local-file>
         </ion-item>
         <ion-item text-wrap *ngIf="viewDetails && submission.feedbackauthor">
-            <ion-avatar class="user-avatar" [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
+            <ion-avatar core-user-avatar [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
 
             <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}</h2>
             <core-format-text [text]="submission.feedbackauthor"></core-format-text>
@@ -46,7 +46,7 @@
     </div>
 
     <a ion-item text-wrap *ngIf="summary" [attr.detail-none]="submission.timemodified ? null : true" (click)="gotoSubmission()">
-        <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
+        <ion-avatar core-user-avatar [user]="profile" item-start [courseId]="courseId" [userId]="profile && profile.id"></ion-avatar>
 
         <h2>{{submission.title}}</h2>
         <p *ngIf="profile && profile.fullname">{{profile.fullname}}</p>
diff --git a/src/addon/mod/workshop/pages/assessment/assessment.html b/src/addon/mod/workshop/pages/assessment/assessment.html
index 58be7fad8..88392540f 100644
--- a/src/addon/mod/workshop/pages/assessment/assessment.html
+++ b/src/addon/mod/workshop/pages/assessment/assessment.html
@@ -15,7 +15,7 @@
     <core-loading [hideUntil]="loaded">
 
         <ion-item text-wrap>
-            <ion-avatar class="user-avatar" [user]="profile" item-start [courseId]="courseId" [userId]="profile.id"></ion-avatar>
+            <ion-avatar *ngIf="profile" core-user-avatar [user]="profile" item-start [courseId]="courseId" [userId]="profile.id"></ion-avatar>
 
             <h2 *ngIf="profile && profile.fullname">{{profile.fullname}}</h2>
 
@@ -65,7 +65,7 @@
         </form>
         <ion-list *ngIf="!evaluating && evaluate && evaluate.text">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
+                <ion-avatar core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}</h2>
                 <core-format-text [text]="evaluate.text"></core-format-text>
             </ion-item>
diff --git a/src/addon/mod/workshop/pages/submission/submission.html b/src/addon/mod/workshop/pages/submission/submission.html
index bbadc5cf3..79b103899 100644
--- a/src/addon/mod/workshop/pages/submission/submission.html
+++ b/src/addon/mod/workshop/pages/submission/submission.html
@@ -36,7 +36,7 @@
 
         <ion-list *ngIf="!canAddFeedback && evaluate && evaluate.text">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
+                <ion-avatar core-user-avatar *ngIf="evaluateByProfile" [user]="evaluateByProfile" item-start [courseId]="courseId" [userId]="evaluateByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateByProfile && evaluateByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateByProfile.fullname} }}</h2>
                 <core-format-text [text]="evaluate.text"></core-format-text>
             </ion-item>
@@ -95,7 +95,7 @@
 
         <ion-list *ngIf="assessmentId && !access.assessingallowed && assessment.feedbackreviewer">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
+                <ion-avatar core-user-avatar *ngIf="evaluateGradingByProfile" [user]="evaluateGradingByProfile" item-start [courseId]="courseId" [userId]="evaluateGradingByProfile.id"></ion-avatar>
                 <h2 *ngIf="evaluateGradingByProfile && evaluateGradingByProfile.fullname">{{ 'addon.mod_workshop.feedbackby' | translate : {$a: evaluateGradingByProfile.fullname} }}</h2>
                 <core-format-text [text]="assessment.feedbackreviewer"></core-format-text>
             </ion-item>
diff --git a/src/addon/notes/components/list/addon-notes-list.html b/src/addon/notes/components/list/addon-notes-list.html
index c66e1e2f6..c2a0a52d2 100644
--- a/src/addon/notes/components/list/addon-notes-list.html
+++ b/src/addon/notes/components/list/addon-notes-list.html
@@ -27,7 +27,7 @@
         <ion-list *ngIf="notes && notes.length > 0">
             <ion-card *ngFor="let note of notes">
                 <ion-item text-wrap>
-                    <ion-avatar class="user-avatar" [user]="note" item-start></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="note" item-start></ion-avatar>
                     <h2>{{note.userfullname}}</h2>
                     <p *ngIf="!note.offline" item-end>{{note.lastmodified | coreDateDayOrTime}}</p>
                     <p *ngIf="note.offline" item-end><ion-icon name="time"></ion-icon> {{ 'core.notsent' | translate }}</p>
diff --git a/src/addon/notifications/pages/list/list.html b/src/addon/notifications/pages/list/list.html
index 32d742ccf..7645f598a 100644
--- a/src/addon/notifications/pages/list/list.html
+++ b/src/addon/notifications/pages/list/list.html
@@ -19,7 +19,7 @@
         </div>
         <ion-card *ngFor="let notification of notifications">
             <ion-item>
-                <ion-avatar class="user-avatar" [user]="notification" item-start [profileUrl]="notification.profileimageurlfrom" [fullname]="notification.userfromfullname" [userId]="notification.useridfrom" [courseId]="notification.courseid"></ion-avatar>
+                <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>
diff --git a/src/app/app.scss b/src/app/app.scss
index a527a7016..6a3b55d09 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -173,6 +173,7 @@ ion-app.app-root {
           border-radius : 50%;
           padding: 4px;
           border: 1px solid #ddd;
+          background-color: white;
 
           &.avatar-full {
               border-radius: 2%;
diff --git a/src/components/user-avatar/core-user-avatar.html b/src/components/user-avatar/core-user-avatar.html
index d98bbdece..d9b0c7228 100644
--- a/src/components/user-avatar/core-user-avatar.html
+++ b/src/components/user-avatar/core-user-avatar.html
@@ -1,2 +1,3 @@
 <img src="{{profileUrl}}" [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)">
-<span *ngIf="isOnline()" class="contact-status online"></span>
\ No newline at end of file
+<span *ngIf="checkOnline && isOnline()" class="contact-status online"></span>
+<ng-content></ng-content>
\ No newline at end of file
diff --git a/src/components/user-avatar/user-avatar.scss b/src/components/user-avatar/user-avatar.scss
index ad4989164..775b0cacf 100644
--- a/src/components/user-avatar/user-avatar.scss
+++ b/src/components/user-avatar/user-avatar.scss
@@ -1,4 +1,4 @@
-ion-avatar.user-avatar {
+ion-avatar[core-user-avatar] {
     position: relative;
 
     .contact-status {
diff --git a/src/components/user-avatar/user-avatar.ts b/src/components/user-avatar/user-avatar.ts
index 3755c7bd4..057d1a251 100644
--- a/src/components/user-avatar/user-avatar.ts
+++ b/src/components/user-avatar/user-avatar.ts
@@ -19,21 +19,24 @@ import { CoreSitesProvider } from '@providers/sites';
 /**
  * Component to display a "user avatar".
  *
- * Example: <core-user-avatar [user]="participant"></core-user-avatar>
+ * Example: <ion-avatar core-user-avatar [user]="participant"></ion-avatar>
  */
 @Component({
-    selector: 'ion-avatar.user-avatar',
+    selector: 'ion-avatar[core-user-avatar]',
     templateUrl: 'core-user-avatar.html'
 })
 export class CoreUserAvatarComponent implements OnInit, OnChanges {
     @Input() user: any;
     // The following params will override the ones in user object.
     @Input() profileUrl?: string;
+    @Input() protected linkProfile = true; // Avoid linking to the profile if wanted.
     @Input() fullname?: string;
     @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.
 
     // Variable to check if we consider this user online or not.
+    // @TODO: Use setting when available (see MDL-63972) so we can use site setting.
     protected timetoshowusers = 300000; // Miliseconds default.
     protected myUser = false;
     protected currentUserId: number;
@@ -46,20 +49,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      * Component being initialized.
      */
     ngOnInit(): void {
-        console.error(this.user);
         this.setFields();
-
-        // @TODO: This setting is not currently available so we are always using the default setting.
-        /*if (!this.myUser) {
-            let minutes = 5;
-            this.sitesProvider.getCurrentSite().getConfig('block_online_users_timetosee').then((timetosee) => {
-                minutes = timetosee || minutes;
-            }).catch(() => {
-                // Ignore errors.
-            }).finally(() => {
-                this.timetoshowusers = minutes * 60000;
-            });
-        }*/
     }
 
     /**
@@ -76,16 +66,18 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      * Set fields from user.
      */
     protected setFields(): void {
-        this.profileUrl = this.profileUrl || this.user.profileimageurl || this.user.userprofileimageurl ||
-            this.user.userpictureurl || this.user.profileimageurlsmall;
+        if (this.user) {
+            this.profileUrl = this.profileUrl || this.user.profileimageurl || this.user.userprofileimageurl ||
+                this.user.userpictureurl || this.user.profileimageurlsmall;
 
-        this.fullname = this.fullname || this.user.fullname || this.user.userfullname;
+            this.fullname = this.fullname || this.user.fullname || this.user.userfullname;
 
-        this.userId = this.userId || this.user.userid;
-        this.courseId = this.courseId || this.user.courseid;
+            this.userId = this.userId || this.user.userid;
+            this.courseId = this.courseId || this.user.courseid;
 
-        // If not available we cannot ensure the avatar is from the current user.
-        this.myUser = this.userId && this.userId == this.currentUserId;
+            // If not available we cannot ensure the avatar is from the current user.
+            this.myUser = this.userId && this.userId == this.currentUserId;
+        }
     }
 
     /**
@@ -104,7 +96,7 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      */
     gotoProfile(event: any): void {
         // If the event prevented default action, do nothing.
-        if (!event.defaultPrevented && this.userId) {
+        if (this.linkProfile && this.userId) {
             event.preventDefault();
             event.stopPropagation();
             this.navCtrl.push('CoreUserProfilePage', { userId: this.userId, courseId: this.courseId });
diff --git a/src/core/comments/pages/viewer/viewer.html b/src/core/comments/pages/viewer/viewer.html
index a9e7de661..bcd909ecd 100644
--- a/src/core/comments/pages/viewer/viewer.html
+++ b/src/core/comments/pages/viewer/viewer.html
@@ -12,7 +12,7 @@
 
         <ion-card *ngFor="let comment of comments">
             <ion-item text-wrap>
-                <ion-avatar class="user-avatar" [user]="comment" item-start></ion-avatar>
+                <ion-avatar core-user-avatar [user]="comment" item-start></ion-avatar>
                 <h2>{{ comment.fullname }}</h2>
                 <p>{{ comment.time }}</p>
             </ion-item>
diff --git a/src/core/courses/pages/course-preview/course-preview.html b/src/core/courses/pages/course-preview/course-preview.html
index 9300ed0c9..e29da97d7 100644
--- a/src/core/courses/pages/course-preview/course-preview.html
+++ b/src/core/courses/pages/course-preview/course-preview.html
@@ -27,7 +27,7 @@
             <ng-container text-wrap *ngIf="course.contacts && course.contacts.length">
                 <ion-item-divider color="light">{{ 'core.teachers' | translate }}</ion-item-divider>
                 <a ion-item text-wrap *ngFor="let contact of course.contacts" core-user-link [userId]="contact.id" [courseId]="isEnrolled ? course.id : null" [attr.aria-label]="'core.viewprofile' | translate">
-                    <ion-avatar class="user-avatar" [user]="contact" item-start [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="contact" item-start [userId]="contact.id" [courseId]="isEnrolled ? course.id : null"></ion-avatar>
                     <h2>{{contact.fullname}}</h2>
                 </a>
                 <ion-item-divider color="light"></ion-item-divider>
diff --git a/src/core/mainmenu/pages/more/more.html b/src/core/mainmenu/pages/more/more.html
index 3b2c070cb..7f5b97a70 100644
--- a/src/core/mainmenu/pages/more/more.html
+++ b/src/core/mainmenu/pages/more/more.html
@@ -6,7 +6,7 @@
 <ion-content>
     <ion-list>
         <a ion-item core-user-link [userId]="siteInfo.userid">
-            <ion-avatar class="user-avatar" [user]="siteInfo" item-start></ion-avatar>
+            <ion-avatar core-user-avatar [user]="siteInfo" item-start></ion-avatar>
             <p>{{siteInfo.fullname}}</p>
         </a>
         <ion-item-divider color="light"></ion-item-divider>
diff --git a/src/core/user/components/participants/core-user-participants.html b/src/core/user/components/participants/core-user-participants.html
index 14a9ef664..61e3653f6 100644
--- a/src/core/user/components/participants/core-user-participants.html
+++ b/src/core/user/components/participants/core-user-participants.html
@@ -9,7 +9,7 @@
 
             <ion-list *ngIf="participants && participants.length > 0" no-margin>
                 <a ion-item text-wrap *ngFor="let participant of participants" [title]="participant.fullname" (click)="gotoParticipant(participant.id)" [class.core-split-item-selected]="participant.id == participantId">
-                    <ion-avatar class="user-avatar" [user]="participant" item-start [userId]="participant.id"></ion-avatar>
+                    <ion-avatar core-user-avatar [user]="participant" item-start [userId]="participant.id" [checkOnline]="true"></ion-avatar>
                     <h2><core-format-text [text]="participant.fullname"></core-format-text></h2>
                     <p *ngIf="participant.lastaccess"><strong>{{ 'core.lastaccess' | translate }}: </strong>{{ participant.lastaccess * 1000 | coreFormatDate:"dfmediumdate"}}</p>
                 </a>
diff --git a/src/core/user/pages/profile/profile.html b/src/core/user/pages/profile/profile.html
index 67737ecb4..8b1293c50 100644
--- a/src/core/user/pages/profile/profile.html
+++ b/src/core/user/pages/profile/profile.html
@@ -10,10 +10,9 @@
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted">
             <ion-item text-center>
-                <div class="item-avatar-center">
-                    <img class="avatar" [src]="user.profileimageurl" core-external-content alt="{{ 'core.pictureof' | translate:{$a: user.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
+                <ion-avatar class="user-avatar item-avatar-center" [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
                     <ion-icon name="create" class="core-icon-foreground" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"></ion-icon>
-                </div>
+                </ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
                 <p><core-format-text *ngIf="user.address" [text]="user.address"></core-format-text></p>
                 <p *ngIf="user.roles" text-wrap>
diff --git a/src/core/user/pages/profile/profile.scss b/src/core/user/pages/profile/profile.scss
index 496e1ae0c..647c39a36 100644
--- a/src/core/user/pages/profile/profile.scss
+++ b/src/core/user/pages/profile/profile.scss
@@ -1,9 +1,27 @@
 ion-app.app-root page-core-user-profile {
     .core-icon-foreground {
-        position: relative;
-        @include position(null, null, 30px, 60px);
+        position: absolute;
+        @include position(null, 0, 0, null);
         font-size: 24px;
+        line-height: 30px;
+        text-align: center;
+
+        width: 30px;
+        height: 30px;
+        border-radius: 50%;
+        background-color: white;
     }
+    .user-avatar.item-avatar-center {
+        display: inline-block;
+        img {
+            margin: 0;
+        }
+        .contact-status {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
     .core-user-communication-handlers {
         background: $list-background-color;
         border-bottom: 1px solid $list-border-color;

From cfb6ac4f86500b6d71b353728577ab52c0101093 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 16 Nov 2018 10:55:32 +0100
Subject: [PATCH 3/3] MOBILE-1486 course: Log view when course is viewed

---
 src/components/user-avatar/user-avatar.ts     | 24 ++++----
 src/core/course/course.module.ts              | 24 +++++++-
 src/core/course/pages/section/section.ts      |  5 ++
 src/core/course/providers/log-cron-handler.ts | 59 +++++++++++++++++++
 src/core/user/pages/profile/profile.html      |  2 +-
 src/core/user/pages/profile/profile.scss      |  2 +-
 src/providers/cron.ts                         | 32 +++++++---
 7 files changed, 124 insertions(+), 24 deletions(-)
 create mode 100644 src/core/course/providers/log-cron-handler.ts

diff --git a/src/components/user-avatar/user-avatar.ts b/src/components/user-avatar/user-avatar.ts
index 057d1a251..20aab67fd 100644
--- a/src/components/user-avatar/user-avatar.ts
+++ b/src/components/user-avatar/user-avatar.ts
@@ -66,18 +66,21 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      * Set fields from user.
      */
     protected setFields(): void {
-        if (this.user) {
-            this.profileUrl = this.profileUrl || this.user.profileimageurl || this.user.userprofileimageurl ||
-                this.user.userpictureurl || this.user.profileimageurlsmall;
+        this.profileUrl = this.profileUrl || (this.user && (this.user.profileimageurl || this.user.userprofileimageurl ||
+            this.user.userpictureurl || this.user.profileimageurlsmall));
 
-            this.fullname = this.fullname || this.user.fullname || this.user.userfullname;
-
-            this.userId = this.userId || this.user.userid;
-            this.courseId = this.courseId || this.user.courseid;
-
-            // If not available we cannot ensure the avatar is from the current user.
-            this.myUser = this.userId && this.userId == this.currentUserId;
+        if (typeof this.profileUrl != 'string') {
+            this.profileUrl = '';
         }
+
+        this.fullname = this.fullname || (this.user && (this.user.fullname || this.user.userfullname));
+
+        this.userId = this.userId || (this.user && this.user.userid);
+        this.courseId = this.courseId || (this.user && this.user.courseid);
+
+        // If not available we cannot ensure the avatar is from the current user.
+        this.myUser = this.userId && this.userId == this.currentUserId;
+
     }
 
     /**
@@ -95,7 +98,6 @@ export class CoreUserAvatarComponent implements OnInit, OnChanges {
      * Function executed image clicked.
      */
     gotoProfile(event: any): void {
-        // If the event prevented default action, do nothing.
         if (this.linkProfile && this.userId) {
             event.preventDefault();
             event.stopPropagation();
diff --git a/src/core/course/course.module.ts b/src/core/course/course.module.ts
index 541c4333b..e6e01a772 100644
--- a/src/core/course/course.module.ts
+++ b/src/core/course/course.module.ts
@@ -13,7 +13,9 @@
 // limitations under the License.
 
 import { NgModule } from '@angular/core';
+import { Platform } from 'ionic-angular';
 import { CoreCronDelegate } from '@providers/cron';
+import { CoreEventsProvider } from '@providers/events';
 import { CoreCourseProvider } from './providers/course';
 import { CoreCourseHelperProvider } from './providers/helper';
 import { CoreCourseFormatDelegate } from './providers/format-delegate';
@@ -29,6 +31,7 @@ import { CoreCourseFormatTopicsModule } from './formats/topics/topics.module';
 import { CoreCourseFormatWeeksModule } from './formats/weeks/weeks.module';
 import { CoreCourseSyncProvider } from './providers/sync';
 import { CoreCourseSyncCronHandler } from './providers/sync-cron-handler';
+import { CoreCourseLogCronHandler } from './providers/log-cron-handler';
 
 // List of providers (without handlers).
 export const CORE_COURSE_PROVIDERS: any[] = [
@@ -61,12 +64,29 @@ export const CORE_COURSE_PROVIDERS: any[] = [
         CoreCourseSyncProvider,
         CoreCourseFormatDefaultHandler,
         CoreCourseModuleDefaultHandler,
-        CoreCourseSyncCronHandler
+        CoreCourseSyncCronHandler,
+        CoreCourseLogCronHandler
     ],
     exports: []
 })
 export class CoreCourseModule {
-    constructor(cronDelegate: CoreCronDelegate, syncHandler: CoreCourseSyncCronHandler) {
+    constructor(cronDelegate: CoreCronDelegate, syncHandler: CoreCourseSyncCronHandler, logHandler: CoreCourseLogCronHandler,
+        platform: Platform, eventsProvider: CoreEventsProvider) {
         cronDelegate.register(syncHandler);
+        cronDelegate.register(logHandler);
+
+        platform.resume.subscribe(() => {
+            // Log the app is open to keep user in online status.
+            setTimeout(() => {
+                cronDelegate.forceCronHandlerExecution(logHandler.name);
+            }, 1000);
+        });
+
+        eventsProvider.on(CoreEventsProvider.LOGIN, () => {
+            // Log the app is open to keep user in online status.
+            setTimeout(() => {
+                cronDelegate.forceCronHandlerExecution(logHandler.name);
+            }, 1000);
+        });
     }
 }
diff --git a/src/core/course/pages/section/section.ts b/src/core/course/pages/section/section.ts
index c915b4b4e..1a048fc84 100644
--- a/src/core/course/pages/section/section.ts
+++ b/src/core/course/pages/section/section.ts
@@ -202,6 +202,11 @@ export class CoreCourseSectionPage implements OnDestroy {
             }).then((sections) => {
                 let promise;
 
+                // Add log in Moodle.
+                this.courseProvider.logView(this.course.id, this.sectionNumber).catch(() => {
+                    // Ignore errors.
+                });
+
                  // Get the completion status.
                 if (this.course.enablecompletion === false) {
                     // Completion not enabled.
diff --git a/src/core/course/providers/log-cron-handler.ts b/src/core/course/providers/log-cron-handler.ts
new file mode 100644
index 000000000..108c8765d
--- /dev/null
+++ b/src/core/course/providers/log-cron-handler.ts
@@ -0,0 +1,59 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Injectable } from '@angular/core';
+import { CoreCronHandler } from '@providers/cron';
+import { CoreSitesProvider } from '@providers/sites';
+import { CoreCourseProvider } from '@core/course/providers/course';
+
+/**
+ * Log cron handler. It will update last access of the user while app is open.
+ */
+@Injectable()
+export class CoreCourseLogCronHandler implements CoreCronHandler {
+    name = 'CoreCourseLogCronHandler';
+
+    constructor(private coreProvider: CoreCourseProvider, private sitesProvider: CoreSitesProvider) {}
+
+    /**
+     * Execute the process.
+     * Receives the ID of the site affected, undefined for the current site.
+     *
+     * @param  {string} [siteId] ID of the site affected, undefined for the current site.
+     * @return {Promise<any>}         Promise resolved when done, rejected if failure.
+     */
+    execute(siteId?: string): Promise<any> {
+        return this.sitesProvider.getSite(siteId).then((site) => {
+           return this.coreProvider.logView(site.getSiteHomeId(), undefined, site.getId());
+        });
+    }
+
+    /**
+     * Check whether it's a synchronization process or not.
+     *
+     * @return {boolean} Whether it's a synchronization process or not.
+     */
+    isSync(): boolean {
+        return false;
+    }
+
+    /**
+     * Get the time between consecutive executions.
+     *
+     * @return {number} Time between consecutive executions (in ms).
+     */
+    getInterval(): number {
+        return 240000; // 4 minutes. By default platform will see the user as online if lastaccess is less than 5 minutes.
+    }
+}
diff --git a/src/core/user/pages/profile/profile.html b/src/core/user/pages/profile/profile.html
index 8b1293c50..57d96674e 100644
--- a/src/core/user/pages/profile/profile.html
+++ b/src/core/user/pages/profile/profile.html
@@ -10,7 +10,7 @@
     <core-loading [hideUntil]="userLoaded">
         <ion-list *ngIf="user && !isDeleted">
             <ion-item text-center>
-                <ion-avatar class="user-avatar item-avatar-center" [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
+                <ion-avatar core-user-avatar class="item-avatar-center" [user]="user" [userId]="user.id" [linkProfile]="false" [checkOnline]="true">
                     <ion-icon name="create" class="core-icon-foreground" *ngIf="canChangeProfilePicture" (click)="changeProfilePicture()"></ion-icon>
                 </ion-avatar>
                 <h2><core-format-text [text]="user.fullname"></core-format-text></h2>
diff --git a/src/core/user/pages/profile/profile.scss b/src/core/user/pages/profile/profile.scss
index 647c39a36..edee0fc71 100644
--- a/src/core/user/pages/profile/profile.scss
+++ b/src/core/user/pages/profile/profile.scss
@@ -11,7 +11,7 @@ ion-app.app-root page-core-user-profile {
         border-radius: 50%;
         background-color: white;
     }
-    .user-avatar.item-avatar-center {
+    [core-user-avatar].item-avatar-center {
         display: inline-block;
         img {
             margin: 0;
diff --git a/src/providers/cron.ts b/src/providers/cron.ts
index 74eae363e..b82335476 100644
--- a/src/providers/cron.ts
+++ b/src/providers/cron.ts
@@ -236,23 +236,37 @@ export class CoreCronDelegate {
         const promises = [];
 
         for (const name in this.handlers) {
-            const handler = this.handlers[name];
             if (this.isHandlerManualSync(name)) {
-                // Mark the handler as running (it might be running already).
-                handler.running = true;
-
-                // Cancel pending timeout.
-                clearTimeout(handler.timeout);
-                delete handler.timeout;
-
                 // Now force the execution of the handler.
-                promises.push(this.checkAndExecuteHandler(name, true, siteId));
+                promises.push(this.forceCronHandlerExecution(name, siteId));
             }
         }
 
         return this.utils.allPromises(promises);
     }
 
+    /**
+     * Force execution of a cron tasks without waiting for the scheduled time.
+     * Please notice that some tasks may not be executed depending on the network connection and sync settings.
+     *
+     * @param {string} [name]  If provided, the name of the handler.
+     * @param {string} [siteId] Site ID. If not defined, all sites.
+     * @return {Promise<any>} Promise resolved if handler has been executed successfully, rejected otherwise.
+     */
+    forceCronHandlerExecution(name?: string, siteId?: string): Promise<any> {
+        const handler = this.handlers[name];
+
+        // Mark the handler as running (it might be running already).
+        handler.running = true;
+
+        // Cancel pending timeout.
+        clearTimeout(handler.timeout);
+        delete handler.timeout;
+
+        // Now force the execution of the handler.
+        return this.checkAndExecuteHandler(name, true, siteId);
+    }
+
     /**
      * Get a handler's interval.
      *