From 135446ab82aa1facfe3d6b1e1671f5864a75821e Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 11:29:15 -0400 Subject: [PATCH 1/2] properly styled switch to not look like ass --- components/StyledSwitch.qml | 54 ++++++++++++++++++++------------- modules/storybook/Storybook.qml | 5 ++- 2 files changed, 37 insertions(+), 22 deletions(-) diff --git a/components/StyledSwitch.qml b/components/StyledSwitch.qml index 6e5b726..70f7646 100644 --- a/components/StyledSwitch.qml +++ b/components/StyledSwitch.qml @@ -5,39 +5,51 @@ 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: Item { + indicator: Rectangle { + id: indicator + + property int padding: 8 + implicitWidth: 48 - implicitHeight: 22 - Rectangle { - implicitWidth: parent.width - implicitHeight: parent.height - 4 - x: control.leftPadding - y: parent.height / 2 - height / 2 - radius: 6 - color: control.checked ? Theme.palette.primary : Theme.palette.base100 - Behavior on color { - ColorAnimation { - duration: 150 - } - } - } + implicitHeight: 24 + x: control.width - width - control.rightPadding + y: parent.height / 2 - height / 2 + radius: 16 + color: "transparent" + border.color: control.checked ? Theme.palette.primary : Theme.palette.basecontent + border.width: 2 Rectangle { - x: control.checked ? parent.width - 3 * width / 4 : width / 4 + anchors.margins: 4 + x: control.checked ? parent.width - width - indicator.padding / 2 : indicator.padding / 2 y: parent.height / 2 - height / 2 Behavior on x { NumberAnimation { - duration: 150 + duration: 100 } } - width: 22 - height: 22 - radius: 6 - color: Theme.palette.basecontent + width: parent.width / 2 - indicator.padding + height: parent.height - indicator.padding + radius: 16 + color: control.checked ? Theme.palette.primary : Theme.palette.basecontent + // border.color: control.checked ? (control.down ? "#17a81a" : "#21be2b") : "#999999" } } + + background: undefined } diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml index ad28b87..a1805e1 100644 --- a/modules/storybook/Storybook.qml +++ b/modules/storybook/Storybook.qml @@ -62,7 +62,10 @@ StyledWindow { text: "Switch" font.pixelSize: 18 } - StyledSwitch {} + + StyledSwitch { + text: "Enable" + } } ColumnLayout { From e27dadba0f2a4bad61130bc730b2d33bceee856f Mon Sep 17 00:00:00 2001 From: Benjamin Palko Date: Sun, 31 Aug 2025 11:33:19 -0400 Subject: [PATCH 2/2] use styled switch --- .../components/bluetooth/BluetoothMenu.qml | 31 ++++++------------- .../notifications/NotificationMenu.qml | 8 ++--- 2 files changed, 12 insertions(+), 27 deletions(-) diff --git a/modules/bar/components/bluetooth/BluetoothMenu.qml b/modules/bar/components/bluetooth/BluetoothMenu.qml index 72481f8..14e9759 100644 --- a/modules/bar/components/bluetooth/BluetoothMenu.qml +++ b/modules/bar/components/bluetooth/BluetoothMenu.qml @@ -4,7 +4,6 @@ import qs.components import qs.config import qs.widgets import QtQuick -import QtQuick.Controls import QtQuick.Layouts import Quickshell import Quickshell.Bluetooth @@ -22,29 +21,19 @@ StyledPopupWindow { margin: 16 Layout.fillWidth: true RowLayout { - RowLayout { - StyledText { - text: "Enabled" - } - - Switch { - checkable: !!Bluetooth.defaultAdapter - checked: Bluetooth.defaultAdapter?.enabled ?? false - onClicked: Bluetooth.defaultAdapter.enabled = checked - } + StyledSwitch { + text: "Enabled" + checkable: !!Bluetooth.defaultAdapter + checked: Bluetooth.defaultAdapter?.enabled ?? false + onClicked: Bluetooth.defaultAdapter.enabled = checked } - RowLayout { + StyledSwitch { Layout.alignment: Qt.AlignRight - StyledText { - text: "Scan" - } - - Switch { - checkable: !!Bluetooth.defaultAdapter - checked: Bluetooth.defaultAdapter?.discovering ?? false - onClicked: Bluetooth.defaultAdapter.discovering = checked - } + text: "Scan" + checkable: !!Bluetooth.defaultAdapter + checked: Bluetooth.defaultAdapter?.discovering ?? false + onClicked: Bluetooth.defaultAdapter.discovering = checked } } } diff --git a/modules/bar/components/notifications/NotificationMenu.qml b/modules/bar/components/notifications/NotificationMenu.qml index 35f9c19..3781e6b 100644 --- a/modules/bar/components/notifications/NotificationMenu.qml +++ b/modules/bar/components/notifications/NotificationMenu.qml @@ -5,7 +5,6 @@ import qs.config import qs.services import qs.widgets import QtQuick -import QtQuick.Controls import QtQuick.Layouts StyledPopupWindow { @@ -20,17 +19,14 @@ StyledPopupWindow { RowLayout { Layout.fillWidth: true - StyledText { - text: "Enabled" - } - Switch { + StyledSwitch { + text: "Enabled" checked: Notifications.enabled onClicked: Notifications.enabled = checked } StyledButton { - id: clearButton Layout.alignment: Qt.AlignRight text: "Clear" onClicked: Notifications.clear()