css: add chat animation on opening

src/static/css/pad/chat.css

@@ -1,20 +1,38 @@
 #chaticon, #chatbox {
+  visibility: hidden;
   z-index: 400;
   position: absolute;
   bottom: 0px;
   right: 25px;
+}
+#chaticon.visible, #chatbox.visible {
+  visibility: visible;
+}
+#chaticon {
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
-  display: none;
   border: 1px solid #ccc;
   border-bottom: none;
 }
-#chatbox {
+.chat-content {
   width: 400px;
   height: 300px;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  display: flex;
+  border: 1px solid #ccc;
+  border-bottom: none;
   z-index: 401;
   background-color: #f7f7f7;
   flex-direction: column;
+  transition: all 0.3s cubic-bezier(0.74, -0.05, 0.27, 1.75);
+  opacity: .3;
+  transform: scale(.5);
+  transform-origin: 100% 100%
+}
+#chatbox.visible .chat-content{
+  opacity: 1;
+  transform: scale(1);
 }
 
 #chatbox.stickyChat {
@@ -23,15 +41,20 @@
   flex: 1 auto; /* take reminaning vertical space */
   height: auto;
   right: 0;
+  display: flex;
+}
+#chatbox.stickyChat .chat-content {
   background-color: #f1f1f1;
   border-radius: 0;
   border: none;
   border-left: 1px solid #ccc;
+  height: 100%;
+  width: 100%;
 }
-#chatbox.stickyChat .stick-to-screen-btn {
+#chatbox.stickyChat .chat-content .stick-to-screen-btn {
   display: none;
 }
-#chatbox.stickyChat.chatAndUsersChat .hide-reduce-btn {
+#chatbox.stickyChat.chatAndUsersChat .chat-content .hide-reduce-btn {
   display:none;
 }
 
@@ -130,6 +153,10 @@
 @media only screen and (max-width: 720px) {
   #chatbox {
     right: 0;
-    width: 80%;
+    bottom: 0;
+    left: 0;
+  }
+  #chatbox .chat-content {
+    width: 100%;
   }
 }

src/static/js/chat.js

@@ -30,9 +30,8 @@ var chat = (function()
   var self = {
     show: function ()
     {
-      $("#chaticon").hide();
-      $("#chatbox").css('display', 'flex');
-      $("#gritter-container").hide();
+      $("#chaticon").removeClass('visible');
+      $("#chatbox").addClass('visible');
       self.scrollDown();
       chatMentions = 0;
       Tinycon.setBubble(0);
@@ -47,8 +46,13 @@ var chat = (function()
     {
       chat.show();
       isStuck = (!isStuck || fromInitialCall);
-
+      $('#chatbox').hide();
+      // Add timeout to disable the chatbox animations
+      setTimeout(function() {
         $('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck);
+        $('#chatbox').css('display', 'flex');
+      }, 0);
+
       padcookie.setPref("chatAlwaysVisible", isStuck);
       $('#options-stickychat').prop('checked', isStuck);
     },
@@ -78,15 +82,13 @@ var chat = (function()
       }
       else {
         $("#chatcounter").text("0");
-        $("#chaticon").show();
-        $("#chatbox").hide();
-        $.gritter.removeAll();
-        $("#gritter-container").show();
+        $("#chaticon").addClass('visible');
+        $("#chatbox").removeClass('visible');
       }
     },
     scrollDown: function()
     {
-      if($('#chatbox').css("display") != "none"){
+      if($('.chat-content').is(':visible')){
         if(!self.lastMessage || !self.lastMessage.position() || self.lastMessage.position().top < $('#chattext').height()) {
           // if we use a slow animate here we can have a race condition when a users focus can not be moved away
           // from the last message recieved.
@@ -153,7 +155,7 @@ var chat = (function()
       var alreadyFocused = $("#chatinput").is(":focus");
 
       // does the user already have the chatbox open?
-      var chatOpen = $("#chatbox").is(":visible");
+      var chatOpen = $(".chat-content").is(":visible");
 
       // does this message contain this user's name? (is the curretn user mentioned?)
       var myName = $('#myusernameedit').val();

src/static/skins/colibris/src/components/chat.css

@@ -1,4 +1,4 @@
-#chatbox {
+.chat-content {
   background: none;
   padding: 0;
   background-color: white;
@@ -9,12 +9,12 @@
   background-color: var(--bg-soft-color);
 }
 
-#chatbox.stickyChat {
+#chatbox.stickyChat .chat-content {
   border: none;
   background-color: var(--bg-soft-color);
 }
 
-#chatbox.stickyChat.chatAndUsersChat{
+#chatbox.stickyChat.chatAndUsersChat .chat-content {
   box-shadow: none;
 }
 
@@ -50,7 +50,7 @@
   background-color: transparent !important;
 }
 
-#chatbox.stickyChat #chattext {
+#chatbox.stickyChat .chat-content #chattext {
   padding: 0px;
 }
 
@@ -58,7 +58,7 @@
   padding: 8px;
 }
 
-.plugin-ep_author_neat #chatbox.stickyChat #chattext {
+.plugin-ep_author_neat #chatbox.stickyChat .chat-content #chattext {
   padding: 5px 3px;
 }
 
@@ -75,10 +75,5 @@
     right: 0;
   }
 
-  #chatbox {
-    width: 100%;
-    right: 0;
-  }
-
   .stick-to-screen-btn { display: none; }
 }

