Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in / Register
Toggle navigation
Menu
Open sidebar
savoirfairelinux
jami-client-windows
Commits
f8052f6c
Commit
f8052f6c
authored
Feb 05, 2019
by
Andreas Traczyk
Browse files
messageview: add scroll to latest messages button
Change-Id: Iee536317ce36268255be2168dc6bbc8318b28753
parent
514ceaa7
Changes
3
Show whitespace changes
Inline
Side-by-side
web/chatview.css
View file @
f8052f6c
...
...
@@ -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
:
5
px
0
0
0
;
margin
:
2
px
0
2px
0
;
border-radius
:
10px
;
}
...
...
web/chatview.html
View file @
f8052f6c
...
...
@@ -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"
>
...
...
web/chatview.js
View file @
f8052f6c
...
...
@@ -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
)
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment