fix panel pin button layout, network hover, mpris session switch, volume title colors
This commit is contained in:
parent
c81cddc38f
commit
084ef1da75
4 changed files with 122 additions and 73 deletions
|
|
@ -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
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue