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

This commit is contained in:
Emmanuel ROHEE 2014-08-14 11:39:03 +02:00
parent d05ff3e098
commit 28a49a9eaf
3 changed files with 47 additions and 8 deletions

View file

@ -219,6 +219,20 @@ h1 {
background-color: #fff ! important; 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 { .header {

View file

@ -16,7 +16,7 @@ limitations under the License.
'use strict'; 'use strict';
angular.module('RoomsController', ['matrixService']) angular.module('RoomsController', ['matrixService', 'mFileInput'])
.controller('RoomsController', ['$scope', '$location', 'matrixService', .controller('RoomsController', ['$scope', '$location', 'matrixService',
function($scope, $location, matrixService) { function($scope, $location, matrixService) {
@ -40,7 +40,8 @@ angular.module('RoomsController', ['matrixService'])
$scope.newProfileInfo = { $scope.newProfileInfo = {
name: matrixService.config().displayName, name: matrixService.config().displayName,
avatar: matrixService.config().avatarUrl avatar: matrixService.config().avatarUrl,
avatarFile: undefined
}; };
$scope.linkedEmails = { $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) { $scope.setAvatar = function(newUrl) {
console.log("Updating avatar to "+newUrl); console.log("Updating avatar to "+newUrl);
matrixService.setProfilePictureUrl(newUrl).then( matrixService.setProfilePictureUrl(newUrl).then(

View file

@ -3,18 +3,35 @@
<div class="page"> <div class="page">
<div class="wrapper"> <div class="wrapper">
<div>
<form>
<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> <div>
<form> <form>
<input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" /> <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> <button ng-disabled="!newProfileInfo.name" ng-click="setDisplayName(newProfileInfo.name)">Update Name</button>
</form> </form>
</div> </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>
</form>
</div>
<br/> <br/>
<div> <div>