finish appearance tab of settings

modules/widgets/settingsapp/Appearance.qml

@@ -4,7 +4,6 @@ import qs.reusables
 import QtQuick.Layouts
 import qs.settings
 import Quickshell.Widgets
-import QtQuick.Controls
 import QtQuick.Dialogs
 
 ClippingWrapperRectangle {
@@ -35,9 +34,10 @@ ClippingWrapperRectangle {
         anchors.fill: parent
         ClippingWrapperRectangle {
             id: fontWrapper
+            Layout.fillWidth: true
             leftMargin: 10
-            rightMargin: 10
+            rightMargin: 15
-            implicitWidth: 300
+            implicitWidth: parent.implicitWidth - 20
             topLeftRadius: 12
             topRightRadius: 12
             bottomRightRadius: 4
@@ -50,12 +50,12 @@ ClippingWrapperRectangle {
                 spacing: 40
                 CustomText {
                     id: fontText
-                    text: "current font: " + Settings.config.font
+                    text: "Current font"
                     Layout.fillWidth: true
                 }
                 CustomButton {
                     id: fontPickerButton
-                    customText: "pick font"
+                    customText: Settings.config.font
                     implicitHeight: fontWrapper.implicitHeight - 10
                     onClicked: fontPicker.open()
                 }
@@ -63,12 +63,12 @@ ClippingWrapperRectangle {
         }
         ClippingWrapperRectangle {
             id: floatingWrapper
+            Layout.fillWidth: true
             leftMargin: 10
-            rightMargin: 10
+            rightMargin: 20
             implicitHeight: 30
-            implicitWidth: 300
+            bottomLeftRadius: 4
-            bottomLeftRadius: 12
+            bottomRightRadius: 4
-            bottomRightRadius: 12
             topRightRadius: 4
             topLeftRadius: 4
             color: Colors.surfaceContainerHigh
@@ -77,16 +77,202 @@ ClippingWrapperRectangle {
                 spacing: 40
                 CustomText {
                     id: floatingToggleText
-                    text: "top bar floating"
+                    text: "Top bar floating"
                     Layout.fillWidth: true
                 }
                 CustomSwitch {
+                    checked: Settings.config.floating
                     implicitHeight: floatingWrapper.implicitHeight - 10
                     implicitWidth: 34
-                    onToggled: {
+                    onClicked: {
-                        Settings.config.floating = !Settings.config.floating;
+                        Settings.config.floating = checked;
+                    }
+                }
+            }
+        }
+        ClippingWrapperRectangle {
+            id: screenCornerWrapper
+            Layout.fillWidth: true
+            leftMargin: 10
+            rightMargin: 20
+            implicitHeight: 30
+            bottomLeftRadius: 4
+            bottomRightRadius: 4
+            topRightRadius: 4
+            topLeftRadius: 4
+            color: Colors.surfaceContainerHigh
+            child: RowLayout {
+                id: screenCornerLayout
+                spacing: 40
+                CustomText {
+                    id: screenCornerText
+                    text: "Show screen corners"
+                    Layout.fillWidth: true
+                }
+                CustomSwitch {
+                    checked: Settings.config.showScreenCorners
+                    implicitHeight: floatingWrapper.implicitHeight - 10
+                    implicitWidth: 34
+                    onClicked: {
+                        Settings.config.showScreenCorners = checked;
+                    }
+                }
+            }
+        }
+        ClippingWrapperRectangle {
+            id: screenCornerRadiusWrapper
+            Layout.fillWidth: true
+            leftMargin: 10
+            rightMargin: 15
+            implicitHeight: 30
+            bottomLeftRadius: 4
+            bottomRightRadius: 4
+            topRightRadius: 4
+            topLeftRadius: 4
+            color: Colors.surfaceContainerHigh
+            child: RowLayout {
+                id: screenCornerRadiusLayout
+                spacing: 5
+                CustomText {
+                    id: screenCornerRadiusText
+                    text: "Screen corner radius"
+                    Layout.fillWidth: true
+                }
+                CustomButton {
+                    implicitHeight: screenCornerRadiusWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.screenCornerRadius = Settings.config.screenCornerRadius + 1;
+                    }
+                    customText: "+"
+                    Layout.rightMargin: 0
+                }
+                CustomText {
+                    text: Settings.config.screenCornerRadius
+                }
+
+                CustomButton {
+                    implicitHeight: barHeightWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.screenCornerRadius = Settings.config.screenCornerRadius - 1;
+                    }
+                    customText: "-"
+                    Layout.rightMargin: 0
+                }
+            }
+        }
+        ClippingWrapperRectangle {
+            id: barHeightWrapper
+            Layout.fillWidth: true
+            leftMargin: 10
+            rightMargin: 15
+            implicitHeight: 30
+            bottomLeftRadius: 4
+            bottomRightRadius: 4
+            topRightRadius: 4
+            topLeftRadius: 4
+            color: Colors.surfaceContainerHigh
+            child: RowLayout {
+                id: barControlsLayout
+                spacing: 5
+                CustomText {
+                    id: barControlsText
+                    text: "Bar height"
+                    Layout.fillWidth: true
+                }
+                CustomButton {
+                    implicitHeight: barHeightWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.barHeight = Settings.config.barHeight + 1;
+                    }
+                    customText: "+"
+                    Layout.rightMargin: 0
+                }
+                CustomText {
+                    text: Settings.config.barHeight
+                }
+
+                CustomButton {
+                    implicitHeight: barHeightWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.barHeight = Settings.config.barHeight - 1;
+                    }
+                    customText: "-"
+                    Layout.rightMargin: 0
+                }
+            }
+        }
+        ClippingWrapperRectangle {
+            id: barMarginWrapper
+            Layout.fillWidth: true
+            leftMargin: 10
+            rightMargin: 15
+            implicitHeight: 30
+            bottomLeftRadius: 4
+            bottomRightRadius: 4
+            topRightRadius: 4
+            topLeftRadius: 4
+            color: Colors.surfaceContainerHigh
+            child: RowLayout {
+                id: barMarginLayout
+                spacing: 5
+                CustomText {
+                    id: barMarginText
+                    text: "Bar margins"
+                    Layout.fillWidth: true
+                }
+                CustomButton {
+                    implicitHeight: barMarginWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.margins = Settings.config.margins + 1;
+                    }
+                    customText: "+"
+                }
+                CustomText {
+                    text: Settings.config.margins
+                }
+
+                CustomButton {
+                    implicitHeight: barHeightWrapper.implicitHeight - 10
+                    implicitWidth: 20
+                    onClicked: {
+                        Settings.config.margins = Settings.config.margins - 1;
+                    }
+                    customText: "-"
+                }
+            }
+        }
+        ClippingWrapperRectangle {
+            id: translucencyWrapper
+            leftMargin: 10
+            rightMargin: 10
+            implicitHeight: 30
+            bottomLeftRadius: 12
+            bottomRightRadius: 12
+            topRightRadius: 4
+            topLeftRadius: 4
+            color: Colors.surfaceContainerHigh
+            Layout.fillWidth: true
+            RowLayout {
+                id: translucencyLayout
+                CustomText {
+                    id: translucencyText
+                    text: "Bar trasnlucency"
+                    Layout.fillWidth: true
+                }
+                CustomSlider {
+                    from: 0.0
+                    to: 1.0
+                    value: Settings.config.translucency
+                    implicitWidth: 100
+                    implicitHeight: translucencyWrapper.implicitHeight - 10
+                    onMoved: {
+                        Settings.config.translucency = position;
                     }
-                    Layout.rightMargin: 5
                 }
             }
         }

