Settings ui: better label/description managment via NLabel (wip)

This commit is contained in:
quadbyte 2025-08-18 19:04:05 -04:00
parent 3e55dc3c04
commit 7c191b3de5
7 changed files with 55 additions and 88 deletions

View file

@ -123,7 +123,6 @@ Variants {
// icon: "experiment"
// tooltipText: "Open Demo Panel"
// sizeMultiplier: 0.8
// showBorder: false
// anchors.verticalCenter: parent.verticalCenter
// onClicked: {
// demoPanel.isLoaded = !demoPanel.isLoaded

View file

@ -14,6 +14,8 @@ NLoader {
NPanel {
id: demoPanel
property real sliderValue: 1.0
// Override hide function to animate first
function hide() {
// Start hide animation
@ -128,38 +130,33 @@ NLoader {
ColumnLayout {
spacing: Style.marginL * scaling
NText {
text: "Scaling"
text: "NSlider"
color: Color.mSecondary
font.weight: Style.fontWeightBold
}
NText {
text: `${Math.round(ScalingService.overrideScale * 100)}%`
text: `${Math.round(sliderValue * 100)}%`
Layout.alignment: Qt.AlignVCenter
}
RowLayout {
spacing: Style.marginS * scaling
NSlider {
id: scaleSlider
from: 0.6
to: 1.8
from: 1.0
to: 2.0
stepSize: 0.01
value: ScalingService.overrideScale
implicitWidth: bgRect.width * 0.75
onMoved: {
}
value: sliderValue
onPressedChanged: {
ScalingService.overrideScale = value
ScalingService.overrideEnabled = true
sliderValue = value
}
Layout.fillWidth: true
}
NIconButton {
icon: "refresh"
tooltipText: "Reset Scaling"
fontPointSize: Style.fontSizeL * scaling
onClicked: {
ScalingService.overrideEnabled = false
ScalingService.overrideScale = 1.0
sliderValue = 1.0
}
}
}

View file

@ -63,23 +63,11 @@ ColumnLayout {
spacing: Style.marginS * scaling
Layout.fillWidth: true
ColumnLayout {
spacing: Style.marginXXS * scaling
NText {
text: "Master Volume"
font.weight: Style.fontWeightBold
color: Color.mOnSurface
NLabel {
label: "Master Volume"
description: "System-wide volume level."
}
NText {
text: "System-wide volume level."
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
}
}
RowLayout {
// Pipewire seems a bit finicky, if we spam too many volume changes it breaks easily
// Probably because they have some quick fades in and out to avoid clipping
@ -160,23 +148,13 @@ ColumnLayout {
}
ColumnLayout {
spacing: Style.marginXXS * scaling
spacing: Style.marginXS * scaling
Layout.fillWidth: true
Layout.bottomMargin: Style.marginL * scaling
NText {
text: "Output Device"
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: "Select the desired audio output device."
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
NLabel {
label: "Output Device"
description: "Select the desired audio output device."
}
Repeater {
@ -199,23 +177,13 @@ ColumnLayout {
}
ColumnLayout {
spacing: Style.marginXXS * scaling
spacing: Style.marginXS * scaling
Layout.fillWidth: true
Layout.bottomMargin: Style.marginL * scaling
NText {
text: "Input Device"
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: "Select desired audio input device."
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
NLabel {
label: "Input Device"
description: "Select the desired audio input device."
}
Repeater {

View file

@ -136,13 +136,13 @@ Item {
spacing: Style.marginXXS * scaling
Layout.fillWidth: true
NText {
text: "Scaling"
text: "Scale"
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: `Controls the scaling on this monitor.`
text: "Scale the user interface on this monitor."
font.pointSize: Style.fontSizeS * scaling
color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap

View file

@ -22,21 +22,9 @@ ColumnLayout {
spacing: Style.marginS * scaling
Layout.fillWidth: true
ColumnLayout {
spacing: Style.marginXXS * scaling
Layout.fillWidth: true
NText {
text: label
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: description
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
}
NLabel {
label: root.label
description: root.description
}
function findIndexByKey(key) {

25
Widgets/NLabel.qml Normal file
View file

@ -0,0 +1,25 @@
import QtQuick
import QtQuick.Layouts
import qs.Commons
ColumnLayout {
property string label: ""
property string description: ""
spacing: Style.marginXXS * scaling
Layout.fillWidth: true
NText {
text: label
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: description
font.pointSize: Style.fontSizeS * scaling
color: Color.mOnSurfaceVariant
wrapMode: Text.WordWrap
}
}

View file

@ -25,19 +25,9 @@ Item {
spacing: Style.marginXXS * scaling
Layout.fillWidth: true
NText {
text: label
font.pointSize: Style.fontSizeM * scaling
font.weight: Style.fontWeightBold
color: Color.mOnSurface
}
NText {
text: description
font.pointSize: Style.fontSizeXS * scaling
color: Color.mOnSurface
wrapMode: Text.WordWrap
Layout.fillWidth: true
NLabel {
label: root.label
description: root.description
}
// Container