NCombox + NTextInput proper label/description support

+ Associated changes in window settings

Modules/DemoPanel/DemoPanel.qml

@@ -146,6 +146,8 @@ NLoader {
             }
 
             NComboBox {
+              label: "Animal"
+              description: "What's your favorite"
               optionsKeys: ["cat", "dog", "bird", "monkey", "fish", "turtle", "elephant", "tiger"]
               optionsLabels: ["Cat", "Dog", "Bird", "Monkey", "Fish", "Turtle", "Elephant", "Tiger"]
               currentKey: "cat"
@@ -169,16 +171,18 @@ NLoader {
             }
 
             NTextInput {
+              label: "Input label"
+              description: "A cool description"
               text: "Type anything"
               Layout.fillWidth: true
               onEditingFinished: {
 
               }
+            }
             NDivider {
               Layout.fillWidth: true
             }
           }
-          }
 
           // NBusyIndicator
           ColumnLayout {

Modules/Settings/Tabs/General.qml

@@ -58,20 +58,10 @@ ColumnLayout {
               borderColor: Colors.accentPrimary
               borderWidth: Math.max(1, Style.borderMedium)
             }
-            ColumnLayout {
+
-              Layout.fillWidth: true
-              spacing: Style.marginTiny * scaling
-              NText {
-                text: "Profile Picture"
-                color: Colors.textPrimary
-                font.weight: Style.fontWeightBold
-              }
-              NText {
-                text: "Your profile picture displayed in various places throughout the shell"
-                color: Colors.textSecondary
-                font.pointSize: Style.fontSizeSmall * scaling
-              }
             NTextInput {
+              label: "Profile Picture"
+              description: "Your profile picture displayed in various places throughout the shell"
               text: Settings.data.general.avatarImage
               placeholderText: "/home/user/.face"
               Layout.fillWidth: true
@@ -82,7 +72,6 @@ ColumnLayout {
           }
         }
       }
-      }
 
       NDivider {
         Layout.fillWidth: true

Modules/Settings/Tabs/Network.qml

@@ -16,8 +16,7 @@ ColumnLayout {
 
     Layout.fillWidth: true
     Layout.fillHeight: true
-    padding: 16
+    padding: Style.marginMedium * scaling
-    rightPadding: 12
     clip: true
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
     ScrollBar.vertical.policy: ScrollBar.AsNeeded
@@ -32,26 +31,12 @@ ColumnLayout {
       }
 
       ColumnLayout {
-        spacing: 4
+        spacing: Style.marginLarge * scaling
         Layout.fillWidth: true
 
         NText {
           text: "Network Settings"
-          font.pointSize: 18
+          font.pointSize: Style.fontSizeXL * scaling
-          font.weight: Style.fontWeightBold
-          color: Colors.textPrimary
-          Layout.bottomMargin: 8
-        }
-
-        // Network interfaces section
-        ColumnLayout {
-          spacing: 8
-          Layout.fillWidth: true
-          Layout.topMargin: 8
-
-          NText {
-            text: "Network Interfaces"
-            font.pointSize: 13
           font.weight: Style.fontWeightBold
           color: Colors.textPrimary
         }
@@ -76,5 +61,4 @@ ColumnLayout {
       }
     }
   }
-  }
 }

Modules/Settings/Tabs/ScreenRecorder.qml

