diff options
| -rw-r--r-- | webclient/app.css | 10 | ||||
| -rw-r--r-- | webclient/room/room-controller.js | 91 | ||||
| -rw-r--r-- | webclient/room/room.html | 8 |
3 files changed, 105 insertions, 4 deletions
diff --git a/webclient/app.css b/webclient/app.css index b49ebef1ba..324928c892 100644 --- a/webclient/app.css +++ b/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 { @@ -176,6 +182,10 @@ h1 { vertical-align: top; line-height: 0; } + +.avatarImage { + object-fit: cover; +} .text { background-color: #eee; diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 86f1379f75..a2032cf57c 100644 --- a/webclient/room/room-controller.js +++ b/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 = ""; diff --git a/webclient/room/room.html b/webclient/room/room.html index 2726188b4b..f965d13c55 100644 --- a/webclient/room/room.html +++ b/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> |