subsurface/mobile-widgets/3rdparty/0004-action-button-make-wider-for-easier-use.patch

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