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.

2 files changed, 11 insertions, 0 deletions

diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js

index d9ada744eb..1f90472c67 100644
--- a/webclient/room/room-controller.js
+++ b/webclient/room/room-controller.js
@@ -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() {
         if ($scope.textInput === "") {
             return;
@@ -382,6 +389,9 @@ angular.module('RoomController', ['ngSanitize', 'mFileInput'])
                 for (var i = 0; i < response.data.chunk.length; i++) {
                     var chunk = response.data.chunk[i];
                     updateMemberList(chunk);
+
+                    // Add his power level
+                    updateUserPowerLevel(chunk.user_id);
                 }
 
                 // Arm list timing update timer
diff --git a/webclient/room/room.html b/webclient/room/room.html

index e25c837aa0..e672b1d7e2 100644
--- a/webclient/room/room.html
+++ b/webclient/room/room.html
@@ -24,6 +24,7 @@
                          title="{{ member.id }}"
                          width="80" height="80"/>
                     <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>
                 </td>
                 <td class="userPresence" ng-class="(member.presence === 'online' ? 'online' : (member.presence === 'unavailable' ? 'unavailable' : '')) + ' ' + (member.membership == 'invite' ? 'invited' : '')">