Updates #984 Add color-fadein animation for messages

css/converse.css

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

css/inverse.css

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

sass/_chatbox.scss

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

sass/_chatrooms.scss

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

sass/_core.scss

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

sass/converse/_chatbox.scss

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

sass/converse/_variables.scss

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

sass/inverse/_chatbox.scss

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

sass/inverse/_variables.scss

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

src/converse-chatview.js

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