@@ -71,19 +71,14 @@ var kArtShapeHolderCode = 'Item { \n\
7171 visible: image.status == Image.Ready; \n\
7272 readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
7373 readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : components !== undefined ? components["art"]["aspect-ratio"] : 1; \n\
74− readonly property bool aspectSmallerThanImageAspect: aspect < image.aspect; \n\
7574 Component.onCompleted: { updateWidthHeightBindings(); if (artShapeBorderSource !== undefined) borderSource = artShapeBorderSource; } \n\
76− onAspectSmallerThanImageAspectChanged: updateWidthHeightBindings(); \n\
7775 Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
7876 function updateWidthHeightBindings() { \n\
7977 if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
8078 width = root.fixedArtShapeSize.width; \n\
8179 height = root.fixedArtShapeSize.height; \n\
82− } else if (aspectSmallerThanImageAspect) { \n\
83− width = Qt.binding(function() { return !visible ? 0 : image.width }); \n\
84− height = Qt.binding(function() { return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.height : width / image.aspect }); \n\
8580 } else { \n\
86− width = Qt.binding(function() { return !visible ? 0 : image.fillMode === Image.PreserveAspectCrop ? image.width : height * image.aspect }); \n\
81+ width = Qt.binding(function() { return !visible ? 0 : image.width }); \n\
8782 height = Qt.binding(function() { return !visible ? 0 : image.height }); \n\
8883 } \n\
8984 } \n\
@@ -92,8 +87,7 @@ var kArtShapeHolderCode = 'Item { \n\
9287 source: cardData && cardData["art"] || ""; \n\
9388 cache: true; \n\
9489 asynchronous: root.asynchronous; \n\
95− fillMode: components && components["art"]["fill-mode"] === "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop; \n\
96− readonly property real aspect: implicitWidth / implicitHeight; \n\
90+ fillMode: Image.PreserveAspectCrop; \n\
9791 width: %2; \n\
9892 height: %3; \n\
9993 } \n\
@@ -114,7 +108,8 @@ var kOverlayLoaderCode = 'Loader { \n\
114108 sourceComponent: ShaderEffect { \n\
115109 id: overlay; \n\
116110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
117− opacity: 0.6; \n\
111+ property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b; \n\
112+ property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
118113 property var source: ShaderEffectSource { \n\
119114 id: shaderSource; \n\
120115 sourceItem: artShapeLoader.item; \n\
@@ -135,17 +130,17 @@ var kOverlayLoaderCode = 'Loader { \n\
135130 varying highp vec2 coord; \n\
136131 uniform sampler2D source; \n\
137132 uniform lowp float qt_Opacity; \n\
133+ uniform highp vec4 overlayColor; \n\
138134 void main() { \n\
139135 lowp vec4 tex = texture2D(source, coord); \n\
140− gl_FragColor = vec4(0, 0, 0, tex.a) * qt_Opacity; \n\
136+ gl_FragColor = vec4(overlayColor.r, overlayColor.g, overlayColor.b, 1) * qt_Opacity * overlayColor.a * tex.a; \n\
141137 }"; \n\
142138 } \n\
143139 }\n';
144140
145−// %1 is used as anchors of row
146−// %2 is used as first child of the row
147−// %3 is used as second child of the row
148−var kHeaderRow2Code = 'Row { \n\
141+// multiple row version of HeaderRowCode
142+function kHeaderRowCodeGenerator() {
143+var kHeaderRowCodeTemplate = 'Row { \n\
149144 id: row; \n\
150145 objectName: "outerRow"; \n\
151146 property real margins: units.gu(1); \n\
@@ -153,45 +148,32 @@ var kHeaderRow2Code = 'Row { \n\
153148 height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
154149 anchors { %1 } \n\
155150 anchors.right: parent.right; \n\
156− anchors.margins: margins;\n\
157− data: [ %2\n\
158− ,\n\
159− %3 \n\
151+ anchors.margins: margins; \n\
152+ anchors.rightMargin: 0; \n\
153+ data: [ \n\
154+ %2 \n\
160155 ] \n\
161156 }\n';
157+ var args = Array.prototype.slice.call(arguments);
158+ var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(args.join(',\n'));
159+ return code;
160+}
162161
163−// %1 is used as anchors of row
164−// %2 is used as first child of the row
165−// %3 is used as second child of the row
166−// %4 is used as third child of the row
167−var kHeaderRow3Code = 'Row { \n\
168− id: row; \n\
169− objectName: "outerRow"; \n\
170− property real margins: units.gu(1); \n\
171− spacing: margins; \n\
172− height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
173− anchors { %1 } \n\
174− anchors.right: parent.right; \n\
175− anchors.margins: margins;\n\
176− data: [ %2\n\
177− ,\n\
162+// multiple item version of kHeaderContainerCode
163+function kHeaderContainerCodeGenerator() {
164+ var headerContainerCodeTemplate = 'Item { \n\
165+ id: headerTitleContainer; \n\
166+ anchors { %1 } \n\
167+ width: parent.width - x; \n\
168+ implicitHeight: %2; \n\
169+ data: [ \n\
178170 %3 \n\
179− ,\n\
180− %4 \n\
181− ] \n\
182− }\n';
183−
184−// %1 is used as first child of the column
185−// %2 is used as second child of the column
186−var kHeaderColumnCode = 'Column { \n\
187− anchors.verticalCenter: parent.verticalCenter; \n\
188− spacing: units.dp(2); \n\
189− width: parent.width - x;\n\
190− data: [ %1\n\
191− ,\n\
192− %2 \n\
193− ] \n\
171+ ]\n\
194172 }\n';
173+ var args = Array.prototype.slice.call(arguments);
174+ var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(',\n'));
175+ return code;
176+}
195177
196178// %1 is used as anchors of mascotShapeLoader
197179var kMascotShapeLoaderCode = 'Loader { \n\
@@ -213,7 +195,7 @@ var kMascotImageCode = 'Image { \n\
213195 objectName: "mascotImage"; \n\
214196 anchors { %1 } \n\
215197 readonly property int maxSize: Math.max(width, height) * 4; \n\
216− source: cardData && cardData["mascot"]; \n\
198+ source: cardData && cardData["mascot"] || ""; \n\
217199 width: units.gu(6); \n\
218200 height: units.gu(5.625); \n\
219201 sourceSize { width: maxSize; height: maxSize } \n\
@@ -224,7 +206,7 @@ var kMascotImageCode = 'Image { \n\
224206 }\n';
225207
226208// %1 is used as anchors of titleLabel
227−// %1 is used as color of titleLabel
209+// %2 is used as color of titleLabel
228210// %3 is used as extra condition for visible of titleLabel
229211var kTitleLabelCode = 'Label { \n\
230212 id: titleLabel; \n\
@@ -242,12 +224,39 @@ var kTitleLabelCode = 'Label { \n\
242224 horizontalAlignment: root.headerAlignment; \n\
243225 }\n';
244226
227+// %1 is used as extra anchors of emblemIcon
228+// %2 is used as color of emblemIcon
229+var kEmblemIconCode = 'Icon { \n\
230+ id: emblemIcon; \n\
231+ objectName: "emblemIcon"; \n\
232+ anchors { \n\
233+ bottom: titleLabel.baseline; \n\
234+ right: parent.right; \n\
235+ %1
236+ } \n\
237+ source: cardData && cardData["emblem"] || ""; \n\
238+ color: %2; \n\
239+ width: height; \n\
240+ height: source != "" ? titleLabel.font.pixelSize : 0; \n\
241+ }\n';
242+
243+// %1 is used as anchors of touchdown effect
244+var kTouchdownCode = 'UbuntuShape { \n\
245+ id: touchdown; \n\
246+ objectName: "touchdown"; \n\
247+ anchors { %1 } \n\
248+ visible: root.pressed; \n\
249+ radius: "medium"; \n\
250+ borderSource: "radius_pressed.sci" \n\
251+ }\n';
252+
245253// %1 is used as anchors of subtitleLabel
246254// %2 is used as color of subtitleLabel
247255var kSubtitleLabelCode = 'Label { \n\
248256 id: subtitleLabel; \n\
249257 objectName: "subtitleLabel"; \n\
250258 anchors { %1 } \n\
259+ anchors.topMargin: units.dp(2); \n\
251260 elide: Text.ElideRight; \n\
252261 fontSize: "small"; \n\
253262 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
@@ -258,6 +267,16 @@ var kSubtitleLabelCode = 'Label { \n\
258267 horizontalAlignment: root.headerAlignment; \n\
259268 }\n';
260269
270+// %1 is used as anchors of attributesRow
271+// %2 is used as color of attributesRow
272+var kAttributesRowCode = 'CardAttributes { \n\
273+ id: attributesRow; \n\
274+ objectName: "attributesRow"; \n\
275+ anchors { %1 } \n\
276+ color: %2; \n\
277+ model: cardData && cardData["attributes"]; \n\
278+ }\n';
279+
261280// %1 is used as top anchor of summary
262281// %2 is used as topMargin anchor of summary
263282// %3 is used as color of summary
@@ -305,9 +324,11 @@ function cardString(template, components) {
305324 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
306325 var hasTitle = components["title"] || false;
307326 var hasMascot = components["mascot"] || false;
327+ var hasEmblem = components["emblem"] && !(hasMascot && template["card-size"] === "small") || false;
308328 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
309329 var hasSubtitle = hasTitle && components["subtitle"] || false;
310330 var hasHeaderRow = hasMascot && hasTitle;
331+ var hasAttributes = hasTitle && components["attributes"]["field"] || false;
311332
312333 if (hasBackground) {
313334 code += kBackgroundLoaderCode;
@@ -318,9 +339,9 @@ function cardString(template, components) {
318339 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
319340
320341 var widthCode, heightCode;
321− var anchors;
342+ var artAnchors;
322343 if (isHorizontal) {
323− anchors = 'left: parent.left';
344+ artAnchors = 'left: parent.left';
324345 if (hasMascot || hasTitle) {
325346 widthCode = 'height * artShape.aspect'
326347 heightCode = 'headerHeight + 2 * units.gu(1)';
@@ -331,12 +352,12 @@ function cardString(template, components) {
331352 heightCode = 'units.gu(7.625)';
332353 }
333354 } else {
334− anchors = 'horizontalCenter: parent.horizontalCenter;';
355+ artAnchors = 'horizontalCenter: parent.horizontalCenter;';
335356 widthCode = 'root.width'
336357 heightCode = 'width / artShape.aspect';
337358 }
338359
339− code += kArtShapeHolderCode.arg(anchors).arg(widthCode).arg(heightCode);
360+ code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode);
340361 } else {
341362 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
342363 }
@@ -373,10 +394,20 @@ function cardString(template, components) {
373394 headerLeftAnchor = 'left: parent.left;\n';
374395 }
375396
397+ var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary;
398+
376399 if (hasHeaderRow) {
377400 code += 'readonly property int headerHeight: row.height;\n'
378401 } else if (hasMascot) {
379402 code += 'readonly property int headerHeight: mascotImage.height;\n'
403+ } else if (hasAttributes) {
404+ if (hasTitle && hasSubtitle) {
405+ code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n'
406+ } else if (hasTitle) {
407+ code += 'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n'
408+ } else {
409+ code += 'readonly property int headerHeight: attributesRow.height;\n'
410+ }
380411 } else if (hasSubtitle) {
381412 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
382413 } else if (hasTitle) {
@@ -385,149 +416,242 @@ function cardString(template, components) {
385416 code += 'readonly property int headerHeight: 0;\n'
386417 }
387418
388− var mascotShapeCode = "";
389− var mascotCode = "";
419+ var mascotShapeCode = '';
420+ var mascotCode = '';
390421 if (hasMascot) {
391422 var useMascotShape = !hasBackground && !headerAsOverlay;
392− var anchors = "";
423+ var mascotAnchors = '';
393424 if (!hasHeaderRow) {
394− anchors += headerLeftAnchor;
395− anchors += headerVerticalAnchors;
425+ mascotAnchors += headerLeftAnchor;
426+ mascotAnchors += headerVerticalAnchors;
396427 if (!headerLeftAnchorHasMargin) {
397− anchors += 'leftMargin: units.gu(1);\n'
428+ mascotAnchors += 'leftMargin: units.gu(1);\n'
398429 }
399430 } else {
400− anchors = "verticalCenter: parent.verticalCenter;"
431+ mascotAnchors = 'verticalCenter: parent.verticalCenter;'
401432 }
402433
403434 if (useMascotShape) {
404− mascotShapeCode = kMascotShapeLoaderCode.arg(anchors);
435+ mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
405436 }
406437
407438 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
408− mascotCode = kMascotImageCode.arg(anchors).arg(mascotImageVisible);
439+ mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible);
409440 }
410441
411− var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : (root.scopeStyle ? root.scopeStyle.foreground : "grey")';
442+ var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : "grey")';
412443
413− var titleSubtitleCode = "";
444+ var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
445+ var titleSubtitleCode = '';
414446 if (hasTitle) {
415− var color;
447+ var titleColor;
416448 if (headerAsOverlay) {
417− color = '"white"';
449+ titleColor = 'overlayLoader.item.luminance < (root.scopeStyle ? root.scopeStyle.threshold : 0.7) ? (root.scopeStyle ? root.scopeStyle.light : "white") : (root.scopeStyle ? root.scopeStyle.dark : "grey")';
418450 } else if (hasSummary) {
419− color = 'summary.color';
451+ titleColor = 'summary.color';
420452 } else if (hasBackground) {
421− color = summaryColorWithBackground;
453+ titleColor = summaryColorWithBackground;
422454 } else {
423− color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
455+ titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
424456 }
425457
426458 var titleAnchors;
427459 var subtitleAnchors;
428− if (hasMascot && hasSubtitle) {
429− // Using row + column
430− titleAnchors = 'left: parent.left; right: parent.right';
431− subtitleAnchors = titleAnchors;
460+ var attributesAnchors;
461+ var titleContainerAnchors;
462+ var titleRightAnchor;
463+
464+ var extraRightAnchor = '';
465+ var extraLeftAnchor = '';
466+ if (!touchdownOnArtShape) {
467+ extraRightAnchor = 'rightMargin: units.gu(1); \n';
468+ extraLeftAnchor = 'leftMargin: units.gu(1); \n';
469+ }
470+
471+ if (hasMascot) {
472+ titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
473+ } else {
474+ titleContainerAnchors = 'right: parent.right; ';
475+ titleContainerAnchors += headerLeftAnchor;
476+ titleContainerAnchors += headerVerticalAnchors;
477+ if (!headerLeftAnchorHasMargin) {
478+ titleContainerAnchors += extraLeftAnchor;
479+ }
480+ }
481+ if (hasEmblem) {
482+ titleRightAnchor = 'right: emblemIcon.left; \n\
483+ rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
484+ } else {
485+ titleRightAnchor = 'right: parent.right; \n'
486+ titleRightAnchor += extraRightAnchor;
487+ }
488+
489+ if (hasTitleContainer) {
490+ // Using headerTitleContainer
491+ titleAnchors = titleRightAnchor;
492+ titleAnchors += 'left: parent.left; \n\
493+ top: parent.top;';
494+ subtitleAnchors = 'right: parent.right; \n\
495+ left: parent.left; \n';
496+ subtitleAnchors += extraRightAnchor;
497+ if (hasSubtitle) {
498+ attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
499+ subtitleAnchors += 'top: titleLabel.bottom;\n';
500+ } else {
501+ attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
502+ }
432503 } else if (hasMascot) {
433− // Using row + label
434− titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
504+ // Using row + titleContainer
505+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
435506 } else {
436507 if (headerAsOverlay) {
437508 // Using anchors to the overlay
438− titleAnchors = 'left: parent.left; \n\
439− leftMargin: units.gu(1); \n\
440− right: parent.right; \n\
441− top: overlayLoader.top; \n\
442− topMargin: units.gu(1);\n';
509+ titleAnchors = titleRightAnchor;
510+ titleAnchors += 'left: parent.left; \n\
511+ leftMargin: units.gu(1); \n\
512+ top: overlayLoader.top; \n\
513+ topMargin: units.gu(1);\n';
443514 } else {
444515 // Using anchors to the mascot/parent
445− titleAnchors = "right: parent.right;";
516+ titleAnchors = titleRightAnchor;
446517 titleAnchors += headerLeftAnchor;
447518 titleAnchors += headerVerticalAnchors;
448519 if (!headerLeftAnchorHasMargin) {
449− titleAnchors += 'leftMargin: units.gu(1);\n'
520+ titleAnchors += extraLeftAnchor;
450521 }
451522 }
452523 subtitleAnchors = 'left: titleLabel.left; \n\
453− leftMargin: titleLabel.leftMargin; \n\
454− right: titleLabel.right; \n\
455− top: titleLabel.bottom; \n\
456− topMargin: units.dp(2);\n';
524+ leftMargin: titleLabel.leftMargin; \n';
525+ subtitleAnchors += extraRightAnchor;
526+ if (hasEmblem) {
527+ // using container
528+ subtitleAnchors += 'right: parent.right; \n';
529+ } else {
530+ subtitleAnchors += 'right: titleLabel.right; \n';
531+ }
532+
533+ if (hasSubtitle) {
534+ attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
535+ subtitleAnchors += 'top: titleLabel.bottom;\n';
536+ } else {
537+ attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
538+ }
457539 }
458540
541+ // code for different elements
459542 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
460− var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
461− var subtitleCode = "";
543+ var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra);
544+ var subtitleCode;
545+ var attributesCode;
546+
547+ // code for the title container
548+ var containerCode = [];
549+ var containerHeight = 'titleLabel.height';
550+ containerCode.push(titleCode);
462551 if (hasSubtitle) {
463− subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
552+ subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
553+ containerCode.push(subtitleCode);
554+ containerHeight += ' + subtitleLabel.height';
555+ }
556+ if (hasEmblem) {
557+ containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
558+ }
559+ if (hasAttributes) {
560+ attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
561+ containerCode.push(attributesCode);
562+ containerHeight += ' + attributesRow.height';
464563 }
465564
466− if (hasMascot && hasSubtitle) {
467− // If using row + column wrap the code in the column
468− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
565+ if (hasTitleContainer) {
566+ // use container
567+ titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
469568 } else {
470− titleSubtitleCode = titleCode + subtitleCode;
569+ // no container
570+ titleSubtitleCode = titleCode;
571+ if (hasSubtitle) {
572+ titleSubtitleCode += subtitleCode;
573+ }
574+ if (hasAttributes) {
575+ titleSubtitleCode += attributesCode;
576+ }
471577 }
472578 }
473579
474580 if (hasHeaderRow) {
475− if (mascotShapeCode != "") {
476− code += kHeaderRow3Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotShapeCode).arg(mascotCode).arg(titleSubtitleCode);
477− } else {
478− code += kHeaderRow2Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotCode).arg(titleSubtitleCode);
581+ var rowCode = [mascotCode, titleSubtitleCode];
582+ if (mascotShapeCode != '') {
583+ rowCode.unshift(mascotShapeCode);
479584 }
585+ code += kHeaderRowCodeGenerator(headerVerticalAnchors + headerLeftAnchor, rowCode)
480586 } else {
481587 code += mascotShapeCode + mascotCode + titleSubtitleCode;
482588 }
483589
484590 if (hasSummary) {
485591 var summaryTopAnchor;
486− if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
487− else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
488− else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
489− else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
490− else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
491− else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
492− else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
493− else summaryTopAnchor = "parent.top";
494−
495− var color;
592+ if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
593+ else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
594+ else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
595+ else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
596+ else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
597+ else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
598+ else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
599+ else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
600+ else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
601+ else summaryTopAnchor = 'parent.top';
602+
603+ var summaryColor;
496604 if (hasBackground) {
497− color = summaryColorWithBackground;
605+ summaryColor = summaryColorWithBackground;
498606 } else {
499− color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
607+ summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
500608 }
501609
502− var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
610+ var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
503611
504− code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
612+ code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
505613 }
506614
615+ var touchdownAnchors;
616+ if (hasBackground) {
617+ touchdownAnchors = 'fill: backgroundLoader';
618+ } else if (touchdownOnArtShape) {
619+ touchdownAnchors = 'fill: artShapeHolder';
620+ } else {
621+ touchdownAnchors = 'fill: root'
622+ }
623+ code += kTouchdownCode.arg(touchdownAnchors);
624+
625+ var implicitHeight = 'implicitHeight: ';
507626 if (hasSummary) {
508− code += 'implicitHeight: summary.y + summary.height + (summary.text ? units.gu(1) : 0);\n';
627+ implicitHeight += 'summary.y + summary.height + (summary.text ? units.gu(1) : 0);\n';
509628 } else if (hasHeaderRow) {
510− code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
629+ implicitHeight += 'row.y + row.height + units.gu(1);\n';
511630 } else if (hasMascot) {
512− code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
631+ implicitHeight += 'mascotImage.y + mascotImage.height;\n';
632+ } else if (hasTitleContainer) {
633+ implicitHeight += 'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
634+ } else if (hasAttributes) {
635+ implicitHeight += 'attributesRow.y + attributesRow.height + units.gu(1);\n';
513636 } else if (hasSubtitle) {
514− code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
637+ implicitHeight += 'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
515638 } else if (hasTitle) {
516− code += 'implicitHeight: titleLabel.y + titleLabel.height + units.gu(1);\n';
639+ implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
517640 } else if (hasArt) {
518− code += 'implicitHeight: artShapeHolder.height;\n';
641+ implicitHeight += 'artShapeHolder.height;\n';
519642 }
520643 // Close the AbstractButton
521− code += '}\n';
644+ code += implicitHeight + '}\n';
522645
523646 return code;
524647}
525648
526649function createCardComponent(parent, template, components) {
527650 var imports = 'import QtQuick 2.2; \n\
528− import Ubuntu.Components 0.1; \n\
529− import Ubuntu.Thumbnailer 0.1;\n';
651+ import Ubuntu.Components 1.1; \n\
652+ import Dash 0.1;\n';
530653 var card = cardString(template, components);
531654 var code = imports + 'Component {\n' + card + '}\n';
655+
532656 return Qt.createQmlObject(code, parent, "createCardComponent");
533657}