mirrors/synapse
1
0
Fork 0
mirror of https://github.com/element-hq/synapse.git synced 2024-12-18 00:43:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

14
webclient/app.css
View file

@ -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 {

12
webclient/rooms/rooms-controller.js
View file

@ -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(

29
webclient/rooms/rooms.html
View file

@ -3,18 +3,35 @@
<div class="page">
<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>
<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>
</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>
</form>
</div>
<br/>
<div>