From 9f7c5f161cc7eaa1e23994955fc2aa29dd68dad7 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 15 Aug 2014 23:24:42 +0100 Subject: switch some elements from being styled by class to styled by id --- webclient/app.css | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) (limited to 'webclient/app.css') diff --git a/webclient/app.css b/webclient/app.css index 122f25c9ff..b49ebef1ba 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -10,7 +10,7 @@ h1 { /*** Overall page layout ***/ -.page { +#page { position: absolute; top: 80px; bottom: 100px; @@ -20,13 +20,13 @@ h1 { margin: 20px; } -.wrapper { +#wrapper { margin: auto; max-width: 1280px; height: 100%; } -.roomName { +#roomName { max-width: 1280px; width: 100%; text-align: right; @@ -36,7 +36,7 @@ h1 { margin-bottom: 10px; } -.controlPanel { +#controlPanel { position: absolute; bottom: 0px; width: 100%; @@ -44,39 +44,39 @@ h1 { border-top: #aaa 1px solid; } -.controls { +#controls { max-width: 1280px; padding: 12px; margin: auto; } -.inputBarTable { +#inputBarTable { width: 100%; } -.inputBarTable tr td { +#inputBarTable tr td { padding: 1px 4px; } -.mainInput { +#mainInput { width: 100%; } /*** Participant list ***/ -.usersTableWrapper { +#usersTableWrapper { float: right; width: 120px; height: 100%; overflow-y: auto; } -.usersTable { +#usersTable { width: 100%; border-collapse: collapse; } -.usersTable td { +#usersTable td { padding: 0px; } @@ -124,21 +124,21 @@ h1 { /*** Message table ***/ -.messageTableWrapper { +#messageTableWrapper { height: 100%; margin-right: 140px; overflow-y: auto; width: auto; } -.messageTable { +#messageTable { margin: auto; max-width: 1280px; width: 100%; border-collapse: collapse; } -.messageTable td { +#messageTable td { padding: 0px; } @@ -235,18 +235,18 @@ h1 { /******************************/ -.header { +#header { padding-left: 20px; padding-right: 20px; max-width: 1280px; margin: auto; } -.header-buttons { +#header-buttons { float: right; } -.config { +#config { position: absolute; z-index: 100; top: 100px; -- cgit 1.5.1 From 00c0737b0ecb32506ccdae2eae263c0116ad599e Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Aug 2014 02:56:34 +0100 Subject: - use css3 to make avatars always the right aspect ratio - implement slightly overengineered tab/shift-tab autocomplete function --- webclient/app.css | 10 +++++ webclient/room/room-controller.js | 91 +++++++++++++++++++++++++++++++++++++++ webclient/room/room.html | 8 ++-- 3 files changed, 105 insertions(+), 4 deletions(-) (limited to 'webclient/app.css') 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 @@
{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}
- {{ member.mtime_age | duration }} {{ member.mtime_age ? "ago" : "" }} + {{ member.mtime_age | duration }}
{{ member.mtime_age ? "ago" : "" }} @@ -29,7 +29,7 @@
{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}
- @@ -40,7 +40,7 @@ - @@ -58,7 +58,7 @@ {{ state.user_id }} - + -- cgit 1.5.1 From 1c202f9f7af3a74e56d7d3b6df05ea6f745a9759 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Aug 2014 03:00:08 +0100 Subject: oops, debugging crept in --- webclient/app.css | 1 - 1 file changed, 1 deletion(-) (limited to 'webclient/app.css') diff --git a/webclient/app.css b/webclient/app.css index 324928c892..3d8d7dd72b 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -63,7 +63,6 @@ h1 { } .blink { - display: none ! important; background-color: #faa; } -- cgit 1.5.1 From 60245c4f90f60dc7af79165cf074a4df57a02558 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Aug 2014 03:48:28 +0100 Subject: implement html5 notifications. (have to be explicitly requested under Config) --- webclient/app-controller.js | 15 +++++++++++++++ webclient/app.css | 4 ++-- webclient/index.html | 2 ++ webclient/room/room-controller.js | 19 ++++++++++++++++++- 4 files changed, 37 insertions(+), 3 deletions(-) (limited to 'webclient/app.css') diff --git a/webclient/app-controller.js b/webclient/app-controller.js index 7fa87e30c1..ff4cb6e69e 100644 --- a/webclient/app-controller.js +++ b/webclient/app-controller.js @@ -45,6 +45,12 @@ angular.module('MatrixWebClientController', ['matrixService']) $scope.config = matrixService.config(); } }; + + $scope.closeConfig = function() { + if ($scope.config) { + $scope.config = undefined; + } + }; if (matrixService.config()) { eventStreamService.resume(); @@ -69,6 +75,15 @@ angular.module('MatrixWebClientController', ['matrixService']) console.log("Invalid access token -> log user out"); $scope.logout(); }); + + $scope.requestNotifications = function() { + if (window.Notification) { + console.log("Notification.permission: " + window.Notification.permission); + window.Notification.requestPermission(function(){}); + } + }; + + }]); diff --git a/webclient/app.css b/webclient/app.css index 3d8d7dd72b..4e4cfffc48 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -260,8 +260,8 @@ h1 { z-index: 100; top: 100px; left: 50%; - width: 400px; - margin-left: -200px; + width: 500px; + margin-left: -250px; text-align: center; padding: 20px; background-color: #aaa; diff --git a/webclient/index.html b/webclient/index.html index ee77dd2faa..455eff4a13 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -39,6 +39,8 @@
Home server: {{ config.homeserver }}
User ID: {{ config.user_id }}
Access token: {{ config.access_token }}
+
+
diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 304b06c1f1..30f66de458 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -137,6 +137,23 @@ angular.module('RoomController', ['ngSanitize']) $scope.$on(eventHandlerService.MSG_EVENT, function(ngEvent, event, isLive) { if (isLive && event.room_id === $scope.room_id) { scrollToBottom(); + + if (window.Notification) { + // FIXME: we should also notify based on a timer or other heuristics + // rather than the window being minimised + if (document.hidden) { + var notification = new window.Notification( + ($scope.members[event.user_id].displayname || event.user_id) + + " (" + $scope.room_alias + ")", + { + "body": event.content.body, + "icon": $scope.members[event.user_id].avatar_url, + }); + $timeout(function() { + notification.close(); + }, 5 * 1000); + } + } } }); @@ -154,7 +171,7 @@ angular.module('RoomController', ['ngSanitize']) paginate(MESSAGES_PER_PAGINATION); } }; - + var paginate = function(numItems) { // console.log("paginate " + numItems); if ($scope.state.paginating) { -- cgit 1.5.1 From 62b67879cd5c53147ea543eeb56ec9acc3ea5edc Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sun, 17 Aug 2014 23:49:34 +0100 Subject: make text font sizes consistent add a gap between bubble-blocks from different users make sent-text lighter than received-text wrap the memberslist text more sensibly fix height of bubbles to match that of avatars (32px) --- webclient/app.css | 32 ++++++++++++++++++++++---------- webclient/room/room.html | 7 ++++--- 2 files changed, 26 insertions(+), 13 deletions(-) (limited to 'webclient/app.css') diff --git a/webclient/app.css b/webclient/app.css index 4e4cfffc48..750483b273 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -108,7 +108,7 @@ h1 { margin: 2px; bottom: 0px; font-size: 8pt; - word-wrap: break-word; + word-break: break-all; } .userPresence { @@ -148,7 +148,7 @@ h1 { } .leftBlock { - width: 1px; + width: 10em; vertical-align: top; background-color: #fff; color: #888; @@ -189,10 +189,11 @@ h1 { .text { background-color: #eee; border: 1px solid #d8d8d8; - height: 32px; + height: 31px; display: inline-table; max-width: 90%; - word-wrap: break-word; + font-size: 16px; + /* word-wrap: break-word; */ word-break: break-all; } @@ -201,6 +202,11 @@ h1 { border: 0px ! important; } +.membership { + background-color: #fff ! important; + border: 0px ! important; +} + .image { display: block; max-width:320px; @@ -210,22 +216,28 @@ h1 { } .bubble { - padding: 6px; + padding-top: 7px; + padding-bottom: 5px; padding-left: 1em; padding-right: 1em; + vertical-align: middle; +} + +.differentUser td { + padding-top: 5px ! important; + margin-top: 5px ! important; } .mine { text-align: right; } -.mine .text .bubble { - text-align: left ! important; - background-color: #d8d8e8 ! important; +.mine .text { + background-color: #f8f8ff ! important; } -.mine .emote .bubble { - background-color: #fff ! important; +.mine .text .bubble { + text-align: left ! important; } /*** Profile ***/ diff --git a/webclient/room/room.html b/webclient/room/room.html index f965d13c55..7ec2c7cdc7 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -13,7 +13,7 @@ -
{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}
+
{{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}
{{ member.displayname ? "" : member.id.substr(member.id.indexOf(':')) }}
{{ member.mtime_age | duration }}
{{ member.mtime_age ? "ago" : "" }} @@ -23,7 +23,8 @@
- + -
{{ members[msg.user_id].displayname || msg.user_id }}
{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}
@@ -32,7 +33,7 @@ 		+
-- cgit 1.5.1 From 39ff6c840f79488b1461688899cff105fce62043 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Mon, 18 Aug 2014 01:30:58 +0100 Subject: make my emotes white again --- webclient/app.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'webclient/app.css') diff --git a/webclient/app.css b/webclient/app.css index 750483b273..b9e7771ca8 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -236,6 +236,10 @@ h1 { background-color: #f8f8ff ! important; } +.mine .emote { + background-color: #fff ! important; +} + .mine .text .bubble { text-align: left ! important; } -- cgit 1.5.1