@@ -33,7 +33,7 @@ ColumnLayout {
         Layout.fillWidth: true
 
         NText {
-          text: "Screen Recording"
+          text: "Recording"
           font.pointSize: Style.fontSizeXL * scaling
           font.weight: Style.fontWeightBold
           color: Colors.textPrimary
@@ -46,24 +46,10 @@ ColumnLayout {
           Layout.fillWidth: true
           Layout.topMargin: Style.marginSmall * scaling
 
-          ColumnLayout {
-            spacing: Style.marginTiny * scaling
-
-            NText {
-              text: "Output Directory"
-              font.weight: Style.fontWeightBold
-              color: Colors.textPrimary
-            }
-
-            NText {
-              text: "Directory where screen recordings will be saved"
-              font.pointSize: Style.fontSizeSmall * scaling
-              color: Colors.textSecondary
-              wrapMode: Text.WordWrap
-            }
-          }
-
           NTextInput {
+            label: "Output Directory"
+            description: "Directory where screen recordings will be saved"
+            placeholderText: "/home/xxx/Videos"
             text: Settings.data.screenRecorder.directory
             onEditingFinished: {
               Settings.data.screenRecorder.directory = text

Modules/Settings/Tabs/TimeWeather.qml

@@ -47,8 +47,10 @@ ColumnLayout {
           Layout.topMargin: Style.marginSmall * scaling
 
           NTextInput {
+            label: "Location name"
+            description: "Choose a known location near you"
             text: Settings.data.location.name
-            placeholderText: "Enter city name"
+            placeholderText: "Enter the location name"
             Layout.fillWidth: true
             onEditingFinished: {
               Settings.data.location.name = text

Modules/Settings/Tabs/Wallpaper.qml

@@ -14,8 +14,7 @@ ColumnLayout {
 
     Layout.fillWidth: true
     Layout.fillHeight: true
-    padding: 16
+    padding: Style.marginMedium * scaling
-    rightPadding: 12
     clip: true
     ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
     ScrollBar.vertical.policy: ScrollBar.AsNeeded

Widgets/NComboBox.qml

@@ -59,7 +59,7 @@ ColumnLayout {
       implicitWidth: 120 * scaling
       implicitHeight: preferredHeight
       color: Colors.surfaceVariant
-      border.color: root.activeFocus ? Colors.hover : Colors.outline
+      border.color: combo.activeFocus ? Colors.hover : Colors.outline
       border.width: Math.max(1, Style.borderThin * scaling)
       radius: Style.radiusMedium * scaling
     }
@@ -69,7 +69,6 @@ ColumnLayout {
       leftPadding: Style.marginLarge * scaling
       rightPadding: combo.indicator.width + Style.marginLarge * scaling
       font.pointSize: Style.fontSizeMedium * scaling
-      font.weight: Style.fontWeightBold
       verticalAlignment: Text.AlignVCenter
       elide: Text.ElideRight
       text: {
@@ -79,16 +78,16 @@ ColumnLayout {
 
     // Drop down indicator
     indicator: NText {
-      x: root.width - width - Style.marginMedium * scaling
+      x: combo.width - width - Style.marginMedium * scaling
-      y: root.topPadding + (root.availableHeight - height) / 2
+      y: combo.topPadding + (combo.availableHeight - height) / 2
       text: "arrow_drop_down"
       font.family: "Material Symbols Outlined"
       font.pointSize: Style.fontSizeXL * scaling
     }
 
     popup: Popup {
-      y: root.height
+      y: combo.height
-      width: root.width
+      width: combo.width
       implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2)
       padding: Style.marginMedium * scaling
 
@@ -109,8 +108,8 @@ ColumnLayout {
     }
 
     delegate: ItemDelegate {
-      width: root.width
+      width: combo.width
-      highlighted: root.highlightedIndex === index
+      highlighted: combo.highlightedIndex === index
 
       contentItem: NText {
         text: {
@@ -123,7 +122,7 @@ ColumnLayout {
       }
 
       background: Rectangle {
-        width: root.width - Style.marginMedium * scaling * 3
+        width: combo.width - Style.marginMedium * scaling * 3
         color: highlighted ? Colors.hover : "transparent"
         radius: Style.radiusSmall * scaling
       }

Widgets/NTextInput.qml

@@ -7,23 +7,45 @@ Item {
   id: root
 
   readonly property real scaling: Scaling.scale(screen)
-
+  property string label: ""
-  // API
+  property string description: ""
-  property alias text: input.text
-  property alias placeholderText: input.placeholderText
   property bool readOnly: false
   property bool enabled: true
 
+  property alias text: input.text
+  property alias placeholderText: input.placeholderText
+
   signal editingFinished
 
   // Sizing
   implicitWidth: 320 * scaling
-  implicitHeight: Style.baseWidgetSize * 1.25 * scaling
+  implicitHeight: Style.baseWidgetSize * 2.75 * scaling
+
+  ColumnLayout {
+    spacing: Style.marginTiniest * scaling
+    Layout.fillWidth: true
+
+    NText {
+      text: label
+      font.pointSize: Style.fontSizeMedium * scaling
+      font.weight: Style.fontWeightBold
+      color: Colors.textPrimary
+    }
+
+    NText {
+      text: description
+      font.pointSize: Style.fontSizeSmall * scaling
+      color: Colors.textSecondary
+      wrapMode: Text.WordWrap
+      Layout.fillWidth: true
+    }
 
     // Container
     Rectangle {
       id: frame
-    anchors.fill: parent
+      Layout.topMargin: Style.marginTiny * scaling
+      implicitWidth: root.width
+      implicitHeight: Style.baseWidgetSize * 1.35 * scaling
       radius: Style.radiusMedium * scaling
       color: Colors.surfaceVariant
       border.color: Colors.outline
@@ -62,4 +84,5 @@ Item {
         }
       }
     }
+  }
 }