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 Hide 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 {
margin-top: 0; width: auto; }
padding-bottom: 0; } #conversejs .message.chat-msg.chat-msg--action .chat-msg__heading {
#conversejs .message.chat-msg.chat-msg-followup .chat-msg-heading, margin-top: 0;
#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; } 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
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; ...@@ -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