From 5d94c0a7d44a2255b81815a52a7056a94a39842d Mon Sep 17 00:00:00 2001 From: nippy Date: Sat, 18 Apr 2026 13:49:56 +0200 Subject: update Raveos themes --- .../quickshell/Widgets/DankToggle.qml | 195 +++++++++++++++++++++ 1 file changed, 195 insertions(+) create mode 100644 raveos-theme/hyprland/theme-data/DankMaterialShell/quickshell/Widgets/DankToggle.qml (limited to 'raveos-theme/hyprland/theme-data/DankMaterialShell/quickshell/Widgets/DankToggle.qml') diff --git a/raveos-theme/hyprland/theme-data/DankMaterialShell/quickshell/Widgets/DankToggle.qml b/raveos-theme/hyprland/theme-data/DankMaterialShell/quickshell/Widgets/DankToggle.qml new file mode 100644 index 0000000..3b19a5a --- /dev/null +++ b/raveos-theme/hyprland/theme-data/DankMaterialShell/quickshell/Widgets/DankToggle.qml @@ -0,0 +1,195 @@ +import QtQuick +import qs.Common +import qs.Widgets + +Item { + id: toggle + + LayoutMirroring.enabled: I18n.isRtl + LayoutMirroring.childrenInherit: true + + // API + property bool checked: false + property bool enabled: true + property bool toggling: false + property string text: "" + property string description: "" + property color descriptionColor: Theme.surfaceVariantText + property bool hideText: false + + signal clicked + signal toggled(bool checked) + signal toggleCompleted(bool checked) + + readonly property bool showText: text && !hideText + + readonly property int trackWidth: 52 + readonly property int trackHeight: 30 + readonly property int insetCircle: 24 + + width: showText ? parent.width : trackWidth + height: showText ? Math.max(trackHeight, textColumn.implicitHeight + Theme.spacingM * 2) : trackHeight + + function handleClick() { + if (!enabled) + return; + clicked(); + toggled(!checked); + } + + StyledRect { + id: background + anchors.fill: parent + radius: showText ? Theme.cornerRadius : 0 + color: "transparent" + visible: showText + + StateLayer { + visible: showText + disabled: !toggle.enabled + stateColor: Theme.primary + cornerRadius: parent.radius + onClicked: toggle.handleClick() + } + } + + Row { + anchors.left: parent.left + anchors.right: toggleTrack.left + anchors.verticalCenter: parent.verticalCenter + anchors.leftMargin: Theme.spacingM + anchors.rightMargin: Theme.spacingM + spacing: Theme.spacingXS + visible: showText + + Column { + id: textColumn + width: parent.width + anchors.verticalCenter: parent.verticalCenter + spacing: Theme.spacingXS + + StyledText { + text: toggle.text + font.pixelSize: Appearance.fontSize.normal + font.weight: Font.Medium + opacity: toggle.enabled ? 1 : 0.4 + width: parent.width + horizontalAlignment: Text.AlignLeft + } + + StyledText { + text: toggle.description + font.pixelSize: Appearance.fontSize.small + color: toggle.descriptionColor + wrapMode: Text.WordWrap + width: parent.width + visible: toggle.description.length > 0 + horizontalAlignment: Text.AlignLeft + } + } + } + + StyledRect { + id: toggleTrack + + width: showText ? trackWidth : Math.max(parent.width, trackWidth) + height: showText ? trackHeight : Math.max(parent.height, trackHeight) + anchors.right: parent.right + anchors.rightMargin: showText ? Theme.spacingM : 0 + anchors.verticalCenter: parent.verticalCenter + radius: Theme.cornerRadius + + // Distinguish disabled checked vs unchecked so unchecked disabled switches don't look enabled + color: !toggle.enabled ? (toggle.checked ? Qt.alpha(Theme.surfaceText, 0.12) : "transparent") : (toggle.checked ? Theme.primary : Theme.surfaceVariantAlpha) + opacity: toggle.toggling ? 0.6 : 1 + + // M3 disabled unchecked border: on surface 12% opacity + border.color: toggle.checked ? "transparent" : (!toggle.enabled ? Qt.alpha(Theme.surfaceText, 0.12) : Theme.outline) + + readonly property int pad: Math.round((height - thumb.width) / 2) + readonly property int edgeLeft: pad + readonly property int edgeRight: width - thumb.width - pad + + StyledRect { + id: thumb + + width: toggle.checked ? insetCircle : insetCircle - 4 + height: toggle.checked ? insetCircle : insetCircle - 4 + radius: Theme.cornerRadius + anchors.verticalCenter: parent.verticalCenter + + // M3 disabled thumb: + // checked = solid surface | unchecked = outlined off-state thumb + color: !toggle.enabled ? (toggle.checked ? Theme.surface : "transparent") : (toggle.checked ? Theme.surface : Theme.outline) + border.color: !toggle.enabled ? (toggle.checked ? "transparent" : Qt.alpha(Theme.surfaceText, 0.38)) : Theme.outline + border.width: (toggle.checked && toggle.enabled) ? 1 : 2 + + x: toggle.checked ? toggleTrack.edgeRight : toggleTrack.edgeLeft + + Behavior on x { + SequentialAnimation { + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasizedDecel + } + ScriptAction { + script: { + toggle.toggleCompleted(toggle.checked); + } + } + } + } + + Behavior on color { + ColorAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } + + Behavior on border.width { + NumberAnimation { + duration: Appearance.anim.durations.normal + easing.type: Easing.BezierSpline + easing.bezierCurve: Appearance.anim.curves.emphasized + } + } + + DankIcon { + id: checkIcon + anchors.centerIn: parent + name: "check" + size: 20 + // M3 disabled icon: on surface 38% + color: toggle.enabled ? Theme.surfaceText : Qt.alpha(Theme.surfaceText, 0.38) + filled: true + opacity: (toggle.checked && toggle.enabled) ? 1 : 0 + scale: (toggle.checked && toggle.enabled) ? 1 : 0.6 + + Behavior on opacity { + NumberAnimation { + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.emphasized + } + } + Behavior on scale { + NumberAnimation { + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.emphasized + } + } + } + } + + StateLayer { + disabled: !toggle.enabled + stateColor: Theme.primary + cornerRadius: parent.radius + onClicked: toggle.handleClick() + } + } +} -- cgit v1.3