Commit f8052f6c authored by Andreas Traczyk's avatar Andreas Traczyk

messageview: add scroll to latest messages button

Change-Id: Iee536317ce36268255be2168dc6bbc8318b28753
parent 514ceaa7
......@@ -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;
}
......
......@@ -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">
......
......@@ -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)
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment