From da8aa59b0a069a20d51d175bd3d43c5b8c34ac3b Mon Sep 17 00:00:00 2001
From: Ad5001 <mail@ad5001.eu>
Date: Tue, 29 Oct 2024 02:50:11 +0100
Subject: [PATCH] Improving characters choosing popup.

+ No longer covering the input
+ No longer cut off when editing the name
+ Improved keyboard navigation.
---
 .../Popup/InsertCharacter.qml                 | 57 ++++++++++++-------
 .../Setting/ExpressionEditor.qml              | 22 +++++--
 .../LogarithmPlotter/Setting/TextSetting.qml  | 22 +++++--
 3 files changed, 71 insertions(+), 30 deletions(-)

diff --git a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Popup/InsertCharacter.qml b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Popup/InsertCharacter.qml
index 7002539..8162b09 100644
--- a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Popup/InsertCharacter.qml
+++ b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Popup/InsertCharacter.qml
@@ -16,8 +16,9 @@
  *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import QtQuick.Controls
 import QtQuick 
+import QtQuick.Controls
+import QtQml.Models
 
 /*!
     \qmltype InsertCharacter
@@ -42,15 +43,18 @@ Popup {
     */
     property string category: 'all'
     
-    width: 280
-    height: Math.ceil(insertGrid.insertChars.length/insertGrid.columns)*(width/insertGrid.columns)+5
+    width: insertGrid.width + 10
+    height: insertGrid.height + 10
     modal: true
     closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
     
-    Grid {
+    GridView {
         id: insertGrid
-        width: parent.width
-        columns: 7
+        width: 280
+        height: Math.ceil(model.count/columns)*cellHeight
+        property int columns: 7
+        cellWidth: width/columns
+        cellHeight: cellWidth
         
         property var insertCharsExpression: [
             "∞","π","¹","²","³","⁴","⁵",
@@ -86,21 +90,34 @@ Popup {
             }[insertPopup.category]
         }
         
-        Repeater {
-            model: parent.insertChars.length
-            
-            Button {
-                id: insertBtn
-                width: insertGrid.width/insertGrid.columns
-                height: width
-                text: insertGrid.insertChars[modelData]
-                flat: text == " "
-                font.pixelSize: 18
-                
-                onClicked: {
-                    selected(text)
-                }
+        model: ListModel {}
+        
+        delegate: Button {
+            id: insertBtn
+            width: insertGrid.cellWidth
+            height: insertGrid.cellHeight
+            text: chr
+            flat: text == " "
+            font.pixelSize: 18
+             
+            onClicked: {
+                insertPopup.selected(text)
+                insertPopup.close()
+            }
+        }
+        
+        Component.onCompleted: function() {
+            for(const chr of insertChars) {
+                console.log("Appending", chr)
+                model.append({ 'chr': chr })
             }
         }
     }
+    
+    function setFocus() {
+        insertGrid.currentIndex = 0
+        insertGrid.forceActiveFocus()
+    }
+    
+    Keys.onEscapePressed: close()
 }
diff --git a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/ExpressionEditor.qml b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/ExpressionEditor.qml
index 8251a3f..af32b43 100644
--- a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/ExpressionEditor.qml
+++ b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/ExpressionEditor.qml
@@ -500,29 +500,41 @@ Item {
     
     Button {
         id: insertButton
-        text: "α"
         anchors.right: parent.right
         anchors.rightMargin: 5
         anchors.verticalCenter: parent.verticalCenter
         width: 20
         height: width
+        
+        Icon {
+            id: icon
+            width: 12
+            height: 12
+            anchors.centerIn: parent
+            
+            color: sysPalette.windowText
+            source: '../icons/properties/expression.svg'
+        }
+        
         onClicked: {
             insertPopup.open()
-            insertPopup.focus = true
+            insertPopup.setFocus()
         }
     }
     
     P.InsertCharacter {
         id: insertPopup
         
-        x: Math.round((parent.width - width) / 2)
-        y: Math.round((parent.height - height) / 2)
+        x: parent.width - width
+        y: parent.height
         
         category: "expression"
         
         onSelected: function(c) {
             editor.insert(editor.cursorPosition, c)
-            insertPopup.close()
+        }
+        
+        onClosed: function() {
             focus = false
             editor.focus = true
         }
diff --git a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/TextSetting.qml b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/TextSetting.qml
index 3689dc1..8d1ca41 100644
--- a/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/TextSetting.qml
+++ b/runtime-pyside6/LogarithmPlotter/qml/eu/ad5001/LogarithmPlotter/Setting/TextSetting.qml
@@ -144,28 +144,40 @@ Item {
     
     Button {
         id: insertButton
-        text: "α"
         anchors.right: parent.right
         anchors.rightMargin: 5
         anchors.verticalCenter: parent.verticalCenter
         width: 20
         height: width
         visible: !isInt && !isDouble
+        
+        Icon {
+            id: icon
+            width: 12
+            height: 12
+            anchors.centerIn: parent
+            
+            color: sysPalette.windowText
+            source: '../icons/properties/expression.svg'
+        }
+        
         onClicked: {
             insertPopup.open()
-            insertPopup.focus = true
+            insertPopup.setFocus()
         }
     }
     
     Popup.InsertCharacter {
         id: insertPopup
         
-        x: Math.round((parent.width - width) / 2)
-        y: Math.round((parent.height - height) / 2)
+        x: parent.width - width
+        y: parent.height
         
         onSelected: function(c) {
             input.insert(input.cursorPosition, c)
-            insertPopup.close()
+        }
+        
+        onClosed: function() {
             focus = false
             input.focus = true
         }