nosignal/nosignal-shell
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

controlcenter: refactor SliderInput and StyledInputFields to use qt components and consolidated SliderInputs to single component

Browse source
This commit is contained in:
ATMDA 2025-11-20 21:58:55 -05:00
parent 284e7b4297
commit 7779de55bb
4 changed files with 174 additions and 353 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
components/controls/StyledInputField.qml Normal file
View file

@ -0,0 +1,80 @@
pragma ComponentBehavior: Bound
import ".."
import qs.components
import qs.services
import qs.config
import QtQuick
Item {
id: root
property string text: ""
property var validator: null
property bool readOnly: false
property int horizontalAlignment: TextInput.AlignHCenter
property int implicitWidth: 70
property bool enabled: true
// Expose activeFocus through alias to avoid FINAL property override
readonly property alias hasFocus: inputField.activeFocus
signal textEdited(string text)
signal editingFinished()
implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2
StyledRect {
id: container
anchors.fill: parent
color: inputHover.containsMouse || inputField.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: inputField.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
opacity: root.enabled ? 1 : 0.5
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: inputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
enabled: root.enabled
}
StyledTextField {
id: inputField
anchors.centerIn: parent
width: parent.width - Appearance.padding.normal
horizontalAlignment: root.horizontalAlignment
validator: root.validator
readOnly: root.readOnly
enabled: root.enabled
Binding {
target: inputField
property: "text"
value: root.text
when: !inputField.activeFocus
}
onTextChanged: {
root.text = text;
root.textEdited(text);
}
onEditingFinished: {
root.editingFinished();
}
}
}
}

82
modules/controlcenter/audio/AudioPane.qml
View file

