Floating Bar: simplified settings

Commons/Settings.qml

@@ -269,11 +269,8 @@ Singleton {
 
         // Floating bar settings
         property bool floating: false
-        property real rounding: 12.0
+        property real marginVertical: 0.25
-        property real marginTop: 16.0
+        property real marginHorizontal: 0.25
-        property real marginBottom: 16.0
-        property real marginLeft: 16.0
-        property real marginRight: 16.0
 
         property bool showActiveWindowIcon: true // TODO: delete
         property bool alwaysShowBatteryPercentage: false // TODO: delete

Modules/Bar/Bar.qml

@@ -46,10 +46,10 @@ Variants {
 
       // Floating bar margins - only apply when floating is enabled
       margins {
-        top: Settings.data.bar.floating ? Settings.data.bar.marginTop : 0
+        top: Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL : 0
-        bottom: Settings.data.bar.floating ? Settings.data.bar.marginBottom : 0
+        bottom: Settings.data.bar.floating ? Settings.data.bar.marginVertical * Style.marginXL : 0
-        left: Settings.data.bar.floating ? Settings.data.bar.marginLeft : 0
+        left: Settings.data.bar.floating ? Settings.data.bar.marginHorizontal * Style.marginXL : 0
-        right: Settings.data.bar.floating ? Settings.data.bar.marginRight : 0
+        right: Settings.data.bar.floating ? Settings.data.bar.marginHorizontal * Style.marginXL : 0
       }
 
       Item {
@@ -64,7 +64,7 @@ Variants {
           color: Qt.alpha(Color.mSurface, Settings.data.bar.backgroundOpacity)
 
           // Floating bar rounded corners
-          radius: Settings.data.bar.floating ? Settings.data.bar.rounding : 0
+          radius: Settings.data.bar.floating ? Style.radiusL : 0
         }
 
         // ------------------------------

Modules/SettingsPanel/Tabs/BarTab.qml

@@ -98,72 +98,23 @@ ColumnLayout {
     // Floating bar options - only show when floating is enabled
     ColumnLayout {
       visible: Settings.data.bar.floating
-      spacing: Style.marginXXS * scaling
+      spacing: Style.marginS * scaling
       Layout.fillWidth: true
 
-      NText {
+      NLabel {
-        text: "Rounding"
+        label: "Margins"
-        font.pointSize: Style.fontSizeL * scaling
+        description: "Adjust the margins around the floating bar."
-        font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
-      }
-
-      NText {
-        text: "Adjust the corner rounding of the floating bar."
-        font.pointSize: Style.fontSizeXS * scaling
-        color: Color.mOnSurfaceVariant
-        wrapMode: Text.WordWrap
-        Layout.fillWidth: true
       }
 
       RowLayout {
-        NSlider {
-          Layout.fillWidth: true
-          from: 0
-          to: 50
-          stepSize: 1
-          value: Settings.data.bar.rounding
-          onMoved: Settings.data.bar.rounding = value
-          cutoutColor: Color.mSurface
-        }
-
-        NText {
-          text: Math.round(Settings.data.bar.rounding) + "px"
-          Layout.alignment: Qt.AlignVCenter
-          Layout.leftMargin: Style.marginS * scaling
-          Layout.preferredWidth: 50
-          horizontalAlignment: Text.AlignRight
-          color: Color.mOnSurface
-        }
-      }
-
-      NText {
-        text: "Margins"
-        font.pointSize: Style.fontSizeL * scaling
-        font.weight: Style.fontWeightBold
-        color: Color.mOnSurface
-        Layout.topMargin: Style.marginM * scaling
-      }
-
-      NText {
-        text: "Adjust the margins around the floating bar."
-        font.pointSize: Style.fontSizeXS * scaling
-        color: Color.mOnSurfaceVariant
-        wrapMode: Text.WordWrap
         Layout.fillWidth: true
-      }
+        spacing: Style.marginL * scaling
-
-      GridLayout {
-        columns: 2
-        Layout.fillWidth: true
-        rowSpacing: Style.marginS * scaling
-        columnSpacing: Style.marginS * scaling
 
         ColumnLayout {
           spacing: Style.marginXXS * scaling
 
           NText {
-            text: "Top"
+            text: "Vertical"
             font.pointSize: Style.fontSizeXS * scaling
             color: Color.mOnSurfaceVariant
           }
@@ -172,44 +123,15 @@ ColumnLayout {
             NSlider {
               Layout.fillWidth: true
               from: 0
-              to: 50
+              to: 1
-              stepSize: 1
+              stepSize: 0.01
-              value: Settings.data.bar.marginTop
+              value: Settings.data.bar.marginVertical
-              onMoved: Settings.data.bar.marginTop = value
+              onMoved: Settings.data.bar.marginVertical = value
               cutoutColor: Color.mSurface
             }
 
             NText {
-              text: Math.round(Settings.data.bar.marginTop) + "px"
+              text: Math.round(Settings.data.bar.marginVertical * 100) + "%"
-              Layout.alignment: Qt.AlignVCenter
-              Layout.leftMargin: Style.marginXS * scaling
-              color: Color.mOnSurface
-            }
-          }
-        }
-
-        ColumnLayout {
-          spacing: Style.marginXXS * scaling
-
-          NText {
-            text: "Bottom"
-            font.pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-          }
-
-          RowLayout {
-            NSlider {
-              Layout.fillWidth: true
-              from: 0
-              to: 50
-              stepSize: 1
-              value: Settings.data.bar.marginBottom
-              onMoved: Settings.data.bar.marginBottom = value
-              cutoutColor: Color.mSurface
-            }
-
-            NText {
-              text: Math.round(Settings.data.bar.marginBottom) + "px"
               Layout.alignment: Qt.AlignVCenter
               Layout.leftMargin: Style.marginXS * scaling
               Layout.preferredWidth: 50
@@ -223,7 +145,7 @@ ColumnLayout {
           spacing: Style.marginXXS * scaling
 
           NText {
-            text: "Left"
+            text: "Horizontal"
             font.pointSize: Style.fontSizeXS * scaling
             color: Color.mOnSurfaceVariant
           }
@@ -232,46 +154,15 @@ ColumnLayout {
             NSlider {
               Layout.fillWidth: true
               from: 0
-              to: 50
+              to: 1
-              stepSize: 1
+              stepSize: 0.01
-              value: Settings.data.bar.marginLeft
+              value: Settings.data.bar.marginHorizontal
-              onMoved: Settings.data.bar.marginLeft = value
+              onMoved: Settings.data.bar.marginHorizontal = value
               cutoutColor: Color.mSurface
             }
 
             NText {
-              text: Math.round(Settings.data.bar.marginLeft) + "px"
+              text: Math.round(Settings.data.bar.marginHorizontal * 100) + "%"
-              Layout.alignment: Qt.AlignVCenter
-              Layout.leftMargin: Style.marginXS * scaling
-              Layout.preferredWidth: 50
-              horizontalAlignment: Text.AlignRight
-              color: Color.mOnSurface
-            }
-          }
-        }
-
-        ColumnLayout {
-          spacing: Style.marginXXS * scaling
-
-          NText {
-            text: "Right"
-            font.pointSize: Style.fontSizeXS * scaling
-            color: Color.mOnSurfaceVariant
-          }
-
-          RowLayout {
-            NSlider {
-              Layout.fillWidth: true
-              from: 0
-              to: 50
-              stepSize: 1
-              value: Settings.data.bar.marginRight
-              onMoved: Settings.data.bar.marginRight = value
-              cutoutColor: Color.mSurface
-            }
-
-            NText {
-              text: Math.round(Settings.data.bar.marginRight) + "px"
               Layout.alignment: Qt.AlignVCenter
               Layout.leftMargin: Style.marginXS * scaling
               Layout.preferredWidth: 50