Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Update chat events markup.

Browse Source
This commit is contained in:
JC Brand 2018-03-07 10:42:15 +01:00
parent 0d8d99b850
commit 2db4550b13
9 changed files with 56 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
css/converse.css
View File

@ -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 {

11
css/inverse.css
View File

@ -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 {

10
mockup/chatbox.html
View File

@ -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>

11
mockup/chatroom.html
View File

@ -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>

5
sass/_chatbox.scss
View File

@ -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;

7
sass/_chatrooms.scss
View File

@ -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 {

16
src/converse-muc-views.js
View File

@ -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();
},

2
src/templates/chatarea.html
View File

@ -1,4 +1,4 @@
<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">

2
src/templates/new_day.html
View File

@ -1 +1 @@
<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>