You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@openmeetings.apache.org by so...@apache.org on 2017/11/11 08:51:01 UTC
openmeetings git commit: [OPENMEETINGS-1748] chat can be visible
without overlapping
Repository: openmeetings
Updated Branches:
refs/heads/4.0.x 21577e475 -> ab817fdfa
[OPENMEETINGS-1748] chat can be visible without overlapping
Project: http://git-wip-us.apache.org/repos/asf/openmeetings/repo
Commit: http://git-wip-us.apache.org/repos/asf/openmeetings/commit/ab817fdf
Tree: http://git-wip-us.apache.org/repos/asf/openmeetings/tree/ab817fdf
Diff: http://git-wip-us.apache.org/repos/asf/openmeetings/diff/ab817fdf
Branch: refs/heads/4.0.x
Commit: ab817fdfaa40a1175c66ae75e84bfa848911986b
Parents: 21577e4
Author: Maxim Solodovnik <so...@gmail.com>
Authored: Sat Nov 11 15:50:48 2017 +0700
Committer: Maxim Solodovnik <so...@gmail.com>
Committed: Sat Nov 11 15:50:48 2017 +0700
----------------------------------------------------------------------
.../openmeetings/web/common/MainPanel.html | 2 +-
.../org/apache/openmeetings/web/room/room.js | 6 +-
.../openmeetings/web/user/chat/ChatPanel.html | 2 +-
.../openmeetings/web/user/chat/ChatPanel.java | 18 +--
.../apache/openmeetings/web/user/chat/chat.js | 149 ++++++++++++++-----
openmeetings-web/src/main/webapp/css/chat.css | 11 +-
6 files changed, 129 insertions(+), 59 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/MainPanel.html
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/MainPanel.html b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/MainPanel.html
index dc2dfa2..a0f8232 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/MainPanel.html
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/common/MainPanel.html
@@ -53,7 +53,7 @@
</div>
<div wicket:id="dev" id="devMenu"/>
<div wicket:id="contents"><div wicket:id="child"></div></div>
- <div wicket:id="chatPanel"></div>
+ <div wicket:id="chatPanel" class="closed"></div>
<div wicket:id="aboutDialog"></div>
<div wicket:id="userInfoDialog"></div>
<div wicket:id="newMessageDialog"></div>
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
index b6ec7fb..3283807 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/room/room.js
@@ -561,12 +561,13 @@ var VideoManager = (function() {
})();
var Room = (function() {
const self = {};
- let options, menuHeight;
+ let options, menuHeight, chat;
function _init(_options) {
options = _options;
window.WbArea = options.interview ? InterviewWbArea() : DrawWbArea();
const menu = $('.room.box .room.menu');
+ chat = $('#chatPanel');
menuHeight = menu.length === 0 ? 0 : menu.height();
VideoManager.init();
Activities.init();
@@ -629,8 +630,9 @@ var Room = (function() {
} else {
holder.removeClass('big').addClass('small');
}
+ Chat.setHeight(h);
if (typeof WbArea !== 'undefined') {
- WbArea.resize(sb.width() + 5, w, h);
+ WbArea.resize(sb.width() + 5, w - chat.width(), h);
}
}
function _reload() {
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/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 53ed9d4..9f9118e 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
@@ -21,7 +21,7 @@
<html xmlns:wicket="http://wicket.apache.org">
<wicket:panel>
<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"></div><div class="label"><wicket:message key="244"/></div></div>
+ <div class="control block clickable ui-widget-header ui-state-active"><div class="ui-icon"></div><div class="label"><wicket:message key="244"/></div></div>
<div wicket:id="chat"></div>
</div>
</wicket:panel>
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.java
----------------------------------------------------------------------
diff --git a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.java b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.java
index 70bab82..6c2f905 100644
--- a/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.java
+++ b/openmeetings-web/src/main/java/org/apache/openmeetings/web/user/chat/ChatPanel.java
@@ -48,14 +48,14 @@ public class ChatPanel extends Panel {
toggle(target, false);
return;
}
- StringBuilder sb = new StringBuilder();
- sb.append("$(function() {");
+ StringBuilder sb = new StringBuilder("$(function() {");
if (!chat.isShowDashboardChat()) {
sb.append("$('#chatPanel,#chat').show();");
}
- sb.append(chat.addRoom(r));
- sb.append(r.isChatOpened() ? "Chat.open();" : "Chat.close();");
- sb.append("});");
+ sb.append("Chat.setRoomMode(true);")
+ .append(chat.addRoom(r))
+ .append("Chat.").append(r.isChatOpened() ? "setOpened" : "close").append("();")
+ .append("});");
target.appendJavaScript(sb);
}
@@ -64,13 +64,13 @@ public class ChatPanel extends Panel {
return;
}
handler.appendJavaScript(String.format("if (typeof Chat == 'object') { Chat.removeTab('%1$s%2$d'); }", ID_ROOM_PREFIX, r.getId()));
+ StringBuilder sb = new StringBuilder("$(function() {")
+ .append("Chat.setRoomMode(false);");
if (!chat.isShowDashboardChat()) {
- StringBuilder sb = new StringBuilder();
- sb.append("$(function() {");
sb.append("$('#chatPanel,#chat').hide();");
- sb.append("});");
- handler.appendJavaScript(sb);
}
+ sb.append("});");
+ handler.appendJavaScript(sb);
}
public void toggle(IPartialPageRequestHandler handler, boolean visible) {
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/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 a59c7bf..445e2cd 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
@@ -11,12 +11,17 @@ var Chat = function() {
, messageTemplate = "<div class='new-email om-icon " + alignIco + " clickable' data-user-id='#{userId}' onclick='const e=$(this);privateMessage(e.data(\"userId\"));'></div>"
, inviteTemplate = "<div class='invite om-icon " + alignIco + " clickable' data-user-id='#{userId}' onclick='const e=$(this);inviteUser(e.data(\"userId\"));'></div>"
, closeBlock = "<span class='ui-icon ui-icon-close' role='presentation'></span>"
- , closedHeight = "20px"
+ , closedSize = 20
+ , closedSizePx = closedSize + "px"
, emoticon = new CSSEmoticon()
, doneTypingInterval = 5000 //time in ms, 5 second for example
+ , iconOpen = 'ui-icon-caret-1-n'
+ , iconOpenRoom = 'ui-icon-caret-1-' + (isRtl ? 'e' : 'w')
+ , iconClose = 'ui-icon-caret-1-s'
+ , iconCloseRoom = 'ui-icon-caret-1-' + (isRtl ? 'w' : 'e')
;
- let chatTabs, openedHeight = "345px", allPrefix = "All"
- , roomPrefix = "Room ", typingTimer, audio, s, roomMode = false;
+ let p, pp, ctrl, icon, tabs, openedHeight = "345px", openedWidth = "300px", allPrefix = "All"
+ , roomPrefix = "Room ", typingTimer, audio, s, roomMode = false, globalWidth = 600;
try {
audio = new Audio('./public/chat_message.mp3');
@@ -80,10 +85,10 @@ var Chat = function() {
});
}
function isClosed() {
- return $('#chatPanel').height() < 24;
+ return p.hasClass('closed');
}
function activateTab(id) {
- chatTabs.tabs("option", "active", chatTabs.find('a[href="#' + id + '"]').parent().index());
+ tabs.tabs("option", "active", tabs.find('a[href="#' + id + '"]').parent().index());
}
function isInited() {
return !!$("#chatTabs").data("ui-tabs");
@@ -91,36 +96,58 @@ var Chat = function() {
function _reinit(_allPrefix, _roomPrefix) {
allPrefix = _allPrefix;
roomPrefix = _roomPrefix;
+ p = $('#chatPanel');
+ pp = $('#chatPanel, #chatPopup');
+ ctrl = $('#chatPopup .control.block');
+ icon = $('#chatPopup .control.block .ui-icon');
+ icon.removeClass(function(index, className) {
+ return (className.match (/(^|\s)ui-icon-caret-\S+/g) || []).join(' ');
+ });
initToolbar();
- chatTabs = $("#chatTabs").tabs({
+ tabs = $("#chatTabs").tabs({
activate: function(event, ui) {
$('#activeChatTab').val(ui.newPanel[0].id);
}
});
// close icon: removing the tab on click
- chatTabs.delegate("span.ui-icon-close", "click", function() {
+ tabs.delegate("span.ui-icon-close", "click", function() {
const panelId = $(this).closest("li").remove().attr("aria-controls");
$("#" + panelId).remove();
- chatTabs.tabs("refresh");
+ tabs.tabs("refresh");
});
if (roomMode) {
- $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-1-n');
- $('#chatPopup .control.block .ui-icon').addClass('ui-icon-caret-2-e-w');
- $('#chatPanel').addClass('room').resizable('destroy');
- } else {
- $('#chatPopup .control.block .ui-icon').addClass('ui-icon-caret-1-n');
- $('#chatPopup .control.block .ui-icon').removeClass('ui-icon-caret-2-e-w');
- $('#chatPanel').removeClass('room').resizable({
- handles: "n, w"
- , disabled: isClosed()
- , alsoResize: "#chatPopup, #chat .ui-tabs .ui-tabs-panel.messageArea"
- , minHeight: 195
- , minWidth: 260
- , stop: function(event, ui) {
- $('#chatPanel').css({'top': '', 'left': ''});
- openedHeight = ui.size.height + "px";
+ icon.addClass(isClosed ? iconOpenRoom : iconCloseRoom);
+ p.addClass('room').hover(_open, _close);
+ pp.width(closedSize);
+ ctrl.off('click').click(function() {
+ if (p.hasClass('opened')) {
+ _close(Room.setSize);
+ p.removeClass('opened').hover(_open, _close);
+ } else {
+ _setOpened();
}
});
+ if (p.resizable('instance') !== undefined) {
+ p.resizable('destroy');
+ }
+ } else {
+ icon.addClass(isClosed ? iconOpen : iconClose);
+ ctrl.height(closedSize).width(globalWidth).off('click').click(Chat.toggle);
+ pp.width(globalWidth).height(closedSize);
+ p.removeClass('room')
+ .off('mouseenter mouseleave')
+ .resizable({
+ handles: "n, w"
+ , disabled: isClosed()
+ , alsoResize: "#chatPopup, #chat .ui-tabs .ui-tabs-panel.messageArea"
+ , minHeight: 195
+ , minWidth: 260
+ , stop: function(event, ui) {
+ p.css({'top': '', 'left': ''});
+ openedHeight = ui.size.height + "px";
+ globalWidth = ui.size.width;
+ }
+ });
}
$('#chatMessage').off().on('input propertychange paste', function () {
const room = $('.room.box');
@@ -135,10 +162,10 @@ var Chat = function() {
});
}
function _removeTab(id) {
- $('li[aria-controls="' + id + '"]').remove();
+ $('#chat li[aria-controls="' + id + '"]').remove();
$('#' + id).remove();
if (isInited()) {
- chatTabs.tabs("refresh");
+ tabs.tabs("refresh");
}
}
function _addTab(id, label) {
@@ -155,16 +182,16 @@ var Chat = function() {
if (id.indexOf("chatTab-r") !== 0) {
li.append(closeBlock);
}
- chatTabs.find(".ui-tabs-nav").append(li);
- chatTabs.append("<div class='messageArea' id='" + id + "'></div>");
- chatTabs.tabs("refresh");
+ tabs.find(".ui-tabs-nav").append(li);
+ tabs.append("<div class='messageArea' id='" + id + "'></div>");
+ tabs.tabs("refresh");
activateTab(id);
}
function _addMessage(m) {
if ($('#chat').length > 0 && m && m.type === "chat") {
if (isClosed()) {
- $('#chatPopup .control.block').addClass('ui-state-highlight');
- if ($('#chatPanel').is(':visible') && s.chat.muted !== true) {
+ ctrl.addClass('ui-state-highlight');
+ if (p.is(':visible') && s.chat.muted !== true) {
const playPromise = audio.play();
// In browsers that don’t yet support this functionality,
@@ -214,22 +241,54 @@ var Chat = function() {
}
}
}
- function _open() {
+ function _setOpened() {
+ _open(function() {
+ p.addClass('opened').off('mouseenter mouseleave');
+ Room.setSize();
+ });
+ }
+ function _open(handler) {
if (isClosed()) {
- $('#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() {
- $(this).scrollTop($(this)[0].scrollHeight);
+ icon.removeClass(roomMode ? iconOpenRoom : iconOpen).addClass(roomMode ? iconCloseRoom : iconClose);
+ ctrl.removeClass('ui-state-highlight');
+ let opts;
+ if (roomMode) {
+ opts = {width: openedWidth};
+ ctrl.height(closedSize);
+ } else {
+ opts = {height: openedHeight};
+ p.resizable("option", "disabled", false);
+ }
+ p.removeClass('closed');
+ pp.animate(opts, 1000, function() {
+ p.removeClass('closed');
+ $('#chat .ui-tabs .ui-tabs-panel.messageArea').height(p.height() - closedSize - $('#chat .ui-tabs-nav').height() - $('#chat form').height() - 5);
+ $('#chat .messageArea').each(function() {
+ $(this).scrollTop($(this)[0].scrollHeight);
+ });
+ if (typeof handler === 'function') {
+ handler();
+ }
});
}
}
- function _close() {
+ function _close(handler) {
if (!isClosed()) {
- $('#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);
+ icon.removeClass(roomMode ? iconCloseRoom : iconClose).addClass(roomMode ? iconOpenRoom : iconOpen);
+ let opts;
+ if (roomMode) {
+ opts = {width: closedSizePx};
+ ctrl.height(p.height());
+ } else {
+ opts = {height: closedSizePx};
+ p.resizable("option", "disabled", true);
+ }
+ pp.animate(opts, 1000, function() {
+ p.addClass('closed');
+ if (typeof handler === 'function') {
+ handler();
+ }
+ });
}
}
function _toggle() {
@@ -247,6 +306,12 @@ var Chat = function() {
roomMode = _mode;
_reinit(allPrefix, roomPrefix);
}
+ function _setHeight(h) {
+ pp.height(h);
+ if (isClosed()) {
+ ctrl.height(h);
+ }
+ }
return {
reinit: _reinit
@@ -254,10 +319,12 @@ var Chat = function() {
, addTab: _addTab
, addMessage: _addMessage
, open: _open
+ , setOpened: _setOpened
, close: _close
, toggle: _toggle
, emtClick: _emtClick
, setRoomMode: _setRoomMode
+ , setHeight: _setHeight
};
}();
http://git-wip-us.apache.org/repos/asf/openmeetings/blob/ab817fdf/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 34056b9..a5d32c7 100644
--- a/openmeetings-web/src/main/webapp/css/chat.css
+++ b/openmeetings-web/src/main/webapp/css/chat.css
@@ -21,7 +21,6 @@
z-index: 2000;
bottom: 0px;
right: 10px;
- width: 600px;
height: 20px;
}
#chatPanel #chatPopup {
@@ -53,7 +52,8 @@
}
#chatPopup .control.block .label {
display: inline-block;
- padding-left: 20px;
+ width: 70px;
+ padding-left: 5px;
}
#chat .messageArea .date {
margin-right: 5px;
@@ -103,12 +103,13 @@
right: 0px;
top: 34px;
}
-#chatPanel.room, #chatPanel.room #chatPopup, #chatPanel.room #chatPopup .control.block {
- height: 620px !important;
+#chatPanel.room #chat form {
+ position: absolute;
+ bottom: 0;
}
#chatPanel.room.closed #chatPopup .control.block .label {
transform: rotate(90deg);
- transform-origin: 10% 68% 0px;
+ transform-origin: -11% 68% 0;
}
#chatPanel.room.closed #chatPopup #chat {
display: none;