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 {
line-height: 14px;
color: #3AA569;
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,
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;
......@@ -6181,6 +6184,7 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row;
flex-flow: nowrap;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: white;
......@@ -6190,9 +6194,12 @@ body.reset {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .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,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: white;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
......
css/inverse.css
View file @ 2db4550b
......@@ -5057,7 +5057,10 @@ body {
line-height: 20px;
color: #3AA569;
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,
#conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left;
......@@ -6013,6 +6016,7 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row;
flex-flow: nowrap;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
background-color: white;
......@@ -6022,9 +6026,12 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .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,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: white;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
......
mockup/chatbox.html
View file @ 2db4550b
......@@ -46,10 +46,8 @@
<div class="chat-body">
<div class="chat-content">
<div class="chat-info">
<span class="badge badge-info">This is an info message</span></div>
<div class="chat-info">
<span class="badge badge-danger">This is an error message</span></div>
<div class="message chat-info">This is an info message</div>
<div class="message chat-info chat-error">This is an error message</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">09:35&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
......@@ -80,9 +78,7 @@
</span>
<span class="chat-msg-content">Supercalifragilisticexpialidociousstillnotlongenough</span>
</div>
<div class="chat-info chat-event">
<span class="badge badge-success">JC Brand is busy</span>
</div>
<div class="message chat-info chat-event">JC Brand is busy</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-me">19:43&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
......
mockup/chatroom.html
View file @ 2db4550b
......@@ -37,7 +37,7 @@
</div>
<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-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
......@@ -53,7 +53,7 @@
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</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">
<span class="chat-msg-author chat-msg-room">19:40&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
......@@ -61,6 +61,13 @@
</span>
<span class="chat-msg-content">I'll be gone for a while, will be back in about an hour</span>
</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">
<span class="chat-msg-author chat-msg-me">19:42&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
......
sass/_chatbox.scss
View file @ 2db4550b
......@@ -173,7 +173,10 @@
line-height: $line-height-small;
color: $chat-head-color;
font-size: $font-size-small;
margin: 0.3em;
margin: 0.5em;
&.badge {
color: $chat-head-text-color;
}
&.chat-event {
clear: left;
font-style: italic;
......
sass/_chatrooms.scss
View file @ 2db4550b
......@@ -83,6 +83,7 @@
}
.chatroom-body {
flex-direction: row;
flex-flow: nowrap;
@include border-bottom-radius($chatbox-border-radius);
background-color: white;
border-top: 0;
......@@ -92,9 +93,11 @@
.row {
flex-direction: row;
}
.chat-topic {
font-weight: bold;
color: $chatroom-head-color;
}
.chat-info {
color: white;
line-height: normal;
}
.mentioned {
......
src/converse-muc-views.js
View file @ 2db4550b
......@@ -1795,6 +1795,7 @@
tpl_info({
'data': '',
'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message
}));
});
......@@ -1817,6 +1818,7 @@
tpl_info({
'data': `data-leavejoin="${nick}"`,
'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': __('%1$s has left and re-entered the room.', nick)
});
} else {
......@@ -1829,6 +1831,7 @@
const data = {
'data': `data-join="${nick}"`,
'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message
};
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
......@@ -1861,6 +1864,7 @@
tpl_info({
'data': `data-joinleave="${nick}"`,
'isodate': moment().format(),
'extra_classes': 'chat-event',
'message': message
});
} else {
......@@ -1873,6 +1877,7 @@
const data = {
'message': message,
'isodate': moment().format(),
'extra_classes': 'chat-event',
'data': `data-leave="${nick}"`
}
if (_.includes(_.get(last_el, 'classList', []), 'chat-info') &&
......@@ -2074,7 +2079,16 @@
tpl_info({
'data': '',
'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();
},
......
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="new-msgs-indicator hidden">▼ {{{ o.unread_msgs }}} ▼</div>
<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