Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Updates #984 Add color-fadein animation for messages

Browse Source
This commit is contained in:
JC Brand 2018-01-16 16:34:42 +01:00
parent 2cb4a36a6b
commit 8997af7890
10 changed files with 160 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
css/converse.css
View File

@ -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; }

60
css/inverse.css
View File

@ -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; }

8
sass/_chatbox.scss
View File

@ -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%);
}
}
}

4
sass/_chatrooms.scss
View File

@ -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;
}

32
sass/_core.scss
View File

@ -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));

2
sass/converse/_chatbox.scss
View File

@ -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;

2
sass/converse/_variables.scss
View File

@ -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;

2
sass/inverse/_chatbox.scss
View File

@ -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;
}

2
sass/inverse/_variables.scss
View File

@ -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;

3
src/converse-chatview.js
View File

@ -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': {}}))