Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
J
jami-client-windows
Manage
Activity
Members
Plan
Wiki
Code
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Locked files
Deploy
Releases
Model registry
Analyze
Contributor analytics
Repository analytics
Insights
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
This is an archived project. Repository and other project resources are read-only.
Show more breadcrumbs
savoirfairelinux
jami-client-windows
Commits
f8052f6c
Commit
f8052f6c
authored
6 years ago
by
Andreas Traczyk
Browse files
Options
Downloads
Patches
Plain Diff
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
Changes
3
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
web/chatview.css
+43
-3
43 additions, 3 deletions
web/chatview.css
web/chatview.html
+3
-0
3 additions, 0 deletions
web/chatview.html
web/chatview.js
+16
-0
16 additions, 0 deletions
web/chatview.js
with
62 additions
and
3 deletions
web/chatview.css
+
43
−
3
View file @
f8052f6c
...
@@ -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
:
5
px
0
0
0
;
margin
:
2
px
0
2px
0
;
border-radius
:
10px
;
border-radius
:
10px
;
}
}
...
...
This diff is collapsed.
Click to expand it.
web/chatview.html
+
3
−
0
View file @
f8052f6c
...
@@ -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
▼
</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"
>
...
...
This diff is collapsed.
Click to expand it.
web/chatview.js
+
16
−
0
View file @
f8052f6c
...
@@ -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
)
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment