Represent user power level in a room by a red bar at the bottom of his avatar image. The width of this bar depends on the power level.

This commit is contained in:
Emmanuel ROHEE 2014-09-02 11:54:11 +02:00
parent 7e22afbc7c
commit 828101dd51
5 changed files with 60 additions and 0 deletions

View File

@ -268,6 +268,13 @@ a:active { color: #000; }
word-break: break-all; word-break: break-all;
} }
.userAvatar .userPowerLevel {
position: absolute;
bottom: 20px;
height: 1px;
background-color: red;
}
.userPresence { .userPresence {
text-align: center; text-align: center;
font-size: 12px; font-size: 12px;

View File

@ -95,6 +95,15 @@ angular.module('eventHandlerService', [])
$rootScope.presence[event.content.user_id] = event; $rootScope.presence[event.content.user_id] = event;
$rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent); $rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent);
}; };
var handlePowerLevels = function(event, isLiveEvent) {
initRoom(event.room_id);
$rootScope.events.rooms[event.room_id][event.type] = event;
//TODO
//$rootScope.$broadcast(PRESENCE_EVENT, event, isLiveEvent);
};
var handleCallEvent = function(event, isLiveEvent) { var handleCallEvent = function(event, isLiveEvent) {
$rootScope.$broadcast(CALL_EVENT, event, isLiveEvent); $rootScope.$broadcast(CALL_EVENT, event, isLiveEvent);
@ -118,8 +127,17 @@ angular.module('eventHandlerService', [])
case "m.presence": case "m.presence":
handlePresence(event, isLiveEvent); handlePresence(event, isLiveEvent);
break; break;
case 'm.room.ops_levels':
case 'm.room.send_event_level':
case 'm.room.add_state_level':
case 'm.room.join_rules':
case 'm.room.power_levels':
handlePowerLevels(event, isLiveEvent);
break;
default: default:
console.log("Unable to handle event type " + event.type); console.log("Unable to handle event type " + event.type);
console.log(JSON.stringify(event, undefined, 4));
break; break;
} }
if (event.type.indexOf('m.call.') == 0) { if (event.type.indexOf('m.call.') == 0) {

View File

@ -484,6 +484,30 @@ angular.module('matrixService', [])
getRoomIdToAliasMapping: function(roomId) { getRoomIdToAliasMapping: function(roomId) {
return localStorage.getItem(MAPPING_PREFIX+roomId); return localStorage.getItem(MAPPING_PREFIX+roomId);
},
/****** Power levels management ******/
/**
* Return the power level of an user in a particular room
* @param {String} room_id the room id
* @param {String} user_id the user id
* @returns {Number} a value between 0 and 10
*/
getUserPowerLevel: function(room_id, user_id) {
var powerLevel = 0;
var room = $rootScope.events.rooms[room_id];
if (room && room["m.room.power_levels"]) {
if (user_id in room["m.room.power_levels"].content) {
powerLevel = room["m.room.power_levels"].content[user_id];
}
else {
// Use the room default user power
powerLevel = room["m.room.power_levels"].content["default"];
}
}
return powerLevel;
} }
}; };

View File

@ -233,6 +233,13 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
} }
}; };
var updateUserPowerLevel = function(user_id) {
var member = $scope.members[user_id];
if (member) {
member.powerLevel = matrixService.getUserPowerLevel($scope.room_id, user_id);
}
}
$scope.send = function() { $scope.send = function() {
if ($scope.textInput === "") { if ($scope.textInput === "") {
return; return;
@ -382,6 +389,9 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
for (var i = 0; i < response.data.chunk.length; i++) { for (var i = 0; i < response.data.chunk.length; i++) {
var chunk = response.data.chunk[i]; var chunk = response.data.chunk[i];
updateMemberList(chunk); updateMemberList(chunk);
// Add his power level
updateUserPowerLevel(chunk.user_id);
} }
// Arm list timing update timer // Arm list timing update timer

View File

@ -24,6 +24,7 @@
title="{{ member.id }}" title="{{ member.id }}"
width="80" height="80"/> width="80" height="80"/>
<img class="userAvatarGradient" src="img/gradient.png" title="{{ member.id }}" width="80" height="24"/> <img class="userAvatarGradient" src="img/gradient.png" title="{{ member.id }}" width="80" height="24"/>
<div class="userPowerLevel" ng-style="{'width': (10 * member.powerLevel) +'%'}"></div>
<div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<br/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div> <div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<br/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
</td> </td>
<td class="userPresence" ng-class="(member.presence === 'online' ? 'online' : (member.presence === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.membership == 'invite' ? 'invited' : '')"> <td class="userPresence" ng-class="(member.presence === 'online' ? 'online' : (member.presence === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.membership == 'invite' ? 'invited' : '')">