Merge pull request #148 from dobey/extended-keys-grid

qml: Implement a grid layout for longer extended keys lists
maliit · Jul 21, 2022 · a8a17cd · a8a17cd
2 parents e344121 + da64915
commit a8a17cd
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/qml/keys/CharKey.qml b/qml/keys/CharKey.qml
@@ -253,7 +253,10 @@ Item {
                 extendedKeysSelector.extendedKeysModel = activeExtendedModel
                 extendedKeysSelector.currentlyAssignedKey = key
                 var extendedKeys = extendedKeysSelector.keys;
-                var middleKey = extendedKeys.length > 1 ? Math.floor(extendedKeys.length / 2) - 1 : 0;
+                var middleKey = extendedKeys.length > 1 ? Math.floor(extendedKeys.length / 2) - 1: 0;
+                if (extendedKeys.length > 5 && extendedKeysSelector.multirow) {
+                    middleKey = extendedKeys.length - middleKey - 1;
+                }
                 extendedKeys[middleKey].highlight = true;
                 currentExtendedKey = extendedKeys[middleKey];
             }
@@ -357,8 +360,8 @@ Item {
                 for(var i = 0; i < extendedKeys.length; i++) {
                     var posX = extendedKeys[i].x;
                     var posY = extendedKeys[i].y;
-                    if(mx > posX && mx < (posX + extendedKeys[i].width)
-                       && my > posY && my < (posY + extendedKeys[i].height * 2.5)) {
+                    if(mx > posX && mx < (posX + extendedKeys[i].width * 1.25 )
+                       && my > posY && my < (posY + extendedKeys[i].height * (extendedKeysSelector.multirow ? 1.3 : 2.5))) {
                         if(!extendedKeys[i].highlight) {
                             Feedback.startPressEffect();
                         }

diff --git a/qml/keys/ExtendedKeysSelector.qml b/qml/keys/ExtendedKeysSelector.qml
@@ -16,6 +16,7 @@
 
 import QtQuick 2.4
 import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
 
 import MaliitKeyboard 2.0
 
@@ -29,16 +30,31 @@ KeyPopover {
     property alias rowY: rowOfKeys.y
     property int fontSize: 0
 
+    // A readonly variable to check if our grid has multiple rows
+    readonly property bool multirow: rowOfKeys.columns < (extendedKeysModel ? extendedKeysModel.length : 0)
+
     property string __commitStr: ""
 
     onExtendedKeysModelChanged: {
         if (extendedKeysModel && extendedKeysModel.length > 1) {
+            // Reset columns to length, to avoid having weird positioning
+            // when switching extended keys
+            rowOfKeys.columns = extendedKeysModel.length;
+
             // Place the first key in the middle of the model so that it gets
             // selected by default
             var middleKey = Math.floor(extendedKeysModel.length / 2);
+            if (extendedKeysModel.length > 5) {
+                middleKey -= 1;
+            }
             var reorderedModel = extendedKeysModel.slice(0); // Ensure the array is cloned
+            var defaultKey = extendedKeysModel[0];
             reorderedModel.splice(extendedKeysModel.length % 2 == 0 ? middleKey : middleKey + 1, 0, extendedKeysModel[0]);
             reorderedModel.shift();
+            if (reorderedModel.length > 5) {
+                rowOfKeys.columns = Math.ceil(reorderedModel.length / 2);
+                reorderedModel.reverse();
+            }
             keyRepeater.model = reorderedModel;
         } else {
             keyRepeater.model = extendedKeysModel;
@@ -109,7 +125,7 @@ KeyPopover {
         onClicked: closePopover();
     }
 
-    Row {
+    GridLayout {
         id: rowOfKeys
         anchors.centerIn: anchorItem
         anchors.verticalCenterOffset: -Device.popoverTopMargin