Skip to content

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

Updates #984 Add color-fadein animation for messages

parent 2cb4a36a
Hide whitespace changes
Inline Side-by-side
Showing with 160 additions and 15 deletions
css/converse.css
View file @ 8997af78
...@@ -1155,6 +1155,50 @@ ...@@ -1155,6 +1155,50 @@
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; } user-select: none; }
@keyframes colorchange-chatmessage {
0% {
background-color: #8dd8ae; }
25% {
background-color: rgba(141, 216, 174, 0.75); }
50% {
background-color: rgba(141, 216, 174, 0.5); }
75% {
background-color: rgba(141, 216, 174, 0.25); }
100% {
background-color: transparent; } }
@-webkit-keyframes colorchange-chatmessage {
0% {
background-color: #8dd8ae; }
25% {
background-color: rgba(141, 216, 174, 0.75); }
50% {
background-color: rgba(141, 216, 174, 0.5); }
75% {
background-color: rgba(141, 216, 174, 0.25); }
100% {
background-color: transparent; } }
@keyframes colorchange-chatmessage-muc {
0% {
background-color: #ffb5a2; }
25% {
background-color: rgba(255, 181, 162, 0.75); }
50% {
background-color: rgba(255, 181, 162, 0.5); }
75% {
background-color: rgba(255, 181, 162, 0.25); }
100% {
background-color: transparent; } }
@-webkit-keyframes colorchange-chatmessage-muc {
0% {
background-color: #ffb5a2; }
25% {
background-color: rgba(255, 181, 162, 0.75); }
50% {
background-color: rgba(255, 181, 162, 0.5); }
75% {
background-color: rgba(255, 181, 162, 0.25); }
100% {
background-color: transparent; } }
@keyframes fadein { @keyframes fadein {
0% { 0% {
opacity: 0; } opacity: 0; }
...@@ -1579,6 +1623,10 @@ ...@@ -1579,6 +1623,10 @@
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
overflow: auto; } overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; font-weight: bold;
...@@ -1588,7 +1636,7 @@ ...@@ -1588,7 +1636,7 @@
overflow: hidden; } overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them { #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #E77051; } color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me { #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; } color: #578EA9; }
...@@ -1601,10 +1649,10 @@ ...@@ -1601,10 +1649,10 @@
margin-bottom: -6px; } margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; } color: #41b875; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
#conversejs .chatbox .chat-body .delayed .chat-msg-me { #conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #7EABBB; } color: #6899b2; }
#converse-embedded-chat .chatbox .new-msgs-indicator, #converse-embedded-chat .chatbox .new-msgs-indicator,
#conversejs .chatbox .new-msgs-indicator { #conversejs .chatbox .new-msgs-indicator {
position: absolute; position: absolute;
...@@ -1856,7 +1904,7 @@ ...@@ -1856,7 +1904,7 @@
border-top-right-radius: 0; } } border-top-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
margin: 0.3em; padding: 0.3em;
line-height: 20px; } line-height: 20px; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
...@@ -2553,6 +2601,10 @@ ...@@ -2553,6 +2601,10 @@
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them { #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; } color: #3AA569; }
......
css/inverse.css
View file @ 8997af78
...@@ -1155,6 +1155,50 @@ ...@@ -1155,6 +1155,50 @@
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
user-select: none; } user-select: none; }
@keyframes colorchange-chatmessage {
0% {
background-color: #8dd8ae; }
25% {
background-color: rgba(141, 216, 174, 0.75); }
50% {
background-color: rgba(141, 216, 174, 0.5); }
75% {
background-color: rgba(141, 216, 174, 0.25); }
100% {
background-color: transparent; } }
@-webkit-keyframes colorchange-chatmessage {
0% {
background-color: #8dd8ae; }
25% {
background-color: rgba(141, 216, 174, 0.75); }
50% {
background-color: rgba(141, 216, 174, 0.5); }
75% {
background-color: rgba(141, 216, 174, 0.25); }
100% {
background-color: transparent; } }
@keyframes colorchange-chatmessage-muc {
0% {
background-color: #ffb5a2; }
25% {
background-color: rgba(255, 181, 162, 0.75); }
50% {
background-color: rgba(255, 181, 162, 0.5); }
75% {
background-color: rgba(255, 181, 162, 0.25); }
100% {
background-color: transparent; } }
@-webkit-keyframes colorchange-chatmessage-muc {
0% {
background-color: #ffb5a2; }
25% {
background-color: rgba(255, 181, 162, 0.75); }
50% {
background-color: rgba(255, 181, 162, 0.5); }
75% {
background-color: rgba(255, 181, 162, 0.25); }
100% {
background-color: transparent; } }
@keyframes fadein { @keyframes fadein {
0% { 0% {
opacity: 0; } opacity: 0; }
...@@ -1644,6 +1688,10 @@ body { ...@@ -1644,6 +1688,10 @@ body {
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
overflow: auto; } overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; font-weight: bold;
...@@ -1653,7 +1701,7 @@ body { ...@@ -1653,7 +1701,7 @@ body {
overflow: hidden; } overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them { #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #E77051; } color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me, #converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me { #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; } color: #578EA9; }
...@@ -1666,10 +1714,10 @@ body { ...@@ -1666,10 +1714,10 @@ body {
margin-bottom: -6px; } margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; } color: #41b875; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
#conversejs .chatbox .chat-body .delayed .chat-msg-me { #conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #7EABBB; } color: #6899b2; }
#converse-embedded-chat .chatbox .new-msgs-indicator, #converse-embedded-chat .chatbox .new-msgs-indicator,
#conversejs .chatbox .new-msgs-indicator { #conversejs .chatbox .new-msgs-indicator {
position: absolute; position: absolute;
...@@ -1941,7 +1989,7 @@ body { ...@@ -1941,7 +1989,7 @@ body {
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
margin: 0.5em 0; } padding: 0.5em 0; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 22px; } line-height: 22px; }
#conversejs .chatbox .chat-body .chat-message .chat-msg-content { #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
...@@ -2716,6 +2764,10 @@ body { ...@@ -2716,6 +2764,10 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them { #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; } color: #3AA569; }
......
sass/_chatbox.scss
View file @ 8997af78
...@@ -157,6 +157,10 @@ ...@@ -157,6 +157,10 @@
font-style: italic; font-style: italic;
} }
.chat-message { .chat-message {
&.onload {
animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s;
}
overflow: auto; // Ensures that content stays inside overflow: auto; // Ensures that content stays inside
.chat-msg-author { .chat-msg-author {
font-weight: bold; font-weight: bold;
...@@ -181,10 +185,10 @@ ...@@ -181,10 +185,10 @@
} }
.delayed { .delayed {
.chat-msg-them { .chat-msg-them {
color: #FB5D50; color: lighten($message-them-color, 5%);
} }
.chat-msg-me { .chat-msg-me {
color: #7EABBB; color: lighten($link-color, 5%);
} }
} }
} }
......
sass/_chatrooms.scss
View file @ 8997af78
...@@ -75,6 +75,10 @@ ...@@ -75,6 +75,10 @@
font-weight: bold; font-weight: bold;
} }
.chat-message { .chat-message {
&.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s;
}
.chat-msg-them { .chat-msg-them {
color: $chatroom-message-them-color; color: $chatroom-message-them-color;
} }
......
sass/_core.scss
View file @ 8997af78
...@@ -60,6 +60,37 @@ ...@@ -60,6 +60,37 @@
@include user-select(none); @include user-select(none);
} }
@keyframes colorchange-chatmessage {
0% {background-color: rgba(141, 216, 174, 1);}
25% {background-color: rgba(141, 216, 174, 0.75);}
50% {background-color: rgba(141, 216, 174, 0.5);}
75% {background-color: rgba(141, 216, 174, 0.25);}
100% {background-color: transparent;}
}
@-webkit-keyframes colorchange-chatmessage {
0% {background-color: rgba(141, 216, 174, 1);}
25% {background-color: rgba(141, 216, 174, 0.75);}
50% {background-color: rgba(141, 216, 174, 0.5);}
75% {background-color: rgba(141, 216, 174, 0.25);}
100% {background-color: transparent;}
}
@keyframes colorchange-chatmessage-muc {
0% {background-color: rgba(255, 181, 162, 1);}
25% {background-color: rgba(255, 181, 162, 0.75);}
50% {background-color: rgba(255, 181, 162, 0.5);}
75% {background-color: rgba(255, 181, 162, 0.25);}
100% {background-color: transparent;}
}
@-webkit-keyframes colorchange-chatmessage-muc {
0% {background-color: rgba(255, 181, 162, 1);}
25% {background-color: rgba(255, 181, 162, 0.75);}
50% {background-color: rgba(255, 181, 162, 0.5);}
75% {background-color: rgba(255, 181, 162, 0.25);}
100% {background-color: transparent;}
}
@keyframes fadein { @keyframes fadein {
0% { opacity: 0 } 0% { opacity: 0 }
100% { opacity: 1 } 100% { opacity: 1 }
...@@ -95,6 +126,7 @@ ...@@ -95,6 +126,7 @@
padding-right: 22px; padding-right: 22px;
} }
@include keyframes(spin) { @include keyframes(spin) {
from { from {
@include transform(rotate(0deg)); @include transform(rotate(0deg));
......
sass/converse/_chatbox.scss
View file @ 8997af78
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
.chatbox { .chatbox {
.chat-body { .chat-body {
.chat-message { .chat-message {
margin: 0.3em; padding: 0.3em;
line-height: $line-height-large; line-height: $line-height-large;
.chat-msg-author { .chat-msg-author {
line-height: $line-height-large; line-height: $line-height-large;
......
sass/converse/_variables.scss
View file @ 8997af78
...@@ -52,7 +52,7 @@ $chat-textarea-height: 70px !default; ...@@ -52,7 +52,7 @@ $chat-textarea-height: 70px !default;
$send-button-height: 27px !default; $send-button-height: 27px !default;
$send-button-margin: 3px !default; $send-button-margin: 3px !default;
$message-them-color: $red !default; $message-them-color: $green !default;
$emoji_height : 20px !default; $emoji_height : 20px !default;
......
sass/inverse/_chatbox.scss
View file @ 8997af78
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
.chat-message { .chat-message {
line-height: $line-height; line-height: $line-height;
font-size: $font-size-small; font-size: $font-size-small;
margin: 0.5em 0; padding: 0.5em 0;
.chat-msg-author { .chat-msg-author {
line-height: $line-height; line-height: $line-height;
} }
......
sass/inverse/_variables.scss
View file @ 8997af78
...@@ -51,7 +51,7 @@ $save-button-color: $green !default; ...@@ -51,7 +51,7 @@ $save-button-color: $green !default;
$send-button-height: 27px !default; $send-button-height: 27px !default;
$send-button-margin: 3px !default; $send-button-margin: 3px !default;
$message-them-color: $red !default; $message-them-color: $green !default;
$emoji_height: 22px !default; $emoji_height: 22px !default;
$emoji-picker-height: 150px !default; $emoji-picker-height: 150px !default;
......
src/converse-chatview.js
View file @ 8997af78
...@@ -520,7 +520,7 @@ ...@@ -520,7 +520,7 @@
}, },
getExtraMessageClasses (attrs) { getExtraMessageClasses (attrs) {
return attrs.delayed && 'delayed' || ''; return 'onload ' + (attrs.delayed && 'delayed' || '');
}, },
renderMessage (attrs) { renderMessage (attrs) {
...@@ -562,6 +562,7 @@ ...@@ -562,6 +562,7 @@
'extra_classes': this.getExtraMessageClasses(attrs) 'extra_classes': this.getExtraMessageClasses(attrs)
}) })
)); ));
window.setTimeout(_.partial(u.removeClass, 'onload', msg), 2000);
const msg_content = msg.querySelector('.chat-msg-content'); const msg_content = msg.querySelector('.chat-msg-content');
msg_content.innerHTML = u.addEmoji( msg_content.innerHTML = u.addEmoji(
_converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}})) _converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
......
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