Skip to content

Commit 78a2ca7

Browse files
maralornmaralorn
committed
Improve Scrollindicators
This will show scrollindicators to the top and to the bottom with explanations, when there are unread messages in that direction
1 parent 7ae5b4e commit 78a2ca7

File tree

1 file changed

+181
-10
lines changed

1 file changed

+181
-10
lines changed

‎client/qml/chat.qml‎

Lines changed: 181 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -293,29 +293,200 @@ Rectangle {
293293
}
294294
Rectangle {
295295
id: scrollindicator
296-
opacity: chatView.nowAtYEnd ? 0 : 0.5
297296
color: defaultPalette.text
298297
height: 30
299298
radius: height/2
300299
width: height
301300
anchors.left: parent.left
302301
anchors.bottom: parent.bottom
303-
anchors.leftMargin: width/2
304-
anchors.bottomMargin: chatView.nowAtYEnd ? -height : height/2
305-
Behavior on opacity {
306-
NumberAnimation { duration: 300 }
307-
}
308-
Behavior on anchors.bottomMargin {
309-
NumberAnimation { duration: 300 }
310-
}
302+
anchors.leftMargin: height/2
303+
anchors.bottomMargin: -height
311304
Image {
312-
anchors.fill: parent
305+
id: scrolldownarrow
306+
anchors.left: parent.left
307+
anchors.top: parent.top
308+
height: parent.height
309+
width: height
313310
source: "qrc:///scrolldown.svg"
314311
}
315312
MouseArea {
316313
anchors.fill: parent
317314
onClicked: root.scrollToBottom()
318315
cursorShape: Qt.PointingHandCursor
319316
}
317+
Label {
318+
id: scrolldowntext
319+
text: "unread messages below"
320+
anchors.verticalCenter: parent.verticalCenter
321+
anchors.left: scrolldownarrow.right
322+
anchors.leftMargin: scrolldownarrow.width/2
323+
}
324+
state: chatView.nowAtYEnd ? "hide" : (messageModel.readMarkerIndex == chatView.count - 1 ? "show": "extend")
325+
states: [
326+
State {
327+
name: "show"
328+
PropertyChanges { target:scrollindicator; opacity: 0.5 }
329+
PropertyChanges { target:scrollindicator; color: defaultPalette.text }
330+
PropertyChanges { target:scrolldowntext; opacity: 0 }
331+
PropertyChanges { target:scrollindicator; width: scrollindicator.height }
332+
PropertyChanges { target:scrollindicator; anchors.bottomMargin: scrollindicator.height/2 }
333+
},
334+
State {
335+
name: "extend"
336+
PropertyChanges { target:scrollindicator; opacity: 1 }
337+
PropertyChanges { target:scrollindicator; color: "#ffaaaa" }
338+
PropertyChanges { target:scrolldowntext; opacity: 1 }
339+
PropertyChanges { target:scrollindicator; width: scrolldowntext.width + scrollindicator.height*2 }
340+
PropertyChanges { target:scrollindicator; anchors.bottomMargin: scrollindicator.height/2 }
341+
},
342+
State {
343+
name: "hide"
344+
PropertyChanges { target:scrollindicator; opacity: 0 }
345+
PropertyChanges { target:scrollindicator; color: defaultPalette.text }
346+
PropertyChanges { target:scrolldowntext; opacity: 0 }
347+
PropertyChanges { target:scrollindicator; width: scrollindicator.height }
348+
PropertyChanges { target:scrollindicator; anchors.bottomMargin: -scrollindicator.height }
349+
}]
350+
transitions: [
351+
Transition {
352+
from: "hide"
353+
to: "show"
354+
ParallelAnimation{
355+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
356+
NumberAnimation{target: scrollindicator; property: "anchors.bottomMargin"; duration: 100}
357+
}
358+
},
359+
Transition {
360+
from: "show"
361+
to: "extend"
362+
SequentialAnimation{
363+
ParallelAnimation{
364+
ColorAnimation{target: scrollindicator; duration: 100}
365+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
366+
}
367+
NumberAnimation{target: scrollindicator; property: "width"; duration: 300}
368+
NumberAnimation{target: scrolldowntext; property: "opacity"; duration: 100}
369+
}
370+
},
371+
Transition {
372+
from: "extend"
373+
to: "show"
374+
SequentialAnimation{
375+
NumberAnimation{target: scrolldowntext; property: "opacity"; duration: 100}
376+
NumberAnimation{target: scrollindicator; property: "width"; duration: 300}
377+
ParallelAnimation{
378+
ColorAnimation{target: scrollindicator; duration: 100}
379+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
380+
}
381+
}
382+
},
383+
Transition {
384+
from: "show"
385+
to: "hide"
386+
ParallelAnimation{
387+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
388+
NumberAnimation{target: scrollindicator; property: "anchors.bottomMargin"; duration: 100}
389+
}
390+
},
391+
Transition {
392+
from: "extend"
393+
to: "hide"
394+
SequentialAnimation{
395+
NumberAnimation{target: scrolldowntext; property: "opacity"; duration: 100}
396+
NumberAnimation{target: scrollindicator; property: "width"; duration: 300}
397+
ColorAnimation{target: scrollindicator; duration: 100}
398+
ParallelAnimation{
399+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
400+
NumberAnimation{target: scrollindicator; property: "anchors.bottomMargin"; duration: 100}
401+
}
402+
}
403+
},
404+
Transition {
405+
from: "hide"
406+
to: "extend"
407+
SequentialAnimation{
408+
ParallelAnimation{
409+
NumberAnimation{target: scrollindicator; property: "opacity"; duration: 100}
410+
NumberAnimation{target: scrollindicator; property: "anchors.bottomMargin"; duration: 100}
411+
}
412+
ColorAnimation{target: scrollindicator; duration: 100}
413+
NumberAnimation{target: scrollindicator; property: "width"; duration: 300}
414+
NumberAnimation{target: scrolldowntext; property: "opacity"; duration: 100}
415+
}
416+
}
417+
]
418+
}
419+
420+
Rectangle {
421+
id: backlogindicator
422+
property bool show: chatView.count > 0 && (messageModel.readMarkerIndex == -1 || chatView.indexAt(10,chatView.contentY) > messageModel.readMarkerIndex)
423+
color: "#ffaaaa"
424+
height: 30
425+
width: height
426+
radius: height/2
427+
anchors.left: parent.left
428+
anchors.top: parent.top
429+
anchors.leftMargin: height/2
430+
anchors.topMargin: height/2
431+
432+
Image {
433+
id: scrolluparrow
434+
anchors.left: parent.left
435+
anchors.top: parent.top
436+
height: parent.height
437+
width: height
438+
source: "qrc:///scrolldown.svg"
439+
transform: Rotation { origin.x: scrolluparrow.height/2; origin.y: scrolluparrow.height/2; angle: 180}
440+
}
441+
Label {
442+
id: scrolluptext
443+
text: "unread messages above"
444+
anchors.verticalCenter: parent.verticalCenter
445+
anchors.left: scrolluparrow.right
446+
anchors.leftMargin: scrolluparrow.width/2
447+
}
448+
449+
state: show ? "show" : "hide"
450+
states: [
451+
State {
452+
name: "show"
453+
PropertyChanges { target:backlogindicator; opacity: 1 }
454+
PropertyChanges { target:scrolluptext; opacity: 1 }
455+
PropertyChanges { target:backlogindicator; width: scrolluptext.width + backlogindicator.height*2 }
456+
PropertyChanges { target:backlogindicator; anchors.topMargin: backlogindicator.height/2 }
457+
},
458+
State {
459+
name: "hide"
460+
PropertyChanges { target:backlogindicator; opacity: 0 }
461+
PropertyChanges { target:scrolluptext; opacity: 0 }
462+
PropertyChanges { target:backlogindicator; width: backlogindicator.height }
463+
PropertyChanges { target:backlogindicator; anchors.topMargin: -backlogindicator.height }
464+
}]
465+
transitions: [
466+
Transition {
467+
from: "hide"
468+
to: "show"
469+
SequentialAnimation{
470+
ParallelAnimation{
471+
NumberAnimation{target: backlogindicator; property: "opacity"; duration: 100}
472+
NumberAnimation{target: backlogindicator; property: "anchors.topMargin"; duration: 100}
473+
}
474+
NumberAnimation{target: backlogindicator; property: "width"; duration: 300}
475+
NumberAnimation{target: scrolluptext; property: "opacity"; duration: 100}
476+
}
477+
},
478+
Transition {
479+
from: "show"
480+
to: "hide"
481+
SequentialAnimation{
482+
NumberAnimation{target: scrolluptext; property: "opacity"; duration: 100}
483+
NumberAnimation{target: backlogindicator; property: "width"; duration: 300}
484+
ParallelAnimation{
485+
NumberAnimation{target: backlogindicator; property: "opacity"; duration: 100}
486+
NumberAnimation{target: backlogindicator; property: "anchors.topMargin"; duration: 100}
487+
}
488+
}
489+
}
490+
]
320491
}
321492
}

0 commit comments

Comments
 (0)