1
0
mirror of https://github.com/AvengeMedia/DankMaterialShell.git synced 2025-12-07 05:55:37 -05:00

Update to use existing DankSlider codebase

This commit is contained in:
purian23
2025-07-24 23:13:23 -04:00
parent 8e7bcabcf7
commit 1cf252599b

View File

@@ -1,8 +1,4 @@
import QtQuick import QtQuick
import QtQuick.Controls
import Quickshell
import Quickshell.Io
import Quickshell.Widgets
import qs.Common import qs.Common
import qs.Services import qs.Services
import qs.Widgets import qs.Widgets
@@ -23,183 +19,37 @@ Column {
font.weight: Font.Medium font.weight: Font.Medium
} }
Row { DankSlider {
id: volumeSlider
width: parent.width width: parent.width
spacing: Theme.spacingM 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: "%"
DankIcon { onSliderValueChanged: (newValue) => {
name: root.volumeMuted ? "volume_off" : "volume_down" if (AudioService.sink && AudioService.sink.audio) {
size: Theme.iconSize AudioService.sink.audio.muted = false;
color: root.volumeMuted ? Theme.error : Theme.surfaceText AudioService.sink.audio.volume = newValue / 100;
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;
}
} }
} }
Item { // Add click handler for mute icon
id: volumeSliderContainer Component.onCompleted: {
// Find the left icon and add mouse area
width: parent.width - 80 let leftIconItem = volumeSlider.children[0].children[0];
height: 32 if (leftIconItem) {
anchors.verticalCenter: parent.verticalCenter 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; } }',
Rectangle { leftIconItem,
id: volumeSliderTrack "dynamicMouseArea"
);
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
}
}
}
}
} }
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
} }
} }
} }