DemoPanel improved layout

Modules/DemoPanel/DemoPanel.qml

@@ -21,12 +21,10 @@ NPanel {
     radius: Style.radiusMedium * scaling
     border.color: Theme.backgroundTertiary
     border.width: Math.max(1, 1.5 * scale)
-    width: 340 * scaling
+    width: 500 * scaling
-    height: 200
+    height: 300
-    anchors.top: parent.top
+    anchors.centerIn: parent
-    anchors.right: parent.right
+
-    anchors.topMargin: 4 * scaling
-    anchors.rightMargin: 4 * scaling
 
     // Prevent closing when clicking in the panel bg
     MouseArea {
@@ -38,12 +36,13 @@ NPanel {
       anchors.margins: 16 * scaling
       spacing: 12 * scaling
 
-      NToggle {
+
-        label: "Label"
+      // NIconButton
-        description: "Description"
+      RowLayout {
-        onToggled: function(value: bool) {
+        spacing: 16 * scaling
-          console.log("NToggle: " + value)
+        Text {
-        }
+          text: "NIconButton"
+          color: Theme.textPrimary
         }
 
         NIconButton {
@@ -56,6 +55,25 @@ NPanel {
             myTooltip.hide();
           }
         }
+      }
+
+
+      // NToggle
+      RowLayout {
+        spacing: 16 * scaling
+        uniformCellSizes: true
+        Text {
+          text: "NToggle + NTooltip"
+          color: Theme.textPrimary
+        }
+
+        NToggle {
+          label: "Label"
+          description: "Description"
+          onToggled: function(value: bool) {
+            console.log("NToggle: " + value)
+          }
+        }
 
         NTooltip {
           id: myTooltip
@@ -63,9 +81,18 @@ NPanel {
           positionAbove: false
           text: "Hello world"
         }
+      }
+
+      // NSlider
+      RowLayout {
+        spacing: 16 * scaling
+        Text {
+          text: "NSlider"
+          color: Theme.textPrimary
+        }
 
         NSlider {}
-     
+      }
 
     }
   }