Show avatar in profile section and added a button to select a file (not yet wired to upload service)

webclient/app.css

@@ -219,6 +219,20 @@ h1 {
     background-color: #fff ! important;
 }
 
+/*** Profile ***/
+
+.profile-avatar {
+    width: 160px;
+    height: 160px;
+    display:table-cell;
+    vertical-align: middle;
+}
+
+.profile-avatar img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
 /******************************/
 
 .header {

webclient/rooms/rooms-controller.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 'use strict';
 
-angular.module('RoomsController', ['matrixService'])
+angular.module('RoomsController', ['matrixService', 'mFileInput'])
 .controller('RoomsController', ['$scope', '$location', 'matrixService',
                                function($scope, $location, matrixService) {
                                    
@@ -40,7 +40,8 @@ angular.module('RoomsController', ['matrixService'])
 
     $scope.newProfileInfo = {
         name: matrixService.config().displayName,
-        avatar: matrixService.config().avatarUrl
+        avatar: matrixService.config().avatarUrl,
+        avatarFile: undefined
     };
 
     $scope.linkedEmails = {
@@ -163,6 +164,13 @@ angular.module('RoomsController', ['matrixService'])
         );
     };
 
+
+    $scope.$watch("newProfileInfo.avatarFile", function(newValue, oldValue) {
+        if ($scope.newProfileInfo.avatarFile) {
+            //@TODO: Upload this HTML5 image file to somewhere
+        }
+    });
+
     $scope.setAvatar = function(newUrl) {
         console.log("Updating avatar to "+newUrl);
         matrixService.setProfilePictureUrl(newUrl).then(

webclient/rooms/rooms.html

@@ -5,16 +5,33 @@
             
     <div>
         <form>
-            <input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" />
-            <button ng-disabled="!newProfileInfo.name" ng-click="setDisplayName(newProfileInfo.name)">Update Name</button>    
+            <table>
+                <tr>
+                    <td>
+                        <div class="profile-avatar">
+                            <img  src="{{ newProfileInfo.avatar || 'img/default-profile.jpg'}}" m-file-input="newProfileInfo.avatarFile"/>
+                        </div>
+                    </td>
+                    <td>
+                        <button  m-file-input="newProfileInfo.avatarFile">Upload new Avatar</button> 
+                        or use an existing image URL:
+                        <div>
+                            <input size="40" ng-model="newProfileInfo.avatar" ng-enter="setAvatar(newProfileInfo.avatar)" />
+                            <button ng-disabled="!newProfileInfo.avatar" ng-click="setAvatar(newProfileInfo.avatar)">Update Avatar</button>   
+                        </div>
+                    </td>
+                </tr>
+            </table>
         </form>
     </div>
+
     <div>
         <form>
-            <input size="40" ng-model="newProfileInfo.avatar" ng-enter="setAvatar(newProfileInfo.avatar)" />
-            <button ng-disabled="!newProfileInfo.avatar" ng-click="setAvatar(newProfileInfo.avatar)">Update Avatar</button>    
+            <input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" />
+            <button ng-disabled="!newProfileInfo.name" ng-click="setDisplayName(newProfileInfo.name)">Update Name</button>    
         </form>
     </div>
+
     <br/>
 
     <div>