Let volume go to 200% with warning color change

This commit is contained in:
Ly-sec 2025-08-02 09:38:31 +02:00
parent 7e52df59bc
commit 049dd5d771
2 changed files with 55 additions and 45 deletions

View file

@ -13,6 +13,24 @@ Item {
width: pillIndicator.width width: pillIndicator.width
height: pillIndicator.height height: pillIndicator.height
function getVolumeColor() {
if (volume <= 100) return Theme.accentPrimary;
// Calculate interpolation factor (0 at 100%, 1 at 200%)
var factor = (volume - 100) / 100;
// Blend between accent and warning colors
return Qt.rgba(
Theme.accentPrimary.r + (Theme.warning.r - Theme.accentPrimary.r) * factor,
Theme.accentPrimary.g + (Theme.warning.g - Theme.accentPrimary.g) * factor,
Theme.accentPrimary.b + (Theme.warning.b - Theme.accentPrimary.b) * factor,
1
);
}
function getIconColor() {
if (volume <= 100) return Theme.textPrimary;
return getVolumeColor(); // Only use warning blend when >100%
}
PillIndicator { PillIndicator {
id: pillIndicator id: pillIndicator
icon: shell && shell.defaultAudioSink && shell.defaultAudioSink.audio && shell.defaultAudioSink.audio.muted icon: shell && shell.defaultAudioSink && shell.defaultAudioSink.audio && shell.defaultAudioSink.audio.muted
@ -21,9 +39,10 @@ Item {
text: volume + "%" text: volume + "%"
pillColor: Theme.surfaceVariant pillColor: Theme.surfaceVariant
iconCircleColor: Theme.accentPrimary iconCircleColor: getVolumeColor()
iconTextColor: Theme.backgroundPrimary iconTextColor: Theme.backgroundPrimary
textColor: Theme.textPrimary textColor: Theme.textPrimary
collapsedIconColor: getIconColor()
autoHide: true autoHide: true
StyledTooltip { StyledTooltip {
@ -52,7 +71,7 @@ Item {
target: shell ?? null target: shell ?? null
function onVolumeChanged() { function onVolumeChanged() {
if (shell) { if (shell) {
const clampedVolume = Math.max(0, Math.min(100, shell.volume)); const clampedVolume = Math.max(0, Math.min(200, shell.volume));
if (clampedVolume !== volume) { if (clampedVolume !== volume) {
volume = clampedVolume; volume = clampedVolume;
pillIndicator.text = volume + "%"; pillIndicator.text = volume + "%";
@ -73,36 +92,36 @@ Item {
Component.onCompleted: { Component.onCompleted: {
if (shell && shell.volume !== undefined) { if (shell && shell.volume !== undefined) {
volume = Math.max(0, Math.min(100, shell.volume)); volume = Math.max(0, Math.min(200, shell.volume));
} }
} }
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
hoverEnabled: true hoverEnabled: true
acceptedButtons: Qt.NoButton acceptedButtons: Qt.NoButton
propagateComposedEvents: true propagateComposedEvents: true
onEntered: { onEntered: {
volumeDisplay.containsMouse = true volumeDisplay.containsMouse = true
pillIndicator.autoHide = false; pillIndicator.autoHide = false;
pillIndicator.showDelayed() pillIndicator.showDelayed()
} }
onExited: { onExited: {
volumeDisplay.containsMouse = false volumeDisplay.containsMouse = false
pillIndicator.autoHide = true; pillIndicator.autoHide = true;
pillIndicator.hide() pillIndicator.hide()
} }
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onWheel: (wheel) => { onWheel: (wheel) => {
if (!shell) return; if (!shell) return;
let step = 5; let step = 5;
if (wheel.angleDelta.y > 0) { if (wheel.angleDelta.y > 0) {
shell.updateVolume(Math.min(100, shell.volume + step)); shell.updateVolume(Math.min(200, shell.volume + step));
} else if (wheel.angleDelta.y < 0) { } else if (wheel.angleDelta.y < 0) {
shell.updateVolume(Math.max(0, shell.volume - step)); shell.updateVolume(Math.max(0, shell.volume - step));
}
} }
} }
}
AudioDeviceSelector { AudioDeviceSelector {
id: ioSelector id: ioSelector

View file

@ -12,6 +12,7 @@ Item {
property color textColor: Theme.textPrimary property color textColor: Theme.textPrimary
property color iconCircleColor: Theme.accentPrimary property color iconCircleColor: Theme.accentPrimary
property color iconTextColor: Theme.backgroundPrimary property color iconTextColor: Theme.backgroundPrimary
property color collapsedIconColor: Theme.textPrimary
property int pillHeight: 22 property int pillHeight: 22
property int iconSize: 22 property int iconSize: 22
property int pillPaddingHorizontal: 14 property int pillPaddingHorizontal: 14
@ -33,7 +34,7 @@ Item {
Rectangle { Rectangle {
id: pill id: pill
width: showPill ? maxPillWidth : 1 // Never 0 width width: showPill ? maxPillWidth : 1
height: pillHeight height: pillHeight
x: (iconCircle.x + iconCircle.width / 2) - width x: (iconCircle.x + iconCircle.width / 2) - width
opacity: showPill ? 1 : 0 opacity: showPill ? 1 : 0
@ -50,7 +51,7 @@ Item {
font.family: Theme.fontFamily font.family: Theme.fontFamily
font.weight: Font.Bold font.weight: Font.Bold
color: textColor color: textColor
visible: showPill // Hide text when pill is collapsed visible: showPill
} }
Behavior on width { Behavior on width {
@ -69,7 +70,6 @@ Item {
} }
} }
// Icon circle
Rectangle { Rectangle {
id: iconCircle id: iconCircle
width: iconSize width: iconSize
@ -91,18 +91,17 @@ Item {
font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined" font.family: showPill ? "Material Symbols Rounded" : "Material Symbols Outlined"
font.pixelSize: Theme.fontSizeSmall font.pixelSize: Theme.fontSizeSmall
text: revealPill.icon text: revealPill.icon
color: showPill ? iconTextColor : textColor color: showPill ? iconTextColor : collapsedIconColor
} }
} }
// Show animation
ParallelAnimation { ParallelAnimation {
id: showAnim id: showAnim
running: false running: false
NumberAnimation { NumberAnimation {
target: pill target: pill
property: "width" property: "width"
from: 1 // Start from 1 instead of 0 from: 1
to: maxPillWidth to: maxPillWidth
duration: 250 duration: 250
easing.type: Easing.OutCubic easing.type: Easing.OutCubic
@ -124,7 +123,6 @@ Item {
} }
} }
// Delayed auto-hide
SequentialAnimation { SequentialAnimation {
id: delayedHideAnim id: delayedHideAnim
running: false running: false
@ -137,7 +135,6 @@ Item {
} }
} }
// Hide animation
ParallelAnimation { ParallelAnimation {
id: hideAnim id: hideAnim
running: false running: false
@ -145,7 +142,7 @@ Item {
target: pill target: pill
property: "width" property: "width"
from: maxPillWidth from: maxPillWidth
to: 1 // End at 1 instead of 0 to: 1
duration: 250 duration: 250
easing.type: Easing.InCubic easing.type: Easing.InCubic
} }
@ -164,13 +161,11 @@ Item {
} }
} }
// Exposed functions
function show() { function show() {
if (!showPill) { if (!showPill) {
shouldAnimateHide = autoHide; shouldAnimateHide = autoHide;
showAnim.start(); showAnim.start();
} else { } else {
// Reset hide timer if already shown
hideAnim.stop(); hideAnim.stop();
delayedHideAnim.restart(); delayedHideAnim.restart();
} }
@ -180,26 +175,22 @@ Item {
if (showPill) { if (showPill) {
hideAnim.start(); hideAnim.start();
} }
// Stop the show timer if it's running
showTimer.stop(); showTimer.stop();
} }
function showDelayed() { function showDelayed() {
if (!showPill) { if (!showPill) {
shouldAnimateHide = autoHide; shouldAnimateHide = autoHide;
// Add a 500ms delay before showing
showTimer.start(); showTimer.start();
} else { } else {
// Reset hide timer if already shown
hideAnim.stop(); hideAnim.stop();
delayedHideAnim.restart(); delayedHideAnim.restart();
} }
} }
// Timer for delayed show
Timer { Timer {
id: showTimer id: showTimer
interval: 500 // 500ms delay interval: 500
onTriggered: { onTriggered: {
if (!showPill) { if (!showPill) {
showAnim.start(); showAnim.start();