fix: media & user images being transparent when enabled
Also add a fallback icon for pfp
This commit is contained in:
parent
05333b5e02
commit
e682ee3d33
2 changed files with 36 additions and 9 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue