fix: media & user images being transparent when enabled

Also add a fallback icon for pfp
This commit is contained in:
2 * r + 2 * t 2026-04-30 23:40:54 +10:00
parent 05333b5e02
commit e682ee3d33
2 changed files with 36 additions and 9 deletions

View file

@ -22,6 +22,7 @@ Item {
readonly property real arcCoverGap: Tokens.spacing.extraSmall
property bool coverHadPrevious
property color coverFallbackColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
anchors.top: parent.top
anchors.bottom: parent.bottom
@ -33,6 +34,10 @@ Item {
}
}
Behavior on coverFallbackColour {
CAnim {}
}
Timer {
running: Players.active?.isPlaying ?? false
interval: GlobalConfig.dashboard.mediaUpdateInterval
@ -82,15 +87,18 @@ Item {
}
Item {
id: coverShape
id: coverShapeWrapper
anchors.fill: parent
layer.enabled: true
opacity: root.coverFallbackColour.a
MaterialShape {
id: coverShape
implicitSize: cover.width
shape: MaterialShape.Cookie12Sided
color: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
color: Qt.alpha(root.coverFallbackColour, 1)
Anim on rotation {
running: true
@ -159,7 +167,7 @@ Item {
layer.enabled: true
layer.effect: Mask {
maskSource: coverShape
maskSource: coverShapeWrapper
}
retainWhileLoading: true

View file

@ -16,9 +16,15 @@ Item {
required property DrawerVisibilities visibilities
required property FileDialog facePicker
property color pfpFallbackColour: Colours.layer(Colours.palette.m3surfaceContainerHighest, 2)
anchors.fill: parent
anchors.margins: Tokens.padding.large
Behavior on pfpFallbackColour {
CAnim {}
}
Item {
id: pfpContainer
@ -34,13 +40,10 @@ Item {
anchors.centerIn: parent
implicitSize: parent.height
shape: MaterialShape.Pill
color: Colours.layer(Colours.palette.m3surfaceContainerHigh, 2)
color: Qt.alpha(root.pfpFallbackColour, 1)
opacity: root.pfpFallbackColour.a
layer.enabled: true
Behavior on color {
CAnim {}
}
MouseArea {
id: mouse
@ -67,14 +70,30 @@ Item {
maskSource: shape
}
Loader {
anchors.centerIn: parent
asynchronous: true
active: pfp.status !== Image.Ready
sourceComponent: MaterialIcon {
text: "person_add"
color: Colours.palette.m3onSurfaceVariant
fontStyle: Tokens.font.icon.extraLarge
fill: 1
grade: -2 // Ugh material symbols are such a pain with fill
}
}
CachingImage {
id: pfp
anchors.fill: parent
path: `${Paths.home}/.face`
}
StyledRect {
anchors.fill: parent
color: Qt.alpha(Colours.palette.m3scrim, 0.4)
color: Qt.alpha(Colours.palette.m3scrim, pfp.status === Image.Ready ? 0.4 : 0)
opacity: mouse.containsMouse ? 1 : 0
layer.enabled: opacity < 1