Skip to content
Snippets Groups Projects
Commit f8052f6c authored by Andreas Traczyk's avatar Andreas Traczyk
Browse files

messageview: add scroll to latest messages button

Change-Id: Iee536317ce36268255be2168dc6bbc8318b28753
parent 514ceaa7
No related branches found
No related tags found
No related merge requests found
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
:root { :root {
/* color definitions */ /* color definitions */
--jami-light-blue: rgba(59, 193, 211, 0.3); --jami-light-blue: rgba(59, 193, 211, 0.3);
--jami-dark-blue: #004e86;
--jami-green: #219d55; --jami-green: #219d55;
--jami-green-hover: #1f8b4c; --jami-green-hover: #1f8b4c;
--jami-red: #dc2719; --jami-red: #dc2719;
--jami-red-hover: #b02e2c; --jami-red-hover: #b02e2c;
/* main properties */ /* main properties */
/* --bg-color: #f2f2f2; same as macOS client */ --bg-color: #ffffff;
--bg-color: #ffffff; /* same as macOS client */
/* navbar properties */ /* navbar properties */
--navbar-height: 40px; --navbar-height: 40px;
--navbar-padding-top: 8px; --navbar-padding-top: 8px;
...@@ -321,6 +321,46 @@ a:hover { ...@@ -321,6 +321,46 @@ a:hover {
border: 0; 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 { #messages {
position: relative; position: relative;
z-index: 0; z-index: 0;
...@@ -878,7 +918,7 @@ pre { ...@@ -878,7 +918,7 @@ pre {
.media_wrapper img { .media_wrapper img {
max-width: 800px; max-width: 800px;
max-height: 700px; max-height: 700px;
margin: 5px 0 0 0; margin: 2px 0 2px 0;
border-radius: 10px; border-radius: 10px;
} }
......
...@@ -40,6 +40,9 @@ ...@@ -40,6 +40,9 @@
</div> </div>
<div id="container"> <div id="container">
<div id="messages" onscroll="onScrolled()"></div> <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 id="sendMessage">
<div class="nav-button action-button" onclick="sendFile()" title="Send File"> <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"> <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") ...@@ -31,6 +31,7 @@ const invitation = document.getElementById("invitation")
const inviteImage = document.getElementById("invite_image") const inviteImage = document.getElementById("invite_image")
const invitationText = document.getElementById("text") const invitationText = document.getElementById("text")
var messages = document.getElementById("messages") 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 */ /* States: allows us to avoid re-doing something if it isn't meaningful */
var displayLinksEnabled = true var displayLinksEnabled = true
...@@ -71,6 +72,21 @@ new QWebChannel(qt.webChannelTransport, function(channel) { ...@@ -71,6 +72,21 @@ new QWebChannel(qt.webChannelTransport, function(channel) {
function onScrolled_() { function onScrolled_() {
if (!canLazyLoad) if (!canLazyLoad)
return; 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) { if (messages.scrollTop == 0 && historyBufferIndex != historyBuffer.length) {
/* At the top and there's something to print */ /* At the top and there's something to print */
printHistoryPart(messages, messages.scrollHeight) printHistoryPart(messages, messages.scrollHeight)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment