Skip to content

Commit 1073f7f

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 6bb49fe commit 1073f7f

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

0 commit comments

Comments
 (0)