forked from MirrorHub/synapse
- use css3 to make avatars always the right aspect ratio
- implement slightly overengineered tab/shift-tab autocomplete function
This commit is contained in:
parent
831c218a93
commit
00c0737b0e
|
@ -62,6 +62,11 @@ h1 {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blink {
|
||||||
|
display: none ! important;
|
||||||
|
background-color: #faa;
|
||||||
|
}
|
||||||
|
|
||||||
/*** Participant list ***/
|
/*** Participant list ***/
|
||||||
|
|
||||||
#usersTableWrapper {
|
#usersTableWrapper {
|
||||||
|
@ -90,6 +95,7 @@ h1 {
|
||||||
.userAvatar .userAvatarImage {
|
.userAvatar .userAvatarImage {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
.userAvatar .userAvatarGradient {
|
.userAvatar .userAvatarGradient {
|
||||||
|
@ -176,6 +182,10 @@ h1 {
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.avatarImage {
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
background-color: #eee;
|
background-color: #eee;
|
||||||
|
|
|
@ -16,6 +16,94 @@ limitations under the License.
|
||||||
|
|
||||||
angular.module('RoomController', ['ngSanitize'])
|
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',
|
.controller('RoomController', ['$scope', '$http', '$timeout', '$routeParams', '$location', 'matrixService', 'eventStreamService', 'eventHandlerService',
|
||||||
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
function($scope, $http, $timeout, $routeParams, $location, matrixService, eventStreamService, eventHandlerService) {
|
||||||
'use strict';
|
'use strict';
|
||||||
|
@ -31,6 +119,9 @@ angular.module('RoomController', ['ngSanitize'])
|
||||||
stream_failure: undefined // the response when the stream fails
|
stream_failure: undefined // the response when the stream fails
|
||||||
};
|
};
|
||||||
$scope.members = {};
|
$scope.members = {};
|
||||||
|
$scope.autoCompleting = false;
|
||||||
|
$scope.autoCompleteIndex = 0;
|
||||||
|
$scope.autoCompleteOriginal = "";
|
||||||
|
|
||||||
$scope.imageURLToSend = "";
|
$scope.imageURLToSend = "";
|
||||||
$scope.userIDToInvite = "";
|
$scope.userIDToInvite = "";
|
||||||
|
|
|
@ -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>
|
<div class="userName">{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}<wbr/>{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="userPresence" ng-class="member.presenceState === 'online' ? 'online' : (member.presenceState === 'unavailable' ? 'unavailable' : '')">
|
<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>
|
</td>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -29,7 +29,7 @@
|
||||||
<div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>
|
<div class="timestamp">{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="avatar">
|
<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"/>
|
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id === state.user_id"/>
|
||||||
</td>
|
</td>
|
||||||
<td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : ''">
|
<td ng-class="!msg.content.membership_target ? (msg.content.msgtype === 'm.emote' ? 'emote text' : 'text') : ''">
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td class="rightBlock">
|
<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"/>
|
ng-hide="events.rooms[room_id].messages[$index - 1].user_id === msg.user_id || msg.user_id !== state.user_id"/>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
@ -58,7 +58,7 @@
|
||||||
{{ state.user_id }}
|
{{ state.user_id }}
|
||||||
</td>
|
</td>
|
||||||
<td width="*" style="min-width: 100px">
|
<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>
|
||||||
<td width="1">
|
<td width="1">
|
||||||
<button ng-click="send()">Send</button>
|
<button ng-click="send()">Send</button>
|
||||||
|
|
Loading…
Reference in a new issue