internal: position slider handle correctly

Also better labels for audio popout
This commit is contained in:
2 * r + 2 * t 2025-08-05 16:15:51 +10:00
parent 7eea88774b
commit 2628ee1c41
2 changed files with 19 additions and 21 deletions

View file

@ -1,59 +1,57 @@
import qs.components import qs.components
import qs.config
import qs.services import qs.services
import QtQuick.Controls import qs.config
import QtQuick import QtQuick
import QtQuick.Controls
Slider { Slider {
id: slider id: root
background: Item { background: Item {
StyledRect { StyledRect {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: parent.left anchors.left: parent.left
anchors.topMargin: slider.implicitHeight / 3 anchors.topMargin: root.implicitHeight / 3
anchors.bottomMargin: slider.implicitHeight / 3 anchors.bottomMargin: root.implicitHeight / 3
implicitWidth: slider.handle.x - slider.implicitHeight / 6 implicitWidth: root.handle.x - root.implicitHeight / 6
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.full radius: Appearance.rounding.full
topRightRadius: slider.implicitHeight / 15 topRightRadius: root.implicitHeight / 15
bottomRightRadius: slider.implicitHeight / 15 bottomRightRadius: root.implicitHeight / 15
} }
StyledRect { StyledRect {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: parent.right anchors.right: parent.right
anchors.topMargin: slider.implicitHeight / 3 anchors.topMargin: root.implicitHeight / 3
anchors.bottomMargin: slider.implicitHeight / 3 anchors.bottomMargin: root.implicitHeight / 3
implicitWidth: parent.width - slider.handle.x - slider.handle.implicitWidth - slider.implicitHeight / 6 implicitWidth: parent.width - root.handle.x - root.handle.implicitWidth - root.implicitHeight / 6
color: Colours.palette.m3surfaceContainer color: Colours.palette.m3surfaceContainer
radius: Appearance.rounding.full radius: Appearance.rounding.full
topLeftRadius: slider.implicitHeight / 15 topLeftRadius: root.implicitHeight / 15
bottomLeftRadius: slider.implicitHeight / 15 bottomLeftRadius: root.implicitHeight / 15
} }
} }
handle: StyledRect { handle: StyledRect {
id: rect x: root.visualPosition * root.availableWidth - implicitWidth / 2
x: slider.visualPosition * slider.availableWidth implicitWidth: root.implicitHeight / 4.5
implicitHeight: root.implicitHeight
implicitWidth: slider.implicitHeight / 4.5
implicitHeight: slider.implicitHeight
color: Colours.palette.m3primary color: Colours.palette.m3primary
radius: Appearance.rounding.full radius: Appearance.rounding.full
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
acceptedButtons: Qt.NoButton
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onPressed: event => event.accepted = false
} }
} }
} }

View file

@ -35,7 +35,7 @@ Item {
StyledText { StyledText {
Layout.bottomMargin: Appearance.spacing.small / 2 Layout.bottomMargin: Appearance.spacing.small / 2
text: qsTr("Output") text: qsTr("Output device")
font.weight: 500 font.weight: 500
} }
@ -57,7 +57,7 @@ Item {
StyledText { StyledText {
Layout.topMargin: Appearance.spacing.normal Layout.topMargin: Appearance.spacing.normal
Layout.bottomMargin: Appearance.spacing.small / 2 Layout.bottomMargin: Appearance.spacing.small / 2
text: qsTr("Input") text: qsTr("Input device")
font.weight: 500 font.weight: 500
} }