From e4f0e1af1aa075e6d86921d46e824d85855c1def Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 21 Aug 2014 14:58:26 +0200 Subject: If there are available, show image thumbnails in the messages list --- webclient/room/room.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/room/room.html b/webclient/room/room.html index db6add4ee7..5dcc8caa1e 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -41,9 +41,13 @@
-
- +
+
+ +
+
+ +
-- cgit 1.5.1 From bb4490c2d78d4e0dcae01853513e0308776055a5 Mon Sep 17 00:00:00 2001 From: Emmanuel ROHEE Date: Thu, 21 Aug 2014 16:09:42 +0200 Subject: Show image fullscreen when clicking on the thumbnail --- webclient/app.css | 25 ++++++++++++++++++++++++- webclient/room/room.html | 9 +++++++-- 2 files changed, 31 insertions(+), 3 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/app.css b/webclient/app.css index 869db69cd6..d2b951d3b6 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -66,6 +66,10 @@ h1 { background-color: #faa; } +.mouse-pointer { + cursor: pointer; +} + /*** Participant list ***/ #usersTableWrapper { @@ -89,7 +93,6 @@ h1 { height: 100px; position: relative; background-color: #000; - cursor: pointer; } .userAvatar .userAvatarImage { @@ -245,6 +248,26 @@ h1 { text-align: left ! important; } +#room-fullscreen-image { + position: absolute; + top: 0px; + height: 0px; + width: 100%; + height: 100%; +} + +#room-fullscreen-image img { + max-width: 100%; + max-height: 100%; + bottom: 0; + left: 0; + margin: auto; + overflow: auto; + position: fixed; + right: 0; + top: 0; +} + /*** Profile ***/ .profile-avatar { diff --git a/webclient/room/room.html b/webclient/room/room.html index 5dcc8caa1e..cb9cf1d1f3 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -10,7 +10,7 @@
-
+ {{ member.displayname || member.id.substr(0, member.id.indexOf(':')) }}
- +
@@ -96,4 +97,8 @@ +
+ +
+ -- cgit 1.5.1 From 3277a650529d4ecaf816987e6cbcb87fdf3371da Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 21 Aug 2014 19:02:00 +0100 Subject: actually display room metadata based on m.room.membe events --- webclient/app.css | 4 ++++ webclient/components/matrix/event-handler-service.js | 11 +++++++++++ webclient/room/room.html | 10 ++++++++-- 3 files changed, 23 insertions(+), 2 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/app.css b/webclient/app.css index 83b0c9c65a..a63b5db4d6 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -245,6 +245,10 @@ h1 { background-color: #fff ! important; } +.mine .membership { + background-color: #fff ! important; +} + .mine .text .bubble { text-align: left ! important; } diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index b8529895fe..6a01b3fb55 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -69,6 +69,17 @@ angular.module('eventHandlerService', []) var handleRoomMember = function(event, isLiveEvent) { initRoom(event.room_id); + + // add membership changes as if they were a room message if something interesting changed + if (event.content.prev !== event.content.membership) { + if (isLiveEvent) { + $rootScope.events.rooms[event.room_id].messages.push(event); + } + else { + $rootScope.events.rooms[event.room_id].messages.unshift(event); + } + } + $rootScope.events.rooms[event.room_id].members[event.user_id] = event; $rootScope.$broadcast(MEMBER_EVENT, event, isLiveEvent); }; diff --git a/webclient/room/room.html b/webclient/room/room.html index cb9cf1d1f3..4a07dfdaaf 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -26,19 +26,25 @@
+ -
{{ members[msg.user_id].displayname || msg.user_id }}
-
{{ msg.content.hsob_ts | date:'MMM d HH:mm:ss' }}
+
{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}
 +
+ + {{ members[msg.user_id].displayname || msg.user_id }} + {{ {"join": "joined", "leave": "left", "invite": "invited"}[msg.content.membership] }} + {{ msg.content.target_id || '' }} +
-- cgit 1.5.1 From fd47f55e943dc6950a1a84414e0ed8a08fbc504c Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 22 Aug 2014 01:33:34 +0100 Subject: sacrifice a goat or two to make wordwrap actually work properly --- webclient/app.css | 45 +++++++++++++++++++-------------------------- webclient/room/room.html | 4 ++-- 2 files changed, 21 insertions(+), 28 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/app.css b/webclient/app.css index a63b5db4d6..dfc919e4c0 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -145,6 +145,7 @@ h1 { max-width: 1280px; width: 100%; border-collapse: collapse; + table-layout: fixed; } #messageTable td { @@ -190,25 +191,13 @@ h1 { object-fit: cover; } -.text { - background-color: #eee; - border: 1px solid #d8d8d8; - height: 31px; - display: inline-table; - margin-top: -1px; - max-width: 90%; - font-size: 16px; - /* word-wrap: break-word; */ - word-break: break-all; -} - .emote { - background-color: #fff ! important; + background-color: transparent ! important; border: 0px ! important; } .membership { - background-color: #fff ! important; + background-color: transparent ! important; border: 0px ! important; } @@ -221,6 +210,13 @@ h1 { } .bubble { + background-color: #eee; + border: 1px solid #d8d8d8; + display: inline-block; + margin-bottom: -1px; + max-width: 90%; + font-size: 16px; + word-wrap: break-word; padding-top: 7px; padding-bottom: 5px; padding-left: 1em; @@ -229,27 +225,24 @@ h1 { } .differentUser td { - padding-top: 5px ! important; - margin-top: 5px ! important; + padding-bottom: 5px ! important; } .mine { text-align: right; } -.mine .text { - background-color: #f8f8ff ! important; -} - -.mine .emote { - background-color: #fff ! important; -} - -.mine .membership { - background-color: #fff ! important; +.text.emote .bubble, +.text.membership .bubble, +.mine .text.emote .bubble, +.mine .text.membership .bubble + { + background-color: transparent ! important; + border: 0px ! important; } .mine .text .bubble { + background-color: #f8f8ff ! important; text-align: left ! important; } diff --git a/webclient/room/room.html b/webclient/room/room.html index 4a07dfdaaf..e7560a5dc4 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -29,7 +29,7 @@ + ng-class="(events.rooms[room_id].messages[$index + 1].user_id !== msg.user_id ? 'differentUser' : '') + (msg.user_id === state.user_id ? ' mine' : '')" scroll-item>
{{ members[msg.user_id].displayname || msg.user_id }}
{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}
@@ -77,7 +77,7 @@ {{ state.user_id }} 		- + -- cgit 1.5.1 From 3248aed03b03e0eba3a4b43776ef2f7685b27701 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Fri, 22 Aug 2014 01:54:37 +0100 Subject: fix mainInput retaining focus between sending consecutive messages by disabling commit 955662d6 --- webclient/room/room-controller.js | 4 ++-- webclient/room/room.html | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 214166a434..451c6242f6 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -33,6 +33,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) can_paginate: true, // this is toggled off when we run out of items paginating: false, // used to avoid concurrent pagination requests pulling in dup contents stream_failure: undefined, // the response when the stream fails + // FIXME: sending has been disabled, as surely messages should be sent in the background rather than locking the UI synchronously --Matthew sending: false // true when a message is being sent. It helps to disable the UI when a process is running }; $scope.members = {}; @@ -239,7 +240,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) } $scope.state.sending = true; - + // Send the text message var promise; // FIXME: handle other commands too @@ -263,7 +264,6 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) }; $scope.onInit = function() { - // $timeout(function() { document.getElementById('textInput').focus() }, 0); console.log("onInit"); // Does the room ID provided in the URL? diff --git a/webclient/room/room.html b/webclient/room/room.html index e7560a5dc4..95da067714 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -77,10 +77,10 @@ {{ state.user_id }} - + - + -- cgit 1.5.1 From d2bb28d2df6ffe58db1a56e7aec85c34d9d1425f Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 23 Aug 2014 20:45:00 +0100 Subject: very quick and dirty responsive design for iPhones --- webclient/app.css | 98 ++++++++++++++++++++++++++++++++++++++++------ webclient/index.html | 6 +-- webclient/login/login.html | 4 +- webclient/room/room.html | 30 +++++++------- webclient/rooms/rooms.html | 1 + webclient/user/user.html | 1 + 6 files changed, 110 insertions(+), 30 deletions(-) (limited to 'webclient/room/room.html') diff --git a/webclient/app.css b/webclient/app.css index 207f35f5f3..6f320414b1 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -1,3 +1,71 @@ +/*** Mobile voodoo ***/ +@media all and (max-device-width: 640px) { + + #messageTableWrapper { + margin-right: 0px ! important; + } + + .leftBlock { + width: 8em ! important; + } + + #header, + #messageTable, + #wrapper, + #roomName, + #controls { + max-width: 640px ! important; + } + + #userIdCell, + #usersTableWrapper, + #extraControls { + display: none; + } + + #buttonsCell { + width: 60px ! important; + padding-left: 20px ! important; + } + + #roomLogo { + display: none; + } + + #roomName { + text-align: left ! important; + top: -35px ! important; + } + + .bubble { + font-size: 12px ! important; + height: 20px ! important; + } + + #page { + top: 35px ! important; + bottom: 70px ! important; + } + + #header, + #page { + margin: 5px ! important; + } + + #header { + padding: 5px ! important; + } + + /* stop zoom on select */ + select:focus, + textarea, + input + { + font-size: 16px ! important; + } + +} + body { font-family: "Myriad Pro", "Myriad", Helvetica, Arial, sans-serif; font-size: 12pt; @@ -17,7 +85,6 @@ h1 { left: 0px; right: 0px; margin: 20px; - margin: 20px; } #wrapper { @@ -32,8 +99,7 @@ h1 { text-align: right; top: -40px; position: absolute; - font-size: 16pt; - margin-bottom: 10px; + font-size: 16px; } #controlPanel { @@ -50,6 +116,10 @@ h1 { margin: auto; } +#buttonsCell { + width: 150px; +} + #inputBarTable { width: 100%; } @@ -111,13 +181,13 @@ h1 { color: #fff; margin: 2px; bottom: 0px; - font-size: 8pt; + font-size: 12px; word-break: break-all; } .userPresence { text-align: center; - font-size: 8pt; + font-size: 12px; color: #fff; background-color: #aaa; border-bottom: 1px #ddd solid; @@ -159,7 +229,7 @@ h1 { background-color: #fff; color: #888; font-weight: medium; - font-size: 8pt; + font-size: 12px; text-align: right; border-top: 1px #ddd solid; } @@ -277,7 +347,7 @@ h1 { .profile-avatar { width: 160px; height: 160px; - display:table-cell; + display: table-cell; vertical-align: middle; text-align: center; } @@ -293,13 +363,19 @@ h1 { } #user-displayname { - font-size: 16pt; + font-size: 24px; } /******************************/ -#header { - padding-left: 20px; - padding-right: 20px; +#header +{ + padding: 20px; + max-width: 1280px; + margin: auto; +} + +#logo, +#roomLogo { max-width: 1280px; margin: auto; } diff --git a/webclient/index.html b/webclient/index.html index 27d9208193..5b8e27fa6d 100644 --- a/webclient/index.html +++ b/webclient/index.html @@ -2,10 +2,12 @@ [matrix] - + + + @@ -36,8 +38,6 @@ - -

[matrix]

diff --git a/webclient/login/login.html b/webclient/login/login.html index b1488b37f0..4b2ea60928 100644 --- a/webclient/login/login.html +++ b/webclient/login/login.html @@ -1,4 +1,6 @@ -
{{ members[msg.user_id].displayname || msg.user_id }}
-
{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm:ss' }}
+
{{ (msg.content.hsob_ts || msg.ts) | date:'MMM d HH:mm' }}
 - - - -
+ {{ state.user_id }} + + - - - +
- - Invite a user: - - - - - +
+ + Invite a user: + + + + +
+ {{ feedback }}
{{ state.stream_failure.data.error || "Connection failure" }} diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html index 5e422bf83b..2a12cbc8ae 100644 --- a/webclient/rooms/rooms.html +++ b/webclient/rooms/rooms.html @@ -1,4 +1,5 @@
+

[matrix]

diff --git a/webclient/user/user.html b/webclient/user/user.html index 47db09d1ee..4c91c8a48a 100644 --- a/webclient/user/user.html +++ b/webclient/user/user.html @@ -1,4 +1,5 @@
+

[matrix]

-- cgit 1.5.1 From 5796232cb19927612957db3fcf4b77cd383187a6 Mon Sep 17 00:00:00 2001 From: Kegan Dougal Date: Tue, 26 Aug 2014 10:24:47 +0100 Subject: Adjusted webclient to use new state paths. Updated membership msg template to actually show the person invited. Factored out common membership functions in matrix service. --- synapse/rest/room.py | 3 +- .../components/matrix/event-handler-service.js | 4 -- webclient/components/matrix/matrix-service.js | 47 ++++++---------------- webclient/home/home-controller.js | 2 +- webclient/room/room-controller.js | 13 +++--- webclient/room/room.html | 2 +- 6 files changed, 24 insertions(+), 47 deletions(-) (limited to 'webclient/room/room.html') diff --git a/synapse/rest/room.py b/synapse/rest/room.py index a07e031984..2d681bd893 100644 --- a/synapse/rest/room.py +++ b/synapse/rest/room.py @@ -318,7 +318,8 @@ class RoomMemberListRestServlet(RestServlet): user_id=user.to_string()) for event in members["chunk"]: - target_user = self.hs.parse_userid(event["state_key"]) + # FIXME: should probably be state_key here, not user_id + target_user = self.hs.parse_userid(event["user_id"]) # Presence is an optional cache; don't fail if we can't fetch it try: presence_state = yield self.handlers.presence_handler.get_state( diff --git a/webclient/components/matrix/event-handler-service.js b/webclient/components/matrix/event-handler-service.js index b5eb73d92b..6ea0f58bc5 100644 --- a/webclient/components/matrix/event-handler-service.js +++ b/webclient/components/matrix/event-handler-service.js @@ -54,10 +54,6 @@ angular.module('eventHandlerService', []) } var handleMessage = function(event, isLiveEvent) { - if ("membership_target" in event.content) { - event.user_id = event.content.membership_target; - } - initRoom(event.room_id); if (isLiveEvent) { diff --git a/webclient/components/matrix/matrix-service.js b/webclient/components/matrix/matrix-service.js index d5738e01c8..b5b1815cf9 100644 --- a/webclient/components/matrix/matrix-service.js +++ b/webclient/components/matrix/matrix-service.js @@ -115,19 +115,7 @@ angular.module('matrixService', []) // Joins a room join: function(room_id) { - // The REST path spec - var path = "/rooms/$room_id/members/$user_id/state"; - - // Like the cmd client, escape room ids - room_id = encodeURIComponent(room_id); - - // Customize it - path = path.replace("$room_id", room_id); - path = path.replace("$user_id", config.user_id); - - return doRequest("PUT", path, undefined, { - membership: "join" - }); + return this.membershipChange(room_id, config.user_id, "join"); }, joinAlias: function(room_alias) { @@ -141,34 +129,23 @@ angular.module('matrixService', []) // Invite a user to a room invite: function(room_id, user_id) { - // The REST path spec - var path = "/rooms/$room_id/members/$user_id/state"; - - // Like the cmd client, escape room ids - room_id = encodeURIComponent(room_id); - - // Customize it - path = path.replace("$room_id", room_id); - path = path.replace("$user_id", user_id); - - return doRequest("PUT", path, undefined, { - membership: "invite" - }); + return this.membershipChange(room_id, user_id, "invite"); }, // Leaves a room leave: function(room_id) { - // The REST path spec - var path = "/rooms/$room_id/members/$user_id/state"; - - // Like the cmd client, escape room ids - room_id = encodeURIComponent(room_id); + return this.membershipChange(room_id, config.user_id, "leave"); + }, - // Customize it - path = path.replace("$room_id", room_id); - path = path.replace("$user_id", config.user_id); + membershipChange: function(room_id, user_id, membershipValue) { + // The REST path spec + var path = "/rooms/$room_id/state/m.room.member/$user_id"; + path = path.replace("$room_id", encodeURIComponent(room_id)); + path = path.replace("$user_id", encodeURIComponent(user_id)); - return doRequest("DELETE", path, undefined, undefined); + return doRequest("PUT", path, undefined, { + membership: membershipValue + }); }, // Retrieves the room ID corresponding to a room alias diff --git a/webclient/home/home-controller.js b/webclient/home/home-controller.js index 35d0ef1654..a5576759fa 100644 --- a/webclient/home/home-controller.js +++ b/webclient/home/home-controller.js @@ -41,7 +41,7 @@ angular.module('HomeController', ['matrixService', 'mFileInput', 'mFileUpload', $scope.$on(eventHandlerService.MEMBER_EVENT, function(ngEvent, event, isLive) { var config = matrixService.config(); - if (event.target_user_id === config.user_id && event.content.membership === "invite") { + if (event.state_key === config.user_id && event.content.membership === "invite") { console.log("Invited to room " + event.room_id); // FIXME push membership to top level key to match /im/sync event.membership = event.content.membership; diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index 3311618825..f49deaa489 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -154,7 +154,10 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) var updateMemberList = function(chunk) { if (chunk.room_id != $scope.room_id) return; - var isNewMember = !(chunk.target_user_id in $scope.members); + // set target_user_id to keep things clear + var target_user_id = chunk.state_key; + + var isNewMember = !(target_user_id in $scope.members); if (isNewMember) { // FIXME: why are we copying these fields around inside chunk? if ("state" in chunk.content) { @@ -172,7 +175,7 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) if ("avatar_url" in chunk.content) { chunk.avatar_url = chunk.content.avatar_url; } - $scope.members[chunk.target_user_id] = chunk; + $scope.members[target_user_id] = chunk; /* // Stale code for explicitly hammering the homeserver for every displayname & avatar_url @@ -202,13 +205,13 @@ angular.module('RoomController', ['ngSanitize', 'mUtilities']) }); */ - if (chunk.target_user_id in $rootScope.presence) { - updatePresence($rootScope.presence[chunk.target_user_id]); + if (target_user_id in $rootScope.presence) { + updatePresence($rootScope.presence[target_user_id]); } } else { // selectively update membership else it will nuke the picture and displayname too :/ - var member = $scope.members[chunk.target_user_id]; + var member = $scope.members[target_user_id]; member.content.membership = chunk.content.membership; } } diff --git a/webclient/room/room.html b/webclient/room/room.html index 06ca63d2ea..c167819f15 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -44,7 +44,7 @@ {{ members[msg.user_id].displayname || msg.user_id }} {{ {"join": "joined", "leave": "left", "invite": "invited"}[msg.content.membership] }} - {{ msg.content.target_id || '' }} + {{ msg.content.membership === "invite" ? (msg.state_key || '') : '' }} -- cgit 1.5.1