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