fix volume mixer: separate PopupPanel to avoid layer-shell resize issue

This commit is contained in:
Damocles 2026-04-13 22:44:57 +02:00
parent 8c915605f2
commit df53abcc43
3 changed files with 43 additions and 68 deletions

View file

@ -171,6 +171,7 @@ PanelWindow {
} }
M.Volume { M.Volume {
visible: M.Modules.volume.enable visible: M.Modules.volume.enable
bar: bar
} }
} }

View file

@ -62,10 +62,7 @@ PanelWindow {
} }
} }
on_WinVisibleChanged: console.log("[hp:" + panelNamespace + "] _winVisible →", _winVisible)
onShowPanelChanged: { onShowPanelChanged: {
console.log("[hp:" + panelNamespace + "] showPanel →", showPanel);
if (showPanel) { if (showPanel) {
_hideTimer.stop(); _hideTimer.stop();
_updatePosition(); _updatePosition();
@ -111,15 +108,11 @@ PanelWindow {
duration: 150 duration: 150
easing.type: Easing.InCubic easing.type: Easing.InCubic
} }
onStarted: console.log("[hp:" + panelNamespace + "] hideAnim started")
onFinished: root._winVisible = false onFinished: root._winVisible = false
} }
HoverHandler { HoverHandler {
onHoveredChanged: { onHoveredChanged: root.panelHovered = hovered
console.log("[hp:" + panelNamespace + "] hovered →", hovered);
root.panelHovered = hovered;
}
} }
M.PopupBackground { M.PopupBackground {

View file

@ -38,18 +38,9 @@ M.BarSection {
return streams; return streams;
} }
property bool _expanded: false
property bool _osdActive: false property bool _osdActive: false
readonly property bool _anyHover: root._hovered || hoverPanel.panelHovered readonly property bool _anyHover: root._hovered || hoverPanel.panelHovered
readonly property bool _showPanel: _anyHover || _expanded || _osdActive readonly property bool _showPanel: _anyHover || _osdActive
on_ShowPanelChanged: {
console.log("[vol] showPanel →", _showPanel, "| expanded:", _expanded, "| anyHover:", _anyHover);
if (!_showPanel)
_expanded = false;
}
on_ExpandedChanged: console.log("[vol] expanded →", _expanded)
onVolumeChanged: _flashPanel() onVolumeChanged: _flashPanel()
onMutedChanged: _flashPanel() onMutedChanged: _flashPanel()
@ -65,6 +56,8 @@ M.BarSection {
onTriggered: root._osdActive = false onTriggered: root._osdActive = false
} }
required property var bar
M.BarIcon { M.BarIcon {
icon: root._volumeIcon icon: root._volumeIcon
minIcon: "\uF028" minIcon: "\uF028"
@ -98,7 +91,7 @@ M.BarSection {
} }
} }
// Unified volume panel hover shows slider, click expands to show devices // OSD panel hover shows slider only, fixed height, no resize
M.HoverPanel { M.HoverPanel {
id: hoverPanel id: hoverPanel
showPanel: root._showPanel showPanel: root._showPanel
@ -107,14 +100,12 @@ M.BarSection {
accentColor: root.accentColor accentColor: root.accentColor
panelNamespace: "nova-volume" panelNamespace: "nova-volume"
contentWidth: 220 contentWidth: 220
animateHeight: true
// Compact: slider row // Slider row
Item { Item {
width: parent.width width: parent.width
height: 36 height: 36
// Mute toggle
Text { Text {
id: muteIcon id: muteIcon
anchors.left: parent.left anchors.left: parent.left
@ -132,7 +123,6 @@ M.BarSection {
} }
} }
// Slider
Item { Item {
id: slider id: slider
anchors.left: muteIcon.right anchors.left: muteIcon.right
@ -147,13 +137,11 @@ M.BarSection {
color: M.Theme.base02 color: M.Theme.base02
radius: 3 radius: 3
} }
Rectangle { Rectangle {
width: parent.width * Math.min(1, Math.max(0, root.volume)) width: parent.width * Math.min(1, Math.max(0, root.volume))
height: parent.height height: parent.height
color: root._volumeColor color: root._volumeColor
radius: 3 radius: 3
Behavior on width { Behavior on width {
NumberAnimation { NumberAnimation {
duration: 80 duration: 80
@ -191,7 +179,7 @@ M.BarSection {
} }
} }
// Sink name click to expand/collapse device list // Sink name row click chevron to open mixer popup
Item { Item {
width: parent.width width: parent.width
height: 22 height: 22
@ -214,7 +202,7 @@ M.BarSection {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 12 anchors.rightMargin: 12
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: root._expanded ? "\uF077" : "\uF078" text: "\uF078"
color: M.Theme.base04 color: M.Theme.base04
font.pixelSize: M.Theme.fontSize - 3 font.pixelSize: M.Theme.fontSize - 3
font.family: M.Theme.iconFontFamily font.family: M.Theme.iconFontFamily
@ -222,17 +210,24 @@ M.BarSection {
TapHandler { TapHandler {
cursorShape: Qt.PointingHandCursor cursorShape: Qt.PointingHandCursor
onTapped: root._expanded = true onTapped: mixerLoader.active = true
} }
} }
}
// Expanded: output device list // Mixer popup separate window, no resize issues
Column { LazyLoader {
id: deviceList id: mixerLoader
width: parent.width active: false
visible: root._expanded
// Separator M.PopupPanel {
accentColor: root.accentColor
screen: root.bar.screen
anchorX: root.mapToGlobal(root.width / 2, 0).x - (root.bar.screen?.x ?? 0)
panelWidth: 220
onDismissed: mixerLoader.active = false
// Output devices
Rectangle { Rectangle {
width: parent.width - 16 width: parent.width - 16
height: 1 height: 1
@ -240,7 +235,6 @@ M.BarSection {
color: M.Theme.base03 color: M.Theme.base03
} }
// Header
Text { Text {
width: parent.width width: parent.width
height: 24 height: 24
@ -258,7 +252,7 @@ M.BarSection {
delegate: Item { delegate: Item {
required property var modelData required property var modelData
width: deviceList.width width: 220
height: 28 height: 28
readonly property bool _active: modelData === root.sink readonly property bool _active: modelData === root.sink
@ -293,38 +287,31 @@ M.BarSection {
TapHandler { TapHandler {
onTapped: { onTapped: {
Pipewire.preferredDefaultAudioSink = modelData; Pipewire.preferredDefaultAudioSink = modelData;
root._expanded = false; mixerLoader.active = false;
} }
} }
} }
} }
// Streams header (only if there are streams) // Streams section
Item { Rectangle {
visible: root._streamList.length > 0
width: parent.width - 16
height: visible ? 1 : 0
anchors.horizontalCenter: parent.horizontalCenter
color: M.Theme.base03
}
Text {
visible: root._streamList.length > 0 visible: root._streamList.length > 0
width: parent.width width: parent.width
height: visible ? streamSep.height + streamHeader.height : 0 height: visible ? 24 : 0
verticalAlignment: Text.AlignVCenter
Rectangle { leftPadding: 12
id: streamSep text: "Applications"
width: parent.width - 16 color: M.Theme.base04
height: 1 font.pixelSize: M.Theme.fontSize - 1
anchors.horizontalCenter: parent.horizontalCenter font.family: M.Theme.fontFamily
color: M.Theme.base03
}
Text {
id: streamHeader
anchors.top: streamSep.bottom
width: parent.width
height: 24
verticalAlignment: Text.AlignVCenter
leftPadding: 12
text: "Applications"
color: M.Theme.base04
font.pixelSize: M.Theme.fontSize - 1
font.family: M.Theme.fontFamily
}
} }
Repeater { Repeater {
@ -334,7 +321,7 @@ M.BarSection {
id: streamEntry id: streamEntry
required property var modelData required property var modelData
width: deviceList.width width: 220
height: 32 height: 32
readonly property string _appName: modelData.properties["application.name"] || modelData.description || modelData.name || "Unknown" readonly property string _appName: modelData.properties["application.name"] || modelData.description || modelData.name || "Unknown"
@ -422,12 +409,6 @@ M.BarSection {
} }
} }
} }
// Bottom padding
Item {
width: 1
height: 4
}
} }
} }
} }