reusables/CustomButton.qml

@@ -18,6 +18,6 @@ Button {
         border.color: control.down ? Colors.primaryFixed : Colors.primary
         border.width: 1
         radius: parent.implicitHeight / 2
-        color: "transparent"
+        color: Colors.surfaceContainerLow
     }
 }

reusables/CustomSlider.qml

@@ -0,0 +1,35 @@
+import QtQuick
+import QtQuick.Controls.Basic
+import qs
+
+Slider {
+    id: control
+
+    background: Rectangle {
+        x: control.leftPadding
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: control.implicitWidth
+        implicitHeight: 4
+        width: control.availableWidth
+        height: implicitHeight
+        radius: 2
+        color: Colors.surfaceContainerLow
+
+        Rectangle {
+            width: control.visualPosition * parent.width
+            height: parent.height
+            color: Colors.primary
+            radius: 2
+        }
+    }
+
+    handle: Rectangle {
+        x: control.leftPadding + control.visualPosition * (control.availableWidth - width)
+        y: control.topPadding + control.availableHeight / 2 - height / 2
+        implicitWidth: control.implicitHeight - 2
+        implicitHeight: control.implicitHeight - 2
+        radius: 13
+        color: control.pressed ? Colors.primary : Colors.surfaceContainerLow
+        border.color: Colors.outline
+    }
+}