103 lines
2.6 KiB
QML
103 lines
2.6 KiB
QML
import QtQuick
|
|
import qs.config
|
|
|
|
// One labelled slider: glyph, name and reading on top, the slider under them.
|
|
// Both rows of the controls panel are this.
|
|
//
|
|
// The glyph goes in `content`, so each row can bring its own — and, where the
|
|
// glyph does something when clicked (mute), say so with `iconClickable`.
|
|
Item {
|
|
id: root
|
|
|
|
property string label: ""
|
|
property string valueText: ""
|
|
property real value: 0
|
|
property real stepSize: 0.05
|
|
// Selected by the keyboard, which is what arrow keys move.
|
|
property bool selected: false
|
|
property bool iconClickable: false
|
|
|
|
default property alias content: glyph.data
|
|
|
|
signal moved(real value)
|
|
signal iconClicked
|
|
|
|
implicitHeight: header.height + slider.height
|
|
|
|
function step(delta: real): void {
|
|
slider.step(delta);
|
|
}
|
|
|
|
Item {
|
|
id: header
|
|
|
|
anchors {
|
|
left: parent.left
|
|
right: parent.right
|
|
top: parent.top
|
|
}
|
|
height: Theme.iconSize
|
|
|
|
Item {
|
|
id: glyph
|
|
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
width: childrenRect.width
|
|
height: childrenRect.height
|
|
}
|
|
|
|
// Sibling of the glyph rather than a child of it: inside, it would be
|
|
// part of the childrenRect the glyph sizes itself from.
|
|
MouseArea {
|
|
anchors.fill: glyph
|
|
enabled: root.iconClickable
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: root.iconClicked()
|
|
}
|
|
|
|
Text {
|
|
anchors {
|
|
left: glyph.right
|
|
right: reading.left
|
|
leftMargin: Theme.padding
|
|
rightMargin: Theme.padding
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
elide: Text.ElideRight
|
|
text: root.label
|
|
color: root.selected ? Theme.accent : Theme.text
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSize
|
|
font.bold: true
|
|
}
|
|
|
|
Text {
|
|
id: reading
|
|
|
|
anchors {
|
|
right: parent.right
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
text: root.valueText
|
|
color: Theme.textDim
|
|
font.family: Theme.fontFamily
|
|
font.pixelSize: Theme.fontSizeSmall
|
|
font.bold: true
|
|
}
|
|
}
|
|
|
|
Slider {
|
|
id: slider
|
|
|
|
anchors {
|
|
left: parent.left
|
|
right: parent.right
|
|
top: header.bottom
|
|
}
|
|
value: root.value
|
|
stepSize: root.stepSize
|
|
|
|
onMoved: value => root.moved(value)
|
|
}
|
|
}
|