18 import Ubuntu.Components 0.1
20 import Ubuntu.Thumbnailer 0.1
25 property var components
28 property real fontScale: 1.0
29 property
int headerAlignment: Text.AlignLeft
30 readonly property
int headerHeight: headerLoader.item ? headerLoader.item.height : 0
31 property
int fixedHeaderHeight: -1
32 readonly property
string title: cardData && cardData[
"title"] ||
""
34 property
bool showHeader:
true
36 implicitWidth: childrenRect.width
37 implicitHeight: summary.y + summary.height + (summary.text && backgroundLoader.active ? units.gu(1) : 0)
41 objectName:
"backgroundLoader"
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
57 property Image backgroundImage: Image {
58 objectName:
"backgroundImage"
60 if (cardData && typeof cardData[
"background"] ===
"string")
return cardData[
"background"]
61 else if (
template && typeof
template[
"card-background"] ===
"string")
return template[
"card-background"]
66 function getColor(index) {
67 if (cardData && typeof cardData[
"background"] ===
"object"
68 && (cardData[
"background"][
"type"] ===
"color" || cardData[
"background"][
"type"] ===
"gradient")) {
69 return cardData[
"background"][
"elements"][index];
70 }
else if (
template && typeof
template[
"card-background"] ===
"object"
71 && (
template[
"card-background"][
"type"] ===
"color" ||
template[
"card-background"][
"type"] ===
"gradient")) {
72 return template[
"card-background"][
"elements"][index];
73 }
else return undefined;
81 objectName:
"artShape"
82 anchors.horizontalCenter:
template &&
template[
"card-layout"] ===
"horizontal" ? undefined : parent.horizontalCenter
83 anchors.left:
template &&
template[
"card-layout"] ===
"horizontal" ? parent.left : undefined
84 visible: cardData && cardData[
"art"] ||
false
86 readonly property real aspect: components !== undefined ? components[
"art"][
"aspect-ratio"] : 1
87 readonly property
bool aspectSmallerThanImageAspect: aspect < image.aspect
89 Component.onCompleted: updateWidthHeightBindings();
90 onAspectSmallerThanImageAspectChanged: updateWidthHeightBindings();
92 function updateWidthHeightBindings() {
93 if (aspectSmallerThanImageAspect) {
94 width = Qt.binding(
function() {
return !visible ? 0 : image.width });
95 height = Qt.binding(
function() {
return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.height : width / image.aspect });
97 width = Qt.binding(
function() {
return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.width : height * image.aspect });
98 height = Qt.binding(
function() {
return !visible ? 0 : image.height });
103 objectName:
"artImage"
104 source: cardData && cardData[
"art"] ||
""
109 fillMode: components && components[
"art"][
"fill-mode"] ===
"fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
111 readonly property real aspect: implicitWidth / implicitHeight
112 readonly property
bool isHorizontal:
template &&
template[
"card-layout"] ===
"horizontal"
114 Component.onCompleted: updateWidthHeightBindings();
115 onIsHorizontalChanged: updateWidthHeightBindings();
117 function updateWidthHeightBindings() {
119 width = Qt.binding(
function() {
return height * artShape.aspect });
120 height = Qt.binding(
function() {
return root.headerHeight });
122 width = Qt.binding(
function() {
return root.width });
123 height = Qt.binding(
function() {
return width / artShape.aspect });
133 right: artShape.right
134 bottom: artShape.bottom
136 active:
template &&
template[
"overlay"] && artShape.visible && artShape.image.status === Image.Ready ||
false
138 sourceComponent: ShaderEffect {
141 height: headerLoader.item ? headerLoader.item.height : 0
142 opacity: headerLoader.item ? headerLoader.item.opacity * 0.6 : 0
144 property var source: ShaderEffectSource {
147 onVisibleChanged:
if (visible) scheduleUpdate()
149 sourceRect: Qt.rect(0, artShape.height - overlay.height, artShape.width, overlay.height)
153 uniform highp mat4 qt_Matrix;
154 attribute highp vec4 qt_Vertex;
155 attribute highp vec2 qt_MultiTexCoord0;
156 varying highp vec2 coord;
158 coord = qt_MultiTexCoord0;
159 gl_Position = qt_Matrix * qt_Vertex;
163 varying highp vec2 coord;
164 uniform sampler2D source;
165 uniform lowp
float qt_Opacity;
167 lowp vec4 tex = texture2D(source, coord);
168 gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity;
175 objectName: "cardHeaderLoader
"
180 if (template["overlay
"]) return overlayLoader.top;
181 if (template["card-layout
"] === "horizontal
") return artShape.top;
183 return artShape.bottom;
187 if (!template["overlay
"] && template["card-layout
"] === "horizontal
") return artShape.right;
193 active: cardData && cardData["title
"] || cardData && cardData["mascot
"] || false
195 sourceComponent: CardHeader {
197 objectName: "cardHeader
"
199 mascot: cardData && cardData["mascot
"] || ""
201 subtitle: cardData && cardData["subtitle
"] || ""
203 titleWeight: components && components["subtitle
"] ? Font.DemiBold : Font.Normal
205 opacity: showHeader ? 1 : 0
206 inOverlay: root.template && root.template["overlay
"] === true
207 fontColor: inOverlay ? "white
" : summary.color
208 useMascotShape: !backgroundLoader.active && !inOverlay
209 headerAlignment: root.headerAlignment
210 height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight
211 fontScale: root.fontScale
213 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
219 objectName: "summaryLabel
"
221 top: headerLoader.active ? headerLoader.bottom : artShape.bottom
224 margins: backgroundLoader.active ? units.gu(1) : 0
229 elide: Text.ElideRight
230 text: cardData && cardData["summary
"] || ""
231 height: text ? implicitHeight : 0
233 // TODO karni: Change "grey
" to Ubuntu.Components.Palette color once updated.
234 color: backgroundLoader.active && backgroundLoader.item.luminance < 0.7 ? "white
" : "grey
"