controlcenter: revamped and added more sliders

This commit is contained in:
ATMDA 2025-11-15 19:07:30 -05:00
parent 4ada7ea608
commit ec8da25d19
3 changed files with 1199 additions and 104 deletions

File diff suppressed because it is too large Load diff

View file

@ -336,11 +336,74 @@ RowLayout {
Layout.fillWidth: true
}
StyledRect {
Layout.preferredWidth: 70
implicitHeight: outputVolumeInput.implicitHeight + Appearance.padding.small * 2
color: outputVolumeInputHover.containsMouse || outputVolumeInput.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: outputVolumeInput.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
enabled: !Audio.muted
opacity: enabled ? 1 : 0.5
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: outputVolumeInputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
StyledTextField {
id: outputVolumeInput
anchors.centerIn: parent
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: IntValidator { bottom: 0; top: 100 }
enabled: !Audio.muted
Component.onCompleted: {
text = Math.round(Audio.volume * 100).toString();
}
Connections {
target: Audio
function onVolumeChanged() {
if (!outputVolumeInput.activeFocus) {
outputVolumeInput.text = Math.round(Audio.volume * 100).toString();
}
}
}
onTextChanged: {
if (activeFocus) {
const val = parseInt(text);
if (!isNaN(val) && val >= 0 && val <= 100) {
Audio.setVolume(val / 100);
}
}
}
onEditingFinished: {
const val = parseInt(text);
if (isNaN(val) || val < 0 || val > 100) {
text = Math.round(Audio.volume * 100).toString();
}
}
}
}
StyledText {
text: Audio.muted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.volume * 100))
color: Audio.muted ? Colours.palette.m3primary : Colours.palette.m3outline
text: "%"
color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.normal
font.weight: 500
opacity: Audio.muted ? 0.5 : 1
}
StyledRect {
@ -362,20 +425,26 @@ RowLayout {
id: muteIcon
anchors.centerIn: parent
text: Audio.muted ? "volume_off" : "volume_mute"
text: Audio.muted ? "volume_off" : "volume_up"
color: Audio.muted ? Colours.palette.m3onSecondary : Colours.palette.m3onSecondaryContainer
}
}
}
StyledSlider {
id: outputVolumeSlider
Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3
value: Audio.volume
enabled: !Audio.muted
opacity: enabled ? 1 : 0.5
onMoved: Audio.setVolume(value)
onMoved: {
Audio.setVolume(value);
if (!outputVolumeInput.activeFocus) {
outputVolumeInput.text = Math.round(value * 100).toString();
}
}
}
}
}
@ -406,11 +475,74 @@ RowLayout {
Layout.fillWidth: true
}
StyledRect {
Layout.preferredWidth: 70
implicitHeight: inputVolumeInput.implicitHeight + Appearance.padding.small * 2
color: inputVolumeInputHover.containsMouse || inputVolumeInput.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: inputVolumeInput.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
enabled: !Audio.sourceMuted
opacity: enabled ? 1 : 0.5
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: inputVolumeInputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
StyledTextField {
id: inputVolumeInput
anchors.centerIn: parent
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: IntValidator { bottom: 0; top: 100 }
enabled: !Audio.sourceMuted
Component.onCompleted: {
text = Math.round(Audio.sourceVolume * 100).toString();
}
Connections {
target: Audio
function onSourceVolumeChanged() {
if (!inputVolumeInput.activeFocus) {
inputVolumeInput.text = Math.round(Audio.sourceVolume * 100).toString();
}
}
}
onTextChanged: {
if (activeFocus) {
const val = parseInt(text);
if (!isNaN(val) && val >= 0 && val <= 100) {
Audio.setSourceVolume(val / 100);
}
}
}
onEditingFinished: {
const val = parseInt(text);
if (isNaN(val) || val < 0 || val > 100) {
text = Math.round(Audio.sourceVolume * 100).toString();
}
}
}
}
StyledText {
text: Audio.sourceMuted ? qsTr("Muted") : qsTr("%1%").arg(Math.round(Audio.sourceVolume * 100))
color: Audio.sourceMuted ? Colours.palette.m3primary : Colours.palette.m3outline
text: "%"
color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.normal
font.weight: 500
opacity: Audio.sourceMuted ? 0.5 : 1
}
StyledRect {
@ -439,13 +571,19 @@ RowLayout {
}
StyledSlider {
id: inputVolumeSlider
Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3
value: Audio.sourceVolume
enabled: !Audio.sourceMuted
opacity: enabled ? 1 : 0.5
onMoved: Audio.setSourceVolume(value)
onMoved: {
Audio.setSourceVolume(value);
if (!inputVolumeInput.activeFocus) {
inputVolumeInput.text = Math.round(value * 100).toString();
}
}
}
}
}

View file

@ -239,14 +239,102 @@ RowLayout {
}
}
SpinBoxRow {
label: qsTr("Drag threshold")
min: 0
max: 100
value: root.dragThreshold
onValueModified: value => {
root.dragThreshold = value;
root.saveConfig();
SectionContainer {
contentSpacing: Appearance.spacing.normal
ColumnLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.small
RowLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.normal
StyledText {
text: qsTr("Drag threshold")
font.pointSize: Appearance.font.size.normal
}
Item {
Layout.fillWidth: true
}
StyledRect {
Layout.preferredWidth: 70
implicitHeight: dragThresholdInput.implicitHeight + Appearance.padding.small * 2
color: dragThresholdInputHover.containsMouse || dragThresholdInput.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: dragThresholdInput.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: dragThresholdInputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
StyledTextField {
id: dragThresholdInput
anchors.centerIn: parent
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: IntValidator { bottom: 0; top: 100 }
Component.onCompleted: {
text = root.dragThreshold.toString();
}
onTextChanged: {
if (activeFocus) {
const val = parseInt(text);
if (!isNaN(val) && val >= 0 && val <= 100) {
root.dragThreshold = val;
root.saveConfig();
}
}
}
onEditingFinished: {
const val = parseInt(text);
if (isNaN(val) || val < 0 || val > 100) {
text = root.dragThreshold.toString();
}
}
}
}
StyledText {
text: "px"
color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.normal
}
}
StyledSlider {
id: dragThresholdSlider
Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3
from: 0
to: 100
value: root.dragThreshold
onMoved: {
root.dragThreshold = Math.round(dragThresholdSlider.value);
if (!dragThresholdInput.activeFocus) {
dragThresholdInput.text = Math.round(dragThresholdSlider.value).toString();
}
root.saveConfig();
}
}
}
}
}