From 72745438d9b03348963e9b9b74ae00117ac97d79 Mon Sep 17 00:00:00 2001 From: Dirk Hohndel 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 --- 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