fix panel pin button layout, network hover, mpris session switch, volume title colors

This commit is contained in:
Damocles 2026-04-16 18:28:50 +02:00
parent c81cddc38f
commit 084ef1da75
4 changed files with 122 additions and 73 deletions

View file

@ -31,6 +31,7 @@ PanelWindow {
// Shared // Shared
required property color accentColor required property color accentColor
property string panelTitle: ""
property string panelNamespace: "nova-panel" property string panelNamespace: "nova-panel"
property real contentWidth: 220 property real contentWidth: 220
@ -49,7 +50,7 @@ PanelWindow {
x: panelContainer.x + panelContainer.width - 28 x: panelContainer.x + panelContainer.width - 28
y: 0 y: 0
width: 28 width: 28
height: 28 height: 24
} }
WlrLayershell.layer: WlrLayer.Overlay WlrLayershell.layer: WlrLayer.Overlay
@ -192,7 +193,7 @@ PanelWindow {
x: 0 x: 0
y: -height y: -height
width: root.contentWidth width: root.contentWidth
height: panelContent.height height: _panelColumn.height
opacity: 0 opacity: 0
// Popup mode: eat clicks on panel background so outer dismiss doesn't fire // Popup mode: eat clicks on panel background so outer dismiss doesn't fire
@ -209,52 +210,75 @@ PanelWindow {
} }
Column { Column {
id: panelContent id: _panelColumn
width: root.contentWidth width: root.contentWidth
}
// Pin button top-right corner, hover mode only // Header row: title (optional) + pin button hover mode only
Item { Item {
visible: !root.popupMode && (root.panelHovered || root._pinned) visible: !root.popupMode
x: parent.width - width - 4 width: parent.width
y: 4 height: 24
width: 20
height: 20
z: 2
opacity: pinHover.hovered || root._pinned ? 1 : 0.35
Behavior on opacity { Text {
NumberAnimation { visible: root.panelTitle !== ""
duration: 100 anchors.left: parent.left
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
text: root.panelTitle
color: root.accentColor
font.pixelSize: M.Theme.fontSize - 1
font.bold: true
font.family: M.Theme.fontFamily
} }
}
HoverHandler { Item {
id: pinHover visible: root.panelHovered || root._pinned
} anchors.right: parent.right
anchors.rightMargin: 4
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
opacity: pinHover.hovered || root._pinned ? 1 : 0.35
TapHandler { Behavior on opacity {
cursorShape: Qt.PointingHandCursor NumberAnimation {
onTapped: { duration: 100
root._pinned = !root._pinned; }
if (!root._pinned && !root.showPanel) }
root.dismiss();
}
}
Text { HoverHandler {
anchors.centerIn: parent id: pinHover
text: root._pinned ? "\uDB81\uDC03" : "\uDB82\uDD31" }
color: root._pinned ? root.accentColor : M.Theme.base04
font.pixelSize: M.Theme.fontSize - 1
font.family: M.Theme.iconFontFamily
Behavior on color { TapHandler {
ColorAnimation { cursorShape: Qt.PointingHandCursor
duration: 100 onTapped: {
root._pinned = !root._pinned;
if (!root._pinned && !root.showPanel)
root.dismiss();
}
}
Text {
anchors.centerIn: parent
text: root._pinned ? "\uDB81\uDC03" : "\uDB82\uDD31"
color: root._pinned ? root.accentColor : M.Theme.base04
font.pixelSize: M.Theme.fontSize - 1
font.family: M.Theme.iconFontFamily
Behavior on color {
ColorAnimation {
duration: 100
}
}
} }
} }
} }
Column {
id: panelContent
width: parent.width
}
} }
} }

View file

