Make messages list and room users list scroll-overflow

This commit is contained in:
Emmanuel ROHEE 2014-08-12 18:11:38 +02:00
parent 31ac288eb7
commit f99168de06
3 changed files with 32 additions and 13 deletions

View File

@ -52,11 +52,16 @@ h1 {
/*** Participant list ***/ /*** Participant list ***/
.usersTable { .usersTableWrapper {
float: right; float: right;
width: 120px; width: 120px;
height: 100%;
overflow-y: auto;
}
.usersTable {
width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 150px;
} }
.usersTable td { .usersTable td {
@ -105,18 +110,29 @@ h1 {
background-color: #FFCC00; 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 - 198px);
}
/*** Message table ***/ /*** Message table ***/
.messageTableWrapper { .messageTableWrapper {
width: auto; width: auto;
height: 100%;
margin-right: 140px; margin-right: 140px;
overflow-y: auto;
} }
.messageTable { .messageTable {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
margin-bottom: 100px;
} }
.messageTable td { .messageTable td {

View File

@ -33,7 +33,8 @@ angular.module('RoomController', [])
} }
$scope.messages.push(chunk); $scope.messages.push(chunk);
$timeout(function() { $timeout(function() {
window.scrollTo(0, document.body.scrollHeight); var objDiv = document.getElementsByClassName("messageTableWrapper")[0];
objDiv.scrollTop = objDiv.scrollHeight;
},0); },0);
} }
else if (chunk.room_id == $scope.room_id && chunk.type == "m.room.member") { else if (chunk.room_id == $scope.room_id && chunk.type == "m.room.member") {

View File

@ -6,6 +6,7 @@
{{ room_alias || room_id }} {{ room_alias || room_id }}
</div> </div>
<div class="usersTableWrapper">
<table class="usersTable"> <table class="usersTable">
<tr ng-repeat="(name, info) in members"> <tr ng-repeat="(name, info) in members">
<td class="userAvatar"> <td class="userAvatar">
@ -15,6 +16,7 @@
</td> </td>
<td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" /> <td class="userPresence" ng-class="info.presenceState === 'online' ? 'online' : (info.presenceState === 'away' ? 'away' : '')" />
</table> </table>
</div>
<div class="messageTableWrapper"> <div class="messageTableWrapper">
<table class="messageTable"> <table class="messageTable">