messageview: add scroll to latest messages button

Change-Id: Iee536317ce36268255be2168dc6bbc8318b28753

web/chatview.css

@@ -3,13 +3,13 @@
 :root {
     /* color definitions */
     --jami-light-blue: rgba(59, 193, 211, 0.3);
+    --jami-dark-blue: #004e86;
     --jami-green: #219d55;
     --jami-green-hover: #1f8b4c;
     --jami-red: #dc2719;
     --jami-red-hover: #b02e2c;
     /* main properties */
-    /* --bg-color: #f2f2f2; same as macOS client */
-    --bg-color: #ffffff; /* same as macOS client */
+    --bg-color: #ffffff;
     /* navbar properties */
     --navbar-height: 40px;
     --navbar-padding-top: 8px;
@@ -321,6 +321,46 @@ a:hover {
     border: 0;
 }
 
+#back_to_bottom_button_container {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 4em;
+}
+
+#back_to_bottom_button {
+    visibility: hidden;
+    margin: auto;
+    font: 0.875em emoji;
+    text-align: center;
+    width: 10em;
+    border-radius: 2em;
+    background-color: var(--jami-dark-blue);
+    color: #fff;
+    padding: 0.5em;
+    box-shadow: 2px 2px 4px black;
+    opacity: 1;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: opacity .5s ease, width .2s ease, color .1s ease .2s;
+}
+
+    #back_to_bottom_button:hover {
+        cursor: pointer;
+    }
+
+    #back_to_bottom_button.fade {
+        opacity: 0;
+        width: 1em;
+        color: transparent;
+        transition: .2s opacity ease .1s, .2s width ease .1s, color .1s ease;
+    }
+        #back_to_bottom_button.fade:hover {
+            cursor: context-menu;
+        }
+
 #messages {
     position: relative;
     z-index: 0;
@@ -878,7 +918,7 @@ pre {
 .media_wrapper img {
     max-width: 800px;
     max-height: 700px;
-    margin: 5px 0 0 0;
+    margin: 2px 0 2px 0;
     border-radius: 10px;
 }
 

web/chatview.html

@@ -40,6 +40,9 @@
     </div>
     <div id="container">
         <div id="messages" onscroll="onScrolled()"></div>
+        <div id="back_to_bottom_button_container">
+            <div id="back_to_bottom_button" onclick="back_to_bottom()">Jump to latest &#9660;</div>
+        </div>
         <div id="sendMessage">
             <div class="nav-button action-button" onclick="sendFile()" title="Send File">
                 <svg class="svgicon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">

web/chatview.js

@@ -31,6 +31,7 @@ const invitation        = document.getElementById("invitation")
 const inviteImage       = document.getElementById("invite_image")
 const invitationText    = document.getElementById("text")
 var   messages          = document.getElementById("messages")
+var   backToBottomBtn   = document.getElementById("back_to_bottom_button")
 
 /* States: allows us to avoid re-doing something if it isn't meaningful */
 var displayLinksEnabled = true
@@ -71,6 +72,21 @@ new QWebChannel(qt.webChannelTransport, function(channel) {
 function onScrolled_() {
     if (!canLazyLoad)
         return;
+    // back to bottom button
+    if(messages.scrollTop >= messages.scrollHeight - messages.clientHeight - scrollDetectionThresh) {
+        // fade out
+        if (!backToBottomBtn.classList.contains('fade')) {
+            backToBottomBtn.classList.add('fade');
+            backToBottomBtn.removeAttribute("onclick");
+        }
+    } else {
+        // fade in
+        if (backToBottomBtn.classList.contains('fade')) {
+            backToBottomBtn.style.visibility = "visible";
+            backToBottomBtn.classList.remove('fade');
+            backToBottomBtn.onclick = back_to_bottom;
+        }
+    }
     if (messages.scrollTop == 0 && historyBufferIndex != historyBuffer.length) {
         /* At the top and there's something to print */
         printHistoryPart(messages, messages.scrollHeight)