widgets: added icon support to NToggle/NLabel

Assets/settings-search-index.json

@@ -377,24 +377,6 @@
     "subTab": 1,
     "subTabLabel": "common.templates"
   },
-  {
-    "labelKey": "toast.airplane-mode.title",
-    "descriptionKey": null,
-    "widget": "NLabel",
-    "tab": 15,
-    "tabLabel": "panels.connections.title",
-    "subTab": 0,
-    "subTabLabel": "common.wifi"
-  },
-  {
-    "labelKey": "common.wifi",
-    "descriptionKey": null,
-    "widget": "NLabel",
-    "tab": 15,
-    "tabLabel": "panels.connections.title",
-    "subTab": 0,
-    "subTabLabel": "common.wifi"
-  },
   {
     "labelKey": "common.bluetooth",
     "descriptionKey": null,
@@ -440,6 +422,24 @@
     "subTab": 1,
     "subTabLabel": "common.bluetooth"
   },
+  {
+    "labelKey": "toast.airplane-mode.title",
+    "descriptionKey": null,
+    "widget": "NToggle",
+    "tab": 15,
+    "tabLabel": "panels.connections.title",
+    "subTab": 0,
+    "subTabLabel": "common.wifi"
+  },
+  {
+    "labelKey": "common.wifi",
+    "descriptionKey": null,
+    "widget": "NToggle",
+    "tab": 15,
+    "tabLabel": "panels.connections.title",
+    "subTab": 0,
+    "subTabLabel": "common.wifi"
+  },
   {
     "labelKey": "common.position",
     "descriptionKey": "panels.control-center.position-description",

Widgets/NLabel.qml

@@ -8,8 +8,10 @@ ColumnLayout {
 
   property string label: ""
   property string description: ""
+  property string icon: ""
   property color labelColor: Color.mOnSurface
   property color descriptionColor: Color.mOnSurfaceVariant
+  property color iconColor: Color.mOnSurface
   property bool showIndicator: false
   property string indicatorTooltip: ""
 
@@ -22,10 +24,19 @@ ColumnLayout {
   RowLayout {
     spacing: Style.marginXS
     Layout.fillWidth: true
-    visible: label !== ""
+    visible: root.label !== ""
+
+    NIcon {
+      visible: root.icon !== ""
+      icon: root.icon
+      pointSize: Style.fontSizeXXL
+      color: root.iconColor
+      Layout.rightMargin: Style.marginS
+    }
 
     NText {
-      text: label
+      Layout.fillWidth: !root.showIndicator
+      text: root.label
       pointSize: Style.fontSizeL
       font.weight: Style.fontWeightSemiBold
       color: labelColor
@@ -34,27 +45,22 @@ ColumnLayout {
 
     // Settings indicator
     Loader {
-      active: showIndicator
-      sourceComponent: indicatorComponent
-    }
-  }
-
-  Component {
-    id: indicatorComponent
-    NSettingsIndicator {
-      show: true
-      tooltipText: root.indicatorTooltip || ""
-      Layout.alignment: Qt.AlignVCenter
+      active: root.showIndicator
+      sourceComponent: NSettingsIndicator {
+        show: true
+        tooltipText: root.indicatorTooltip || ""
+        Layout.alignment: Qt.AlignVCenter
+      }
     }
   }
 
   NText {
+    visible: root.description !== ""
     Layout.fillWidth: true
-    text: description
+    text: root.description
     pointSize: Style.fontSizeS
-    color: descriptionColor
+    color: root.descriptionColor
     wrapMode: Text.WordWrap
-    visible: description !== ""
     textFormat: Text.StyledText
   }
 }

Widgets/NToggle.qml

@@ -9,6 +9,7 @@ RowLayout {
 
   property string label: ""
   property string description: ""
+  property string icon: ""
   property bool checked: false
   property bool hovering: false
   property int baseSize: Math.round(Style.baseWidgetSize * 0.8 * Style.uiScaleRatio)
@@ -33,6 +34,8 @@ RowLayout {
     Layout.fillWidth: true
     label: root.label
     description: root.description
+    icon: root.icon
+    iconColor: root.checked ? Color.mPrimary : Color.mOnSurface
     visible: root.label !== "" || root.description !== ""
     showIndicator: root.isValueChanged
     indicatorTooltip: root.indicatorTooltip
@@ -63,7 +66,6 @@ RowLayout {
     }
 
     Rectangle {
-
       implicitWidth: Math.round(root.baseSize * 0.4) * 2
       implicitHeight: Math.round(root.baseSize * 0.4) * 2
       radius: Math.min(Style.iRadiusL, height / 2)