From 1555dc2296cbdc77797aa2f86cab8eaba5c913b1 Mon Sep 17 00:00:00 2001 From: Lasath Fernando Date: Tue, 28 Apr 2020 00:29:51 -0700 Subject: [PATCH 1/4] Shamelessly steal `ScrollHelper.qml` from spectral I mean, we're both GPL so... :P --- resources/qml/ScrollHelper.qml | 108 +++++++++++++++++++++++++++++++++ resources/qml/TimelineView.qml | 17 ++---- resources/res.qrc | 1 + 3 files changed, 113 insertions(+), 13 deletions(-) create mode 100644 resources/qml/ScrollHelper.qml diff --git a/resources/qml/ScrollHelper.qml b/resources/qml/ScrollHelper.qml new file mode 100644 index 00000000..669d9608 --- /dev/null +++ b/resources/qml/ScrollHelper.qml @@ -0,0 +1,108 @@ +/* + * Copyright (C) 2016 Michael Bohlender, + * Copyright (C) 2017 Christian Mollekopf, + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 2 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License along + * with this program; if not, write to the Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ + +import QtQuick 2.12 +import QtQuick.Controls 2.12 + +/* +* Shamelessly stolen from: +* https://gitlab.com/spectral-im/spectral/-/blob/master/imports/Spectral/Component/ScrollHelper.qml +* +* The MouseArea + interactive: false + maximumFlickVelocity are required +* to fix scrolling for desktop systems where we don't want flicking behaviour. +* +* See also: +* ScrollView.qml in qtquickcontrols +* qquickwheelarea.cpp in qtquickcontrols +*/ +MouseArea { + id: root + propagateComposedEvents: true + + property Flickable flickable + property alias enabled: root.enabled + + //Place the mouse area under the flickable + z: -1 + onFlickableChanged: { + if (enabled) { + flickable.interactive = false + flickable.maximumFlickVelocity = 100000 + flickable.boundsBehavior = Flickable.StopAtBounds + root.parent = flickable + } + } + + function calculateNewPosition(flickableItem, wheel) { + //Nothing to scroll + if (flickableItem.contentHeight < flickableItem.height) { + return flickableItem.contentY; + } + //Ignore 0 events (happens at least with Christians trackpad) + if (wheel.pixelDelta.y == 0 && wheel.angleDelta.y == 0) { + return flickableItem.contentY; + } + //pixelDelta seems to be the same as angleDelta/8 + var pixelDelta = 0 + //The pixelDelta is a smaller number if both are provided, so pixelDelta can be 0 while angleDelta is still something. So we check the angleDelta + if (wheel.angleDelta.y) { + var wheelScrollLines = 3 //Default value of QApplication wheelScrollLines property + var pixelPerLine = 20 //Default value in Qt, originally comes from QTextEdit + var ticks = (wheel.angleDelta.y / 8) / 15.0 //Divide by 8 gives us pixels typically come in 15pixel steps. + pixelDelta = ticks * pixelPerLine * wheelScrollLines + } else { + pixelDelta = wheel.pixelDelta.y + } + + if (!pixelDelta) { + return flickableItem.contentY; + } + + var minYExtent = flickableItem.originY + flickableItem.topMargin; + var maxYExtent = (flickableItem.contentHeight + flickableItem.bottomMargin + flickableItem.originY) - flickableItem.height; + + if (typeof(flickableItem.headerItem) !== "undefined" && flickableItem.headerItem) { + minYExtent += flickableItem.headerItem.height + } + + //Avoid overscrolling + return Math.max(minYExtent, Math.min(maxYExtent, flickableItem.contentY - pixelDelta)); + } + + onWheel: { + var newPos = calculateNewPosition(flickable, wheel); + // console.warn("Delta: ", wheel.pixelDelta.y); + // console.warn("Old position: ", flickable.contentY); + // console.warn("New position: ", newPos); + + // Show the scrollbars + flickable.flick(0, 0); + flickable.contentY = newPos; + cancelFlickStateTimer.start() + } + + + Timer { + id: cancelFlickStateTimer + //How long the scrollbar will remain visible + interval: 500 + // Hide the scrollbars + onTriggered: flickable.cancelFlick(); + } +} diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index cad341b5..ce8ad62c 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -116,19 +116,10 @@ Page { boundsBehavior: Flickable.StopAtBounds pixelAligned: true - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.NoButton - propagateComposedEvents: true - z: -1 - onWheel: { - if (wheel.angleDelta != 0) { - chat.contentY = chat.contentY - wheel.angleDelta.y - wheel.accepted = true - chat.returnToBounds() - } - } - } + ScrollHelper { + flickable: parent + anchors.fill: parent + } Shortcut { sequence: StandardKey.MoveToPreviousPage diff --git a/resources/res.qrc b/resources/res.qrc index c94f0f19..c6daaa80 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -118,6 +118,7 @@ qml/StatusIndicator.qml qml/EncryptionIndicator.qml qml/TimelineRow.qml + qml/ScrollHelper.qml qml/delegates/MessageDelegate.qml qml/delegates/TextMessage.qml qml/delegates/NoticeMessage.qml From 84c5ff0bcbeb5e9c14a97997f8bf8e153f6f5f89 Mon Sep 17 00:00:00 2001 From: Lasath Fernando Date: Tue, 28 Apr 2020 00:38:13 -0700 Subject: [PATCH 2/4] Fix binding loops for height --- resources/qml/TimelineView.qml | 11 ++++++++--- resources/qml/delegates/Pill.qml | 6 ++++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index ce8ad62c..45d9c3f2 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -208,9 +208,14 @@ Page { text: chat.model.formatDateSeparator(modelData.timestamp) color: colors.brightText - height: contentHeight * 1.2 - width: contentWidth * 1.2 - horizontalAlignment: Text.AlignHCenter +// height: contentHeight * 1.2 +// width: contentWidth * 1.2 + leftPadding: 24 + rightPadding: 24 + topPadding: 8 + bottomPadding: 8 + + horizontalAlignment: Text.AlignHCenter background: Rectangle { radius: parent.height / 2 color: colors.dark diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml index 27985b58..65a4aedf 100644 --- a/resources/qml/delegates/Pill.qml +++ b/resources/qml/delegates/Pill.qml @@ -5,8 +5,10 @@ Label { color: colors.brightText horizontalAlignment: Text.AlignHCenter - height: contentHeight * 1.2 - width: contentWidth * 1.2 +// height: contentHeight * 1.2 +// width: contentWidth * 1.2 + padding: 12 + background: Rectangle { radius: parent.height / 2 color: colors.dark From 5c57de070e9650752a8866955b4e4411b290ef6d Mon Sep 17 00:00:00 2001 From: Lasath Fernando Date: Tue, 28 Apr 2020 01:10:54 -0700 Subject: [PATCH 3/4] Remove commented out code; fix padding for Pill --- resources/qml/TimelineView.qml | 2 -- resources/qml/delegates/Pill.qml | 7 ++++--- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 45d9c3f2..7a1bba1d 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -208,8 +208,6 @@ Page { text: chat.model.formatDateSeparator(modelData.timestamp) color: colors.brightText -// height: contentHeight * 1.2 -// width: contentWidth * 1.2 leftPadding: 24 rightPadding: 24 topPadding: 8 diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml index 65a4aedf..a912b9b1 100644 --- a/resources/qml/delegates/Pill.qml +++ b/resources/qml/delegates/Pill.qml @@ -5,9 +5,10 @@ Label { color: colors.brightText horizontalAlignment: Text.AlignHCenter -// height: contentHeight * 1.2 -// width: contentWidth * 1.2 - padding: 12 + leftPadding: 24 + rightPadding: 24 + topPadding: 8 + bottomPadding: 8 background: Rectangle { radius: parent.height / 2 From c5d373e8f188a83b2c31cc0e7777a28c1877f123 Mon Sep 17 00:00:00 2001 From: Lasath Fernando Date: Wed, 29 Apr 2020 02:14:43 -0700 Subject: [PATCH 4/4] Address CR comments --- resources/qml/ScrollHelper.qml | 5 +++-- resources/qml/TimelineView.qml | 13 +++++++------ resources/qml/delegates/Pill.qml | 6 ++---- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/resources/qml/ScrollHelper.qml b/resources/qml/ScrollHelper.qml index 669d9608..3a8868f5 100644 --- a/resources/qml/ScrollHelper.qml +++ b/resources/qml/ScrollHelper.qml @@ -22,7 +22,7 @@ import QtQuick.Controls 2.12 /* * Shamelessly stolen from: -* https://gitlab.com/spectral-im/spectral/-/blob/master/imports/Spectral/Component/ScrollHelper.qml +* https://cgit.kde.org/kube.git/tree/framework/qml/ScrollHelper.qml * * The MouseArea + interactive: false + maximumFlickVelocity are required * to fix scrolling for desktop systems where we don't want flicking behaviour. @@ -42,13 +42,14 @@ MouseArea { z: -1 onFlickableChanged: { if (enabled) { - flickable.interactive = false flickable.maximumFlickVelocity = 100000 flickable.boundsBehavior = Flickable.StopAtBounds root.parent = flickable } } + acceptedButtons: Qt.NoButton + function calculateNewPosition(flickableItem, wheel) { //Nothing to scroll if (flickableItem.contentHeight < flickableItem.height) { diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 7a1bba1d..739da5f0 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -114,7 +114,6 @@ Page { model: timelineManager.timeline boundsBehavior: Flickable.StopAtBounds - pixelAligned: true ScrollHelper { flickable: parent @@ -208,10 +207,8 @@ Page { text: chat.model.formatDateSeparator(modelData.timestamp) color: colors.brightText - leftPadding: 24 - rightPadding: 24 - topPadding: 8 - bottomPadding: 8 + height: fontMetrics.height * 1.4 + width: contentWidth * 1.2 horizontalAlignment: Text.AlignHCenter background: Rectangle { @@ -221,7 +218,7 @@ Page { } Row { height: userName.height - spacing: 4 + spacing: 4 Avatar { width: avatarSize height: avatarSize @@ -327,4 +324,8 @@ Page { } } } + + FontMetrics { + id: fontMetrics + } } diff --git a/resources/qml/delegates/Pill.qml b/resources/qml/delegates/Pill.qml index a912b9b1..c4260c33 100644 --- a/resources/qml/delegates/Pill.qml +++ b/resources/qml/delegates/Pill.qml @@ -5,10 +5,8 @@ Label { color: colors.brightText horizontalAlignment: Text.AlignHCenter - leftPadding: 24 - rightPadding: 24 - topPadding: 8 - bottomPadding: 8 + height: fontMetrics.height * 1.4 + width: contentWidth * 1.2 background: Rectangle { radius: parent.height / 2