src/static/skins/colibris/src/pad-variants.css

@@ -73,11 +73,11 @@
 .super-light-background.super-light-toolbar .toolbar {
   --border-color: var(--super-light-color);
 }
-.super-light-background #chatbox, .super-light-background #chatbox.stickyChat {
+.super-light-background .chat-content, .super-light-background #chatbox.stickyChat .chat-content {
   --bg-color: var(--super-light-color);
   --bg-soft-color: var(--super-light-color);
 }
-.super-light-background #chatbox.stickyChat {
+.super-light-background #chatbox.stickyChat .chat-content {
   box-shadow: none;
 }
 /* ====================== */
@@ -102,14 +102,14 @@
 .light-background input[type="text"] {
   background-color: var(--super-light-color);
 }
-.light-background #chatbox, .light-background #chatbox.stickyChat {
+.light-background .chat-content, .light-background #chatbox.stickyChat .chat-content {
   --bg-color: var(--super-light-color);
   --bg-soft-color: var(--light-color);
   --scrollbar-bg: var(--super-light-color);
   --scrollbar-track: var(--light-color);
   --scrollbar-thumb: var(--middle-color);
 }
-.light-background #chatbox.stickyChat {
+.light-background #chatbox.stickyChat .chat-content {
   box-shadow: none;
 }
 /* Special combinaison with toolbar */
@@ -148,7 +148,7 @@
   border: none;
   border-radius: 8px;
 }
-.super-dark-background #chatbox, .super-dark-background #chatbox.stickyChat {
+.super-dark-background .chat-content, .super-dark-background #chatbox.stickyChat .chat-content {
   background-color: var(--super-dark-color);
   color: var(--light-color);
 }
@@ -160,7 +160,7 @@
 .super-dark-background input[type="text"]::placeholder {
   color: var(--middle-color);
 }
-.super-dark-background #chatbox:not(.stickyChat) {
+.super-dark-background #chatbox:not(.stickyChat) .chat-content {
   border: 1px solid var(--dark-color);
 }
 /* Special combinaison with toolbar */
@@ -196,7 +196,7 @@
   border: none;
   border-radius: 8px;
 }
-.dark-background #chatbox, .dark-background #chatbox.stickyChat {
+.dark-background .chat-content, .dark-background #chatbox.stickyChat .chat-content {
   background-color: var(--dark-color);
   color: var(--super-light-color);
   --border-color: var(--dark-soft-color);
@@ -209,7 +209,7 @@
 .dark-background input[type="text"]::placeholder {
   color: var(--middle-color);
 }
-.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) {
+.dark-background .popup-content, .dark-background #chatbox:not(.stickyChat) .chat-content {
   box-shadow: 0 0 14px 0px var(--super-dark-color);
 }
 /* Special combinaison with toolbar */

src/templates/pad.html

@@ -361,13 +361,14 @@
         <!----------- CHAT ------------>
         <!----------------------------->
 
-        <div id="chaticon" onclick="chat.show();return false;" title="Chat (Alt C)">
+        <div id="chaticon" class="visible" onclick="chat.show();return false;" title="Chat (Alt C)">
             <span id="chatlabel" data-l10n-id="pad.chat"></span>
             <span class="buttonicon buttonicon-chat"></span>
             <span id="chatcounter">0</span>
         </div>
 
         <div id="chatbox">
+          <div class="chat-content">
             <div id="titlebar">
               <h1 id ="titlelabel" data-l10n-id="pad.chat"></h1>
               <a id="titlecross" class="hide-reduce-btn" onClick="chat.hide();return false;">-&nbsp;</a>
@@ -384,6 +385,7 @@
             </div>
           </div>
         </div>
+      </div>
 
       <% e.end_block(); %>