diff --git a/webclient/app.css b/webclient/app.css index 65049c95c..122f25c9f 100644 --- a/webclient/app.css +++ b/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 { diff --git a/webclient/rooms/rooms-controller.js b/webclient/rooms/rooms-controller.js index 293ea8bc8..b7f19bb2b 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 d303e143b..66b89caf0 100644 --- a/webclient/rooms/rooms.html +++ b/webclient/rooms/rooms.html @@ -3,18 +3,35 @@
+
+
+ + + + + +
+
+ +
+
+ + or use an existing image URL: +
+ + +
+
+
+
+
-
-
- - -
-
+