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:
@@ -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 {
|
||||||
width: parent.width
|
id: volumeSlider
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
Item {
|
|
||||||
id: volumeSliderContainer
|
|
||||||
|
|
||||||
width: parent.width - 80
|
|
||||||
height: 32
|
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
|
||||||
|
|
||||||
Rectangle {
|
|
||||||
id: volumeSliderTrack
|
|
||||||
|
|
||||||
width: parent.width
|
width: parent.width
|
||||||
height: 8
|
value: Math.round(root.volumeLevel)
|
||||||
radius: 4
|
minimum: 0
|
||||||
color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.3)
|
maximum: 100
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
leftIcon: root.volumeMuted ? "volume_off" : "volume_down"
|
||||||
|
rightIcon: "volume_up"
|
||||||
|
enabled: !root.volumeMuted
|
||||||
|
showValue: true
|
||||||
|
unit: "%"
|
||||||
|
|
||||||
Rectangle {
|
onSliderValueChanged: (newValue) => {
|
||||||
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) {
|
if (AudioService.sink && AudioService.sink.audio) {
|
||||||
AudioService.sink.audio.muted = false;
|
AudioService.sink.audio.muted = false;
|
||||||
AudioService.sink.audio.volume = newVolume / 100;
|
AudioService.sink.audio.volume = newValue / 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 {
|
// Add click handler for mute icon
|
||||||
id: volumeGlobalMouseArea
|
Component.onCompleted: {
|
||||||
|
// Find the left icon and add mouse area
|
||||||
x: 0
|
let leftIconItem = volumeSlider.children[0].children[0];
|
||||||
y: 0
|
if (leftIconItem) {
|
||||||
width: root.parent ? root.parent.width : 0
|
let mouseArea = Qt.createQmlObject(
|
||||||
height: root.parent ? root.parent.height : 0
|
'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; } }',
|
||||||
enabled: volumeMouseArea.isDragging
|
leftIconItem,
|
||||||
visible: false
|
"dynamicMouseArea"
|
||||||
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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user