Index: openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.css
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.css,v
diff -u -r1.1.2.1 -r1.1.2.2
--- openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.css 8 Apr 2020 13:34:39 -0000 1.1.2.1
+++ openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.css 7 Mar 2023 16:26:04 -0000 1.1.2.2
@@ -26,6 +26,20 @@
background-color: white;
}
+#xowiki-chat-fs {
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ display: flex;
+ background-color: white;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 1031;
+}
+
/* Users block */
#xowiki-chat-users {
display: none;
@@ -56,7 +70,6 @@
#xowiki-chat-messages .xowiki-chat-user {
white-space: nowrap;
- display: block;
padding: 5px;
font-weight: bold;
}
@@ -72,8 +85,10 @@
padding: 5px;
}
-#xowiki-chat-messages .xowiki-chat-message-block {
+#xowiki-chat-messages .xowiki-chat-message-block,
+#xowiki-chat-messages .xowiki-chat-message-block-me {
display: flex;
+ flex-wrap: wrap;
align-items: center;
padding: 5px;
}
@@ -115,6 +130,8 @@
background-color: #eceff1;
border-radius: 8px;
padding-right: 45px;
+ width: 100%; /* Do not let the browser set a "natural" content size for this
+ element, so that flex can always shrink/enlarge it as needed */
min-width: 0; /* Avoid overlapping when screen width is very small */
}
@@ -141,3 +158,19 @@
stroke: white;
fill: none;
}
+
+/* Full screen trigger */
+.xowiki-chat-trigger-fs-block {
+ min-width: 0; /* Avoid overlapping when screen width is very small */
+}
+
+.xowiki-chat-trigger-fs-pic {
+ width: 40px;
+ height: 40px;
+ fill: #b3b3b3;
+}
+
+.xowiki-chat-trigger-fs-pic:hover {
+ background-color: white;
+ border: 1px solid white;
+}
Index: openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.js,v
diff -u -r1.1.2.1 -r1.1.2.2
--- openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.js 8 Apr 2020 13:34:39 -0000 1.1.2.1
+++ openacs-4/packages/xowiki/www/resources/chat-skins/chat-minimal.js 7 Mar 2023 16:26:04 -0000 1.1.2.2
@@ -3,6 +3,48 @@
var previous_user_id = "";
var current_color = "";
+// Full screen
+function addFullScreenLink() {
+
+ // Full screen trigger block
+ const triggerFSblock = document.createElement("div");
+ triggerFSblock.className = 'xowiki-chat-trigger-fs-block';
+
+ // Full screen trigger
+ const triggerFSlink = document.createElement("a");
+ triggerFSlink.className = 'xowiki-chat-trigger-fs-link';
+ triggerFSlink.setAttribute("href", "#");
+
+ // Trigger icon
+ var triggerFSoff = '';
+ var triggerFSon = '';
+ triggerFSlink.innerHTML = triggerFSon;
+
+ // Full screen when clicked
+ triggerFSlink.addEventListener("click", function(event) {
+ event.preventDefault();
+ var chat = document.getElementById('xowiki-chat');
+ var chatFS = document.getElementById('xowiki-chat-fs');
+ if (chat != null) {
+ chat.id = 'xowiki-chat-fs';
+ triggerFSlink.innerHTML = triggerFSoff;
+ document.body.style.overflow = "hidden";
+ } else if (chatFS != null) {
+ chatFS.id = 'xowiki-chat';
+ triggerFSlink.innerHTML = triggerFSon;
+ document.body.style.overflow = "scroll";
+ }
+ // Scroll down the messages
+ var messages = document.getElementById('xowiki-chat-messages');
+ messages.scrollTop = messages.scrollHeight;
+ });
+
+ // Add Full screen trigger to the chat
+ const formBlock = document.getElementById('xowiki-chat-messages-form-block');
+ triggerFSblock.appendChild(triggerFSlink);
+ formBlock.appendChild(triggerFSblock);
+}
+
// Send link pic
function addSendPic() {
@@ -20,14 +62,19 @@
var user = msg.user.replace(/\\'/g, "\"");
var message = createLink(msg.message);
var user_id = msg.user_id;
+ var my_user = document.getElementById('xowiki-my-user-id');
+ var my_user_id = chatGetMyUserId();
var color = msg.color;
- // Message block
message_block = document.createElement('div');
- message_block.className = 'xowiki-chat-message-block';
+ if (user_id != my_user_id) {
+ message_block.className = 'xowiki-chat-message-block';
+ } else {
+ message_block.className = 'xowiki-chat-message-block-me';
+ }
// User picture
- wrapper = document.createElement('div');
+ wrapper = document.createElement('span');
wrapper.className = 'xowiki-chat-user-pic-wrap';
if (show_avatar) {
img = document.createElement('img');
@@ -38,33 +85,51 @@
}
message_block.appendChild(wrapper);
- // Timestamp
- span = document.createElement('span');
- span.innerHTML = msg.timestamp.replace(/\[|\]/g, "");
- span.className = 'xowiki-chat-timestamp';
- message_block.appendChild(span);
-
// User block
- user_block = document.createElement('div');
+ user_block = document.createElement('span');
user_block.className = 'xowiki-chat-user-block';
+ // User link
+ a = document.createElement('a');
+ if (user_id != my_user_id) {
+ a.href = '/shared/community-member?user%5fid=' + user_id;
+ } else {
+ a.href = '/pvt/home';
+ }
+ a.target = '_blank';
+ a.className = 'xowiki-chat-user-link';
+
// User name
span = document.createElement('span');
span.textContent = user;
span.setAttribute("class", "xowiki-chat-user");
span.setAttribute("style", "color:" + color);
- user_block.appendChild(span);
+ a.appendChild(span);
+ user_block.appendChild(a);
previous_user_id = user_id;
current_color = color;
message_block.appendChild(user_block);
+ // Timestamp
+ span = document.createElement('span');
+ span.innerHTML = msg.timestamp + ' ';
+ if (user_id != my_user_id) {
+ span.className = 'xowiki-chat-timestamp';
+ } else {
+ span.className = 'xowiki-chat-timestamp-me';
+ }
+ message_block.appendChild(span);
+
// Message body
span = document.createElement('span');
span.innerHTML = message;
- span.className = 'xowiki-chat-message';
+ if (user_id != my_user_id) {
+ span.className = 'xowiki-chat-message';
+ } else {
+ span.className = 'xowiki-chat-message-me';
+ }
message_block.appendChild(span);
-
messages.appendChild(message_block);
messages.scrollTop = messages.scrollHeight;