diff options
| -rw-r--r-- | webclient/app.css | 47 | ||||
| -rw-r--r-- | webclient/app.js | 7 | ||||
| -rw-r--r-- | webclient/login/login.html | 2 | ||||
| -rw-r--r-- | webclient/room/room-controller.js | 6 | ||||
| -rw-r--r-- | webclient/room/room.html | 9 | ||||
| -rw-r--r-- | webclient/rooms/rooms.html | 4 |
6 files changed, 46 insertions, 29 deletions
diff --git a/webclient/app.css b/webclient/app.css index 15b6c91300..0111b78e02 100644 --- a/webclient/app.css +++ b/webclient/app.css @@ -11,21 +11,33 @@ h1 { /*** Overall page layout ***/ .page { - max-width: 1280px; + position: absolute; + top: 80px; + bottom: 100px; + left: 0px; + right: 0px; + margin: 20px; + margin: 20px; +} + +.wrapper { margin: auto; - margin-bottom: 80px ! important; - padding-left: 20px; - padding-right: 20px; + max-width: 1280px; + height: 100%; } .roomName { + max-width: 1280px; + width: 100%; text-align: right; + top: -40px; + position: absolute; font-size: 16pt; margin-bottom: 10px; } .controlPanel { - position: fixed; + position: absolute; bottom: 0px; width: 100%; background-color: #f8f8f8; @@ -70,8 +82,9 @@ h1 { .userAvatar { width: 80px; - height: 80px; + height: 100px; position: relative; + background-color: #000; } .userAvatar .userAvatarImage { @@ -81,7 +94,7 @@ h1 { .userAvatar .userAvatarGradient { position: absolute; - bottom: 0px; + bottom: 20px; } .userAvatar .userName { @@ -91,7 +104,6 @@ h1 { bottom: 0px; font-size: 8pt; word-wrap: break-word; - word-break: break-all; } .userPresence { @@ -110,27 +122,18 @@ h1 { background-color: #FFCC00; } -/*** Room page ***/ - -/* Limit the height of the page content to 100% of the viewport height minus the - height of the header and the footer. - The two divs containing the messages list and the users list will then scroll- - overflow separetely. - */ -.room .page { - height: calc(100vh - 220px); -} - /*** Message table ***/ .messageTableWrapper { - width: auto; height: 100%; margin-right: 140px; overflow-y: auto; + width: auto; } .messageTable { + margin: auto; + max-width: 1280px; width: 100%; border-collapse: collapse; } @@ -180,6 +183,8 @@ h1 { height: 32px; display: inline-table; max-width: 90%; + word-wrap: break-word; + word-break: break-all; } .emote { @@ -217,12 +222,10 @@ h1 { /******************************/ .header { - margin-top: 12px ! important; padding-left: 20px; padding-right: 20px; max-width: 1280px; margin: auto; - height: 60px; } .header-buttons { diff --git a/webclient/app.js b/webclient/app.js index 2133a98cbf..651aeeaa77 100644 --- a/webclient/app.js +++ b/webclient/app.js @@ -70,4 +70,9 @@ matrixWebClient $timeout(function() { element[0].focus() }, 0); } }; - }]); + }]) + .filter('to_trusted', ['$sce', function($sce){ + return function(text) { + return $sce.trustAsHtml(text); + }; + }]); \ No newline at end of file diff --git a/webclient/login/login.html b/webclient/login/login.html index 0d3e8c57fd..508ff5e4bf 100644 --- a/webclient/login/login.html +++ b/webclient/login/login.html @@ -1,5 +1,6 @@ <div ng-controller="LoginController" class="login"> <div class="page"> + <div class="wrapper"> {{ feedback }} @@ -48,4 +49,5 @@ </div> + </div> </div> diff --git a/webclient/room/room-controller.js b/webclient/room/room-controller.js index a30f46baf8..470f41521a 100644 --- a/webclient/room/room-controller.js +++ b/webclient/room/room-controller.js @@ -42,6 +42,8 @@ angular.module('RoomController', []) console.log("Got response from "+$scope.state.events_from+" to "+response.data.end); $scope.state.events_from = response.data.end; + $scope.feedback = ""; + for (var i = 0; i < response.data.chunk.length; i++) { var chunk = response.data.chunk[i]; if (chunk.room_id == $scope.room_id && chunk.type == "m.room.message") { @@ -68,10 +70,12 @@ angular.module('RoomController', []) $timeout(shortPoll, 0); } }, function(response) { - $scope.feedback = "Can't stream: " + JSON.stringify(response); + $scope.feedback = "Can't stream: " + response.data; + if (response.status == 403) { $scope.stopPoll = true; } + if ($scope.stopPoll) { console.log("Stopping polling."); } diff --git a/webclient/room/room.html b/webclient/room/room.html index 87d3458af5..51af54e7b2 100644 --- a/webclient/room/room.html +++ b/webclient/room/room.html @@ -1,6 +1,7 @@ <div ng-controller="RoomController" data-ng-init="onInit()" class="room"> <div class="page"> + <div class="wrapper"> <div class="roomName"> {{ room_alias || room_id }} @@ -12,7 +13,8 @@ <td class="userAvatar"> <img class="userAvatarImage" ng-src="{{info.avatar_url || 'img/default-profile.jpg'}}" width="80" height="80"/> <img class="userAvatarGradient" src="img/gradient.png" width="80" height="24"/> - <div class="userName">{{ info.displayname || name }}</div> + <!-- FIXME: does allowing <wbr/> to be unescaped introduce HTML injections from user IDs and display names? --> + <div class="userName" ng-bind-html="info.displayname || (name.substr(0, name.indexOf(':')) + '<wbr/>' + name.substr(name.indexOf(':'))) | to_trusted"></div> </td> <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'unavailable' ? 'unavailable' : '')" /> </table> @@ -45,6 +47,7 @@ </div> </div> + </div> <div class="controlPanel"> <div class="controls"> @@ -53,7 +56,7 @@ <td width="1"> {{ state.user_id }} </td> - <td width="*"> + <td width="*" style="min-width: 100px"> <input class="mainInput" ng-model="textInput" ng-enter="send()" ng-focus="true"/> </td> <td width="1"> @@ -85,7 +88,5 @@ <button ng-click="leaveRoom()">Leave</button> </div> </div> - - </div> diff --git a/webclient/rooms/rooms.html b/webclient/rooms/rooms.html index f134e5ee8c..d303e143b9 100644 --- a/webclient/rooms/rooms.html +++ b/webclient/rooms/rooms.html @@ -1,7 +1,8 @@ <div ng-controller="RoomsController" class="rooms"> <div class="page"> - + <div class="wrapper"> + <div> <form> <input size="40" ng-model="newProfileInfo.name" ng-enter="setDisplayName(newProfileInfo.name)" /> @@ -77,4 +78,5 @@ {{ feedback }} </div> + </div> </div> |