@ -75,7 +75,13 @@ M.BarSection {
required property var bar required property var bar
property bool _pinned: false property bool _pinned: false
readonly property bool _anyHover: root._hovered || hoverPanel.panelHovered property bool _switching: false
Timer {
id: _sessionSwitchTimer
interval: 400
onTriggered: root._switching = false
}
readonly property bool _anyHover: root._hovered || hoverPanel.panelHovered || _switching
readonly property bool _showPanel: _anyHover || _pinned readonly property bool _showPanel: _anyHover || _pinned
on_AnyHoverChanged: { on_AnyHoverChanged: {
@ -355,45 +361,64 @@ M.BarSection {
} }
// Player switcher // Player switcher
Row { Item {
anchors.horizontalCenter: parent.horizontalCenter width: parent.width
height: 22 height: _players.length > 1 ? 28 : 0
spacing: 6 visible: _players.length > 1
Repeater { Flickable {
model: root._players id: _switcher
anchors.centerIn: parent
width: Math.min(_playerRow.implicitWidth, parent.width - 16)
height: 22
contentWidth: _playerRow.implicitWidth
clip: true
delegate: Rectangle { Row {
required property var modelData id: _playerRow
required property int index height: 22
spacing: 6
readonly property bool _active: index === root._playerIdx Repeater {
model: root._players
width: _pLabel.implicitWidth + 12 delegate: Rectangle {
height: 18 required property var modelData
radius: 9 required property int index
color: _active ? M.Theme.base02 : (pHover.hovered ? M.Theme.base02 : "transparent")
border.color: _active ? root.accentColor : M.Theme.base03
border.width: _active ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
Text { readonly property bool _active: index === root._playerIdx
id: _pLabel
anchors.centerIn: parent
text: modelData.identity ?? "Player"
color: _active ? root.accentColor : M.Theme.base04
font.pixelSize: M.Theme.fontSize - 2
font.family: M.Theme.fontFamily
font.bold: _active
}
HoverHandler { width: _pLabel.implicitWidth + 12
id: pHover height: 18
cursorShape: Qt.PointingHandCursor radius: 9
} color: _active ? M.Theme.base02 : (pHover.hovered ? M.Theme.base02 : "transparent")
border.color: _active ? root.accentColor : M.Theme.base03
border.width: _active ? 1 : 0
anchors.verticalCenter: parent.verticalCenter
TapHandler { Text {
onTapped: root._playerIdx = index id: _pLabel
anchors.centerIn: parent
text: modelData.identity ?? "Player"
color: _active ? root.accentColor : M.Theme.base04
font.pixelSize: M.Theme.fontSize - 2
font.family: M.Theme.fontFamily
font.bold: _active
}
HoverHandler {
id: pHover
cursorShape: Qt.PointingHandCursor
}
TapHandler {
onTapped: {
root._playerIdx = index;
root._switching = true;
_sessionSwitchTimer.restart();
}
}
}
} }
} }
} }

View file

@ -103,7 +103,7 @@ M.BarSection {
M.NetworkMenu { M.NetworkMenu {
id: networkMenu id: networkMenu
showPanel: root._anyHover showPanel: root._anyHover
screen: root.bar.screen screen: QsWindow.window?.screen ?? null
anchorItem: root anchorItem: root
accentColor: root.accentColor accentColor: root.accentColor
} }

View file

@ -213,7 +213,7 @@ M.BarSection {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
leftPadding: 12 leftPadding: 12
text: "Output Devices" text: "Output Devices"
color: M.Theme.base04 color: root.accentColor
font.pixelSize: M.Theme.fontSize - 1 font.pixelSize: M.Theme.fontSize - 1
font.family: M.Theme.fontFamily font.family: M.Theme.fontFamily
} }
@ -279,7 +279,7 @@ M.BarSection {
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
leftPadding: 12 leftPadding: 12
text: "Applications" text: "Applications"
color: M.Theme.base04 color: root.accentColor
font.pixelSize: M.Theme.fontSize - 1 font.pixelSize: M.Theme.fontSize - 1
font.family: M.Theme.fontFamily font.family: M.Theme.fontFamily
} }