wrap fully qualified user IDs more intelligently

4 files changed, 16 insertions, 14 deletions

diff --git a/syweb/webclient/app.css b/syweb/webclient/app.css
index 134b1d2912..854ea75813 100755
--- a/syweb/webclient/app.css
+++ b/syweb/webclient/app.css
@@ -537,7 +537,7 @@ textarea, input {
     margin-bottom: 6px;
     text-align: center;
     font-size: 12px;
-    word-break: break-all;
+    word-wrap: break-word;
 }
 
 .userPowerLevel {
diff --git a/syweb/webclient/components/matrix/event-handler-service.js b/syweb/webclient/components/matrix/event-handler-service.js
index a9c6eb34c7..34c6f34981 100644
--- a/syweb/webclient/components/matrix/event-handler-service.js
+++ b/syweb/webclient/components/matrix/event-handler-service.js
@@ -299,9 +299,10 @@ function(matrixService, $rootScope, $q, $timeout, $filter, mPresence, notificati
      * Return the display name of an user acccording to data already downloaded
      * @param {String} room_id the room id
      * @param {String} user_id the id of the user
+     * @param {boolean} wrap whether to insert whitespace into the userid (if displayname not available) to help it wrap
      * @returns {String} the user displayname or user_id if not available
      */
-    var getUserDisplayName = function(room_id, user_id) {
+    var getUserDisplayName = function(room_id, user_id, wrap) {
         var displayName;
 
         // Get the user display name from the member list of the room
@@ -337,6 +338,12 @@ function(matrixService, $rootScope, $q, $timeout, $filter, mPresence, notificati
         if (undefined === displayName) {
             // By default, use the user ID
             displayName = user_id;
+            if (wrap) {
+                displayName = user_id.substr(0, user_id.indexOf(':')) + " " + user_id.substr(user_id.indexOf(':'));
+            }
+            else {
+                displayName = user_id;
+            }
         }
         return displayName;
     };
@@ -589,10 +596,11 @@ function(matrixService, $rootScope, $q, $timeout, $filter, mPresence, notificati
          * Return the display name of an user acccording to data already downloaded
          * @param {String} room_id the room id
          * @param {String} user_id the id of the user
+         * @param {boolean} wrap whether to insert whitespace into the userid (if displayname not available) to help it wrap
          * @returns {String} the user displayname or user_id if not available
          */
-        getUserDisplayName: function(room_id, user_id) {
-            return getUserDisplayName(room_id, user_id);
+        getUserDisplayName: function(room_id, user_id, wrap) {
+            return getUserDisplayName(room_id, user_id, wrap);
         }
     };
 }]);
diff --git a/syweb/webclient/components/matrix/matrix-filter.js b/syweb/webclient/components/matrix/matrix-filter.js
index aeebedc784..69de97b055 100644
--- a/syweb/webclient/components/matrix/matrix-filter.js
+++ b/syweb/webclient/components/matrix/matrix-filter.js
@@ -114,7 +114,7 @@ function($rootScope, matrixService, eventHandlerService, modelService) {
 
 // Return the user display name
 .filter('mUserDisplayName', ['eventHandlerService', function(eventHandlerService) {
-    return function(user_id, room_id) {
-        return eventHandlerService.getUserDisplayName(room_id, user_id);
+    return function(user_id, room_id, wrap) {
+        return eventHandlerService.getUserDisplayName(room_id, user_id, wrap);
     };
 }]);
diff --git a/syweb/webclient/room/room.html b/syweb/webclient/room/room.html
index d1d1589e25..d4977e56a6 100644
--- a/syweb/webclient/room/room.html
+++ b/syweb/webclient/room/room.html
@@ -134,13 +134,7 @@
             </div>
             <div class="userName">
                 <pie-chart ng-show="member.powerLevelNorm" data="[ (member.powerLevelNorm + 0), (100 - member.powerLevelNorm) ]"></pie-chart>
-                <span ng-show="member.displayname">
-                    {{ member.id | mUserDisplayName: room_id }}
-                </span>
-                <span ng-hide="member.displayname">
-                    {{ member.id.substr(0, member.id.indexOf(':')) }}<br/>
-                    {{ member.id.substr(member.id.indexOf(':')) }}
-                </span>
+                {{ member.id | mUserDisplayName:room_id:true }}
                 <span ng-show="member.last_active_ago" style="color: #aaa">({{ member.last_active_ago + (now - member.last_updated) | duration }})</span>
             </div>
         </div>
@@ -159,7 +153,7 @@
                          ng-class="msg.echo_msg_state">
                         {{ (msg.origin_server_ts) | date:'MMM d HH:mm' }}
                     </div>
-                    <div class="sender" ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"> {{ msg.__room_member.cnt.displayname || msg.user_id | mUserDisplayName: room_id }}</div>
+                    <div class="sender" ng-hide="room.events[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"> {{ msg.__room_member.cnt.displayname || msg.user_id | mUserDisplayName:room_id:true }}</div>
                 </td>
                 <td class="avatar">
                     <!-- msg.__room_member.avatar_url is just backwards compat, and can be removed in the future. -->