- use css3 to make avatars always the right aspect ratio

- implement slightly overengineered tab/shift-tab autocomplete function

webclient/app.css

@@ -62,6 +62,11 @@ h1 {
     width: 100%;
 }
 
+.blink {
+    display: none ! important;
+    background-color: #faa;
+}
+
 /*** Participant list ***/
 
 #usersTableWrapper {
@@ -90,6 +95,7 @@ h1 {
 .userAvatar .userAvatarImage {
     position: absolute;
     top: 0px;
+    object-fit: cover;    
 }
 
 .userAvatar .userAvatarGradient {
@@ -177,6 +183,10 @@ h1 {
     line-height: 0;
 }
 
+.avatarImage {
+    object-fit: cover;
+}
+        
 .text {
     background-color: #eee;
     border: 1px solid #d8d8d8;

webclient/room/room-controller.js

@@ -16,6 +16,94 @@ limitations under the License.
 
 angular.module('RoomController', ['ngSanitize'])
 
+.directive('ngAutoComplete', ['$timeout', function ($timeout) {
+    return function (scope, element, attrs) {
+        element.bind("keydown keypress", function (event) {
+            console.log("event: " + event.which);
+            if (event.which === 9) {
+                if (!scope.autoCompleting) { // cache our starting text
+                    console.log("caching " + element[0].value);
+                    scope.autoCompleteOriginal = element[0].value;
+                    scope.autoCompleting = true;
+                }
+                
+                if (event.shiftKey) {
+                    scope.autoCompleteIndex--;
+                    if (scope.autoCompleteIndex < 0) {
+                        scope.autoCompleteIndex = 0;
+                    }
+                }
+                else {
+                    scope.autoCompleteIndex++;
+                }
+                
+                var searchIndex = 0;
+                var targetIndex = scope.autoCompleteIndex;
+                var text = scope.autoCompleteOriginal;
+                
+                console.log("targetIndex: " + targetIndex + ", text=" + text);
+                                    
+                // FIXME: use the correct regexp to recognise userIDs
+                var search = /@?([a-zA-Z0-9_\-:\.]+)$/.exec(text);
+                if (targetIndex === 0) {
+                    element[0].value = text;
+                }
+                else if (search && search[1]) {
+                    console.log("search found: " + search);
+                    var expansion;
+                    
+                    // FIXME: could do better than linear search here
+                    angular.forEach(scope.members, function(item, name) {
+                        if (item.displayname && searchIndex < targetIndex) {
+                            if (item.displayname.toLowerCase().indexOf(search[1].toLowerCase()) == 0) {
+                                expansion = item.displayname;
+                                searchIndex++;
+                            }
+                        }
+                    });
+                    if (searchIndex < targetIndex) { // then search raw mxids
+                        angular.forEach(scope.members, function(item, name) {
+                            if (searchIndex < targetIndex) {
+                                if (name.toLowerCase().indexOf(search[1].toLowerCase()) == 1) {
+                                    expansion = name;
+                                    searchIndex++;
+                                }
+                            }
+                        });
+                    }
+                    
+                    if (searchIndex === targetIndex) {
+                        // xchat-style tab complete
+                        if (search[0].length === text.length)
+                            expansion += " : ";
+                        else
+                            expansion += " ";
+                        element[0].value = text.replace(/@?([a-zA-Z0-9_\-:\.]+)$/, expansion);
+                        // cancel blink
+                        element[0].className = "";                        
+                    }
+                    else {
+                        console.log("wrapped!");
+                        element[0].className = "blink"; // XXX: slightly naughty to bypass angular
+                        $timeout(function() {
+                             element[0].className = "";
+                        }, 150);
+                        element[0].value = text;
+                        scope.autoCompleteIndex = 0;
+                    }
+                }
+                else {
+                    scope.autoCompleteIndex = 0;
+                }
+                event.preventDefault();
+            }
+            else if (event.which != 16 && scope.autoCompleting) {
+                scope.autoCompleting = false;
+                scope.autoCompleteIndex = 0;
+            }
+        });
+    };
+}])
 .controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
                                function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
    'use strict';
@@ -31,6 +119,9 @@ angular.module('RoomController', ['ngSanitize'])
         stream_failure: undefined // the response when the stream fails
     };
     $scope.members = {};
+    $scope.autoCompleting = false;
+    $scope.autoCompleteIndex = 0;    
+    $scope.autoCompleteOriginal = "";
 
     $scope.imageURLToSend = "";
     $scope.userIDToInvite = "";

webclient/room/room.html

@@ -16,7 +16,7 @@
                     <div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<wbr/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
                 </td>
                 <td class="userPresence" ng-class="member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')">
-                    {{ member.mtime_age | duration }} {{ member.mtime_age ? "ago" : "" }}
+                    {{ member.mtime_age | duration }}<br/>{{ member.mtime_age ? "ago" : "" }}
                 </td>
         </table>
     </div>
@@ -29,7 +29,7 @@
                     <div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>
                 </td>
                 <td class="avatar">
-                    <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
                          ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
                 </td>
                 <td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : ''">
@@ -40,7 +40,7 @@
                     </div>
                 </td>
                 <td class="rightBlock">
-                    <img ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
+                    <img class="avatarImage" ng-src="{{ members[msg.user_id].avatar_url || 'img/default-profile.jpg' }}" width="32" height="32"
                          ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
                 </td>
             </tr>
@@ -58,7 +58,7 @@
                         {{ state.user_id }} 
                     </td>
                     <td width="*" style="min-width: 100px">
-                        <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/>
+                        <input id="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true" ng-auto-complete/>
                     </td>
                     <td width="1">
                         <button ng-click="send()">Send</button>