MOBILE-1506 messages: Show user profile image instead of profile icon

Author: dpalou

www/addons/messages/controllers/discussion.js

@@ -29,7 +29,6 @@ angular.module('mm.addons.messages')
     $log = $log.getInstance('mmaMessagesDiscussionCtrl');
 
     var userId = $stateParams.userId,
-        userFullname = $stateParams.userFullname,
         messagesBeingSent = 0,
         polling,
         fetching,
@@ -41,26 +40,27 @@ angular.module('mm.addons.messages')
     $scope.messages = [];
     $scope.userId = userId;
     $scope.currentUserId = $mmSite.getUserId();
-    $scope.profileLink = true;
 
-    if (userFullname) {
-        $scope.title = userFullname;
-    } else if (userId) {
-        // We don't have the fullname, try to get it.
-        $mmUser.getProfile(userId).then(function(user) {
+    // Disable the profile button if we're already coming from a profile.
+    if (backView && backView.stateName === mmUserProfileState) {
+        $scope.profileLink = false;
+    }
+
+    if (userId) {
+        // Get the user profile to retrieve the user fullname and image.
+        $mmUser.getProfile(userId, undefined, true).then(function(user) {
             if (!$scope.title) {
                 $scope.title = user.fullname;
             }
+            if (typeof $scope.profileLink == 'undefined') {
+                $scope.profileLink = user.profileimageurl;
+            }
+        }).catch(function() {
+            // Couldn't retrieve the image, use a default icon.
+            $scope.profileLink = true;
         });
     }
 
-    // Disable the profile button if we're coming from a profile. It is safer to prevent forbid the access
-    // to the full profile (we do not know the course ID they came from) as some users cannot view the full
-    // profile of other users.
-    if (backView && backView.stateName === mmUserProfileState) {
-        $scope.profileLink = false;
-    }
-
     $scope.isAppOffline = function() {
         return !$mmApp.isOnline();
     };
@@ -117,7 +117,7 @@ angular.module('mm.addons.messages')
     // Fetch the messages for the first time.
     $mmaMessages.getDiscussion(userId).then(function(messages) {
         $scope.messages = $mmaMessages.sortMessages(messages);
-        if (!userFullname && messages && messages.length > 0) {
+        if (!$scope.title && messages && messages.length > 0) {
             // When we did not receive the fullname via argument. Also it is possible that
             // we cannot resolve the name when no messages were yet exchanged.
             if (messages[0].useridto != $scope.currentUserId) {

www/addons/messages/controllers/index.js

@@ -21,12 +21,25 @@ angular.module('mm.addons.messages')
  * @ngdoc controller
  * @name mmaMessagesIndexCtrl
  */
-.controller('mmaMessagesIndexCtrl', function($scope, $mmEvents, $ionicPlatform, $ionicTabsDelegate,
+.controller('mmaMessagesIndexCtrl', function($scope, $mmEvents, $ionicPlatform, $ionicTabsDelegate, $mmUser,
             mmaMessagesDiscussionLoadedEvent, mmaMessagesDiscussionLeftEvent) {
     // Listen for discussion loaded event to show user profile link in tablet view.
     var obsLoaded = $mmEvents.on(mmaMessagesDiscussionLoadedEvent, function(userId) {
-        $scope.profileLink = $ionicPlatform.isTablet() && $ionicTabsDelegate.selectedIndex() == 0;
-        $scope.userId = userId;
+        if ($ionicPlatform.isTablet() && $ionicTabsDelegate.selectedIndex() === 0) {
+            // A discussion was loaded in tablet, get the user image and show the button to the profile.
+            $scope.userId = userId;
+            $mmUser.getProfile(userId, undefined, true).catch(function() {
+                // Couldn't retrieve the image, use a default icon.
+                return {
+                    profileimageurl: true
+                };
+            }).then(function(user) {
+                // Verify that no other user was loaded while the async call was in progress.
+                if ($scope.userId == userId) {
+                    $scope.profileLink = user.profileimageurl;
+                }
+            });
+        }
     });
 
     // Listen for discussion loaded event to show user profile link in tablet view.

www/addons/messages/main.js

@@ -41,8 +41,7 @@ angular.module('mm.addons.messages', ['mm.core'])
     .state('site.messages-discussion', {
         url: '/messages-discussion',
         params: {
-            userId: null,
-            userFullname: null
+            userId: null
         },
         views: {
             'site': {

www/addons/messages/services/handlers.js

@@ -226,8 +226,7 @@ angular.module('mm.addons.messages')
                     $event.preventDefault();
                     $event.stopPropagation();
                     $state.go('site.messages-discussion', {
-                        userId: user.id,
-                        userFullname: user.fullname
+                        userId: user.id
                     });
                 };
             };

www/addons/messages/templates/discussion.html

@@ -2,7 +2,10 @@
     <ion-nav-title>{{ title }}</ion-nav-title>
 
     <ion-nav-buttons side="secondary">
-        <button ng-if="profileLink" class="button button-icon icon ion-person" mm-user-link userid="{{userId}}" aria-label="{{ 'mm.core.viewprofile' | translate }}"></button>
+        <a ng-if="profileLink" mm-user-link userid="{{userId}}" aria-label="{{ 'mm.user.viewprofile' | translate }}">
+            <img ng-if="profileLink && profileLink !== true" class="button mm-bar-button-image" ng-src="{{profileLink}}">
+            <span ng-if="profileLink === true" class="button button-icon icon ion-person"></span>
+        </a>
     </ion-nav-buttons>
 
     <ion-content class="padding" delegate-handle="mmaMessagesScroll" mm-state-class>

www/addons/messages/templates/discussions.html

@@ -3,7 +3,7 @@
     <mm-loading hide-until="loaded">
         <ul class="list">
             <li>
-                <a class="item item-avatar" ng-repeat="disc in discussions | orderBy:'message.timecreated':true track by $index" mm-split-view-link="site.messages-discussion({userId: disc.message.user, userFullname: disc.fullname})" title="{{disc.fullname}}">
+                <a class="item item-avatar" ng-repeat="disc in discussions | orderBy:'message.timecreated':true track by $index" mm-split-view-link="site.messages-discussion({userId: disc.message.user})" title="{{disc.fullname}}">
 
                     <img ng-src="{{disc.profileimageurl}}" alt="" role="presentation" mm-external-content ng-if="disc.profileimageurl">
                     <img src="img/user-avatar.png" alt="" role="presentation" ng-if="!disc.profileimageurl">

www/addons/messages/templates/index.html

@@ -1,6 +1,9 @@
 <ion-view view-title="{{ 'mma.messages.messages' | translate }}">
     <ion-nav-buttons side="secondary">
-        <button ng-if="profileLink" class="button button-icon icon ion-person" mm-user-link userid="{{userId}}"></button>
+        <a ng-if="profileLink" mm-user-link userid="{{userId}}" aria-label="{{ 'mm.user.viewprofile' | translate }}">
+            <img ng-if="profileLink && profileLink !== true" class="button mm-bar-button-image" ng-src="{{profileLink}}">
+            <span ng-if="profileLink === true" class="button button-icon icon ion-person"></span>
+        </a>
     </ion-nav-buttons>
 
     <mm-split-view component="mmaMessagesIndex">

www/core/components/user/lang/en.json

@@ -16,5 +16,6 @@
     "roles": "Roles",
     "student": "Student",
     "teacher": "Non-editing teacher",
+    "viewprofile": "View profile",
     "webpage": "Web page"
 }

www/core/scss/styles.scss

@@ -308,6 +308,14 @@ mm-navigation-bar {
   }
 }
 
+.mm-bar-button-image, .bar .button.mm-bar-button-image {
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  max-width: $button-bar-button-height - 1;
+  max-height: $button-bar-button-height - 1;
+  border-radius: 50%;
+}
 
 /**
  * This CSS uses adjacent selectors instead of general sibling (~) selectors