feat: add no media placeholder
This commit is contained in:
parent
2ceb2a416f
commit
b01b5fcb1f
2 changed files with 117 additions and 6 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import "media"
|
import "media"
|
||||||
import QtQuick
|
import QtQuick
|
||||||
import QtQuick.Layouts
|
import QtQuick.Layouts
|
||||||
|
import M3Shapes
|
||||||
import Caelestia.Config
|
import Caelestia.Config
|
||||||
import qs.components
|
import qs.components
|
||||||
import qs.services
|
import qs.services
|
||||||
|
|
@ -24,6 +25,114 @@ Item {
|
||||||
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
|
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Item {
|
||||||
|
Layout.fillWidth: true
|
||||||
|
Layout.fillHeight: true
|
||||||
|
|
||||||
|
state: Players.active ? "" : "noMedia"
|
||||||
|
|
||||||
|
states: State {
|
||||||
|
name: "noMedia"
|
||||||
|
|
||||||
|
PropertyChanges {
|
||||||
|
noMedia.opacity: 1
|
||||||
|
content.opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
transitions: [
|
||||||
|
Transition {
|
||||||
|
from: ""
|
||||||
|
|
||||||
|
SequentialAnimation {
|
||||||
|
Anim {
|
||||||
|
target: content
|
||||||
|
property: "opacity"
|
||||||
|
type: Anim.DefaultEffects
|
||||||
|
}
|
||||||
|
Anim {
|
||||||
|
target: noMedia
|
||||||
|
property: "opacity"
|
||||||
|
type: Anim.SlowEffects
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
Transition {
|
||||||
|
to: ""
|
||||||
|
|
||||||
|
SequentialAnimation {
|
||||||
|
Anim {
|
||||||
|
target: noMedia
|
||||||
|
property: "opacity"
|
||||||
|
type: Anim.DefaultEffects
|
||||||
|
}
|
||||||
|
Anim {
|
||||||
|
target: content
|
||||||
|
property: "opacity"
|
||||||
|
type: Anim.SlowEffects
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: noMedia
|
||||||
|
|
||||||
|
anchors.centerIn: parent
|
||||||
|
anchors.horizontalCenterOffset: -Tokens.padding.extraLarge * 2
|
||||||
|
asynchronous: true
|
||||||
|
active: opacity > 0
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
sourceComponent: ColumnLayout {
|
||||||
|
spacing: Tokens.spacing.small
|
||||||
|
|
||||||
|
MaterialShape {
|
||||||
|
Layout.topMargin: (pathBounds().height - implicitSize) / 2
|
||||||
|
Layout.bottomMargin: (pathBounds().height - implicitSize) / 2 + Tokens.spacing.small
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
color: Colours.palette.m3primaryContainer
|
||||||
|
implicitSize: icon.implicitHeight + Tokens.padding.extraLarge * 2
|
||||||
|
shape: MaterialShape.ClamShell
|
||||||
|
|
||||||
|
Behavior on color {
|
||||||
|
CAnim {}
|
||||||
|
}
|
||||||
|
|
||||||
|
MaterialIcon {
|
||||||
|
id: icon
|
||||||
|
|
||||||
|
anchors.centerIn: parent
|
||||||
|
text: "queue_music"
|
||||||
|
fontStyle: Tokens.font.icon.builders.large.scale(2).build()
|
||||||
|
color: Colours.palette.m3onPrimaryContainer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
Layout.alignment: Qt.AlignHCenter
|
||||||
|
text: qsTr("Nothing playing")
|
||||||
|
font: Tokens.font.headline.medium
|
||||||
|
}
|
||||||
|
|
||||||
|
StyledText {
|
||||||
|
text: qsTr("Play something for it to show up here!")
|
||||||
|
color: Colours.palette.m3onSurfaceVariant
|
||||||
|
font: Tokens.font.body.large
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Loader {
|
||||||
|
id: content
|
||||||
|
|
||||||
|
anchors.fill: parent
|
||||||
|
asynchronous: true
|
||||||
|
active: opacity > 0
|
||||||
|
|
||||||
|
sourceComponent: RowLayout {
|
||||||
|
spacing: Tokens.spacing.extraLarge
|
||||||
|
|
||||||
Details {
|
Details {
|
||||||
Layout.fillWidth: true
|
Layout.fillWidth: true
|
||||||
}
|
}
|
||||||
|
|
@ -33,4 +142,7 @@ Item {
|
||||||
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
|
implicitWidth: Tokens.sizes.dashboard.mediaSectionWidth
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -180,7 +180,6 @@ class DashboardTokens : public ConfigObject {
|
||||||
CONFIG_PROPERTY(int, userWidth, 340)
|
CONFIG_PROPERTY(int, userWidth, 340)
|
||||||
CONFIG_PROPERTY(int, logoSize, 30)
|
CONFIG_PROPERTY(int, logoSize, 30)
|
||||||
CONFIG_PROPERTY(int, uptimeSize, 30)
|
CONFIG_PROPERTY(int, uptimeSize, 30)
|
||||||
CONFIG_PROPERTY(int, bubbleSize, 8)
|
|
||||||
CONFIG_PROPERTY(int, dateTimeWidth, 110)
|
CONFIG_PROPERTY(int, dateTimeWidth, 110)
|
||||||
CONFIG_PROPERTY(int, mediaWidth, 200)
|
CONFIG_PROPERTY(int, mediaWidth, 200)
|
||||||
CONFIG_PROPERTY(int, mediaProgressSweep, 180)
|
CONFIG_PROPERTY(int, mediaProgressSweep, 180)
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue