Cause handle is not counted as part of height, so add extra padding to bottom so it looks better
88 lines
2.4 KiB
QML
88 lines
2.4 KiB
QML
pragma ComponentBehavior: Bound
|
|
|
|
import QtQuick
|
|
import QtQuick.Layouts
|
|
import Caelestia.Config
|
|
import qs.components
|
|
import qs.components.controls
|
|
import qs.services
|
|
import qs.modules.nexus.common
|
|
|
|
ConnectedRect {
|
|
id: root
|
|
|
|
property alias icon: icon.text
|
|
property alias label: label.text
|
|
property alias valueLabel: valueLabel.text
|
|
property real value
|
|
|
|
signal moved(value: real)
|
|
|
|
implicitHeight: rowLayout.implicitHeight + rowLayout.anchors.margins + rowLayout.anchors.topMargin
|
|
|
|
RowLayout {
|
|
id: rowLayout
|
|
|
|
anchors.fill: parent
|
|
anchors.margins: Tokens.padding.largeIncreased
|
|
anchors.topMargin: Tokens.padding.large
|
|
spacing: Tokens.spacing.medium
|
|
|
|
MaterialIcon {
|
|
id: icon
|
|
|
|
color: Colours.palette.m3onSurfaceVariant
|
|
font: Tokens.font.icon.medium
|
|
}
|
|
|
|
ColumnLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Tokens.spacing.medium
|
|
|
|
RowLayout {
|
|
Layout.fillWidth: true
|
|
spacing: Tokens.spacing.small
|
|
|
|
StyledText {
|
|
id: label
|
|
|
|
Layout.fillWidth: true
|
|
font: Tokens.font.body.small
|
|
elide: Text.ElideRight
|
|
}
|
|
|
|
StyledText {
|
|
id: valueLabel
|
|
|
|
color: Colours.palette.m3outline
|
|
font: Tokens.font.body.small
|
|
}
|
|
}
|
|
|
|
CustomMouseArea {
|
|
function onWheel(event: WheelEvent): void {
|
|
const step = GlobalConfig.services.audioIncrement;
|
|
if (event.angleDelta.y > 0)
|
|
root.moved(Math.min(1, root.value + step));
|
|
else if (event.angleDelta.y < 0)
|
|
root.moved(Math.max(0, root.value - step));
|
|
}
|
|
|
|
Layout.fillWidth: true
|
|
implicitHeight: Tokens.padding.medium * 2
|
|
|
|
StyledSlider {
|
|
anchors.left: parent.left
|
|
anchors.right: parent.right
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
implicitHeight: parent.implicitHeight
|
|
|
|
radius: Tokens.rounding.small
|
|
value: root.value
|
|
enabled: root.enabled
|
|
onInteraction: v => root.moved(v)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|