Settings: Wallpaper Tabs cleanup

Modules/Settings/SettingsPanel.qml

@@ -18,7 +18,6 @@ NLoader {
 
       WlrLayershell.keyboardFocus: WlrKeyboardFocus.OnDemand
 
-
       property int currentTabIndex: 0
       property var tabsModel: [{
           "label": "General",

Modules/Settings/Tabs/Wallpaper.qml

@@ -29,44 +29,31 @@ ColumnLayout {
       }
 
       ColumnLayout {
-        spacing: 4
+        spacing: Style.marginTiny * scaling
         Layout.fillWidth: true
 
         NText {
-          text: "Wallpaper Settings"
+          text: "Directory"
-          font.pointSize: 18
+          font.pointSize: Style.fontSizeXL * scaling
           font.weight: Style.fontWeightBold
           color: Colors.textPrimary
-          Layout.bottomMargin: 8
+          Layout.bottomMargin: Style.marginSmall * scaling
         }
 
         // Wallpaper Settings Category
         ColumnLayout {
           spacing: 8
           Layout.fillWidth: true
-          Layout.topMargin: 8
+          Layout.topMargin: Style.marginSmall * scaling
 
           // Wallpaper Folder
           ColumnLayout {
-            spacing: 8
+            spacing: Style.marginSmall * scaling
             Layout.fillWidth: true
 
-            NText {
-              text: "Wallpaper Folder"
-              font.pointSize: 13
-              font.weight: Style.fontWeightBold
-              color: Colors.textPrimary
-            }
-
-            NText {
-              text: "Path to your wallpaper folder"
-              font.pointSize: 12
-              color: Colors.textSecondary
-              wrapMode: Text.WordWrap
-              Layout.fillWidth: true
-            }
-
             NTextInput {
+              label: "Wallpaper Directory"
+              description: "Path to your wallpaper directory"
               text: Settings.data.wallpaper.directory
               Layout.fillWidth: true
               onEditingFinished: {
@@ -79,12 +66,12 @@ ColumnLayout {
 
       NDivider {
         Layout.fillWidth: true
-        Layout.topMargin: 26
+        Layout.topMargin: Style.marginLarge * 2 * scaling
-        Layout.bottomMargin: 18
+        Layout.bottomMargin: Style.marginLarge * scaling
       }
 
       ColumnLayout {
-        spacing: 4
+        spacing: Style.marginLarge * scaling
         Layout.fillWidth: true
 
         NText {
@@ -115,29 +102,54 @@ ColumnLayout {
           }
         }
 
-        // Wallpaper Interval
+        // Interval
-        // NSlider {
+        ColumnLayout {
-        //   label: "Wallpaper Interval"
+          RowLayout {
-        //   description: "How often to change wallpapers automatically (in seconds)"
+            Layout.fillWidth: true
-        //   valueSuffix: "s"
+
-        //   from: 10
+            ColumnLayout {
-        //   to: 900
+              NText {
-        //   stepSize: 10
+                text: "Wallpaper Interval"
-        //   value: Settings.data.wallpaper.randomInterval
+                font.weight: Style.fontWeightBold
-        //   onPressedChanged: function (pressed, value) {
+                color: Colors.textPrimary
-        //     Settings.data.wallpaper.randomInterval = Math.round(value)
+              }
-        //   }
+
-        //   cutoutColor: Colors.backgroundPrimary
+              NText {
-        //   Layout.fillWidth: true
+                text: "How often to change wallpapers automatically (in seconds)"
-        // }
+                font.pointSize: Style.fontSizeSmall * scaling
+                color: Colors.textSecondary
+                wrapMode: Text.WordWrap
+                Layout.fillWidth: true
+              }
+            }
+
+            NText {
+              text: sliderWpInterval.value + " seconds"
+              Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+            }
+          }
+
+          NSlider {
+            id: sliderWpInterval
+            Layout.fillWidth: true
+            from: 10
+            to: 900
+            stepSize: 10
+            value: Settings.data.wallpaper.randomInterval
+            onPressedChanged: Settings.data.wallpaper.randomInterval = Math.round(value)
+            cutoutColor: Colors.backgroundPrimary
+          }
+        }
       }
 
       NDivider {
         Layout.fillWidth: true
-        Layout.topMargin: 26
+        Layout.topMargin: Style.marginLarge * 2 * scaling
-        Layout.bottomMargin: 18
+        Layout.bottomMargin: Style.marginLarge * scaling
       }
 
+      // -------------------------------
+      // SWWW
       ColumnLayout {
         spacing: 4
         Layout.fillWidth: true
@@ -168,26 +180,9 @@ ColumnLayout {
           visible: Settings.data.wallpaper.swww.enabled
 
           // Resize Mode
-          ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-
-            NText {
-              text: "Resize Mode"
-              font.pointSize: 13
-              font.weight: Style.fontWeightBold
-              color: Colors.textPrimary
-            }
-
-            NText {
-              text: "How SWWW should resize wallpapers to fit the screen"
-              font.pointSize: 12
-              color: Colors.textSecondary
-              wrapMode: Text.WordWrap
-              Layout.fillWidth: true
-            }
-
           NComboBox {
+            label: "Resize Mode"
+            description: "How SWWW should resize wallpapers to fit the screen"
             optionsKeys: ["no", "crop", "fit", "stretch"]
             optionsLabels: ["No", "Crop", "Fit", "Stretch"]
             currentKey: Settings.data.wallpaper.swww.resizeMethod
@@ -195,30 +190,11 @@ ColumnLayout {
               Settings.data.wallpaper.swww.resizeMethod = key
             }
           }
-          }
 
           // Transition Type
-          ColumnLayout {
-            spacing: 8
-            Layout.fillWidth: true
-            Layout.topMargin: 8
-
-            NText {
-              text: "Transition Type"
-              font.pointSize: 13
-              font.weight: Style.fontWeightBold
-              color: Colors.textPrimary
-            }
-
-            NText {
-              text: "Animation type when switching between wallpapers"
-              font.pointSize: 12
-              color: Colors.textSecondary
-              wrapMode: Text.WordWrap
-              Layout.fillWidth: true
-            }
-
           NComboBox {
+            label: "Transition Type"
+            description: "Animation type when switching between wallpapers"
             optionsKeys: ["none", "simple", "fade", "left", "right", "top", "bottom", "wipe", "wave", "grow", "center", "any", "outer", "random"]
             optionsLabels: ["None", "Simple", "Fade", "Left", "Right", "Top", "Bottom", "Wipe", "Wave", "Grow", "Center", "Any", "Outer", "Random"]
             currentKey: Settings.data.wallpaper.swww.transitionType
@@ -226,39 +202,84 @@ ColumnLayout {
               Settings.data.wallpaper.swww.transitionType = key
             }
           }
-          }
 
           // Transition FPS
-          // NSlider {
+          ColumnLayout {
-          //   label: "Transition FPS"
+            RowLayout {
-          //   description: "Frames per second for transition animations"
+              Layout.fillWidth: true
-          //   valueSuffix: " FPS"
+
-          //   from: 30
+              ColumnLayout {
-          //   to: 500
+                NText {
-          //   stepSize: 5
+                  text: "Transition FPS"
-          //   value: Settings.data.wallpaper.swww.transitionFps
+                  font.weight: Style.fontWeightBold
-          //   onPressedChanged: function (pressed, value) {
+                  color: Colors.textPrimary
-          //     Settings.data.wallpaper.swww.transitionFps = Math.round(value)
+                }
-          //   }
+
-          //   cutoutColor: Colors.backgroundPrimary
+                NText {
-          //   Layout.fillWidth: true
+                  text: "Frames per second for transition animations"
-          // }
+                  font.pointSize: Style.fontSizeSmall * scaling
+                  color: Colors.textSecondary
+                  wrapMode: Text.WordWrap
+                  Layout.fillWidth: true
+                }
+              }
+
+              NText {
+                text: sliderWpTransitionFps.value + " FPS"
+                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+              }
+            }
+
+            NSlider {
+              id: sliderWpTransitionFps
+              Layout.fillWidth: true
+              from: 30
+              to: 500
+              stepSize: 5
+              value: Settings.data.wallpaper.swww.transitionFps
+              onPressedChanged: Settings.data.wallpaper.swww.transitionFps = Math.round(value)
+              cutoutColor: Colors.backgroundPrimary
+            }
+          }
 
           // Transition Duration
-          // NSlider {
+          ColumnLayout {
-          //   label: "Transition Duration"
+            RowLayout {
-          //   description: "Duration of transition animations in seconds"
+              Layout.fillWidth: true
-          //   valueSuffix: "s"
+
-          //   from: 0.25
+              ColumnLayout {
-          //   to: 10
+                NText {
-          //   stepSize: 0.05
+                  text: "Transition Duration"
-          //   value: Settings.data.wallpaper.swww.transitionDuration
+                  font.weight: Style.fontWeightBold
-          //   onPressedChanged: function (pressed, value) {
+                  color: Colors.textPrimary
-          //     Settings.data.wallpaper.swww.transitionDuration = value
+                }
-          //   }
+
-          //   cutoutColor: Colors.backgroundPrimary
+                NText {
-          //   Layout.fillWidth: true
+                  text: "Duration of transition animations in seconds"
-          // }
+                  font.pointSize: Style.fontSizeSmall * scaling
+                  color: Colors.textSecondary
+                  wrapMode: Text.WordWrap
+                  Layout.fillWidth: true
+                }
+              }
+
+              NText {
+                text: sliderWpTransitionDuration.value.toFixed(2) + "s"
+                Layout.alignment: Qt.AlignBottom | Qt.AlignRight
+              }
+            }
+
+            NSlider {
+              id: sliderWpTransitionDuration
+              Layout.fillWidth: true
+              from: 0.25
+              to: 10
+              stepSize: 0.05
+              value: Settings.data.wallpaper.swww.transitionDuration
+              onPressedChanged: Settings.data.wallpaper.swww.transitionDuration = value
+              cutoutColor: Colors.backgroundPrimary
+            }
+          }
         }
       }
     }