Settings ui: better label/description managment via NLabel (wip)
This commit is contained in:
parent
3e55dc3c04
commit
7c191b3de5
7 changed files with 55 additions and 88 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
25
Widgets/NLabel.qml
Normal 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
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue