From 0ca36fec46e75342148d1228d32a3ca619eed978 Mon Sep 17 00:00:00 2001
From: Fabian Vogt <fabian@ritter-vogt.de>
Date: Sun, 25 Dec 2022 20:01:45 +0100
Subject: [PATCH] New keypad button design

Represent the button pressed state as raising/lowering the button. Hovering
is shown separately by a change in color.
---
 qml/Keypad.qml      |  2 --
 qml/NButton.qml     | 44 ++++++++++++++++++++++++++------------------
 qml/NDualButton.qml | 21 +++++----------------
 3 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/qml/Keypad.qml b/qml/Keypad.qml
index b39d2ec0..a865a079 100644
--- a/qml/Keypad.qml
+++ b/qml/Keypad.qml
@@ -193,7 +193,6 @@ Rectangle {
             text: "var"
             Layout.preferredWidth: -1
             Layout.fillWidth: false
-            border.width: 1
             clip: false
             keymap_id: 56
             Layout.column: 2
@@ -324,7 +323,6 @@ Rectangle {
     NBigButton {
         id: nButton7
         width: 33
-        color: "#68cce0"
         text: "ctrl"
         anchors.top: gridLayout1.top
         anchors.topMargin: 0
diff --git a/qml/NButton.qml b/qml/NButton.qml
index 90e8886f..f7afa77c 100644
--- a/qml/NButton.qml
+++ b/qml/NButton.qml
@@ -6,7 +6,6 @@ Rectangle {
     property string back_color: "#223"
     property string font_color: "#fff"
     property alias text: label.text
-    property bool active: pressed || mouseArea.containsMouse
     property bool pressed: false
     // Pressing the right mouse button "locks" the button in enabled state
     property bool fixed: false
@@ -14,10 +13,33 @@ Rectangle {
 
     signal clicked()
 
-    border.width: active ? 2 : 1
-    border.color: "#888"
     radius: 4
-    color: active ? active_color : back_color
+    color: "#888"
+
+    Rectangle {
+        width: parent.width
+        height: parent.height
+        x: pressed ? -0 : -1
+        y: pressed ? -0 : -1
+        radius: parent.radius
+        border.width: 1
+        border.color: parent.color
+        color: mouseArea.containsMouse ? active_color : back_color
+
+        Text {
+            id: label
+            text: "Foo"
+            anchors.fill: parent
+            anchors.centerIn: parent
+            font.pixelSize: height*0.55
+            color: font_color
+            font.bold: true
+            // Workaround: Text.AutoText doesn't seem to work for properties (?)
+            textFormat: text.indexOf(">") == -1 ? Text.PlainText : Text.RichText
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+        }
+    }
 
     onPressedChanged: {
         if(pressed)
@@ -37,20 +59,6 @@ Rectangle {
         }
     }
 
-    Text {
-        id: label
-        text: "Foo"
-        anchors.fill: parent
-        anchors.centerIn: parent
-        font.pixelSize: height*0.55
-        color: font_color
-        font.bold: true
-        // Workaround: Text.AutoText doesn't seem to work for properties (?)
-        textFormat: text.indexOf(">") == -1 ? Text.PlainText : Text.RichText
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-    }
-
     // This is needed to support pressing multiple buttons at once on multitouch
     MultiPointTouchArea {
         id: multiMouseArea
diff --git a/qml/NDualButton.qml b/qml/NDualButton.qml
index 1c7c186a..31e51a01 100644
--- a/qml/NDualButton.qml
+++ b/qml/NDualButton.qml
@@ -36,31 +36,20 @@ Rectangle {
     }
 
     Rectangle {
-        id: rectangle1
         width: 8
-        height: 20
-        color: "#222233"
-        radius: 0
+        height: 21
+        color: "#888"
         anchors.verticalCenterOffset: 5
-        anchors.horizontalCenterOffset: 0
-        z: 0
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.horizontalCenter: parent.horizontalCenter
-        border.width: 1
-        border.color: "#888"
+        anchors.centerIn: parent
     }
 
     Rectangle {
-        id: rectangle2
         width: 8
         height: 18
         color: "#222233"
-        radius: 0
-        anchors.verticalCenterOffset: 5
-        anchors.horizontalCenterOffset: 0
+        anchors.verticalCenterOffset: 4
+        anchors.centerIn: parent
         z: 1
-        anchors.horizontalCenter: parent.horizontalCenter
-        anchors.verticalCenter: parent.verticalCenter
     }
 
     Text {