@ -263,36 +263,9 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
StyledRect { StyledInputField {
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 id: outputVolumeInput
anchors.centerIn: parent Layout.preferredWidth: 70
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: IntValidator { bottom: 0; top: 100 } validator: IntValidator { bottom: 0; top: 100 }
enabled: !Audio.muted enabled: !Audio.muted
@ -303,20 +276,21 @@ Item {
Connections { Connections {
target: Audio target: Audio
function onVolumeChanged() { function onVolumeChanged() {
if (!outputVolumeInput.activeFocus) { if (!outputVolumeInput.hasFocus) {
outputVolumeInput.text = Math.round(Audio.volume * 100).toString(); outputVolumeInput.text = Math.round(Audio.volume * 100).toString();
} }
} }
} }
onTextChanged: { onTextEdited: (text) => {
if (activeFocus) { if (hasFocus) {
const val = parseInt(text); const val = parseInt(text);
if (!isNaN(val) && val >= 0 && val <= 100) { if (!isNaN(val) && val >= 0 && val <= 100) {
Audio.setVolume(val / 100); Audio.setVolume(val / 100);
} }
} }
} }
onEditingFinished: { onEditingFinished: {
const val = parseInt(text); const val = parseInt(text);
if (isNaN(val) || val < 0 || val > 100) { if (isNaN(val) || val < 0 || val > 100) {
@ -324,7 +298,6 @@ Item {
} }
} }
} }
}
StyledText { StyledText {
text: "%" text: "%"
@ -368,7 +341,7 @@ Item {
opacity: enabled ? 1 : 0.5 opacity: enabled ? 1 : 0.5
onMoved: { onMoved: {
Audio.setVolume(value); Audio.setVolume(value);
if (!outputVolumeInput.activeFocus) { if (!outputVolumeInput.hasFocus) {
outputVolumeInput.text = Math.round(value * 100).toString(); outputVolumeInput.text = Math.round(value * 100).toString();
} }
} }
@ -402,36 +375,9 @@ Item {
Layout.fillWidth: true Layout.fillWidth: true
} }
StyledRect { StyledInputField {
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 id: inputVolumeInput
anchors.centerIn: parent Layout.preferredWidth: 70
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: IntValidator { bottom: 0; top: 100 } validator: IntValidator { bottom: 0; top: 100 }
enabled: !Audio.sourceMuted enabled: !Audio.sourceMuted
@ -442,20 +388,21 @@ Item {
Connections { Connections {
target: Audio target: Audio
function onSourceVolumeChanged() { function onSourceVolumeChanged() {
if (!inputVolumeInput.activeFocus) { if (!inputVolumeInput.hasFocus) {
inputVolumeInput.text = Math.round(Audio.sourceVolume * 100).toString(); inputVolumeInput.text = Math.round(Audio.sourceVolume * 100).toString();
} }
} }
} }
onTextChanged: { onTextEdited: (text) => {
if (activeFocus) { if (hasFocus) {
const val = parseInt(text); const val = parseInt(text);
if (!isNaN(val) && val >= 0 && val <= 100) { if (!isNaN(val) && val >= 0 && val <= 100) {
Audio.setSourceVolume(val / 100); Audio.setSourceVolume(val / 100);
} }
} }
} }
onEditingFinished: { onEditingFinished: {
const val = parseInt(text); const val = parseInt(text);
if (isNaN(val) || val < 0 || val > 100) { if (isNaN(val) || val < 0 || val > 100) {
@ -463,7 +410,6 @@ Item {
} }
} }
} }
}
StyledText { StyledText {
text: "%" text: "%"
@ -507,7 +453,7 @@ Item {
opacity: enabled ? 1 : 0.5 opacity: enabled ? 1 : 0.5
onMoved: { onMoved: {
Audio.setSourceVolume(value); Audio.setSourceVolume(value);
if (!inputVolumeInput.activeFocus) { if (!inputVolumeInput.hasFocus) {
inputVolumeInput.text = Math.round(value * 100).toString(); inputVolumeInput.text = Math.round(value * 100).toString();
} }
} }

40
modules/controlcenter/components/SliderInput.qml
View file

@ -76,34 +76,9 @@ ColumnLayout {
Layout.fillWidth: true Layout.fillWidth: true
} }
StyledRect { StyledInputField {
Layout.preferredWidth: 70
implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2
color: inputHover.containsMouse || inputField.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: inputField.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: inputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
StyledTextField {
id: inputField id: inputField
anchors.centerIn: parent Layout.preferredWidth: 70
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: root.validator validator: root.validator
Component.onCompleted: { Component.onCompleted: {
@ -111,8 +86,8 @@ ColumnLayout {
text = root.formatValue(root.value); text = root.formatValue(root.value);
} }
onTextChanged: { onTextEdited: (text) => {
if (activeFocus) { if (hasFocus) {
const val = root.parseValue(text); const val = root.parseValue(text);
if (!isNaN(val)) { if (!isNaN(val)) {
// Validate against validator bounds if available // Validate against validator bounds if available
@ -150,7 +125,6 @@ ColumnLayout {
} }
} }
} }
}
StyledText { StyledText {
visible: root.suffix !== "" visible: root.suffix !== ""
@ -181,7 +155,7 @@ ColumnLayout {
onValueChanged: { onValueChanged: {
// Update input field text in real-time as slider moves during dragging // Update input field text in real-time as slider moves during dragging
// Always update when slider value changes (during dragging or external updates) // Always update when slider value changes (during dragging or external updates)
if (!inputField.activeFocus) { if (!inputField.hasFocus) {
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value; const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
inputField.text = root.formatValue(newValue); inputField.text = root.formatValue(newValue);
} }
@ -190,7 +164,7 @@ ColumnLayout {
onMoved: { onMoved: {
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value; const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
root.valueModified(newValue); root.valueModified(newValue);
if (!inputField.activeFocus) { if (!inputField.hasFocus) {
inputField.text = root.formatValue(newValue); inputField.text = root.formatValue(newValue);
} }
} }
@ -199,7 +173,7 @@ ColumnLayout {
// Update input field when value changes externally (slider is already bound) // Update input field when value changes externally (slider is already bound)
onValueChanged: { onValueChanged: {
// Only update if component is initialized to avoid issues during creation // Only update if component is initialized to avoid issues during creation
if (root._initialized && !inputField.activeFocus) { if (root._initialized && !inputField.hasFocus) {
inputField.text = root.formatValue(root.value); inputField.text = root.formatValue(root.value);
} }
} }

179
modules/controlcenter/components/controls/SliderInput.qml
View file

@ -1,179 +0,0 @@
pragma ComponentBehavior: Bound
import ".."
import qs.components
import qs.components.controls
import qs.components.effects
import QtQuick
import QtQuick.Layouts
ColumnLayout {
id: root
property string label: ""
property real value: 0
property real from: 0
property real to: 100
property real stepSize: 0
property var validator: null
property string suffix: "" // Optional suffix text (e.g., "×", "px")
property var formatValueFunction: null // Optional custom format function
property var parseValueFunction: null // Optional custom parse function
function formatValue(val: real): string {
if (formatValueFunction) {
return formatValueFunction(val);
}
// Default format function
if (validator && validator.bottom !== undefined) {
// Check if it's an integer validator
if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
return Math.round(val).toString();
}
}
return val.toFixed(1);
}
function parseValue(text: string): real {
if (parseValueFunction) {
return parseValueFunction(text);
}
// Default parse function
if (validator && validator.bottom !== undefined) {
// Check if it's an integer validator
if (validator.top !== undefined && validator.top === Math.floor(validator.top)) {
return parseInt(text);
}
}
return parseFloat(text);
}
signal valueChanged(real newValue)
spacing: Appearance.spacing.small
RowLayout {
Layout.fillWidth: true
spacing: Appearance.spacing.normal
StyledText {
visible: root.label !== ""
text: root.label
font.pointSize: Appearance.font.size.normal
}
Item {
Layout.fillWidth: true
}
StyledRect {
Layout.preferredWidth: 70
implicitHeight: inputField.implicitHeight + Appearance.padding.small * 2
color: inputHover.containsMouse || inputField.activeFocus
? Colours.layer(Colours.palette.m3surfaceContainer, 3)
: Colours.layer(Colours.palette.m3surfaceContainer, 2)
radius: Appearance.rounding.small
border.width: 1
border.color: inputField.activeFocus
? Colours.palette.m3primary
: Qt.alpha(Colours.palette.m3outline, 0.3)
Behavior on color { CAnim {} }
Behavior on border.color { CAnim {} }
MouseArea {
id: inputHover
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.IBeamCursor
acceptedButtons: Qt.NoButton
}
StyledTextField {
id: inputField
anchors.centerIn: parent
width: parent.width - Appearance.padding.normal
horizontalAlignment: TextInput.AlignHCenter
validator: root.validator
Component.onCompleted: {
text = root.formatValue(root.value);
}
onTextChanged: {
if (activeFocus) {
const val = root.parseValue(text);
if (!isNaN(val)) {
// Validate against validator bounds if available
let isValid = true;
if (root.validator) {
if (root.validator.bottom !== undefined && val < root.validator.bottom) {
isValid = false;
}
if (root.validator.top !== undefined && val > root.validator.top) {
isValid = false;
}
}
if (isValid) {
root.valueChanged(val);
}
}
}
}
onEditingFinished: {
const val = root.parseValue(text);
let isValid = true;
if (root.validator) {
if (root.validator.bottom !== undefined && val < root.validator.bottom) {
isValid = false;
}
if (root.validator.top !== undefined && val > root.validator.top) {
isValid = false;
}
}
if (isNaN(val) || !isValid) {
text = root.formatValue(root.value);
}
}
}
}
StyledText {
visible: root.suffix !== ""
text: root.suffix
color: Colours.palette.m3outline
font.pointSize: Appearance.font.size.normal
}
}
StyledSlider {
id: slider
Layout.fillWidth: true
implicitHeight: Appearance.padding.normal * 3
from: root.from
to: root.to
stepSize: root.stepSize
value: root.value
onMoved: {
const newValue = root.stepSize > 0 ? Math.round(value / root.stepSize) * root.stepSize : value;
root.valueChanged(newValue);
if (!inputField.activeFocus) {
inputField.text = root.formatValue(newValue);
}
}
}
// Update input field when value changes externally (slider is already bound)
onValueChanged: {
if (!inputField.activeFocus) {
inputField.text = root.formatValue(root.value);
}
}
}