Let volume go to 200% with warning color change
This commit is contained in:
parent
7e52df59bc
commit
049dd5d771
2 changed files with 55 additions and 45 deletions
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue