@@ -25,47 +25,53 @@ AbstractButton {
25 property var components
25 property var components
26 property var cardData
26 property var cardData
28− property alias fontScale: header.fontScale
28+ property real fontScale: 1.0
29− property alias headerAlignment: header.headerAlignment
29+ property int headerAlignment: Text.AlignLeft
30− property alias headerHeight: header.height
30+ readonly property int headerHeight: headerLoader.item ? headerLoader.item.height : 0
31+ property int fixedHeaderHeight: -1
31− readonly property alias title: header.title
32+ readonly property string title: cardData && cardData["title"] || ""
33 property bool showHeader: true
34 property bool showHeader: true
35 implicitWidth: childrenRect.width
36 implicitWidth: childrenRect.width
36− implicitHeight: summary.y + summary.height + (summary.text && background.visible ? units.gu(1) : 0)
37+ implicitHeight: summary.y + summary.height + (summary.text && backgroundLoader.active ? units.gu(1) : 0)
38− UbuntuShape {
39+ Loader {
39− id: background
40+ id: backgroundLoader
40− objectName: "background"
41+ objectName: "backgroundLoader"
42− visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
44− property bool artAndSummary: components["art"]["field"] && components["summary"] || false
45− color: getColor(0) || "white"
46− gradientColor: getColor(1) || color
48− image: backgroundImage.source ? backgroundImage : null
50− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
43+ readonly property bool artAndSummary: components["art"]["field"] && components["summary"] || false
44+ active: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"] || artAndSummary)
47+ sourceComponent: UbuntuShape {
48+ objectName: "background"
50+ color: getColor(0) || "white"
51+ gradientColor: getColor(1) || color
53+ image: backgroundImage.source ? backgroundImage : null
55+ property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
52− property Image backgroundImage: Image {
57+ property Image backgroundImage: Image {
53− objectName: "backgroundImage"
58+ objectName: "backgroundImage"
54− source: {
59+ source: {
55− if (cardData && typeof cardData["background"] === "string") return cardData["background"]
60+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]
56− else if (template && typeof template["card-background"] === "string") return template["card-background"]
61+ else if (template && typeof template["card-background"] === "string") return template["card-background"]
57− else return ""
62+ else return ""
61− function getColor(index) {
66+ function getColor(index) {
62− if (cardData && typeof cardData["background"] === "object"
67+ if (cardData && typeof cardData["background"] === "object"
63− && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
68+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
64− return cardData["background"]["elements"][index];
69+ return cardData["background"]["elements"][index];
65− } else if (template && typeof template["card-background"] === "object"
70+ } else if (template && typeof template["card-background"] === "object"
66− && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
71+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
67− return template["card-background"]["elements"][index];
72+ return template["card-background"]["elements"][index];
68− } else return undefined;
73+ } else return undefined;
@@ -111,7 +117,7 @@ AbstractButton {
111 function updateWidthHeightBindings() {
117 function updateWidthHeightBindings() {
112 if (isHorizontal) {
118 if (isHorizontal) {
113 width = Qt.binding(function() { return height * artShape.aspect });
119 width = Qt.binding(function() { return height * artShape.aspect });
114− height = Qt.binding(function() { return header.height });
120+ height = Qt.binding(function() { return root.headerHeight });
116 width = Qt.binding(function() { return root.width });
122 width = Qt.binding(function() { return root.width });
117 height = Qt.binding(function() { return width / artShape.aspect });
123 height = Qt.binding(function() { return width / artShape.aspect });
@@ -120,53 +126,58 @@ AbstractButton {
123− ShaderEffect {
129+ Loader {
124− id: overlay
130+ id: overlayLoader
125 anchors {
131 anchors {
126 left: artShape.left
132 left: artShape.left
127 right: artShape.right
133 right: artShape.right
128 bottom: artShape.bottom
134 bottom: artShape.bottom
136+ active: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
131− height: header.height
138+ sourceComponent: ShaderEffect {
132− opacity: header.opacity * 0.6
139+ id: overlay
133− visible: template && template["overlay"] && artShape.visible && artShape.image.status === Image.Ready || false
141+ height: headerLoader.item ? headerLoader.item.height : 0
142+ opacity: headerLoader.item ? headerLoader.item.opacity * 0.6 : 0
135− property var source: ShaderEffectSource {
144+ property var source: ShaderEffectSource {
136− id: shaderSource
145+ id: shaderSource
137− sourceItem: artShape
146+ sourceItem: artShape
138− onVisibleChanged: if (visible) scheduleUpdate()
147+ onVisibleChanged: if (visible) scheduleUpdate()
139− live: false
148+ live: false
140− sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
149+ sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
143− vertexShader: "
152+ vertexShader: "
144− uniform highp mat4 qt_Matrix;
153+ uniform highp mat4 qt_Matrix;
145− attribute highp vec4 qt_Vertex;
154+ attribute highp vec4 qt_Vertex;
146− attribute highp vec2 qt_MultiTexCoord0;
155+ attribute highp vec2 qt_MultiTexCoord0;
147− varying highp vec2 coord;
156+ varying highp vec2 coord;
148− void main() {
157+ void main() {
149− coord = qt_MultiTexCoord0;
158+ coord = qt_MultiTexCoord0;
150− gl_Position = qt_Matrix * qt_Vertex;
159+ gl_Position = qt_Matrix * qt_Vertex;
153− fragmentShader: "
162+ fragmentShader: "
154− varying highp vec2 coord;
163+ varying highp vec2 coord;
155− uniform sampler2D source;
164+ uniform sampler2D source;
156− uniform lowp float qt_Opacity;
165+ uniform lowp float qt_Opacity;
157− void main() {
166+ void main() {
158− lowp vec4 tex = texture2D(source, coord);
167+ lowp vec4 tex = texture2D(source, coord);
159− gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
168+ gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
163− CardHeader {
173+ Loader {
164− id: header
174+ id: headerLoader
165− objectName: "cardHeader"
175+ objectName: "cardHeaderLoader"
166 anchors {
177 anchors {
168 if (template) {
179 if (template) {
169− if (template["overlay"]) return overlay.top;
180+ if (template["overlay"]) return overlayLoader.top;
170 if (template["card-layout"] === "horizontal") return artShape.top;
181 if (template["card-layout"] === "horizontal") return artShape.top;
172 return artShape.bottom;
183 return artShape.bottom;
@@ -179,29 +190,38 @@ AbstractButton {
180 right: parent.right
191 right: parent.right
193+ active: cardData && cardData["title"] || cardData && cardData["mascot"] || false
195+ sourceComponent: CardHeader {
197+ objectName: "cardHeader"
183− mascot: cardData && cardData["mascot"] || ""
199+ mascot: cardData && cardData["mascot"] || ""
184− title: cardData && cardData["title"] || ""
200+ title: root.title
185− subtitle: cardData && cardData["subtitle"] || ""
201+ subtitle: cardData && cardData["subtitle"] || ""
187− titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
203+ titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
189− opacity: showHeader ? 1 : 0
205+ opacity: showHeader ? 1 : 0
190− inOverlay: root.template && root.template["overlay"] === true
206+ inOverlay: root.template && root.template["overlay"] === true
191− fontColor: inOverlay ? "white" : summary.color
207+ fontColor: inOverlay ? "white" : summary.color
192− useMascotShape: !background.visible && !inOverlay
208+ useMascotShape: !backgroundLoader.active && !inOverlay
209+ headerAlignment: root.headerAlignment
210+ height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight
211+ fontScale: root.fontScale
194− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
213+ Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
198 id: summary
218 id: summary
199 objectName: "summaryLabel"
219 objectName: "summaryLabel"
200 anchors {
220 anchors {
201− top: header.visible ? header.bottom : artShape.bottom
221+ top: headerLoader.active ? headerLoader.bottom : artShape.bottom
202 left: parent.left
222 left: parent.left
203 right: parent.right
223 right: parent.right
204− margins: background.visible ? units.gu(1) : 0
224+ margins: backgroundLoader.active ? units.gu(1) : 0
205 topMargin: 0
225 topMargin: 0
207 wrapMode: Text.Wrap
227 wrapMode: Text.Wrap
@@ -211,6 +231,6 @@ AbstractButton {
211 height: text ? implicitHeight : 0
231 height: text ? implicitHeight : 0
212 fontSize: "small"
232 fontSize: "small"
213 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
233 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
214− color: background.visible && background.luminance < 0.7 ? "white" : "grey"
234+ color: backgroundLoader.active && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"