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
Expand all 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
This diff is collapsed.
mockup/chatroom.html
View file @ b751c066
This diff is collapsed.
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