From 28a49a9eaf79f1b05fc2f793ad264d45c017de4c Mon Sep 17 00:00:00 2001
From: Emmanuel ROHEE <erohee@amdocs.com>
Date: Thu, 14 Aug 2014 11:39:03 +0200
Subject: Show avatar in profile section and added a button to select a file
 (not yet wired to upload service)

---
 webclient/rooms/rooms-controller.js | 12 ++++++++++--
 webclient/rooms/rooms.html          | 25 +++++++++++++++++++++----
 2 files changed, 31 insertions(+), 6 deletions(-)

(limited to 'webclient/rooms')

diff --git a/webclient/rooms/rooms-controller.js b/webclient/rooms/rooms-controller.js
index 293ea8bc8b..b7f19bb2b5 100644
--- a/webclient/rooms/rooms-controller.js
+++ b/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(
diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html
index d303e143b9..66b89caf00 100644
--- a/webclient/rooms/rooms.html
+++ b/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>
-- 
cgit 1.4.1