diff --git a/web/chatview.css b/web/chatview.css index 6a6a83c6cf4cbcdfb2e0086db2cb839b1ac7f8b8..aaf6a53069c43f6f64712a21f9ebfd3b59f2ca62 100644 --- a/web/chatview.css +++ b/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; } diff --git a/web/chatview.html b/web/chatview.html index 209ca42cd92cf8d7df9eebbc7f96e8517cc9beae..0333c61d998a13249ac6871314ae58620ff73552 100644 --- a/web/chatview.html +++ b/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 ▼</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"> diff --git a/web/chatview.js b/web/chatview.js index 7484fca93fae931c7eba724b8c0f2aba7d9589f4..f684599e651a0bd36a0b73324b77354f0a2dc688 100644 --- a/web/chatview.js +++ b/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)