See-through keyboard background with optional blur

- Opacity slider for the panel behind the keys (10–100%); keys stay opaque - Blur Behind: asks the compositor (KWin) to blur under the rounded panel via KF6 WindowSystem; skipped at full opacity - Settings panel draws over the window background so changes show live, and scrolls when it doesn't fit Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-14 22:26:01 +02:00
parent e02b1a8237
commit 2e418bd1f7
10 changed files with 175 additions and 9 deletions
@@ -0,0 +1,81 @@
+import QtQuick
+
+// A labelled slider in the iOS style; value runs from `from` to 1.
+Item {
+    id: row
+
+    required property string text
+    property real from: 0
+    property real value: 1
+    signal moved(real value)
+
+    implicitHeight: 52
+
+    function moveTo(x) {
+        const fraction = Math.max(0, Math.min(1, (x - knob.width / 2) / (track.width - knob.width)));
+        row.moved(row.from + fraction * (1 - row.from));
+    }
+
+    Text {
+        id: label
+        anchors { left: parent.left; verticalCenter: parent.verticalCenter }
+        width: Math.min(implicitWidth, parent.width / 3)
+        text: row.text
+        color: Theme.text
+        font.pixelSize: 16
+        elide: Text.ElideRight
+    }
+
+    Text {
+        id: percent
+        anchors { right: parent.right; verticalCenter: parent.verticalCenter }
+        width: 44
+        horizontalAlignment: Text.AlignRight
+        text: Math.round(row.value * 100) + "%"
+        color: Theme.secondaryText
+        font.pixelSize: 14
+    }
+
+    Item {
+        id: track
+        anchors { left: label.right; leftMargin: 12; right: percent.left; rightMargin: 8 }
+        height: parent.height
+
+        readonly property real fraction: (row.value - row.from) / (1 - row.from)
+
+        Rectangle {
+            anchors { left: parent.left; right: parent.right; verticalCenter: parent.verticalCenter }
+            height: 4
+            radius: 2
+            color: Theme.functionKey
+
+            Rectangle {
+                width: knob.x + knob.width / 2
+                height: parent.height
+                radius: parent.radius
+                color: Theme.accent
+            }
+        }
+
+        Rectangle {
+            id: knob
+            x: track.fraction * (track.width - width)
+            anchors.verticalCenter: parent.verticalCenter
+            width: 26
+            height: width
+            radius: width / 2
+            color: "#ffffff"
+            border { color: Theme.keyShadow; width: 0.5 }
+        }
+
+        TapHandler {
+            onTapped: eventPoint => row.moveTo(eventPoint.position.x)
+        }
+        DragHandler {
+            target: null
+            xAxis.enabled: true
+            yAxis.enabled: false
+            onCentroidChanged: if (active) row.moveTo(centroid.position.x)
+        }
+    }
+}