components/StyledSwitch.qml

@@ -5,51 +5,39 @@ import QtQuick.Controls
 Switch {
     id: control
 
-    contentItem: Text {
-        id: text
-        rightPadding: control.indicator.width + control.spacing
-        text: control.text
-        font: control.font
-        opacity: enabled ? 1.0 : 0.3
-        color: Theme.palette.basecontent
-        elide: Text.ElideRight
-        verticalAlignment: Text.AlignVCenter
-    }
-
     HoverHandler {
         cursorShape: Qt.PointingHandCursor
     }
 
-    indicator: Rectangle {
+    indicator: Item {
-      id: indicator
-
-      property int padding: 8
-
         implicitWidth: 48
-        implicitHeight: 24
+        implicitHeight: 22
-        x: control.width - width - control.rightPadding
+        Rectangle {
+            implicitWidth: parent.width
+            implicitHeight: parent.height - 4
+            x: control.leftPadding
             y: parent.height / 2 - height / 2
-        radius: 16
+            radius: 6
-        color: "transparent"
+            color: control.checked ? Theme.palette.primary : Theme.palette.base100
-        border.color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
+            Behavior on color {
-        border.width: 2
+                ColorAnimation {
+                    duration: 150
+                }
+            }
+        }
 
         Rectangle {
-            anchors.margins: 4
+            x: control.checked ? parent.width - 3 * width / 4 : width / 4
-            x: control.checked ? parent.width - width - indicator.padding / 2 : indicator.padding / 2
             y: parent.height / 2 - height / 2
             Behavior on x {
                 NumberAnimation {
-                    duration: 100
+                    duration: 150
                 }
             }
-            width: parent.width / 2 - indicator.padding
+            width: 22
-            height: parent.height - indicator.padding
+            height: 22
-            radius: 16
+            radius: 6
-            color: control.checked ? Theme.palette.primary : Theme.palette.basecontent
+            color: Theme.palette.basecontent
-            // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999"
         }
     }
-
-    background: undefined
 }

modules/bar/components/bluetooth/BluetoothMenu.qml

@@ -4,6 +4,7 @@ import qs.components
 import qs.config
 import qs.widgets
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
@@ -21,22 +22,32 @@ StyledPopupWindow {
             margin: 16
             Layout.fillWidth: true
             RowLayout {
-                StyledSwitch {
+                RowLayout {
+                    StyledText {
                         text: "Enabled"
+                    }
+
+                    Switch {
                         checkable: !!Bluetooth.defaultAdapter
                         checked: Bluetooth.defaultAdapter?.enabled ?? false
                         onClicked: Bluetooth.defaultAdapter.enabled = checked
                     }
+                }
 
-                StyledSwitch {
+                RowLayout {
                     Layout.alignment: Qt.AlignRight
+                    StyledText {
                         text: "Scan"
+                    }
+
+                    Switch {
                         checkable: !!Bluetooth.defaultAdapter
                         checked: Bluetooth.defaultAdapter?.discovering ?? false
                         onClicked: Bluetooth.defaultAdapter.discovering = checked
                     }
                 }
             }
+        }
 
         StyledWrapperRectangle {
             margin: 16

modules/bar/components/notifications/NotificationMenu.qml

@@ -5,6 +5,7 @@ import qs.config
 import qs.services
 import qs.widgets
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
 
 StyledPopupWindow {
@@ -19,14 +20,17 @@ StyledPopupWindow {
 
         RowLayout {
             Layout.fillWidth: true
-
+            StyledText {
-            StyledSwitch {
                 text: "Enabled"
+            }
+
+            Switch {
                 checked: Notifications.enabled
                 onClicked: Notifications.enabled = checked
             }
 
             StyledButton {
+                id: clearButton
                 Layout.alignment: Qt.AlignRight
                 text: "Clear"
                 onClicked: Notifications.clear()

modules/storybook/Storybook.qml

@@ -62,10 +62,7 @@ StyledWindow {
                     text: "Switch"
                     font.pixelSize: 18
                 }
-
+                StyledSwitch {}
-                StyledSwitch {
-                    text: "Enable"
-                }
             }
 
             ColumnLayout {