@@ -23,10 +23,14 @@ AbstractButton {
2323 property var components
2424 property var cardData
2525
26+ property alias fontScale: header.fontScale
2627 property alias headerAlignment: header.headerAlignment
28+ readonly property alias headerHeight: header.height
29+
30+ property bool showHeader: true
2731
2832 implicitWidth: childrenRect.width
29− implicitHeight: childrenRect.height
33+ implicitHeight: summary.y + summary.height
3034
3135 UbuntuShape {
3236 id: artShape
@@ -60,21 +64,77 @@ AbstractButton {
6064 }
6165 }
6266
67+ ShaderEffect {
68+ id: overlay
69+ anchors {
70+ left: artShape.left
71+ right: artShape.right
72+ bottom: artShape.bottom
73+ }
74+
75+ height: header.height
76+ opacity: header.opacity * 0.6
77+ visible: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
78+
79+ property var source: ShaderEffectSource {
80+ id: shaderSource
81+ sourceItem: artShape
82+ onVisibleChanged: if (visible) scheduleUpdate()
83+ live: false
84+ sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
85+ }
86+
87+ vertexShader: "
88+ uniform highp mat4 qt_Matrix;
89+ attribute highp vec4 qt_Vertex;
90+ attribute highp vec2 qt_MultiTexCoord0;
91+ varying highp vec2 coord;
92+ void main() {
93+ coord = qt_MultiTexCoord0;
94+ gl_Position = qt_Matrix * qt_Vertex;
95+ }"
96+
97+ fragmentShader: "
98+ varying highp vec2 coord;
99+ uniform sampler2D source;
100+ uniform lowp float qt_Opacity;
101+ void main() {
102+ lowp vec4 tex = texture2D(source, coord);
103+ gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
104+ }"
105+ }
106+
63107 CardHeader {
64108 id: header
65109 objectName: "cardHeader"
66110 anchors {
67− top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
68− left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
111+ top: {
112+ if (template) {
113+ if (template["overlay"]) return overlay.top;
114+ if (template["card-layout"] === "horizontal") return artShape.top;
115+ }
116+ return artShape.bottom;
117+ }
118+ left: {
119+ if (template) {
120+ if (!template["overlay"] && template["card-layout"] === "horizontal") return artShape.right;
121+ }
122+ return parent.left;
123+ }
69124 right: parent.right
70125 }
71126
72127 mascot: cardData && cardData["mascot"] || ""
73128 title: cardData && cardData["title"] || ""
74129 subtitle: cardData && cardData["subtitle"] || ""
130+
131+ opacity: showHeader ? 1 : 0
132+
133+ Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
75134 }
76135
77136 Label {
137+ id: summary
78138 objectName: "summaryLabel"
79139 anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
80140 wrapMode: Text.Wrap