Updates #984 Add color-fadein animation for messages
This commit is contained in:
parent
2cb4a36a6b
commit
8997af7890
|
@ -1155,6 +1155,50 @@
|
|||
-moz-user-select: none;
|
||||
-ms-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 {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
|
@ -1579,6 +1623,10 @@
|
|||
#converse-embedded-chat .chatbox .chat-body .chat-message,
|
||||
#conversejs .chatbox .chat-body .chat-message {
|
||||
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,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
font-weight: bold;
|
||||
|
@ -1588,7 +1636,7 @@
|
|||
overflow: hidden; }
|
||||
#converse-embedded-chat .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,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
|
||||
color: #578EA9; }
|
||||
|
@ -1601,10 +1649,10 @@
|
|||
margin-bottom: -6px; }
|
||||
#converse-embedded-chat .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,
|
||||
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
|
||||
color: #7EABBB; }
|
||||
color: #6899b2; }
|
||||
#converse-embedded-chat .chatbox .new-msgs-indicator,
|
||||
#conversejs .chatbox .new-msgs-indicator {
|
||||
position: absolute;
|
||||
|
@ -1856,7 +1904,7 @@
|
|||
border-top-right-radius: 0; } }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message,
|
||||
#conversejs .chatbox .chat-body .chat-message {
|
||||
margin: 0.3em;
|
||||
padding: 0.3em;
|
||||
line-height: 20px; }
|
||||
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
|
@ -2553,6 +2601,10 @@
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
|
||||
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,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
|
||||
color: #3AA569; }
|
||||
|
|
|
@ -1155,6 +1155,50 @@
|
|||
-moz-user-select: none;
|
||||
-ms-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 {
|
||||
0% {
|
||||
opacity: 0; }
|
||||
|
@ -1644,6 +1688,10 @@ body {
|
|||
#converse-embedded-chat .chatbox .chat-body .chat-message,
|
||||
#conversejs .chatbox .chat-body .chat-message {
|
||||
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,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
font-weight: bold;
|
||||
|
@ -1653,7 +1701,7 @@ body {
|
|||
overflow: hidden; }
|
||||
#converse-embedded-chat .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,
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-me {
|
||||
color: #578EA9; }
|
||||
|
@ -1666,10 +1714,10 @@ body {
|
|||
margin-bottom: -6px; }
|
||||
#converse-embedded-chat .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,
|
||||
#conversejs .chatbox .chat-body .delayed .chat-msg-me {
|
||||
color: #7EABBB; }
|
||||
color: #6899b2; }
|
||||
#converse-embedded-chat .chatbox .new-msgs-indicator,
|
||||
#conversejs .chatbox .new-msgs-indicator {
|
||||
position: absolute;
|
||||
|
@ -1941,7 +1989,7 @@ body {
|
|||
#conversejs .chatbox .chat-body .chat-message {
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
margin: 0.5em 0; }
|
||||
padding: 0.5em 0; }
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-author {
|
||||
line-height: 22px; }
|
||||
#conversejs .chatbox .chat-body .chat-message .chat-msg-content {
|
||||
|
@ -2716,6 +2764,10 @@ body {
|
|||
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
|
||||
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,
|
||||
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
|
||||
color: #3AA569; }
|
||||
|
|
|
@ -157,6 +157,10 @@
|
|||
font-style: italic;
|
||||
}
|
||||
.chat-message {
|
||||
&.onload {
|
||||
animation: colorchange-chatmessage 1s;
|
||||
-webkit-animation: colorchange-chatmessage 1s;
|
||||
}
|
||||
overflow: auto; // Ensures that content stays inside
|
||||
.chat-msg-author {
|
||||
font-weight: bold;
|
||||
|
@ -181,10 +185,10 @@
|
|||
}
|
||||
.delayed {
|
||||
.chat-msg-them {
|
||||
color: #FB5D50;
|
||||
color: lighten($message-them-color, 5%);
|
||||
}
|
||||
.chat-msg-me {
|
||||
color: #7EABBB;
|
||||
color: lighten($link-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -75,6 +75,10 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
.chat-message {
|
||||
&.onload {
|
||||
animation: colorchange-chatmessage-muc 1s;
|
||||
-webkit-animation: colorchange-chatmessage-muc 1s;
|
||||
}
|
||||
.chat-msg-them {
|
||||
color: $chatroom-message-them-color;
|
||||
}
|
||||
|
|
|
@ -60,6 +60,37 @@
|
|||
@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 {
|
||||
0% { opacity: 0 }
|
||||
100% { opacity: 1 }
|
||||
|
@ -95,6 +126,7 @@
|
|||
padding-right: 22px;
|
||||
}
|
||||
|
||||
|
||||
@include keyframes(spin) {
|
||||
from {
|
||||
@include transform(rotate(0deg));
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
.chatbox {
|
||||
.chat-body {
|
||||
.chat-message {
|
||||
margin: 0.3em;
|
||||
padding: 0.3em;
|
||||
line-height: $line-height-large;
|
||||
.chat-msg-author {
|
||||
line-height: $line-height-large;
|
||||
|
|
|
@ -52,7 +52,7 @@ $chat-textarea-height: 70px !default;
|
|||
$send-button-height: 27px !default;
|
||||
$send-button-margin: 3px !default;
|
||||
|
||||
$message-them-color: $red !default;
|
||||
$message-them-color: $green !default;
|
||||
|
||||
$emoji_height : 20px !default;
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
.chat-message {
|
||||
line-height: $line-height;
|
||||
font-size: $font-size-small;
|
||||
margin: 0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
.chat-msg-author {
|
||||
line-height: $line-height;
|
||||
}
|
||||
|
|
|
@ -51,7 +51,7 @@ $save-button-color: $green !default;
|
|||
$send-button-height: 27px !default;
|
||||
$send-button-margin: 3px !default;
|
||||
|
||||
$message-them-color: $red !default;
|
||||
$message-them-color: $green !default;
|
||||
|
||||
$emoji_height: 22px !default;
|
||||
$emoji-picker-height: 150px !default;
|
||||
|
|
|
@ -520,7 +520,7 @@
|
|||
},
|
||||
|
||||
getExtraMessageClasses (attrs) {
|
||||
return attrs.delayed && 'delayed' || '';
|
||||
return 'onload ' + (attrs.delayed && 'delayed' || '');
|
||||
},
|
||||
|
||||
renderMessage (attrs) {
|
||||
|
@ -562,6 +562,7 @@
|
|||
'extra_classes': this.getExtraMessageClasses(attrs)
|
||||
})
|
||||
));
|
||||
window.setTimeout(_.partial(u.removeClass, 'onload', msg), 2000);
|
||||
const msg_content = msg.querySelector('.chat-msg-content');
|
||||
msg_content.innerHTML = u.addEmoji(
|
||||
_converse, emojione, u.addHyperlinks(xss.filterXSS(text, {'whiteList': {}}))
|
||||
|
|
Loading…
Reference in New Issue
Block a user