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

Modules/Bar/Bar.qml

@@ -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

Modules/DemoPanel/DemoPanel.qml

@@ -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
+                  from: 1.0
-                  to: 1.8
+                  to: 2.0
                   stepSize: 0.01
-                  value: ScalingService.overrideScale
+                  value: sliderValue
-                  implicitWidth: bgRect.width * 0.75
-                  onMoved: {
-
-                  }
                   onPressedChanged: {
-                    ScalingService.overrideScale = value
+                    sliderValue = value
-                    ScalingService.overrideEnabled = true
                   }
+                  Layout.fillWidth: true
                 }
                 NIconButton {
                   icon: "refresh"
                   tooltipText: "Reset Scaling"
                   fontPointSize: Style.fontSizeL * scaling
                   onClicked: {
-                    ScalingService.overrideEnabled = false
+                    sliderValue = 1.0
-                    ScalingService.overrideScale = 1.0
                   }
                 }
               }

Modules/SettingsPanel/Tabs/AudioTab.qml

@@ -63,23 +63,11 @@ ColumnLayout {
             spacing: Style.marginS * scaling
             Layout.fillWidth: true
 
-            ColumnLayout {
+            NLabel {
-              spacing: Style.marginXXS * scaling
+              label: "Master Volume"
-
+              description: "System-wide volume level."
-              NText {
-                text: "Master Volume"
-                font.weight: Style.fontWeightBold
-                color: Color.mOnSurface
             }
 
-              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 {
+            NLabel {
-              text: "Output Device"
+              label: "Output Device"
-              font.pointSize: Style.fontSizeM * scaling
+              description: "Select the desired audio output device."
-              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
             }
 
             Repeater {
@@ -199,23 +177,13 @@ ColumnLayout {
         }
 
         ColumnLayout {
-          spacing: Style.marginXXS * scaling
+          spacing: Style.marginXS * scaling
           Layout.fillWidth: true
           Layout.bottomMargin: Style.marginL * scaling
 
-          NText {
+          NLabel {
-            text: "Input Device"
+            label: "Input Device"
-            font.pointSize: Style.fontSizeM * scaling
+            description: "Select the desired audio input device."
-            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
           }
 
           Repeater {

Modules/SettingsPanel/Tabs/DisplayTab.qml

@@ -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

Widgets/NComboBox.qml

@@ -22,21 +22,9 @@ ColumnLayout {
   spacing: Style.marginS * scaling
   Layout.fillWidth: true
 
-  ColumnLayout {
+  NLabel {
-    spacing: Style.marginXXS * scaling
+    label: root.label
-    Layout.fillWidth: true
+    description: root.description
-    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
-    }
   }
 
   function findIndexByKey(key) {

Widgets/NLabel.qml

@@ -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
+  }
+}

Widgets/NTextInput.qml

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