JC Brand
parent
25f9e5ad7c
commit
b751c06694
|
|
@ -8847,7 +8847,7 @@ body.reset {
|
|||
width: auto;
|
||||
max-height: 15em;
|
||||
max-width: 100%; }
|
||||
#conversejs .message.chat-action {
|
||||
#conversejs .message.chat-msg--action {
|
||||
font-style: italic; }
|
||||
#conversejs .message.chat-msg {
|
||||
display: flex;
|
||||
|
|
@ -8859,8 +8859,8 @@ body.reset {
|
|||
-webkit-animation: colorchange-chatmessage 1s; }
|
||||
#conversejs .message.chat-msg:hover {
|
||||
background-color: rgba(0, 0, 0, 0.035); }
|
||||
#conversejs .message.chat-msg:hover .chat-msg-actions .chat-msg-action {
|
||||
display: block; }
|
||||
#conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
|
||||
opacity: 1; }
|
||||
#conversejs .message.chat-msg.correcting.groupchat {
|
||||
background-color: #fdf1ee; }
|
||||
#conversejs .message.chat-msg.correcting:not(.groupchat) {
|
||||
|
|
@ -8877,20 +8877,34 @@ body.reset {
|
|||
#conversejs .message.chat-msg .spoiler-toggle:before {
|
||||
padding-right: 0.25em;
|
||||
whitespace: nowrap; }
|
||||
#conversejs .message.chat-msg .chat-msg-content {
|
||||
#conversejs .message.chat-msg .chat-msg__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
margin-left: 0.5rem;
|
||||
width: 100%; }
|
||||
#conversejs .message.chat-msg .chat-msg__body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%; }
|
||||
#conversejs .message.chat-msg .chat-msg__message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%; }
|
||||
#conversejs .message.chat-msg .chat-msg-edited {
|
||||
cursor: pointer; }
|
||||
#conversejs .message.chat-msg.headline .chat-msg-content {
|
||||
#conversejs .message.chat-msg.headline .chat-msg__body {
|
||||
margin-left: 0; }
|
||||
#conversejs .message.chat-msg .chat-msg-text {
|
||||
#conversejs .message.chat-msg .chat-msg__text {
|
||||
padding: 0;
|
||||
color: #555; }
|
||||
#conversejs .message.chat-msg .chat-msg-text a {
|
||||
color: #555;
|
||||
width: 100%; }
|
||||
#conversejs .message.chat-msg .chat-msg__text a {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all; }
|
||||
#conversejs .message.chat-msg .chat-msg-text .emojione {
|
||||
#conversejs .message.chat-msg .chat-msg__text .emojione {
|
||||
margin-bottom: -6px; }
|
||||
#conversejs .message.chat-msg .chat-msg-media {
|
||||
margin-top: 0.25rem; }
|
||||
|
|
@ -8898,45 +8912,49 @@ body.reset {
|
|||
word-wrap: break-word; }
|
||||
#conversejs .message.chat-msg .chat-msg-media audio {
|
||||
width: 100%; }
|
||||
#conversejs .message.chat-msg .chat-msg-actions .chat-msg-action {
|
||||
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action {
|
||||
height: 14px;
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
background: transparent;
|
||||
cursor: pointer; }
|
||||
#conversejs .message.chat-msg .chat-msg-actions .chat-msg-action:focus {
|
||||
#conversejs .message.chat-msg .chat-msg__actions .chat-msg__action:focus {
|
||||
display: block; }
|
||||
#conversejs .message.chat-msg .avatar {
|
||||
#conversejs .message.chat-msg .chat-msg__avatar {
|
||||
margin-top: 0.5em;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
width: 36px; }
|
||||
#conversejs .message.chat-msg .chat-msg-heading {
|
||||
#conversejs .message.chat-msg .chat-msg__heading {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
padding-right: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
display: block; }
|
||||
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author {
|
||||
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author {
|
||||
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
|
||||
font-size: 115%; }
|
||||
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-author .badge {
|
||||
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__author .badge {
|
||||
font-size: 80%;
|
||||
font-family: "Helvetica", "Arial", sans-serif; }
|
||||
#conversejs .message.chat-msg .chat-msg-heading .chat-msg-time {
|
||||
#conversejs .message.chat-msg .chat-msg__heading .chat-msg__time {
|
||||
padding-left: 0.25em;
|
||||
color: #8c8c8c; }
|
||||
#conversejs .message.chat-msg.chat-action {
|
||||
display: block; }
|
||||
#conversejs .message.chat-msg.chat-action .chat-msg-heading {
|
||||
float: left;
|
||||
margin-top: 0;
|
||||
padding-bottom: 0; }
|
||||
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
|
||||
#conversejs .message.chat-msg.chat-msg-followup .avatar {
|
||||
#conversejs .message.chat-msg.chat-msg--action .chat-msg__content {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start; }
|
||||
#conversejs .message.chat-msg.chat-msg--action .chat-msg__text {
|
||||
width: auto; }
|
||||
#conversejs .message.chat-msg.chat-msg--action .chat-msg__heading {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
width: auto; }
|
||||
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__heading,
|
||||
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__avatar {
|
||||
display: none; }
|
||||
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-content {
|
||||
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__content {
|
||||
margin-left: 2.75rem; }
|
||||
#conversejs .chatroom-body .message.onload {
|
||||
animation: colorchange-chatmessage-muc 1s;
|
||||
|
|
@ -8944,11 +8962,11 @@ body.reset {
|
|||
#conversejs .chatroom-body .message .separator {
|
||||
border: 0.5px solid #E77051; }
|
||||
|
||||
#conversejs.converse-overlayed .message.chat-msg.chat-msg-followup .chat-msg-content {
|
||||
#conversejs.converse-overlayed .message.chat-msg.chat-msg--followup .chat-msg__body {
|
||||
margin-left: 0; }
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
|
||||
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg__author {
|
||||
white-space: normal; } }
|
||||
#conversejs.converse-overlayed #minimized-chats {
|
||||
order: 100;
|
||||
|
|
|
|||
8
dist/converse.js
vendored
8
dist/converse.js
vendored
|
|
@ -71100,7 +71100,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|||
let jid = form_data.get('jid');
|
||||
|
||||
if (_converse.locked_domain) {
|
||||
jid = Strophe.escapeNode(jid) + '@' + _converse.locked_domain;
|
||||
const last_part = '@' + _converse.locked_domain;
|
||||
|
||||
if (jid.endsWith(last_part)) {
|
||||
jid = jid.substr(0, jid.length - last_part.length);
|
||||
}
|
||||
|
||||
jid = Strophe.escapeNode(jid) + last_part;
|
||||
} else if (_converse.default_domain && !_.includes(jid, '@')) {
|
||||
jid = jid + '@' + _converse.default_domain;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,18 +42,22 @@
|
|||
<div class="message chat-info chat-error">This is an error message</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
He jests at scars that never felt a wound.
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
He jests at scars that never felt a wound.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -63,71 +67,87 @@
|
|||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
But soft, what light through yonder window breaks?
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
But soft, what light through yonder window breaks?
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
It is the east and Juliet is the sun!
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
It is the east and Juliet is the sun!
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
Arise, fair sun, and kill the envious moon,
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
Arise, fair sun, and kill the envious moon,
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event">Romeo Montague is busy</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Juliet Capulet</span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
O Romeo, Romeo! wherefore art thou Romeo?
|
||||
Deny thy father and refuse thy name;
|
||||
Or, if thou wilt not, be but sworn my love,
|
||||
And I'll no longer be a Capulet.
|
||||
<canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</span>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
O Romeo, Romeo! wherefore art thou Romeo?
|
||||
Deny thy father and refuse thy name;
|
||||
Or, if thou wilt not, be but sworn my love,
|
||||
And I'll no longer be a Capulet.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,24 +44,28 @@
|
|||
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join=""Romeo Montague"">
|
||||
Romeo Montague has entered the room</div>
|
||||
|
||||
<div class="message chat-msg chat-action" data-isodate="2018-04-36T18:07:38+02:00">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">**Romeo Montague</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">looks around</span>
|
||||
<div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading"><span class="chat-msg__author">**Romeo Montague</span></span>
|
||||
<span class="chat-msg__text">looks around</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
|
||||
<span class="chat-msg-time">15:31</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">He jests at scars that never felt a wound.</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
|
||||
<span class="chat-msg__time">15:31</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">He jests at scars that never felt a wound.</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -74,168 +78,204 @@
|
|||
Juliet has entered the room</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">19:36</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
But, soft! what light through yonder window breaks?
|
||||
</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">But, soft! what light through yonder window breaks?</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">19:36</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">It is the east, and Juliet is the sun.</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">19:36</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Juliet Capulet</span>
|
||||
<span class="chat-msg-time">19:43</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
O Romeo, Romeo! wherefore art thou Romeo?
|
||||
Deny thy father and refuse thy name;
|
||||
Or, if thou wilt not, be but sworn my love,
|
||||
And I'll no longer be a Capulet.
|
||||
</span>
|
||||
<div class="chat-msg-media"></div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">19:43</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__text">
|
||||
O Romeo, Romeo! wherefore art thou Romeo?
|
||||
Deny thy father and refuse thy name;
|
||||
Or, if thou wilt not, be but sworn my love,
|
||||
And I'll no longer be a Capulet.
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">19:36</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
|
||||
<progress value="50" max="100"/>
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span>
|
||||
<progress value="50" max="100"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Juliet Capulet</span>
|
||||
<span class="chat-msg-time">19:45</span>
|
||||
</span>
|
||||
<span class="chat-msg-text"></span>
|
||||
<div class="chat-msg-media">
|
||||
<a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
|
||||
target="_blank" rel="noopener">
|
||||
<img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb">
|
||||
</a>
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Juliet Capulet</span>
|
||||
<span class="chat-msg__time">19:45</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg-media">
|
||||
<a href="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb"
|
||||
target="_blank" rel="noopener">
|
||||
<img class="chat-image img-thumbnail" src="https://images.unsplash.com/photo-1496660067708-010ebdd7ce72?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=ea3514e6e00d8ce25c24d992b97929d9&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id">
|
||||
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Romeo Montague</span>
|
||||
<span class="chat-msg-time">19:36</span>
|
||||
<canvas class="avatar chat-msg__avatar" data-avatar="/mockup/images/romeo.jpg" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Romeo Montague</span>
|
||||
<span class="chat-msg__time">19:36</span>
|
||||
</span>
|
||||
<div>
|
||||
<span class="spoiler-hint">By a name</span>
|
||||
<a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<div class="chat-msg__spoiler-hint">
|
||||
<span class="spoiler-hint">By a name</span>
|
||||
<a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
|
||||
</div>
|
||||
<div class="chat-msg__text spoiler collapsed">
|
||||
I know not how to tell thee who I am: My name, dear saint, is hateful to
|
||||
myself, Because it is an enemy to thee. Had I it written, I would tear the word.
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-msg-text spoiler collapsed">
|
||||
I know not how to tell thee who I am: My name, dear saint, is hateful to
|
||||
myself, Because it is an enemy to thee. Had I it written, I would tear the word.
|
||||
</div>
|
||||
<div class="chat-msg-media"></div>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Mercutio has entered the room</div>
|
||||
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join=""Mercutio"">Topic set by Mercutio</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="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="message chat-msg">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time">19:49</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time">19:49</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
Take our good meaning, for our judgment sits.
|
||||
Five times in that ere once in our five wits.</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<div class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</div>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
Take our good meaning, for our judgment sits.
|
||||
Five times in that ere once in our five wits.</span>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="message chat-msg chat-msg-followup">
|
||||
<canvas height="36" width="36" class="avatar"></canvas>
|
||||
<div class="chat-msg-content">
|
||||
<span class="chat-msg-heading">
|
||||
<span class="chat-msg-author">Mercutio</span>
|
||||
<span class="chat-msg-time">19:49</span>
|
||||
<div class="message chat-msg chat-msg--followup">
|
||||
<canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
|
||||
<div class="chat-msg__content">
|
||||
<span class="chat-msg__heading">
|
||||
<span class="chat-msg__author">Mercutio</span>
|
||||
<span class="chat-msg__time">19:49</span>
|
||||
</span>
|
||||
<span class="chat-msg-text">
|
||||
True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
|
||||
Which is as thin of substance as the air And more inconstant than the wind, who wooes
|
||||
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
|
||||
Turning his face to the dew-dropping south.</span>
|
||||
</div>
|
||||
<div class="chat-msg-actions">
|
||||
<button class="chat-msg-action fa fa-pencil" title="Edit this message"> </button>
|
||||
<div class="chat-msg__body">
|
||||
<div class="chat-msg__message">
|
||||
<span class="chat-msg__text">
|
||||
True, I talk of dreams, Which are the children of an idle brain, Begot of nothing but vain fantasy,
|
||||
Which is as thin of substance as the air And more inconstant than the wind, who wooes
|
||||
Even now the frozen bosom of the north, And, being anger'd, puffs away from thence,
|
||||
Turning his face to the dew-dropping south.</span>
|
||||
</div>
|
||||
<div class="chat-msg__actions">
|
||||
<button class="chat-msg__action fa fa-pencil" title="Edit this message"> </button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ const u = converse_utils;
|
|||
|
||||
window.renderAvatars = function (el) {
|
||||
el = el || document;
|
||||
const canvasses = el.querySelectorAll('canvas.avatar');
|
||||
const canvasses = el.querySelectorAll('canvas.chat-msg__avatar');
|
||||
_.each(canvasses, (canvas_el) => {
|
||||
const avatar_url = canvas_el.getAttribute('data-avatar');
|
||||
if (!avatar_url) {
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
max-height: 15em;
|
||||
max-width: 100%;
|
||||
}
|
||||
&.chat-action {
|
||||
&.chat-msg--action {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -72,10 +72,9 @@
|
|||
}
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.035);
|
||||
|
||||
.chat-msg-actions {
|
||||
.chat-msg-action {
|
||||
display: block;
|
||||
.chat-msg__actions {
|
||||
.chat-msg__action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -105,22 +104,41 @@
|
|||
whitespace: nowrap;
|
||||
}
|
||||
}
|
||||
.chat-msg-content {
|
||||
.chat-msg__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
margin-left: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-msg__body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-msg__message {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-msg-edited {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.headline {
|
||||
.chat-msg-content {
|
||||
.chat-msg__body {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-msg-text {
|
||||
.chat-msg__text {
|
||||
padding: 0;
|
||||
color: $message-text-color;
|
||||
width: 100%;
|
||||
a {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
|
|
@ -140,13 +158,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.chat-msg-actions {
|
||||
.chat-msg-action {
|
||||
.chat-msg__actions {
|
||||
.chat-msg__action {
|
||||
height: $message-font-size;
|
||||
font-size: $message-font-size;
|
||||
padding: 0;
|
||||
border: none;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
&:focus {
|
||||
|
|
@ -155,19 +173,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
.chat-msg__avatar {
|
||||
margin-top: 0.5em;
|
||||
height: 36px;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
}
|
||||
.chat-msg-heading {
|
||||
|
||||
.chat-msg__heading {
|
||||
width: 100%;
|
||||
margin-top: 0.5em;
|
||||
padding-right: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
display: block;
|
||||
|
||||
.chat-msg-author {
|
||||
.chat-msg__author {
|
||||
font-family: $heading-font;
|
||||
font-size: 115%;
|
||||
.badge {
|
||||
|
|
@ -175,26 +195,32 @@
|
|||
font-family: $normal_font;
|
||||
}
|
||||
}
|
||||
.chat-msg-time {
|
||||
.chat-msg__time {
|
||||
padding-left: 0.25em;
|
||||
color: lighten($text-color, 15%);
|
||||
}
|
||||
}
|
||||
&.chat-action {
|
||||
display: block;
|
||||
|
||||
.chat-msg-heading {
|
||||
float: left;
|
||||
&.chat-msg--action {
|
||||
.chat-msg__content {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.chat-msg__text {
|
||||
width: auto;
|
||||
}
|
||||
.chat-msg__heading {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
&.chat-msg-followup {
|
||||
.chat-msg-heading,
|
||||
.avatar {
|
||||
|
||||
&.chat-msg--followup {
|
||||
.chat-msg__heading,
|
||||
.chat-msg__avatar {
|
||||
display: none;
|
||||
}
|
||||
.chat-msg-content {
|
||||
.chat-msg__content {
|
||||
margin-left: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -215,8 +241,8 @@
|
|||
#conversejs.converse-overlayed {
|
||||
.message {
|
||||
&.chat-msg {
|
||||
&.chat-msg-followup {
|
||||
.chat-msg-content {
|
||||
&.chat-msg--followup {
|
||||
.chat-msg__body {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -228,7 +254,7 @@
|
|||
#conversejs:not(.converse-embedded) {
|
||||
.message {
|
||||
&.chat-msg {
|
||||
.chat-msg-author {
|
||||
.chat-msg__author {
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user