1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
// SPDX-License-Identifier: GPL-2.0-only
// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
//
// A frosted panel. It snapshots the wallpaper image the card sits on, blurs it
// and masks it to the card's rounded rect, then tints it for text contrast.
// When there is no source, only the tint draws, so the card still reads.
import QtQuick
import QtQuick.Effects
Item {
id: backdrop
property Item sourceItem: null
property int radius: 10
property color tint: "#24273a"
property real tintOpacity: 0.72
property bool blurEnabled: true
ShaderEffectSource {
id: snapshot
sourceItem: backdrop.sourceItem
live: true
sourceRect: {
if (backdrop.sourceItem === null)
return Qt.rect(0, 0, 0, 0)
// Guard reads: mapToItem() hides its reads in C++, so the binding
// would not otherwise re-run when the card or image moves (e.g.
// the failed-login shake). Reading the coordinates registers them.
var _guard = backdrop.x + backdrop.y + backdrop.parent.x + backdrop.parent.y
+ backdrop.sourceItem.x + backdrop.sourceItem.y
var p = backdrop.mapToItem(backdrop.sourceItem, 0, 0)
return Qt.rect(p.x, p.y, backdrop.width, backdrop.height)
}
}
MultiEffect {
anchors.fill: parent
source: snapshot
visible: backdrop.sourceItem !== null && backdrop.blurEnabled
blurEnabled: true
blur: 0.8
maskEnabled: true
maskSource: mask
}
Rectangle {
id: mask
anchors.fill: parent
radius: backdrop.radius
layer.enabled: true
visible: false
}
Rectangle {
anchors.fill: parent
radius: backdrop.radius
color: backdrop.tint
opacity: backdrop.tintOpacity
}
}
|
