make customswitch and extend settings app

modules/widgets/MainWindow.qml

@@ -0,0 +1,99 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Quickshell
+import QtQuick.Dialogs
+import Quickshell.Widgets
+import qs
+import qs.settings
+import qs.reusables
+
+FloatingWindow {
+    id: root
+    visible: Settings.config.settingsShown
+    onClosed: {
+        Settings.config.settingsShown = false;
+    }
+    color: Colors.surface
+    title: "qs-settings"
+    implicitWidth: 800
+    implicitHeight: 600
+    ListModel {
+        id: pageModel
+        ListElement {
+            text: "welcomePage"
+            source: "WelcomePage.qml"
+        }
+        ListElement {
+            text: "Appearance"
+            source: "Appearance.qml"
+        }
+        ListElement {
+            text: "Matugen"
+            source: "Matugen.qml"
+        }
+        ListElement {
+            text: "test"
+            source: "WelcomePage.qml"
+        }
+    }
+    RowLayout {
+        id: windowLayout
+        clip: true
+        anchors.fill: parent
+        spacing: 10
+
+        ClippingWrapperRectangle {
+            id: pageWrapper
+            Layout.margins: 20
+            Layout.fillHeight: true
+            Layout.preferredWidth: 200
+            Layout.rightMargin: 0
+            margin: 20
+            color: Colors.surfaceContainerLow
+            radius: 12
+            ListView {
+                id: pageView
+                clip: true
+                model: pageModel
+                delegate: pageDelegate
+                Component {
+                    id: pageDelegate
+                    Rectangle {
+                        radius: 24
+                        color: ListView.isCurrentItem ? Colors.surfaceContainerHigh : "transparent"
+                        implicitHeight: 30
+                        implicitWidth: pageWrapper.width - 50
+                        required property var modelData
+                        required property int index
+                        CustomText {
+                            id: delegateText
+                            leftPadding: 10
+                            anchors.verticalCenter: parent.verticalCenter
+                            text: parent.modelData.text
+                        }
+                        MouseArea {
+                            id: clickHandler
+                            anchors.fill: parent
+                            cursorShape: Qt.PointingHandCursor
+                            acceptedButtons: Qt.LeftButton
+                            onClicked: {
+                                contentLoader.source = parent.modelData.source;
+                                console.log(parent.index);
+                                pageView.currentIndex = parent.index;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        Loader {
+            id: contentLoader
+            Layout.leftMargin: 0
+            Layout.fillHeight: true
+            Layout.fillWidth: true
+            Layout.margins: 20
+            source: pageModel.get(pageView.currentIndex).source
+        }
+    }
+}

modules/widgets/settingsapp/Appearance.qml

@@ -35,39 +35,50 @@ ClippingWrapperRectangle {
             id: fontWrapper
             radius: 14
             color: Colors.surfaceContainerHigh
-            implicitHeight: fontLayout.implicitHeight + 10
+            implicitHeight: 30
-            implicitWidth: fontLayout.implicitWidth + 10
+            implicitWidth: 300
             RowLayout {
                 id: fontLayout
-                anchors.right: parent.right
                 anchors.verticalCenter: parent.verticalCenter
+                anchors.fill: parent
                 clip: true
                 spacing: 10
                 CustomText {
                     id: fontText
+                    Layout.leftMargin: 20
+                    Layout.alignment: Qt.AlignLeft
                     font.bold: true
                     text: "current font: " + Settings.config.font
                 }
-                Rectangle {
+            }
-                    id: fontSelector
+        }
-                    Layout.rightMargin: 5
+        Rectangle {
-                    implicitWidth: fontSelectorText.implicitWidth + 20
+            id: floatingWrapper
-                    implicitHeight: 20
+            radius: 14
-                    color: Colors.surfaceContainerHigh
+            color: Colors.surfaceContainerHigh
-                    border.width: 2
+            implicitHeight: 30
-                    border.color: Colors.outline
+            implicitWidth: 300
-                    radius: 12
+            RowLayout {
-                    CustomText {
+                id: floatingToggleLayout
-                        id: fontSelectorText
+                anchors.fill: parent
-                        anchors.centerIn: parent
+                anchors.verticalCenter: parent.verticalCenter
-                        text: "Pick Font"
+                clip: true
-                    }
+                spacing: 10
-                    MouseArea {
+                CustomText {
-                        id: fontPickerOpener
+                    id: floatingToggleText
-                        anchors.fill: parent
+                    Layout.leftMargin: 20
-                        acceptedButtons: Qt.LeftButton
+                    Layout.alignment: Qt.AlignLeft
-                        cursorShape: Qt.PointingHandCursor
+                    font.bold: true
-                        onClicked: fontPicker.open()
+                    text: "top bar floating"
+                }
+                CustomSwitch {
+                    Layout.alignment: Qt.AlignRight
+                    Layout.rightMargin: 20
+                    implicitHeight: 15
+                    implicitWidth: 30
+
+                    onToggled: {
+                        Settings.config.floating = !Settings.config.floating;
                     }
                 }
             }

modules/widgets/settingsapp/FontButton.qml

@@ -0,0 +1,62 @@
+import qs.reusables
+import qs.settings
+import QtQuick
+import QtQuick.Layouts
+import qs
+import QtQuick.Dialogs
+
+Rectangle {
+    id: fontButton
+    FontDialog {
+        id: fontPicker
+        title: "qs-fontpicker"
+        flags: FontDialog.NoButtons | FontDialog.MonospacedFonts
+
+        onAccepted: {
+            Settings.config.font = selectedFont.family;
+            Settings.config.fontSize = selectedFont.pointSize;
+        }
+        onSelectedFontChanged: {
+            Settings.config.font = selectedFont.family;
+            Settings.config.fontSize = selectedFont.pointSize;
+        }
+    }
+    radius: 14
+    color: Colors.surfaceContainerHigh
+    implicitHeight: fontLayout.implicitHeight + 10
+    implicitWidth: fontLayout.implicitWidth + 10
+    RowLayout {
+        id: fontLayout
+        anchors.right: parent.right
+        anchors.verticalCenter: parent.verticalCenter
+        clip: true
+        spacing: 10
+        CustomText {
+            id: fontText
+            font.bold: true
+            text: "current font: " + Settings.config.font
+        }
+        Rectangle {
+            id: fontSelector
+            Layout.rightMargin: 5
+            implicitWidth: fontSelectorText.implicitWidth + 20
+            implicitHeight: 20
+            color: Colors.surfaceContainerHigh
+            border.width: 2
+            border.color: Colors.outline
+            radius: 12
+            CustomText {
+                id: fontSelectorText
+                anchors.centerIn: parent
+                text: "Pick Font"
+            }
+            MouseArea {
+                id: fontPickerOpener
+                anchors.fill: parent
+                acceptedButtons: Qt.LeftButton
+                cursorShape: Qt.PointingHandCursor
+                onClicked: fontPicker.open()
+            }
+        }
+    }
+}

reusables/CustomSwitch.qml

@@ -0,0 +1,27 @@
+import QtQuick
+import QtQuick.Controls.Basic
+import qs
+
+Switch {
+    id: control
+    indicator: Rectangle {
+        implicitWidth: parent.implicitWidth
+        implicitHeight: parent.implicitHeight
+        anchors.verticalCenter: parent.verticalCenter
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        color: control.checked ? Colors.surfaceContainerHighest : Colors.surfaceContainerHighest
+        border.color: control.checked ? Colors.primary : Colors.onSurfaceColor
+
+        Rectangle {
+            x: control.checked ? parent.width - width : 0
+            anchors.verticalCenter: parent.verticalCenter
+            width: parent.implicitWidth / 2
+            height: parent.implicitHeight
+            radius: 13
+            color: control.down ? Colors.surfaceContainerHighest : Colors.primary
+            border.color: control.checked ? (control.down ? Colors.onSurfaceColor : Colors.primary) : "#999999"
+        }
+    }
+}

reusables/customSwitch.qml

@@ -0,0 +1,24 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+Switch {
+    id: control
+
+    indicator: Rectangle {
+        implicitWidth: 48
+        implicitHeight: 26
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 13
+        border.color: control.checked ? "#17a81a" : "#cccccc"
+
+        Rectangle {
+            x: control.checked ? parent.width - width : 0
+            width: 26
+            height: 26
+            radius: 13
+            color: control.down ? "#cccccc" : "#ffffff"
+        }
+    }
+
+}