subsurface/mobile-widgets/3rdparty/0004-action-button-make-wider-for-easier-use.patch
Dirk Hohndel 3ecedbf018 mobile/UI: fine tune the action button rendering
On some platforms the side buttons looked disjoint from the center
button. This fixes that problem.

Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
2020-12-20 10:51:18 -08:00

161 lines
8 KiB
Diff

From 72745438d9b03348963e9b9b74ae00117ac97d79 Mon Sep 17 00:00:00 2001
From: Dirk Hohndel <dirk@hohndel.org>
Date: Wed, 25 Nov 2020 13:45:32 -0800
Subject: [PATCH] action button: make wider for easier use
And remove the horrible 'dragging the button opens the drawer' user
experience. That's just unusable on a mobile device.
Signed-off-by: Dirk Hohndel <dirk@hohndel.org>
---
src/controls/private/ActionButton.qml | 81 +++++++++------------------
1 file changed, 26 insertions(+), 55 deletions(-)
diff --git a/src/controls/private/ActionButton.qml b/src/controls/private/ActionButton.qml
index 030dae51..1d4e4b7a 100644
--- a/src/controls/private/ActionButton.qml
+++ b/src/controls/private/ActionButton.qml
@@ -56,25 +56,9 @@ Item {
anchors.bottom: edgeMouseArea.bottom
- implicitWidth: implicitHeight + Units.iconSizes.smallMedium*2 + Units.gridUnit
+ implicitWidth: implicitHeight + Units.iconSizes.smallMedium * 4 + Units.gridUnit
implicitHeight: Units.iconSizes.medium + Units.largeSpacing * 2
-
- onXChanged: {
- if (mouseArea.pressed || edgeMouseArea.pressed || fakeContextMenuButton.pressed) {
- if (root.hasGlobalDrawer && globalDrawer.enabled && globalDrawer.modal) {
- globalDrawer.peeking = true;
- globalDrawer.visible = true;
- globalDrawer.position = Math.min(1, Math.max(0, (x - root.width/2 + button.width/2)/globalDrawer.contentItem.width + mouseArea.drawerShowAdjust));
- }
- if (root.hasContextDrawer && contextDrawer.enabled && contextDrawer.modal) {
- contextDrawer.peeking = true;
- contextDrawer.visible = true;
- contextDrawer.position = Math.min(1, Math.max(0, (root.width/2 - button.width/2 - x)/contextDrawer.contentItem.width + mouseArea.drawerShowAdjust));
- }
- }
- }
-
MouseArea {
id: mouseArea
anchors.fill: parent
@@ -83,14 +67,6 @@ Item {
property bool internalVisibility: (!root.hasApplicationWindow || (applicationWindow().controlsVisible && applicationWindow().height > root.height*2)) && (root.action === null || root.action.visible === undefined || root.action.visible)
preventStealing: true
- drag {
- target: button
- //filterChildren: true
- axis: Drag.XAxis
- minimumX: root.hasContextDrawer && contextDrawer.enabled && contextDrawer.modal ? 0 : root.width/2 - button.width/2
- maximumX: root.hasGlobalDrawer && globalDrawer.enabled && globalDrawer.modal ? root.width : root.width/2 - button.width/2
- }
-
property var downTimestamp;
property int startX
property int startMouseY
@@ -127,30 +103,7 @@ Item {
onReleased: {
if (root.hasGlobalDrawer) globalDrawer.peeking = false;
if (root.hasContextDrawer) contextDrawer.peeking = false;
- //pixel/second
- var x = button.x + button.width/2;
- var speed = ((x - startX) / ((new Date()).getTime() - downTimestamp) * 1000);
- drawerShowAdjust = 0;
- //project where it would be a full second in the future
- if (root.hasContextDrawer && root.hasGlobalDrawer && globalDrawer.modal && x + speed > Math.min(root.width/4*3, root.width/2 + globalDrawer.contentItem.width/2)) {
- globalDrawer.open();
- contextDrawer.close();
- } else if (root.hasContextDrawer && x + speed < Math.max(root.width/4, root.width/2 - contextDrawer.contentItem.width/2)) {
- if (root.hasContextDrawer && contextDrawer.modal) {
- contextDrawer.open();
- }
- if (root.hasGlobalDrawer && globalDrawer.modal) {
- globalDrawer.close();
- }
- } else {
- if (root.hasGlobalDrawer && globalDrawer.modal) {
- globalDrawer.close();
- }
- if (root.hasContextDrawer && contextDrawer.modal) {
- contextDrawer.close();
- }
- }
//Don't rely on native onClicked, but fake it here:
//Qt.startDragDistance is not adapted to devices dpi in case
//of Android, so consider the button "clicked" when:
@@ -184,10 +137,6 @@ Item {
}
}
- onPositionChanged: {
- drawerShowAdjust = Math.min(0.3, Math.max(0, (startMouseY - mouse.y)/(Units.gridUnit*15)));
- button.xChanged();
- }
onPressAndHold: {
if (!actionUnderMouse) {
return;
@@ -274,9 +223,9 @@ Item {
bottomMargin: Units.smallSpacing
}
enabled: root.leftAction && root.leftAction.enabled
- radius: Units.devicePixelRatio*2
+ radius: Units.devicePixelRatio*4
height: Units.iconSizes.smallMedium + Units.smallSpacing * 2
- width: height + (root.action ? Units.gridUnit*2 : 0)
+ width: height + (root.action ? Units.gridUnit * 3 : 0)
visible: root.leftAction
readonly property bool pressed: root.leftAction && root.leftAction.enabled && ((mouseArea.actionUnderMouse == root.leftAction && mouseArea.pressed) || root.leftAction.checked)
@@ -309,6 +258,17 @@ Item {
margins: Units.smallSpacing * 2
}
}
+ Rectangle {
+ anchors.left: parent.left
+ anchors.leftMargin: Units.smallSpacing
+ anchors.verticalCenter: parent.verticalCenter
+ width: Units.iconSizes.smallMedium + Units.smallSpacing * 2
+ height: width
+ radius: width / 2
+ color: "transparent"
+ border.color: Qt.lighter(buttonGraphics.baseColor, 1.1)
+ border.width: 0.5
+ }
}
//right button
Rectangle {
@@ -323,7 +283,7 @@ Item {
enabled: root.rightAction && root.rightAction.enabled
radius: Units.devicePixelRatio*2
height: Units.iconSizes.smallMedium + Units.smallSpacing * 2
- width: height + (root.action ? Units.gridUnit*2 : 0)
+ width: height + (root.action ? Units.gridUnit * 3 : 0)
visible: root.rightAction
readonly property bool pressed: root.rightAction && root.rightAction.enabled && ((mouseArea.actionUnderMouse == root.rightAction && mouseArea.pressed) || root.rightAction.checked)
property color baseColor: root.rightAction && root.rightAction.icon && root.rightAction.icon.color && root.rightAction.icon.color != undefined && root.rightAction.icon.color.a > 0 ? root.rightAction.icon.color : Theme.highlightColor
@@ -355,6 +315,17 @@ Item {
margins: Units.smallSpacing * 2
}
}
+ Rectangle {
+ anchors.right: parent.right
+ anchors.rightMargin: Units.smallSpacing
+ anchors.verticalCenter: parent.verticalCenter
+ width: Units.iconSizes.smallMedium + Units.smallSpacing * 2
+ height: width
+ radius: width / 2
+ color: "transparent"
+ border.color: Qt.lighter(buttonGraphics.baseColor, 1.1)
+ border.width: 0.5
+ }
}
}
--
2.25.1