Skip to content

C
converse.js
Commit 2db4550b authored by JC Brand's avatar JC Brand
Browse files
Options

Update chat events markup.

parent 0d8d99b8
Hide whitespace changes
Inline Side-by-side
Showing with 56 additions and 19 deletions
css/converse.css
View file @ 2db4550b
...@@ -5293,7 +5293,10 @@ body.reset { ...@@ -5293,7 +5293,10 @@ body.reset {
line-height: 14px; line-height: 14px;
color: #3AA569; color: #3AA569;
font-size: 12px; font-size: 12px;
margin: 0.3em; } margin: 0.5em; }
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event, #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; clear: left;
...@@ -6181,6 +6184,7 @@ body.reset { ...@@ -6181,6 +6184,7 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body, #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row; flex-direction: row;
flex-flow: nowrap;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
background-color: white; background-color: white;
...@@ -6190,9 +6194,12 @@ body.reset { ...@@ -6190,9 +6194,12 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .row { #conversejs .chatroom .box-flyout .chatroom-body .row {
flex-direction: row; } flex-direction: row; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
font-weight: bold;
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info { #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: white;
line-height: normal; } line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
......
css/inverse.css
View file @ 2db4550b
...@@ -5057,7 +5057,10 @@ body { ...@@ -5057,7 +5057,10 @@ body {
line-height: 20px; line-height: 20px;
color: #3AA569; color: #3AA569;
font-size: 14px; font-size: 14px;
margin: 0.3em; } margin: 0.5em; }
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event, #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; clear: left;
...@@ -6013,6 +6016,7 @@ body { ...@@ -6013,6 +6016,7 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body, #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row; flex-direction: row;
flex-flow: nowrap;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
background-color: white; background-color: white;
...@@ -6022,9 +6026,12 @@ body { ...@@ -6022,9 +6026,12 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .row { #conversejs .chatroom .box-flyout .chatroom-body .row {
flex-direction: row; } flex-direction: row; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
font-weight: bold;
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info { #conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: white;
line-height: normal; } line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
......
mockup/chatbox.html
View file @ 2db4550b
...@@ -46,10 +46,8 @@ ...@@ -46,10 +46,8 @@
<div class="chat-body"> <div class="chat-body">
<div class="chat-content"> <div class="chat-content">
<div class="chat-info"> <div class="message chat-info">This is an info message</div>
<span class="badge badge-info">This is an info message</span></div> <div class="message chat-info chat-error">This is an error message</div>
<div class="chat-info">
<span class="badge badge-danger">This is an error message</span></div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-author chat-msg-me">09:35&nbsp; <span class="chat-msg-author chat-msg-me">09:35&nbsp;
<canvas height="24" width="24" class="avatar"></canvas> <canvas height="24" width="24" class="avatar"></canvas>
...@@ -80,9 +78,7 @@ ...@@ -80,9 +78,7 @@
</span> </span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span> <span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div> </div>
<div class="chat-info chat-event"> <div class="message chat-info chat-event">JC Brand is busy</div>
<span class="badge badge-success">JC Brand is busy</span>
</div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp; <span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas> <canvas height="24" width="24" class="avatar"></canvas>
......
mockup/chatroom.html
View file @ 2db4550b
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
</div> </div>
<div class="chat-body chatroom-body row no-gutters"> <div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col"> <div class="chat-area col-md-9 col-8">
<div class="chat-content"> <div class="chat-content">
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp; <span class="chat-msg-author chat-msg-room">18:50&nbsp;
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</span> </span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span> <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<time class="chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time> <time class="message chat-info badge badge-info" datetime="2013-06-04T00:00:00.000Z">Tue Jun 04 2013</time>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-author chat-msg-room">19:40&nbsp; <span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas> <canvas height="24" width="24" class="avatar"></canvas>
...@@ -61,6 +61,13 @@ ...@@ -61,6 +61,13 @@
</span> </span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span> <span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</div> </div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">jcbrand has entered the room.</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;jcbrand&quot;">Topic set by jcbrand</div>
<div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">Converse.js: The latest release is 3.3.4. Please be
patient if your questions aren't answered immediately. We're all in different timezones.</div>
<div class="chat-message"> <div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:42&nbsp; <span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas> <canvas height="24" width="24" class="avatar"></canvas>
......
sass/_chatbox.scss
View file @ 2db4550b
...@@ -173,7 +173,10 @@ ...@@ -173,7 +173,10 @@
line-height: $line-height-small; line-height: $line-height-small;
color: $chat-head-color; color: $chat-head-color;
font-size: $font-size-small; font-size: $font-size-small;
margin: 0.3em; margin: 0.5em;
&.badge {
color: $chat-head-text-color;
}
&.chat-event { &.chat-event {
clear: left; clear: left;
font-style: italic; font-style: italic;
......
sass/_chatrooms.scss
View file @ 2db4550b
...@@ -83,6 +83,7 @@ ...@@ -83,6 +83,7 @@
} }
.chatroom-body { .chatroom-body {
flex-direction: row; flex-direction: row;
flex-flow: nowrap;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
background-color: white; background-color: white;
border-top: 0; border-top: 0;
...@@ -92,9 +93,11 @@ ...@@ -92,9 +93,11 @@
.row { .row {
flex-direction: row; flex-direction: row;
} }
.chat-topic {
font-weight: bold;
color: $chatroom-head-color;
}
.chat-info { .chat-info {
color: white;
line-height: normal; line-height: normal;
} }
.mentioned { .mentioned {
......
src/converse-muc-views.js
View file @ 2db4550b
...@@ -1795,6 +1795,7 @@ ...@@ -1795,6 +1795,7 @@
tpl_info({ tpl_info({
'data': '', 'data': '',
'isodate': moment().format(), 'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message 'message': message
})); }));
}); });
...@@ -1817,6 +1818,7 @@ ...@@ -1817,6 +1818,7 @@
tpl_info({ tpl_info({
'data': `data-leavejoin="${nick}"`, 'data': `data-leavejoin="${nick}"`,
'isodate': moment().format(), 'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': __('%1$s has left and re-entered the room.', nick) 'message': __('%1$s has left and re-entered the room.', nick)
}); });
} else { } else {
...@@ -1829,6 +1831,7 @@ ...@@ -1829,6 +1831,7 @@
const data = { const data = {
'data': `data-join="${nick}"`, 'data': `data-join="${nick}"`,
'isodate': moment().format(), 'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message 'message': message
}; };
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') && if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
...@@ -1861,6 +1864,7 @@ ...@@ -1861,6 +1864,7 @@
tpl_info({ tpl_info({
'data': `data-joinleave="${nick}"`, 'data': `data-joinleave="${nick}"`,
'isodate': moment().format(), 'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message 'message': message
}); });
} else { } else {
...@@ -1873,6 +1877,7 @@ ...@@ -1873,6 +1877,7 @@
const data = { const data = {
'message': message, 'message': message,
'isodate': moment().format(), 'isodate': moment().format(),
'extra_classes': 'chat-event',
'data': `data-leave="${nick}"` 'data': `data-leave="${nick}"`
} }
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') && if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
...@@ -2074,7 +2079,16 @@ ...@@ -2074,7 +2079,16 @@
tpl_info({ tpl_info({
'data': '', 'data': '',
'isodate': moment().format(), 'isodate': moment().format(),
'message': __('Topic set by %1$s to: %2$s', sender, subject) 'extra_classes': 'chat-event',
'message': __('Topic set by %1$s', sender)
}));
this.content.insertAdjacentHTML(
'beforeend',
tpl_info({
'data': '',
'isodate': moment().format(),
'extra_classes': 'chat-topic',
'message': subject
})); }));
this.scrollDown(); this.scrollDown();
}, },
......
src/templates/chatarea.html
View file @ 2db4550b
<div class="chat-area col"> <div class="chat-area col-md-9 col-8">
<div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div> <div class="chat-content {[ if (o.show_send_button) { ]}chat-content-sendbutton{[ } ]}"></div>
<div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div> <div class="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
<form class="sendXMPPMessage"> <form class="sendXMPPMessage">
......
src/templates/new_day.html
View file @ 2db4550b
<time class="message chat-info chat-date" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time> <time class="message chat-info chat-date badge badge-info" data-isodate="{{{o.isodate}}}">{{{o.datestring}}}</time>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7