From c464bb3e470266212d26a8be6a5b2b4d75d198c8 Mon Sep 17 00:00:00 2001 From: bbedward Date: Sun, 21 Sep 2025 20:56:57 -0400 Subject: [PATCH] make the volume knob in media player consistent --- Modules/DankDash/MediaPlayerTab.qml | 108 +++++++++++++++++++++++++--- Modules/Settings/ThemeColorsTab.qml | 36 +++++++++- Modules/Settings/TopBarTab.qml | 27 ------- 3 files changed, 134 insertions(+), 37 deletions(-) diff --git a/Modules/DankDash/MediaPlayerTab.qml b/Modules/DankDash/MediaPlayerTab.qml index e2ed50c3..4941e293 100644 --- a/Modules/DankDash/MediaPlayerTab.qml +++ b/Modules/DankDash/MediaPlayerTab.qml @@ -1056,7 +1056,8 @@ Item { } } onWheel: wheelEvent => { - adjustVolume(wheelEvent.angleDelta.y > 0 ? 3 : -3) + const step = Math.max(0.5, 100 / 100) + adjustVolume(wheelEvent.angleDelta.y > 0 ? step : -step) volumeButton.volumeExpanded = true wheelEvent.accepted = true } @@ -1093,31 +1094,115 @@ Item { anchors.margins: Theme.spacingS Item { - width: parent.width * 0.6 - height: parent.height - Theme.spacingXL * 2 + id: volumeSlider + width: parent.width * 0.5 + height: parent.height - Theme.spacingXL * 2 anchors.top: parent.top anchors.topMargin: Theme.spacingS anchors.horizontalCenter: parent.horizontalCenter - + property bool dragging: false property bool containsMouse: volumeSliderArea.containsMouse - + property bool active: volumeSliderArea.containsMouse || volumeSliderArea.pressed || dragging + + function withAlpha(c, a) { return Qt.rgba(c.r, c.g, c.b, a) } + Rectangle { + id: sliderTrack width: parent.width height: parent.height anchors.centerIn: parent color: Qt.rgba(Theme.surfaceVariant.r, Theme.surfaceVariant.g, Theme.surfaceVariant.b, 0.5) - radius: width / 2 + radius: Theme.cornerRadius } - + Rectangle { + id: sliderFill width: parent.width height: defaultSink ? (Math.min(1.0, defaultSink.audio.volume) * parent.height) : 0 anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter color: Theme.primary - radius: width / 2 + bottomLeftRadius: Theme.cornerRadius + bottomRightRadius: Theme.cornerRadius + topLeftRadius: 0 + topRightRadius: 0 + } + Rectangle { + id: sliderHandle + width: parent.width + 8 + height: 8 + radius: Theme.cornerRadius + y: { + const ratio = defaultSink ? Math.min(1.0, defaultSink.audio.volume) : 0 + const travel = parent.height - height + return Math.max(0, Math.min(travel, travel * (1 - ratio))) + } + anchors.horizontalCenter: parent.horizontalCenter + color: Theme.primary + border.width: 3 + border.color: Qt.rgba(Theme.surfaceContainer.r, Theme.surfaceContainer.g, Theme.surfaceContainer.b, 1.0) + + Rectangle { + anchors.fill: parent + radius: Theme.cornerRadius + color: Theme.onPrimary + opacity: volumeSliderArea.pressed ? 0.16 : (volumeSliderArea.containsMouse ? 0.08 : 0) + visible: opacity > 0 + } + + Rectangle { + id: ripple + anchors.centerIn: parent + width: 0 + height: 0 + radius: width / 2 + color: Theme.onPrimary + opacity: 0 + + function start() { + opacity = 0.16 + width = 0 + height = 0 + rippleAnimation.start() + } + + SequentialAnimation { + id: rippleAnimation + NumberAnimation { + target: ripple + properties: "width,height" + to: 28 + duration: 180 + } + NumberAnimation { + target: ripple + property: "opacity" + to: 0 + duration: 150 + } + } + } + + TapHandler { + acceptedButtons: Qt.LeftButton + onPressedChanged: { + if (pressed) { + ripple.start() + } + } + } + + scale: active ? 1.05 : 1.0 + + Behavior on scale { + NumberAnimation { + duration: Anims.durShort + easing.type: Easing.BezierSpline + easing.bezierCurve: Anims.standard + } + } } MouseArea { @@ -1126,6 +1211,7 @@ Item { anchors.margins: -12 enabled: defaultSink !== null hoverEnabled: true + cursorShape: Qt.PointingHandCursor preventStealing: true onEntered: { @@ -1155,7 +1241,11 @@ Item { updateVolume(mouse) } - onWheel: wheel => adjustVolume(wheel.angleDelta.y > 0 ? 3 : -3) + onWheel: wheelEvent => { + const step = Math.max(0.5, 100 / 100) + adjustVolume(wheelEvent.angleDelta.y > 0 ? step : -step) + wheelEvent.accepted = true + } function updateVolume(mouse) { if (defaultSink) { diff --git a/Modules/Settings/ThemeColorsTab.qml b/Modules/Settings/ThemeColorsTab.qml index 6a7083e4..b5e8e867 100644 --- a/Modules/Settings/ThemeColorsTab.qml +++ b/Modules/Settings/ThemeColorsTab.qml @@ -687,7 +687,7 @@ Item { } StyledText { - text: "Transparency Settings" + text: "Widget Styling" font.pixelSize: Theme.fontSizeLarge font.weight: Font.Medium color: Theme.surfaceText @@ -818,6 +818,40 @@ Item { } } } + + Rectangle { + width: parent.width + height: 1 + color: Theme.outline + opacity: 0.2 + } + + Column { + width: parent.width + spacing: Theme.spacingS + + StyledText { + text: "Corner Radius (0 = square corners)" + font.pixelSize: Theme.fontSizeSmall + color: Theme.surfaceText + font.weight: Font.Medium + } + + DankSlider { + width: parent.width + height: 24 + value: SettingsData.cornerRadius + minimum: 0 + maximum: 32 + unit: "" + showValue: true + wheelEnabled: false + onSliderValueChanged: newValue => { + SettingsData.setCornerRadius( + newValue) + } + } + } } } diff --git a/Modules/Settings/TopBarTab.qml b/Modules/Settings/TopBarTab.qml index 5b33fbaf..9f20e2be 100644 --- a/Modules/Settings/TopBarTab.qml +++ b/Modules/Settings/TopBarTab.qml @@ -821,33 +821,6 @@ Item { } } - Column { - width: parent.width - spacing: Theme.spacingS - - StyledText { - text: "Corner Radius (0 = square corners)" - font.pixelSize: Theme.fontSizeSmall - color: Theme.surfaceText - font.weight: Font.Medium - } - - DankSlider { - width: parent.width - height: 24 - value: SettingsData.cornerRadius - minimum: 0 - maximum: 32 - unit: "" - showValue: true - wheelEnabled: false - thumbOutlineColor: Theme.surfaceContainer - onSliderValueChanged: newValue => { - SettingsData.setCornerRadius( - newValue) - } - } - } DankToggle { width: parent.width