MediaCard: less intrusive mediaplayer switcher

This commit is contained in:
quadbyte 2025-08-13 23:05:49 -04:00
parent 93b60e9002
commit 850968c3c0
2 changed files with 29 additions and 14 deletions

View file

@ -67,6 +67,7 @@ NBox {
currentIndex: MediaPlayer.selectedPlayerIndex currentIndex: MediaPlayer.selectedPlayerIndex
background: Rectangle { background: Rectangle {
visible: false
// implicitWidth: 120 * scaling // implicitWidth: 120 * scaling
// implicitHeight: 30 * scaling // implicitHeight: 30 * scaling
color: "transparent" color: "transparent"
@ -76,6 +77,7 @@ NBox {
} }
contentItem: NText { contentItem: NText {
visible: false
leftPadding: Style.marginMedium * scaling leftPadding: Style.marginMedium * scaling
rightPadding: playerSelector.indicator.width + playerSelector.spacing rightPadding: playerSelector.indicator.width + playerSelector.spacing
text: playerSelector.displayText text: playerSelector.displayText
@ -86,18 +88,21 @@ NBox {
} }
indicator: Text { indicator: Text {
x: playerSelector.width - width - Style.marginMedium * scaling x: playerSelector.width - width
y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2 y: playerSelector.topPadding + (playerSelector.availableHeight - height) / 2
text: "arrow_drop_down" text: "arrow_drop_down"
font.family: "Material Symbols Outlined" font.family: "Material Symbols Outlined"
font.pointSize: Style.marginXL * scaling font.pointSize: Style.fontSizeXL * scaling
color: Colors.textPrimary color: Colors.textPrimary
horizontalAlignment: Text.AlignRight
} }
popup: Popup { popup: Popup {
y: playerSelector.height id: popup
width: playerSelector.width x: playerSelector.width * 0.5
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling * 2) y: playerSelector.height * 0.75
width: playerSelector.width * 0.5
implicitHeight: Math.min(160 * scaling, contentItem.implicitHeight + Style.marginMedium * scaling)
padding: Style.marginSmall * scaling padding: Style.marginSmall * scaling
contentItem: ListView { contentItem: ListView {
@ -109,10 +114,19 @@ NBox {
} }
background: Rectangle { background: Rectangle {
color: Colors.backgroundSecondary gradient: Gradient {
GradientStop {
position: 0.0
color: Colors.backgroundTertiary
}
GradientStop {
position: 1.0
color: Colors.backgroundSecondary
}
}
border.color: Colors.outline border.color: Colors.outline
border.width: Math.max(1, Style.borderThin * scaling) border.width: Math.max(1, Style.borderThin * scaling)
radius: Style.radiusMedium * scaling radius: Style.radiusTiny * scaling
} }
} }
@ -128,9 +142,9 @@ NBox {
highlighted: playerSelector.highlightedIndex === index highlighted: playerSelector.highlightedIndex === index
background: Rectangle { background: Rectangle {
width: playerSelector.width - Style.marginSmall * scaling * 2 width: popup.width - Style.marginSmall * scaling * 2
color: highlighted ? Colors.hover : "transparent" color: highlighted ? Colors.hover : "transparent"
radius: Style.radiusSmall * scaling radius: Style.radiusTiny * scaling
} }
} }
@ -143,6 +157,7 @@ NBox {
RowLayout { RowLayout {
spacing: Style.marginMedium * scaling spacing: Style.marginMedium * scaling
// -------------------------
// Rounded thumbnail image // Rounded thumbnail image
Rectangle { Rectangle {

View file

@ -64,7 +64,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: lockButtonArea.containsMouse ? Colors.accentPrimary : "transparent" color: lockButtonArea.containsMouse ? Colors.hover : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -123,7 +123,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: suspendButtonArea.containsMouse ? Colors.accentPrimary : "transparent" color: suspendButtonArea.containsMouse ? Colors.hover : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -181,7 +181,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: rebootButtonArea.containsMouse ? Colors.accentPrimary : "transparent" color: rebootButtonArea.containsMouse ? Colors.hover : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -239,7 +239,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: logoutButtonArea.containsMouse ? Colors.accentPrimary : "transparent" color: logoutButtonArea.containsMouse ? Colors.hover : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left
@ -297,7 +297,7 @@ NPanel {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 36 * scaling Layout.preferredHeight: 36 * scaling
radius: Style.radiusSmall * scaling radius: Style.radiusSmall * scaling
color: shutdownButtonArea.containsMouse ? Colors.accentPrimary : "transparent" color: shutdownButtonArea.containsMouse ? Colors.hover : "transparent"
Item { Item {
anchors.left: parent.left anchors.left: parent.left