[OPENMEETINGS-1616] chat is fixed to add messages to the bottom
Project: http://git-wip-us.apache.org/repos/asf/openmeetings/repo Commit: http://git-wip-us.apache.org/repos/asf/openmeetings/commit/1f274d12 Tree: http://git-wip-us.apache.org/repos/asf/openmeetings/tree/1f274d12 Diff: http://git-wip-us.apache.org/repos/asf/openmeetings/diff/1f274d12 Branch: refs/heads/3.2.x Commit: 1f274d123b6866abf1eebffead4b59eb4567fad4 Parents: e6940fa Author: Maxim Solodovnik <[email protected]> Authored: Thu Mar 30 05:13:05 2017 +0000 Committer: Maxim Solodovnik <[email protected]> Committed: Thu Mar 30 05:13:05 2017 +0000 ---------------------------------------------------------------------- .../openmeetings/web/user/chat/ChatPanel.html | 8 ++--- .../apache/openmeetings/web/user/chat/chat.js | 33 ++++++++++++-------- openmeetings-web/src/main/webapp/css/chat.css | 10 +++--- 3 files changed, 29 insertions(+), 22 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/openmeetings/blob/1f274d12/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html index 6ed210f..af7edeb 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.html @@ -7,20 +7,20 @@ to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at - + http://www.apache.org/licenses/LICENSE-2.0 - + Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. - + --> <html xmlns:wicket="http://wicket.apache.org";> <wicket:panel> - <div id="chat" class="ui-state-default"> + <div id="chatPopup" class="ui-state-default"> <div onclick="Chat.toggle();" class="control block clickable ui-widget-header ui-state-active"><div class="ui-icon ui-icon-caret-1-n sort-icon"></div><div class="label"><wicket:message key="244"/></div></div> <div wicket:id="chat"></div> </div> http://git-wip-us.apache.org/repos/asf/openmeetings/blob/1f274d12/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js index 0ffeac6..ef43843 100644 --- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js +++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/chat.js @@ -19,13 +19,12 @@ var Chat = function() { var chatTabs , tabTemplate = "<li><a href='#{href}'>#{label}</a></li>" - , msgTemplate = "<div id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>" + , msgTemplate = "<div class='clear' id='chat-msg-id-#{id}'><img class='profile' src='#{imgSrc}'/><span class='from' data-user-id='#{userId}'>#{from}</span><span class='date align-right'>#{sent}</span>#{msg}</div>" , acceptTemplate = "<div class='tick om-icon align-right clickable' data-msgid='#{msgid}' data-roomid='#{roomid}' onclick='var e=$(this);chatActivity('accept',e.data(\"roomid\"),e.data(\"msgid\"));e.parent().remove();'></div>" , infoTemplate = "<div class='user om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);showUserInfo(e.data(\"userId\"));'></div>" , addTemplate = "<div class='add om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);addContact(e.data(\"userId\"));'></div>" , messageTemplate = "<div class='new-email om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);privateMessage(e.data(\"userId\"));'></div>" , inviteTemplate = "<div class='invite om-icon align-right clickable' data-user-id='#{userId}' onclick='var e=$(this);inviteUser(e.data(\"userId\"));'></div>" - , clearBlock = "<div class='clear'></div>" , closeBlock = "<span class='ui-icon ui-icon-close' role='presentation'></span>" , closedHeight = "20px" , openedHeight = "345px" @@ -90,7 +89,7 @@ var Chat = function() { $('#chatPanel').resizable({ handles: "n, w" , disabled: isClosed() - , alsoResize: "#chat, #chat .ui-tabs .ui-tabs-panel.messageArea" + , alsoResize: "#chatPopup, #chat .ui-tabs .ui-tabs-panel.messageArea" , minHeight: 195 , minWidth: 260 , stop: function(event, ui) { @@ -139,11 +138,12 @@ var Chat = function() { , addMessage: function(m) { if ($('#chat').length > 0 && m && m.type == "chat") { if (isClosed()) { - $('#chat .control.block').addClass('ui-state-highlight'); + $('#chatPopup .control.block').addClass('ui-state-highlight'); audio.play(); } var msg, cm; while (!!(cm = m.msg.pop())) { + var area = $('#' + cm.scope); msg = $(msgTemplate.replace(/#\{id\}/g, cm.id) .replace(/#\{userId\}/g, cm.from.id) .replace(/#\{imgSrc\}/g, !!cm.from.img ? cm.from.img : './profile/' + cm.from.id + '?anticache=' + Date.now()) @@ -160,30 +160,37 @@ var Chat = function() { if (cm.needModeration) { msg.append(acceptTemplate.replace(/#\{msgid\}/g, cm.id).replace(/#\{roomid\}/g, cm.scope.substring(9))); } - if (!$('#' + cm.scope).length) { + if (!area.length) { this.addTab(cm.scope, cm.scopeName); } if (m.mode == "accept") { $('#chat-msg-id-' + cm.id).remove(); } - msg.append(clearBlock); - $('#' + cm.scope).prepend(msg); + var btm = area.scrollTop() + area.innerHeight() >= area[0].scrollHeight; + area.append(msg); + if (btm) { + area.animate({ + scrollTop: area[0].scrollHeight + }, 300); + } } } } , open: function() { if (isClosed()) { - $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s'); - $('#chat .control.block').removeClass('ui-state-highlight'); - $('#chatPanel, #chat').animate({height: openedHeight}, 1000); + $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-n').addClass('ui-icon-caret-1-s'); + $('#chatPopup .control.block').removeClass('ui-state-highlight'); + $('#chatPanel, #chatPopup').animate({height: openedHeight}, 1000); $('#chatPanel').resizable("option", "disabled", false); + $('#chat .messageArea').each(function(idx) { + $(this).scrollTop($(this)[0].scrollHeight); + }); } } , close: function() { if (!isClosed()) { - $('#chat .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n'); - $('#chatPanel').animate({height: closedHeight}, 1000); - $('#chatPanel, #chat').animate({height: closedHeight}, 1000); + $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-s').addClass('ui-icon-caret-1-n'); + $('#chatPanel, #chatPopup').animate({height: closedHeight}, 1000); $('#chatPanel').resizable("option", "disabled", true); } } http://git-wip-us.apache.org/repos/asf/openmeetings/blob/1f274d12/openmeetings-web/src/main/webapp/css/chat.css ---------------------------------------------------------------------- diff --git a/openmeetings-web/src/main/webapp/css/chat.css b/openmeetings-web/src/main/webapp/css/chat.css index a07700f4..a837b31 100644 --- a/openmeetings-web/src/main/webapp/css/chat.css +++ b/openmeetings-web/src/main/webapp/css/chat.css @@ -24,10 +24,10 @@ width: 600px; height: 20px; } -#chatPanel #chat { +#chatPanel #chatPopup { height: 20px; } -##chat .btn-toolbar { +#chat .btn-toolbar { margin-top: 2px; margin-bottom: 0; margin-left: 5px; @@ -48,10 +48,10 @@ padding: 2px .5em; float: left; } -#chat .control.block .ui-icon { +#chatPopup .control.block .ui-icon { text-align: center; } -#chat .control.block .label { +#chatPopup .control.block .label { display: inline-block; padding-left: 20px; } @@ -73,7 +73,7 @@ .ui-tabs .ui-tabs-panel.messageArea { height: 165px; overflow-y: auto; - padding: 5px; + padding: 0 5px; } #chatMessage .wysiwyg-editor { height: 70px;
