diff --git a/.config/quickshell/modules/common/Appearance.qml b/.config/quickshell/modules/common/Appearance.qml index 959bcdaf..d6ecbaf1 100644 --- a/.config/quickshell/modules/common/Appearance.qml +++ b/.config/quickshell/modules/common/Appearance.qml @@ -166,6 +166,7 @@ Singleton { } animationCurves: QtObject { + readonly property list expressiveFastSpatial: [0.42, 1.67, 0.21, 0.90, 1, 1] // Default, 350ms readonly property list expressiveDefaultSpatial: [0.38, 1.21, 0.22, 1.00, 1, 1] // Default, 500ms readonly property list expressiveEffects: [0.34, 0.80, 0.34, 1.00, 1, 1] // Default, 200ms readonly property list emphasized: [0.05, 0, 2 / 15, 0.06, 1 / 6, 0.4, 5 / 24, 0.82, 0.25, 1, 1, 1] @@ -239,6 +240,18 @@ Singleton { easing.bezierCurve: root.animation.elementMoveFast.bezierCurve }} } + + property QtObject clickBounce: QtObject { + property int duration: 250 + property int type: Easing.BezierSpline + property list bezierCurve: animationCurves.expressiveFastSpatial + property int velocity: 850 + property Component numberAnimation: Component { NumberAnimation { + duration: root.animation.clickBounce.duration + easing.type: root.animation.clickBounce.type + easing.bezierCurve: root.animation.clickBounce.bezierCurve + }} + } property QtObject scroll: QtObject { property int duration: 400 property int type: Easing.BezierSpline diff --git a/.config/quickshell/modules/common/widgets/RippleButton.qml b/.config/quickshell/modules/common/widgets/RippleButton.qml index 9e7889a4..98b6aad8 100644 --- a/.config/quickshell/modules/common/widgets/RippleButton.qml +++ b/.config/quickshell/modules/common/widgets/RippleButton.qml @@ -14,7 +14,10 @@ Button { property string buttonText property real buttonRadius: Appearance?.rounding?.small ?? 4 property real buttonRadiusPressed: buttonRadius + property real buttonEffectiveRadius: root.down ? root.buttonRadiusPressed : root.buttonRadius property int rippleDuration: 1200 + property bool rippleEnabled: true + property var altAction property color colBackground: ColorUtils.transparentize(Appearance.colors.colLayer1Hover, 1) property color colBackgroundHover: Appearance.colors.colLayer1Hover @@ -52,18 +55,26 @@ Button { MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor + acceptedButtons: Qt.LeftButton | Qt.RightButton onPressed: (event) => { + if(event.button === Qt.RightButton) { + if (root.altAction) root.altAction(); + return; + } root.down = true + if (!root.rippleEnabled) return; const {x,y} = event startRipple(x, y) } onReleased: (event) => { root.down = false root.click() // Because the MouseArea already consumed the event + if (!root.rippleEnabled) return; rippleFadeAnim.restart(); } onCanceled: (event) => { root.down = false + if (!root.rippleEnabled) return; rippleFadeAnim.restart(); } } @@ -109,7 +120,7 @@ Button { background: Rectangle { id: buttonBackground - radius: root.down ? root.buttonRadiusPressed : root.buttonRadius + radius: root.buttonEffectiveRadius implicitHeight: 50 color: root.buttonColor @@ -122,7 +133,7 @@ Button { maskSource: Rectangle { width: buttonBackground.width height: buttonBackground.height - radius: buttonBackground.radius + radius: root.buttonEffectiveRadius } } diff --git a/.config/quickshell/modules/sidebarRight/SidebarRight.qml b/.config/quickshell/modules/sidebarRight/SidebarRight.qml index c7038177..e38a3e79 100644 --- a/.config/quickshell/modules/sidebarRight/SidebarRight.qml +++ b/.config/quickshell/modules/sidebarRight/SidebarRight.qml @@ -137,7 +137,7 @@ Scope { Layout.fillHeight: false radius: Appearance.rounding.full color: Appearance.colors.colLayer1 - implicitWidth: sidebarQuickControlsRow.implicitWidth + 10 + width: 40 * sidebarQuickControlsRow.children.length + sidebarQuickControlsRow.spacing * (sidebarQuickControlsRow.children.length-1) + 10 implicitHeight: sidebarQuickControlsRow.implicitHeight + 10 @@ -146,13 +146,18 @@ Scope { anchors.fill: parent anchors.margins: 5 spacing: 5 + width: 40 * sidebarQuickControlsRow.children.length + property int clickIndex: -1 + + onClickIndexChanged: { + console.log("Click index changed to: " + clickIndex); + } NetworkToggle {} BluetoothToggle {} NightLight {} GameMode {} IdleInhibitor {} - } } diff --git a/.config/quickshell/modules/sidebarRight/quickToggles/BluetoothToggle.qml b/.config/quickshell/modules/sidebarRight/quickToggles/BluetoothToggle.qml index fc432c09..083ecc03 100644 --- a/.config/quickshell/modules/sidebarRight/quickToggles/BluetoothToggle.qml +++ b/.config/quickshell/modules/sidebarRight/quickToggles/BluetoothToggle.qml @@ -11,22 +11,12 @@ import Quickshell.Hyprland QuickToggleButton { toggled: Bluetooth.bluetoothEnabled buttonIcon: Bluetooth.bluetoothConnected ? "bluetooth_connected" : Bluetooth.bluetoothEnabled ? "bluetooth" : "bluetooth_disabled" - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.RightButton | Qt.LeftButton - onClicked: (mouse) => { - if (mouse.button === Qt.LeftButton) { - toggleBluetooth.running = true - } - if (mouse.button === Qt.RightButton) { - Hyprland.dispatch(`exec ${ConfigOptions.apps.bluetooth}`) - Hyprland.dispatch("global quickshell:sidebarRightClose") - - } - } - hoverEnabled: false - propagateComposedEvents: true - cursorShape: Qt.PointingHandCursor + onClicked: { + toggleBluetooth.running = true + } + altAction: () => { + Hyprland.dispatch(`exec ${ConfigOptions.apps.bluetooth}`) + Hyprland.dispatch("global quickshell:sidebarRightClose") } Process { id: toggleBluetooth diff --git a/.config/quickshell/modules/sidebarRight/quickToggles/NetworkToggle.qml b/.config/quickshell/modules/sidebarRight/quickToggles/NetworkToggle.qml index 93a4aec9..fc0bda11 100644 --- a/.config/quickshell/modules/sidebarRight/quickToggles/NetworkToggle.qml +++ b/.config/quickshell/modules/sidebarRight/quickToggles/NetworkToggle.qml @@ -17,21 +17,12 @@ QuickToggleButton { Network.networkStrength > 20 ? "network_wifi_1_bar" : "signal_wifi_0_bar" ) : "signal_wifi_off" - MouseArea { - anchors.fill: parent - acceptedButtons: Qt.RightButton | Qt.LeftButton - onClicked: (mouse) =>{ - if (mouse.button === Qt.LeftButton) { - toggleNetwork.running = true - } - if (mouse.button === Qt.RightButton) { - Hyprland.dispatch(`exec ${ConfigOptions.apps.network}`) - Hyprland.dispatch("global quickshell:sidebarRightClose") - } - } - hoverEnabled: false - propagateComposedEvents: true - cursorShape: Qt.PointingHandCursor + onClicked: { + toggleNetwork.running = true + } + altAction: () => { + Hyprland.dispatch(`exec ${ConfigOptions.apps.network}`) + Hyprland.dispatch("global quickshell:sidebarRightClose") } Process { id: toggleNetwork diff --git a/.config/quickshell/modules/sidebarRight/quickToggles/QuickToggleButton.qml b/.config/quickshell/modules/sidebarRight/quickToggles/QuickToggleButton.qml index bc200142..873abda8 100644 --- a/.config/quickshell/modules/sidebarRight/quickToggles/QuickToggleButton.qml +++ b/.config/quickshell/modules/sidebarRight/quickToggles/QuickToggleButton.qml @@ -3,17 +3,34 @@ import "root:/modules/common/widgets" import "root:/modules/common/functions/color_utils.js" as ColorUtils import QtQuick import QtQuick.Controls +import QtQuick.Layouts import Quickshell.Io RippleButton { id: button + rippleEnabled: false property string buttonIcon + property int clickIndex: parent?.clickIndex ?? -1 toggled: false - buttonRadius: Appearance?.rounding?.full ?? 9999 + buttonRadius: Appearance?.rounding?.full + buttonRadiusPressed: Appearance?.rounding?.small - implicitWidth: 40 + Layout.fillWidth: (clickIndex - 1 <= parent.children.indexOf(button) && parent.children.indexOf(button) <= clickIndex + 1) + implicitWidth: button.down ? 60 : 40 implicitHeight: 40 + Behavior on implicitWidth { + animation: Appearance.animation.clickBounce.numberAnimation.createObject(this) + } + + onDownChanged: { + if (button.down) { + if (button.parent.clickIndex !== undefined) { + button.parent.clickIndex = parent.children.indexOf(button) + } + } + } + contentItem: MaterialSymbol { anchors.centerIn: parent iconSize: Appearance.font.pixelSize.larger