Skip to content

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

Start using BEM to structure messages Sass/CSS 

updates #421
parent 25f9e5ad
Show whitespace changes
Inline Side-by-side
Showing with 360 additions and 250 deletions
css/converse.css
View file @ b751c066
...@@ -8847,7 +8847,7 @@ body.reset { ...@@ -8847,7 +8847,7 @@ body.reset {
width: auto; width: auto;
max-height: 15em; max-height: 15em;
max-width: 100%; } max-width: 100%; }
#conversejs .message.chat-action { #conversejs .message.chat-msg--action {
font-style: italic; } font-style: italic; }
#conversejs .message.chat-msg { #conversejs .message.chat-msg {
display: flex; display: flex;
...@@ -8859,8 +8859,8 @@ body.reset { ...@@ -8859,8 +8859,8 @@ body.reset {
-webkit-animation: colorchange-chatmessage 1s; } -webkit-animation: colorchange-chatmessage 1s; }
#conversejs .message.chat-msg:hover { #conversejs .message.chat-msg:hover {
background-color: rgba(0, 0, 0, 0.035); } background-color: rgba(0, 0, 0, 0.035); }
#conversejs .message.chat-msg:hover .chat-msg-actions .chat-msg-action { #conversejs .message.chat-msg:hover .chat-msg__actions .chat-msg__action {
display: block; } opacity: 1; }
#conversejs .message.chat-msg.correcting.groupchat { #conversejs .message.chat-msg.correcting.groupchat {
background-color: #fdf1ee; } background-color: #fdf1ee; }
#conversejs .message.chat-msg.correcting:not(.groupchat) { #conversejs .message.chat-msg.correcting:not(.groupchat) {
...@@ -8877,20 +8877,34 @@ body.reset { ...@@ -8877,20 +8877,34 @@ body.reset {
#conversejs .message.chat-msg .spoiler-toggle:before { #conversejs .message.chat-msg .spoiler-toggle:before {
padding-right: 0.25em; padding-right: 0.25em;
whitespace: nowrap; } 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; margin-left: 0.5rem;
width: 100%; } 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 { #conversejs .message.chat-msg .chat-msg-edited {
cursor: pointer; } cursor: pointer; }
#conversejs .message.chat-msg.headline .chat-msg-content { #conversejs .message.chat-msg.headline .chat-msg__body {
margin-left: 0; } margin-left: 0; }
#conversejs .message.chat-msg .chat-msg-text { #conversejs .message.chat-msg .chat-msg__text {
padding: 0; padding: 0;
color: #555; } color: #555;
#conversejs .message.chat-msg .chat-msg-text a { width: 100%; }
#conversejs .message.chat-msg .chat-msg__text a {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; } word-break: break-all; }
#conversejs .message.chat-msg .chat-msg-text .emojione { #conversejs .message.chat-msg .chat-msg__text .emojione {
margin-bottom: -6px; } margin-bottom: -6px; }
#conversejs .message.chat-msg .chat-msg-media { #conversejs .message.chat-msg .chat-msg-media {
margin-top: 0.25rem; } margin-top: 0.25rem; }
...@@ -8898,45 +8912,49 @@ body.reset { ...@@ -8898,45 +8912,49 @@ body.reset {
word-wrap: break-word; } word-wrap: break-word; }
#conversejs .message.chat-msg .chat-msg-media audio { #conversejs .message.chat-msg .chat-msg-media audio {
width: 100%; } width: 100%; }
#conversejs .message.chat-msg .chat-msg-actions .chat-msg-action { #conversejs .message.chat-msg .chat-msg__actions .chat-msg__action {
height: 14px; height: 14px;
font-size: 14px; font-size: 14px;
padding: 0; padding: 0;
border: none; border: none;
display: none; opacity: 0;
background: transparent; background: transparent;
cursor: pointer; } 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; } display: block; }
#conversejs .message.chat-msg .avatar { #conversejs .message.chat-msg .chat-msg__avatar {
margin-top: 0.5em; margin-top: 0.5em;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
width: 36px; } width: 36px; }
#conversejs .message.chat-msg .chat-msg-heading { #conversejs .message.chat-msg .chat-msg__heading {
width: 100%;
margin-top: 0.5em; margin-top: 0.5em;
padding-right: 0.25rem; padding-right: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; } 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-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
font-size: 115%; } 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-size: 80%;
font-family: "Helvetica", "Arial", sans-serif; } 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; padding-left: 0.25em;
color: #8c8c8c; } color: #8c8c8c; }
#conversejs .message.chat-msg.chat-action { #conversejs .message.chat-msg.chat-msg--action .chat-msg__content {
display: block; } flex-direction: row;
#conversejs .message.chat-msg.chat-action .chat-msg-heading { justify-content: flex-start; }
float: left; #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; margin-top: 0;
padding-bottom: 0; } padding-bottom: 0;
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading, width: auto; }
#conversejs .message.chat-msg.chat-msg-followup .avatar { #conversejs .message.chat-msg.chat-msg--followup .chat-msg__heading,
#conversejs .message.chat-msg.chat-msg--followup .chat-msg__avatar {
display: none; } 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; } margin-left: 2.75rem; }
#conversejs .chatroom-body .message.onload { #conversejs .chatroom-body .message.onload {
animation: colorchange-chatmessage-muc 1s; animation: colorchange-chatmessage-muc 1s;
...@@ -8944,11 +8962,11 @@ body.reset { ...@@ -8944,11 +8962,11 @@ body.reset {
#conversejs .chatroom-body .message .separator { #conversejs .chatroom-body .message .separator {
border: 0.5px solid #E77051; } 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; } margin-left: 0; }
@media screen and (max-width: 767px) { @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; } } white-space: normal; } }
#conversejs.converse-overlayed #minimized-chats { #conversejs.converse-overlayed #minimized-chats {
order: 100; order: 100;
......
dist/converse.js
View file @ b751c066
...@@ -71100,7 +71100,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_ ...@@ -71100,7 +71100,13 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
let jid = form_data.get('jid'); let jid = form_data.get('jid');
if (_converse.locked_domain) { 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, '@')) { } else if (_converse.default_domain && !_.includes(jid, '@')) {
jid = jid + '@' + _converse.default_domain; jid = jid + '@' + _converse.default_domain;
} }
mockup/chatbox.html
View file @ b751c066
...@@ -42,18 +42,22 @@ ...@@ -42,18 +42,22 @@
<div class="message chat-info chat-error">This is an error message</div> <div class="message chat-info chat-error">This is an error message</div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </span>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
He jests at scars that never felt a wound. He jests at scars that never felt a wound.
</span> </span>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
...@@ -63,71 +67,87 @@ ...@@ -63,71 +67,87 @@
</div> </div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </span>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
But soft, what light through yonder window breaks? But soft, what light through yonder window breaks?
</span> </span>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </span>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
It is the east and Juliet is the sun! It is the east and Juliet is the sun!
</span> </span>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg-followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar chat-msg__avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </span>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
Arise, fair sun, and kill the envious moon, Arise, fair sun, and kill the envious moon,
</span> </span>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-info chat-event">Romeo Montague is busy</div> <div class="message chat-info chat-event">Romeo Montague is busy</div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas> <canvas height="36" width="36" class="avatar chat-msg__avatar"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Juliet Capulet</span> <span class="chat-msg__author">Juliet Capulet</span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </span>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
O Romeo, Romeo! wherefore art thou Romeo? O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name; Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love, Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet. And I'll no longer be a Capulet.
</span> </span>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
</div> </div>
......
mockup/chatroom.html
View file @ b751c066
...@@ -44,24 +44,28 @@ ...@@ -44,24 +44,28 @@
<div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;"> <div class="message chat-info chat-event" data-isodate="2018-04-36T18:07:36+02:00" data-join="&quot;Romeo Montague&quot;">
Romeo Montague has entered the room</div> Romeo Montague has entered the room</div>
<div class="message chat-msg chat-action" data-isodate="2018-04-36T18:07:38+02:00"> <div class="message chat-msg chat-msg--action" data-isodate="2018-04-36T18:07:38+02:00">
<span class="chat-msg-heading"> <div class="chat-msg__content">
<span class="chat-msg-author">**Romeo Montague</span> <span class="chat-msg__heading"><span class="chat-msg__author">**Romeo Montague</span></span>
</span> <span class="chat-msg__text">looks around</span>
<span class="chat-msg-text">looks around</span> </div>
</div> </div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <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__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague <span class="badge badge-primary">Developer</span></span> <span class="chat-msg__author">Romeo Montague <span class="badge badge-primary">Developer</span></span>
<span class="chat-msg-time">15:31</span> <span class="chat-msg__time">15:31</span>
</span> </div>
<span class="chat-msg-text">He jests at scars that never felt a wound.</span> <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">&nbsp;</button>
</div>
</div> </div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
...@@ -74,87 +78,105 @@ ...@@ -74,87 +78,105 @@
Juliet has entered the room</div> Juliet has entered the room</div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <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__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">19:36</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>
<div class="chat-msg-actions"> <div class="chat-msg__body">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> <div class="chat-msg__message">
<div class="chat-msg__text">But, soft! what light through yonder window breaks?</div>
</div> </div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</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">19:36</span>
</span>
<span class="chat-msg-text">It is the east, and Juliet is the sun.</span>
</div> </div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg--followup">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <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__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span> <span class="chat-msg__time">19:36</span>
</span> </div>
<span class="chat-msg-text">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span> <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">&nbsp;</button>
</div>
</div>
</div>
</div>
<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">&nbsp;</button>
</div>
</div> </div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas> <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Juliet Capulet</span> <span class="chat-msg__author">Juliet Capulet</span>
<span class="chat-msg-time">19:43</span> <span class="chat-msg__time">19:43</span>
</span> </div>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<div class="chat-msg__text">
O Romeo, Romeo! wherefore art thou Romeo? O Romeo, Romeo! wherefore art thou Romeo?
Deny thy father and refuse thy name; Deny thy father and refuse thy name;
Or, if thou wilt not, be but sworn my love, Or, if thou wilt not, be but sworn my love,
And I'll no longer be a Capulet. And I'll no longer be a Capulet.
</span>
<div class="chat-msg-media"></div>
</div> </div>
<div class="chat-msg-actions"> </div>
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> <div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas data-avatar="/mockup/images/romeo.jpg" height="36" width="36" class="avatar"></canvas> <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__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span> <span class="chat-msg__time">19:36</span>
</span> </div>
<span class="chat-msg-text">Uploading file: <strong>juliet.jpg</strong>, 120kb</span> <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"/> <progress value="50" max="100"/>
</div> </div>
</div>
</div>
</div> </div>
<div class="message chat-msg"> <div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas> <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Juliet Capulet</span> <span class="chat-msg__author">Juliet Capulet</span>
<span class="chat-msg-time">19:45</span> <span class="chat-msg__time">19:45</span>
</span> </div>
<span class="chat-msg-text"></span> <div class="chat-msg__body">
<div class="chat-msg__message">
<div class="chat-msg-media"> <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" <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"> target="_blank" rel="noopener">
...@@ -163,79 +185,97 @@ ...@@ -163,79 +185,97 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
<div class="message chat-msg" data-isodate="2018-04-36T18:07:36+02:00" data-msgid="some-long-id"> <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> <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__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Romeo Montague</span> <span class="chat-msg__author">Romeo Montague</span>
<span class="chat-msg-time">19:36</span> <span class="chat-msg__time">19:36</span>
</span> </span>
<div> <div class="chat-msg__body">
<div class="chat-msg__message">
<div class="chat-msg__spoiler-hint">
<span class="spoiler-hint">By a name</span> <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> <a class="badge badge-info spoiler-toggle" data-toggle-state="closed" href="#"><i class="fa fa-eye"></i>Show more</a>
</div> </div>
<div class="chat-msg-text spoiler collapsed"> <div class="chat-msg__text spoiler collapsed">
I know not how to tell thee who I am: My name, dear saint, is hateful to 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. myself, Because it is an enemy to thee. Had I it written, I would tear the word.
</div> </div>
<div class="chat-msg-media"></div>
</div> </div>
<div class="chat-msg-actions"> <div class="chat-msg__actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div> <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Mercutio has entered the room</div>
<div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">Topic set by Mercutio</div> <div class="message chat-info chat-event" data-isodate="2018-03-07T10:21:09+01:00" data-join="&quot;Mercutio&quot;">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 <div class="message chat-info chat-topic" data-isodate="2018-03-07T10:21:09+01:00">
patient if your questions aren't answered immediately. We're all in different timezones.</div> 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"> <div class="message chat-msg">
<canvas height="36" width="36" class="avatar"></canvas> <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Mercutio</span> <span class="chat-msg__author">Mercutio</span>
<span class="chat-msg-time">19:49</span> <span class="chat-msg__time">19:49</span>
</span> </div>
<span class="chat-msg-text">I mean, sir, in delay We waste our lights in vain, like lamps by day.</span> <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">&nbsp;</button>
</div>
</div> </div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg--followup">
<canvas height="36" width="36" class="avatar"></canvas> <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <div class="chat-msg__heading">
<span class="chat-msg-author">Mercutio</span> <span class="chat-msg__author">Mercutio</span>
<span class="chat-msg-time">19:49</span> <span class="chat-msg__time">19:49</span>
</span> </div>
<span class="chat-msg-text"> <div class="chat-msg__body">
<div class="chat-msg__message">
<span class="chat-msg__text">
Take our good meaning, for our judgment sits. Take our good meaning, for our judgment sits.
Five times in that ere once in our five wits.</span> Five times in that ere once in our five wits.</span>
</div> </div>
<div class="chat-msg-actions"> <div class="chat-msg__actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div> </div>
</div> </div>
<div class="message chat-msg chat-msg-followup"> <div class="message chat-msg chat-msg--followup">
<canvas height="36" width="36" class="avatar"></canvas> <canvas class="avatar chat-msg__avatar" height="36" width="36"></canvas>
<div class="chat-msg-content"> <div class="chat-msg__content">
<span class="chat-msg-heading"> <span class="chat-msg__heading">
<span class="chat-msg-author">Mercutio</span> <span class="chat-msg__author">Mercutio</span>
<span class="chat-msg-time">19:49</span> <span class="chat-msg__time">19:49</span>
</span> </span>
<span class="chat-msg-text"> <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, 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 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, 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> Turning his face to the dew-dropping south.</span>
</div> </div>
<div class="chat-msg-actions"> <div class="chat-msg__actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button> <button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div> </div>
</div> </div>
......
mockup/utils.js
View file @ b751c066
...@@ -3,7 +3,7 @@ const u = converse_utils; ...@@ -3,7 +3,7 @@ const u = converse_utils;
window.renderAvatars = function (el) { window.renderAvatars = function (el) {
el = el || document; el = el || document;
const canvasses = el.querySelectorAll('canvas.avatar'); const canvasses = el.querySelectorAll('canvas.chat-msg__avatar');
_.each(canvasses, (canvas_el) => { _.each(canvasses, (canvas_el) => {
const avatar_url = canvas_el.getAttribute('data-avatar'); const avatar_url = canvas_el.getAttribute('data-avatar');
if (!avatar_url) { if (!avatar_url) {
......
sass/_messages.scss
View file @ b751c066
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
max-height: 15em; max-height: 15em;
max-width: 100%; max-width: 100%;
} }
&.chat-action { &.chat-msg--action {
font-style: italic; font-style: italic;
} }
...@@ -72,10 +72,9 @@ ...@@ -72,10 +72,9 @@
} }
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.035); background-color: rgba(0, 0, 0, 0.035);
.chat-msg__actions {
.chat-msg-actions { .chat-msg__action {
.chat-msg-action { opacity: 1;
display: block;
} }
} }
} }
...@@ -105,22 +104,41 @@ ...@@ -105,22 +104,41 @@
whitespace: nowrap; whitespace: nowrap;
} }
} }
.chat-msg-content { .chat-msg__content {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
margin-left: 0.5rem; margin-left: 0.5rem;
width: 100%; 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 { .chat-msg-edited {
cursor: pointer; cursor: pointer;
} }
&.headline { &.headline {
.chat-msg-content { .chat-msg__body {
margin-left: 0; margin-left: 0;
} }
} }
.chat-msg-text { .chat-msg__text {
padding: 0; padding: 0;
color: $message-text-color; color: $message-text-color;
width: 100%;
a { a {
word-wrap: break-word; word-wrap: break-word;
word-break: break-all; word-break: break-all;
...@@ -140,13 +158,13 @@ ...@@ -140,13 +158,13 @@
} }
} }
.chat-msg-actions { .chat-msg__actions {
.chat-msg-action { .chat-msg__action {
height: $message-font-size; height: $message-font-size;
font-size: $message-font-size; font-size: $message-font-size;
padding: 0; padding: 0;
border: none; border: none;
display: none; opacity: 0;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
&:focus { &:focus {
...@@ -155,19 +173,21 @@ ...@@ -155,19 +173,21 @@
} }
} }
.avatar { .chat-msg__avatar {
margin-top: 0.5em; margin-top: 0.5em;
height: 36px; height: 36px;
vertical-align: middle; vertical-align: middle;
width: 36px; width: 36px;
} }
.chat-msg-heading {
.chat-msg__heading {
width: 100%;
margin-top: 0.5em; margin-top: 0.5em;
padding-right: 0.25rem; padding-right: 0.25rem;
padding-bottom: 0.25rem; padding-bottom: 0.25rem;
display: block; display: block;
.chat-msg-author { .chat-msg__author {
font-family: $heading-font; font-family: $heading-font;
font-size: 115%; font-size: 115%;
.badge { .badge {
...@@ -175,26 +195,32 @@ ...@@ -175,26 +195,32 @@
font-family: $normal_font; font-family: $normal_font;
} }
} }
.chat-msg-time { .chat-msg__time {
padding-left: 0.25em; padding-left: 0.25em;
color: lighten($text-color, 15%); color: lighten($text-color, 15%);
} }
} }
&.chat-action { &.chat-msg--action {
display: block; .chat-msg__content {
flex-direction: row;
.chat-msg-heading { justify-content: flex-start;
float: left; }
.chat-msg__text {
width: auto;
}
.chat-msg__heading {
margin-top: 0; margin-top: 0;
padding-bottom: 0; padding-bottom: 0;
width: auto;
} }
} }
&.chat-msg-followup {
.chat-msg-heading, &.chat-msg--followup {
.avatar { .chat-msg__heading,
.chat-msg__avatar {
display: none; display: none;
} }
.chat-msg-content { .chat-msg__content {
margin-left: 2.75rem; margin-left: 2.75rem;
} }
} }
...@@ -215,8 +241,8 @@ ...@@ -215,8 +241,8 @@
#conversejs.converse-overlayed { #conversejs.converse-overlayed {
.message { .message {
&.chat-msg { &.chat-msg {
&.chat-msg-followup { &.chat-msg--followup {
.chat-msg-content { .chat-msg__body {
margin-left: 0; margin-left: 0;
} }
} }
...@@ -228,7 +254,7 @@ ...@@ -228,7 +254,7 @@
#conversejs:not(.converse-embedded) { #conversejs:not(.converse-embedded) {
.message { .message {
&.chat-msg { &.chat-msg {
.chat-msg-author { .chat-msg__author {
white-space: normal; white-space: normal;
} }
} }
......
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