MediaCard: less intrusive mediaplayer switcher
This commit is contained in:
parent
93b60e9002
commit
850968c3c0
2 changed files with 29 additions and 14 deletions
|
|
@ -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 {
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue