From 1cf252599bab96d88fc8af1eaa2274e41ba0f35c Mon Sep 17 00:00:00 2001 From: purian23 Date: Thu, 24 Jul 2025 23:13:23 -0400 Subject: [PATCH] Update to use existing DankSlider codebase --- Modules/ControlCenter/Audio/VolumeControl.qml | 204 +++--------------- 1 file changed, 27 insertions(+), 177 deletions(-) diff --git a/Modules/ControlCenter/Audio/VolumeControl.qml b/Modules/ControlCenter/Audio/VolumeControl.qml index 04d434f9..41937548 100644 --- a/Modules/ControlCenter/Audio/VolumeControl.qml +++ b/Modules/ControlCenter/Audio/VolumeControl.qml @@ -1,8 +1,4 @@ import QtQuick -import QtQuick.Controls -import Quickshell -import Quickshell.Io -import Quickshell.Widgets import qs.Common import qs.Services import qs.Widgets @@ -23,183 +19,37 @@ Column { font.weight: Font.Medium } - Row { + DankSlider { + id: volumeSlider + width: parent.width - spacing: Theme.spacingM - - DankIcon { - name: root.volumeMuted ? "volume_off" : "volume_down" - size: Theme.iconSize - color: root.volumeMuted ? Theme.error : Theme.surfaceText - anchors.verticalCenter: parent.verticalCenter - - MouseArea { - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - onClicked: { - if (AudioService.sink && AudioService.sink.audio) - AudioService.sink.audio.muted = !AudioService.sink.audio.muted; - } + value: Math.round(root.volumeLevel) + minimum: 0 + maximum: 100 + leftIcon: root.volumeMuted ? "volume_off" : "volume_down" + rightIcon: "volume_up" + enabled: !root.volumeMuted + showValue: true + unit: "%" + + onSliderValueChanged: (newValue) => { + if (AudioService.sink && AudioService.sink.audio) { + AudioService.sink.audio.muted = false; + AudioService.sink.audio.volume = newValue / 100; } } - - Item { - id: volumeSliderContainer - - width: parent.width - 80 - height: 32 - anchors.verticalCenter: parent.verticalCenter - - Rectangle { - id: volumeSliderTrack - - width: parent.width - height: 8 - radius: 4 - color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3) - anchors.verticalCenter: parent.verticalCenter - - Rectangle { - id: volumeSliderFill - - width: parent.width * (root.volumeLevel / 100) - height: parent.height - radius: parent.radius - color: Theme.primary - - Behavior on width { - NumberAnimation { - duration: 100 - } - } - } - - Rectangle { - id: volumeHandle - - width: 18 - height: 18 - radius: 9 - color: Theme.primary - border.color: Qt.lighter(Theme.primary, 1.3) - border.width: 2 - x: Math.max(0, Math.min(parent.width - width, volumeSliderFill.width - width / 2)) - anchors.verticalCenter: parent.verticalCenter - scale: volumeMouseArea.containsMouse || volumeMouseArea.pressed ? 1.2 : 1 - - Behavior on scale { - NumberAnimation { - duration: 150 - } - } - - Rectangle { - id: volumeTooltip - width: tooltipText.contentWidth + Theme.spacingS * 2 - height: tooltipText.contentHeight + Theme.spacingXS * 2 - radius: Theme.cornerRadiusSmall - color: Theme.surfaceContainer - border.color: Theme.outline - border.width: 1 - anchors.bottom: parent.top - anchors.bottomMargin: Theme.spacingS - anchors.horizontalCenter: parent.horizontalCenter - visible: (volumeMouseArea.containsMouse && !root.volumeMuted) || volumeMouseArea.isDragging - opacity: visible ? 1 : 0 - - Text { - id: tooltipText - text: Math.round(root.volumeLevel) + "%" - font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceText - font.weight: Font.Medium - anchors.centerIn: parent - } - - Behavior on opacity { - NumberAnimation { - duration: Theme.shortDuration - easing.type: Theme.standardEasing - } - } - } - } + + // Add click handler for mute icon + Component.onCompleted: { + // Find the left icon and add mouse area + let leftIconItem = volumeSlider.children[0].children[0]; + if (leftIconItem) { + let mouseArea = Qt.createQmlObject( + 'import QtQuick 2.15; MouseArea { anchors.fill: parent; hoverEnabled: true; cursorShape: Qt.PointingHandCursor; onClicked: { if (AudioService.sink && AudioService.sink.audio) AudioService.sink.audio.muted = !AudioService.sink.audio.muted; } }', + leftIconItem, + "dynamicMouseArea" + ); } - - MouseArea { - id: volumeMouseArea - - property bool isDragging: false - - anchors.fill: parent - hoverEnabled: true - cursorShape: Qt.PointingHandCursor - preventStealing: true - onPressed: (mouse) => { - isDragging = true; - let ratio = Math.max(0, Math.min(1, mouse.x / volumeSliderTrack.width)); - let newVolume = Math.max(0, Math.min(100, Math.round(ratio * 100))); - if (AudioService.sink && AudioService.sink.audio) { - AudioService.sink.audio.muted = false; - AudioService.sink.audio.volume = newVolume / 100; - } - } - onReleased: { - isDragging = false; - } - onPositionChanged: (mouse) => { - if (pressed && isDragging) { - let ratio = Math.max(0, Math.min(1, mouse.x / volumeSliderTrack.width)); - let newVolume = Math.max(0, Math.min(100, Math.round(ratio * 100))); - if (AudioService.sink && AudioService.sink.audio) { - AudioService.sink.audio.muted = false; - AudioService.sink.audio.volume = newVolume / 100; - } - } - } - onClicked: (mouse) => { - let ratio = Math.max(0, Math.min(1, mouse.x / volumeSliderTrack.width)); - let newVolume = Math.max(0, Math.min(100, Math.round(ratio * 100))); - if (AudioService.sink && AudioService.sink.audio) { - AudioService.sink.audio.muted = false; - AudioService.sink.audio.volume = newVolume / 100; - } - } - } - - MouseArea { - id: volumeGlobalMouseArea - - x: 0 - y: 0 - width: root.parent ? root.parent.width : 0 - height: root.parent ? root.parent.height : 0 - enabled: volumeMouseArea.isDragging - visible: false - preventStealing: true - onPositionChanged: (mouse) => { - if (volumeMouseArea.isDragging) { - let globalPos = mapToItem(volumeSliderTrack, mouse.x, mouse.y); - let ratio = Math.max(0, Math.min(1, globalPos.x / volumeSliderTrack.width)); - let newVolume = Math.max(0, Math.min(100, Math.round(ratio * 100))); - if (AudioService.sink && AudioService.sink.audio) { - AudioService.sink.audio.muted = false; - AudioService.sink.audio.volume = newVolume / 100; - } - } - } - onReleased: { - volumeMouseArea.isDragging = false; - } - } - } - - DankIcon { - name: "volume_up" - size: Theme.iconSize - color: Theme.surfaceText - anchors.verticalCenter: parent.verticalCenter } } } \ No newline at end of file