Added bottom gesture for triggering cursor mover/advanced functions (#98

) Previously, the cursor mover/advanced functions can only be used if and only if, a space key is present in the layout so this excludes layouts such as Japanese, emoji, numpad, etc. This can be removed and still work but I guess a hint is essential for discoverability and consistency. This bottom gesture solves this and also improves the flow because instead of pressing and holding and waiting, you just swipe up from the bottom.
ubports · Nov 21, 2019 · 5a1bb21 · 5a1bb21
1 parent b41a930
commit 5a1bb21
Show file tree

Hide file tree

Showing 12 changed files with 73 additions and 13 deletions.
diff --git a/plugins/az/qml/Keyboard_az.qml b/plugins/az/qml/Keyboard_az.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/az/qml/Keyboard_az_email.qml b/plugins/az/qml/Keyboard_az_email.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/az/qml/Keyboard_az_url.qml b/plugins/az/qml/Keyboard_az_url.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/az/qml/Keyboard_az_url_search.qml b/plugins/az/qml/Keyboard_az_url_search.qml
@@ -85,7 +85,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/fa/qml/Keyboard_symbols_fa.qml b/plugins/fa/qml/Keyboard_symbols_fa.qml
@@ -83,7 +83,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey; label: "اب‌پ"; shifted: "اب‌پ"; anchors.left: parent.left; height: parent.height; }
             CharKey        { id: commaKey;    label: "،"; shifted: "،";     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/tr/qml/Keyboard_tr.qml b/plugins/tr/qml/Keyboard_tr.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/tr/qml/Keyboard_tr_email.qml b/plugins/tr/qml/Keyboard_tr_email.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/tr/qml/Keyboard_tr_url.qml b/plugins/tr/qml/Keyboard_tr_url.qml
@@ -84,7 +84,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/plugins/tr/qml/Keyboard_tr_url_search.qml b/plugins/tr/qml/Keyboard_tr_url_search.qml
@@ -85,7 +85,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey;                            anchors.left: parent.left; height: parent.height; }
             LanguageKey    { id: languageMenuButton;                     anchors.left: symShiftKey.right; height: parent.height; }

diff --git a/qml/Keyboard.qml b/qml/Keyboard.qml
@@ -314,7 +314,7 @@ Item {
             objectName: "floatingActions"
 
             z: 1
-            visible: fullScreenItem.cursorSwipe && !cursorSwipeArea.pressed
+            visible: fullScreenItem.cursorSwipe && !cursorSwipeArea.pressed && !bottomSwipe.pressed
         }
 
         MouseArea {
@@ -337,7 +337,7 @@ Item {
                 color: cursorSwipeArea.selectionMode ? fullScreenItem.theme.selectionColor : fullScreenItem.theme.charKeyPressedColor
 
                 Label {
-                    visible: !cursorSwipeArea.pressed
+                    visible: !cursorSwipeArea.pressed && !bottomSwipe.pressed
                     horizontalAlignment: Text.AlignHCenter
                     color: cursorSwipeArea.selectionMode ? UbuntuColors.porcelain : fullScreenItem.theme.fontColor
                     wrapMode: Text.WordWrap
@@ -418,6 +418,66 @@ Item {
                 firstPress = Qt.point(0,0)
             }
         }
+
+        SwipeArea{
+            id: bottomSwipe
+
+            property bool draggingCustom: distance >= units.gu(4)
+            property bool readyToSwipe: false
+
+            height: units.gu(1.5)
+            anchors{
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            direction: SwipeArea.Upwards
+            immediateRecognition: true
+
+            onDraggingCustomChanged:{
+                if (dragging && !fullScreenItem.cursorSwipe) {
+                    readyToSwipe = false
+                    swipeDelay.restart()
+                    fullScreenItem.cursorSwipe = true
+                }
+            }
+
+            onTouchPositionChanged: {
+                if (fullScreenItem.cursorSwipe && readyToSwipe) {
+                    fullScreenItem.processSwipe(touchPosition.x, touchPosition.y)
+                }
+            }
+
+            onPressedChanged: {
+                if (!pressed) {
+                    fullScreenItem.timerSwipe.restart()
+                }else{
+                    fullScreenItem.timerSwipe.stop()
+                }
+            }
+
+            Timer {
+                id: swipeDelay
+                interval: 100
+                running: false
+                onTriggered: {
+                    fullScreenItem.prevSwipePositionX = bottomSwipe.touchPosition.x
+                    fullScreenItem.prevSwipePositionY = bottomSwipe.touchPosition.y
+                    bottomSwipe.readyToSwipe = true
+                }
+            }
+        }
+
+        Icon {
+            id: bottomHint
+            name: "toolkit_bottom-edge-hint"
+            visible: !fullScreenItem.cursorSwipe
+            width: units.gu(3)
+            anchors {
+                horizontalCenter: parent.horizontalCenter
+                bottom: parent.bottom
+            }
+        }
 
     } // canvas
 

diff --git a/qml/keys/key_constants.js b/qml/keys/key_constants.js
@@ -63,7 +63,7 @@ var actionKeyPressedColor = "#aeaeae"
 var actionKeyBorderColor = "#888888"
 
 var top_margin = 1;  // gu
-var bottom_margin = 0; // gu
+var bottom_margin = 1; // gu
 var tabletRowMargin = 1; // gu
 var phoneRowMarginLandscape = 4; // dp
 var phoneRowMarginPortrait = 7; // dp

diff --git a/qml/languages/Keyboard_symbols.qml b/qml/languages/Keyboard_symbols.qml
@@ -83,7 +83,7 @@ KeyPad {
             anchors.left: parent.left
             anchors.right: parent.right
 
-            height: panel.keyHeight + units.gu(UI.bottom_margin*2);
+            height: panel.keyHeight + units.gu(UI.row_margin);
 
             SymbolShiftKey { id: symShiftKey; label: "ABC"; shifted: "ABC"; anchors.left: parent.left; height: parent.height; }
             CharKey        { id: commaKey;    label: ","; shifted: "/";     anchors.left: symShiftKey.right; height: parent.height; }