ericek111andClaude Opus 5.5
2e418bd1f7
- 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>
82 lines
2.2 KiB
QML
82 lines
2.2 KiB
QML
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)
|
|
}
|
|
}
|
|
}
|