Index: openacs-4/packages/chat/www/chat.adp
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/chat/www/chat.adp,v
diff -u -r1.1 -r1.2
--- openacs-4/packages/chat/www/chat.adp 28 Sep 2018 11:44:23 -0000 1.1
+++ openacs-4/packages/chat/www/chat.adp 9 Nov 2018 16:48:36 -0000 1.2
@@ -3,10 +3,14 @@
doc
ichat_form.msg
+@user_id@
+
@doc.title@
-#chat.Log_off#
-#chat.Transcript#
+ #chat.Log_off#
+ #chat.Transcript#
-@chat_frame;noquote@
+
+ @chat_frame;noquote@
+
Index: openacs-4/packages/chat/www/resources/chat.css
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/chat/www/resources/Attic/chat.css,v
diff -u -r1.7 -r1.8
--- openacs-4/packages/chat/www/resources/chat.css 29 Oct 2018 13:32:47 -0000 1.7
+++ openacs-4/packages/chat/www/resources/chat.css 9 Nov 2018 16:48:36 -0000 1.8
@@ -2,58 +2,151 @@
box-sizing: border-box;
}
+/* Chat container */
+#xowiki-chat-container {
+ height: 70vh;
+ width: 100%;
+}
+
+/* Users and messages container */
+#xowiki-chat {
+ height: 100%;
+ width: 100%;
+ margin-bottom: 1%;
+ overflow: hidden;
+ display: flex;
+ background-color: white;
+}
+
+/* Users block */
+#xowiki-chat-users {
+ border: 1px solid #ddd;
+ border-left: none;
+ overflow: auto;
+ order: 2;
+ display: flex;
+ flex-direction: column;
+ min-width: 240px;
+}
+
+#xowiki-chat-users .xowiki-chat-user-link {
+ text-decoration: none;
+}
+
+#xowiki-chat-users .xowiki-chat-user-block {
+ padding: 18px 10px 18px 16px;
+ border-bottom: 1px solid #ddd;
+}
+
+#xowiki-chat-users .xowiki-chat-user-block:hover {
+ background-color: rgb(235,235,235);
+}
+
+#xowiki-chat-users .xowiki-chat-user {
+ font-weight: bold;
+}
+
+#xowiki-chat-users .xowiki-chat-timestamp {
+ color: rgb(152,152,152);
+ float: right;
+ padding-left: 4px;
+}
+
+/* Messages block */
+#xowiki-chat-messages-and-form {
+ width: 100%;
+ border: 1px solid #ddd;
+ display: flex;
+ flex-direction: column;
+ order: 1;
+ justify-content: flex-end;
+}
+
#xowiki-chat-messages {
- width: 74%;
- height:100%;
- float: left;
padding: 10px;
- border: 1px solid #ddd;
- margin-right:1%;
+ height: 100%;
overflow: auto;
+ order: 1;
}
-#xowiki-chat-users {
- width: 25%;
- height:100%;
+#xowiki-chat-messages .xowiki-chat-user-block {
float: left;
+}
+
+#xowiki-chat-messages .xowiki-chat-user-block-me {
+ float: left;
+}
+
+#xowiki-chat-messages .xowiki-chat-user {
+ white-space: nowrap;
+}
+
+#xowiki-chat-messages .xowiki-chat-message {
padding: 10px;
- border: 1px solid #ddd;
- overflow: auto;
}
-/* Clear floats after the columns */
-#xowiki-chat {
- height: 70vh;
- width: 100%;
- margin-bottom: 1%;
- overflow: hidden;
+#xowiki-chat-messages .xowiki-chat-message-me {
+ padding: 10px;
}
-/* Clear floats after the columns */
-#xowiki-chat:after {
- content: "";
- display: table;
- clear: both;
- overflow: hidden;
+#xowiki-chat-messages .xowiki-chat-timestamp {
+ color: rgb(152,152,152);
+ float: right;
}
+#xowiki-chat-messages .xowiki-chat-timestamp-me {
+ /* color: yellow; */
+ color: rgb(152,152,152);
+ float: right;
+ /* font-size: 65%; */
+}
+
+/* Send form */
+#xowiki-chat-messages-form-block {
+ margin-left: 20px;
+ margin-right: 20px;
+ margin-top: 5px;
+ border-top: 1px solid #ddd;
+ padding: 10px 10px 10px 10px;
+ min-height: 80px;
+ display: flex;
+ align-items: center;
+ order: 2;
+}
+
+#xowiki-chat-messages-form {
+ width: 100%;
+}
+
#xowiki-chat-send {
+ /* font-size: 24px; */
+ height: 48px;
width: 100%;
+ padding-left: 10px;
+ border: 0;
+ outline: none;
+ background-color: #eceff1;
+ border-radius: 8px;
}
/* Responsive design */
-@media (max-width: 780px) {
+@media (max-width: 1000px) {
#xowiki-chat {
- display: flex;
flex-direction: column;
}
#xowiki-chat-users {
- width: 100%;
- height: 20%;
order: 1;
- margin-bottom: 1%;
+ border-left: 1px solid #ddd;
+ border-bottom: none;
+ flex-direction: row;
+ overflow-x: auto;
}
- #xowiki-chat-messages {
+ #xowiki-chat-users .xowiki-chat-user-block {
+ border-right: 1px solid #ddd;
+ border-bottom: none;
+ min-width: 240px;
+ }
+ #xowiki-chat-messages-and-form {
width: 100%;
height: 80%;
order: 2;
Index: openacs-4/packages/xotcl-core/tcl/chat-procs.tcl
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xotcl-core/tcl/Attic/chat-procs.tcl,v
diff -u -r1.38 -r1.39
--- openacs-4/packages/xotcl-core/tcl/chat-procs.tcl 6 Nov 2018 11:12:56 -0000 1.38
+++ openacs-4/packages/xotcl-core/tcl/chat-procs.tcl 9 Nov 2018 16:48:36 -0000 1.39
@@ -226,27 +226,17 @@
}
Chat instproc user_name { user_id } {
- set screen_name [acs_user::get_user_info -user_id $user_id -element screen_name]
- if {$screen_name eq ""} {
- set screen_name [person::name -person_id $user_id]
- }
- return $screen_name
- }
-
- Chat instproc user_link { -user_id -color } {
if {$user_id > 0} {
- set name [:user_name $user_id]
- set url "/shared/community-member?user%5fid=$user_id"
- if {![info exists color]} {
- set color [:user_color $user_id]
+ set screen_name [acs_user::get_user_info -user_id $user_id -element screen_name]
+ if {$screen_name eq ""} {
+ set screen_name [person::name -person_id $user_id]
}
- set creator "$name"
} elseif { $user_id == 0 } {
- set creator "Nobody"
+ set screen_name "Nobody"
} else {
- set creator "System"
+ set screen_name "System"
}
- return $creator
+ return $screen_name
}
Chat instproc urlencode {string} {ns_urlencode $string}
@@ -262,24 +252,25 @@
"message" {
set message [$msg msg]
set user_id [$msg user_id]
+ set user [:user_name $user_id]
set color [$msg color]
- set user [:user_link -user_id $user_id -color $color]
set timestamp [clock format [$msg time] -format {[%H:%M:%S]}]
- foreach var {message user timestamp} {
+ foreach var {message user timestamp color user_id} {
set $var [:json_encode [set $var]]
}
- return [subst {{"type": "$type", "message": "$message", "timestamp": "$timestamp", "user": "$user"}\n}]
+ return [subst {{"type": "$type", "message": "$message", "timestamp": "$timestamp", "user": "$user", "color": "$color", "user_id": "$user_id"}\n}]
}
"users" {
set message [list]
foreach {user_id timestamp} [:active_user_list] {
if {$user_id < 0} continue
set timestamp [clock format [expr {[clock seconds] - $timestamp}] -format "%H:%M:%S" -gmt 1]
- set user [:user_link -user_id $user_id]
- foreach var {user timestamp} {
+ set user [:user_name $user_id]
+ set color [:user_color $user_id]
+ foreach var {user timestamp color user_id} {
set $var [:json_encode [set $var]]
}
- lappend message [subst {{"timestamp": "$timestamp", "user": "$user"}}]
+ lappend message [subst {{"timestamp": "$timestamp", "user": "$user", "color": "$color", "user_id": "$user_id"}}]
}
set message "\[[join $message ,]\]"
return [subst {{"type": "$type", "chat_id": "[:chat_id]", "message": $message}\n}]
Index: openacs-4/packages/xowiki/tcl/chat-procs.tcl
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xowiki/tcl/chat-procs.tcl,v
diff -u -r1.35 -r1.36
--- openacs-4/packages/xowiki/tcl/chat-procs.tcl 25 Oct 2018 16:52:58 -0000 1.35
+++ openacs-4/packages/xowiki/tcl/chat-procs.tcl 9 Nov 2018 16:48:36 -0000 1.36
@@ -135,13 +135,17 @@
# the same page.
append html [subst {
-
}]
[self] create c1 \
Index: openacs-4/packages/xowiki/www/ajax/chat-common.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/xowiki/www/ajax/Attic/chat-common.js,v
diff -u -r1.3 -r1.4
--- openacs-4/packages/xowiki/www/ajax/chat-common.js 1 Oct 2018 14:10:29 -0000 1.3
+++ openacs-4/packages/xowiki/www/ajax/chat-common.js 9 Nov 2018 16:48:36 -0000 1.4
@@ -1,5 +1,16 @@
// Common xowiki chat functions, mainly for data rendering.
+var previous_user_id = "";
+var current_color = "";
+
+// Simple function to create links
+function createLink(text) {
+ var linkRegex = /(https?:\/\/[^\s]+)/g;
+ return text.replace(linkRegex, function(url) {
+ return '' + url + '';
+ })
+}
+
function renderData(json) {
if (json.type == "message") {
renderMessage(json);
@@ -10,24 +21,68 @@
function renderMessage(msg) {
var messages = document.getElementById('xowiki-chat-messages');
- p = document.createElement('p');
- span = document.createElement('span');
- span.innerHTML = msg.timestamp;
- span.className = 'xowiki-chat-timestamp';
- p.appendChild(span);
+ var user = msg.user.replace(/\\'/g, "\"");
+ var message = createLink(msg.message);
+ var user_id = msg.user_id;
+ var my_user = document.getElementById('my-user-id');
+ if (my_user == null) {
+ my_user_id = "";
+ } else {
+ my_user_id = my_user.innerText;
+ }
+ var color = msg.color;
+ // User block
+ user_block = document.createElement('div');
+ user_block.className = 'xowiki-chat-user-block';
+
+ // User link
+ a = document.createElement('a');
+ a.href = '/shared/community-member?user%5fid=' + user_id;
+ a.target = '_blank';
+ a.className = 'xowiki-chat-user-link';
+
+ // User name
span = document.createElement('span');
- var user = msg.user.replace(/\\'/g, "\"");
- span.innerHTML = ' ' + user + ': ';
+ span.innerHTML = user;
span.className = 'xowiki-chat-user';
- p.appendChild(span);
+ span.style = 'color:' + color;
+ a.appendChild(span);
+ user_block.appendChild(a);
+ previous_user_id = user_id;
+ current_color = color;
+ messages.appendChild(user_block);
+
+ message_block = document.createElement('div');
+ if (user_id != my_user_id) {
+ message_block.className = 'xowiki-chat-message-block';
+ } else {
+ message_block.className = 'xowiki-chat-message-block-me';
+ }
+
+ // Message body
span = document.createElement('span');
- span.innerHTML = msg.message;
- span.className = 'xowiki-chat-message';
- p.appendChild(span);
+ span.innerHTML = 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(p);
+ // 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);
+
+ messages.appendChild(message_block);
+
messages.scrollTop = messages.scrollHeight;
// IE will lose focus on message send
@@ -40,18 +95,35 @@
users.removeChild(users.firstChild);
}
for (var i = 0; i < msg.message.length; i++) {
- p = document.createElement('p');
+ var user = msg.message[i].user.replace(/\\'/g, "\"");
+ var user_id = msg.message[i].user_id;
+ var color = msg.message[i].color;
+
+ // User link
+ a = document.createElement('a');
+ a.href = '/shared/community-member?user%5fid=' + user_id;
+ a.target = '_blank';
+ a.className = 'xowiki-chat-user-link';
+
+ // User block
+ user_block = document.createElement('div');
+ user_block.className = 'xowiki-chat-user-block';
+ a.appendChild(user_block);
+
+ // User name
span = document.createElement('span');
+ span.innerHTML = user;
+ span.className = 'xowiki-chat-user';
+ span.style = 'color:' + color;
+ user_block.appendChild(span);
+
+ // Timestamp
+ span = document.createElement('span');
span.innerHTML = msg.message[i].timestamp;
span.className = 'xowiki-chat-timestamp';
- p.appendChild(span);
+ user_block.appendChild(span);
- span = document.createElement('span');
- var user = msg.message[i].user.replace(/\\'/g, "\"");
- span.innerHTML = ' ' + user + ' ';
- span.className = 'xowiki-chat-user';
- p.appendChild(span);
- users.appendChild(p);
+ users.appendChild(a);
}
}