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 {
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;
#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; }
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading,
#conversejs .message.chat-msg.chat-msg-followup .avatar {
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;
......
dist/converse.js
View file @ b751c066
......@@ -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;
}
mockup/chatbox.html
View file @ b751c066
......@@ -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>
<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>
<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.
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</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>
<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>
<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?
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</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">15:31</span>
<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>
<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!
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</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">15:31</span>
<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>
<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,
</span>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</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-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>
<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>
<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?
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 class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
<div class="chat-msg__actions">
<button class="chat-msg__action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
</div>
......
mockup/chatroom.html
View file @ b751c066
......@@ -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;">
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>
<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">&nbsp;</button>
</div>
</div>
<div class="chat-msg-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
</div>
</div>
......@@ -74,87 +78,105 @@
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>
<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-actions">
<button class="chat-msg-action fa fa-pencil" title="Edit this message">&nbsp;</button>
<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">&nbsp;</button>
</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">&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">Arise, fair sun, and kill the envious moon, Who is already sick and pale with grief</span>
<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">&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 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">
<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">
<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.
</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">&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">
<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>
<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>
<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">
......@@ -163,79 +185,97 @@
</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>
<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">
<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">&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 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-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>
<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">&nbsp;</button>
</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 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">
<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">&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 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">
<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">&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>
......
mockup/utils.js
View file @ b751c066
......@@ -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) {
......
sass/_messages.scss
View file @ b751c066
......@@ -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;
}
}
......
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