@@ -108,6 +108,7 @@ var kOverlayLoaderCode = 'Loader { \n\
108 sourceComponent: ShaderEffect { \n\
108 sourceComponent: ShaderEffect { \n\
109 id: overlay; \n\
109 id: overlay; \n\
110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
110 height: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
111+ property real luminance: 0.2126 * overlayColor.r + 0.7152 * overlayColor.g + 0.0722 * overlayColor.b; \n\
111 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
112 property color overlayColor: cardData && cardData["overlayColor"] || "#99000000"; \n\
112 property var source: ShaderEffectSource { \n\
113 property var source: ShaderEffectSource { \n\
113 id: shaderSource; \n\
114 id: shaderSource; \n\
@@ -137,10 +138,9 @@ var kOverlayLoaderCode = 'Loader { \n\
140−// %1 is used as anchors of row
141+// multiple row version of HeaderRowCode
141−// %2 is used as first child of the row
142+function kHeaderRowCodeGenerator() {
142−// %3 is used as second child of the row
143+var kHeaderRowCodeTemplate = 'Row { \n\
143−var kHeaderRow2Code = 'Row { \n\
144 id: row; \n\
144 id: row; \n\
145 objectName: "outerRow"; \n\
145 objectName: "outerRow"; \n\
146 property real margins: units.gu(1); \n\
146 property real margins: units.gu(1); \n\
@@ -148,58 +148,30 @@ var kHeaderRow2Code = 'Row { \n\
148 height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
148 height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
149 anchors { %1 } \n\
149 anchors { %1 } \n\
150 anchors.right: parent.right; \n\
150 anchors.right: parent.right; \n\
151− anchors.margins: margins;\n\
151+ anchors.margins: margins; \n\
152+ anchors.rightMargin: 0; \n\
152− data: [ %2\n\
153+ data: [ \n\
157+ var args = Array.prototype.slice.call(arguments);
158+ var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(args.join(',\n'));
158−// %1 is used as anchors of row
162+// multiple item version of kHeaderContainerCode
159−// %2 is used as first child of the row
163+function kHeaderContainerCodeGenerator() {
160−// %3 is used as second child of the row
164+ var headerContainerCodeTemplate = 'Item { \n\
161−// %4 is used as third child of the row
165+ id: headerTitleContainer; \n\
162−var kHeaderRow3Code = 'Row { \n\
166+ anchors { %1 } \n\
163− id: row; \n\
167+ width: parent.width - x; \n\
164− objectName: "outerRow"; \n\
168+ implicitHeight: %2; \n\
165− property real margins: units.gu(1); \n\
166− spacing: margins; \n\
167− height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
169− anchors.right: parent.right; \n\
170− anchors.margins: margins;\n\
171− data: [ %2\n\
169+ data: [ \n\
179−// %1 is used as first child of the column
180−// %2 is used as second child of the column
181−var kHeaderColumnCode = 'Column { \n\
182− anchors.verticalCenter: parent.verticalCenter; \n\
183− spacing: units.dp(2); \n\
184− width: parent.width - x;\n\
191−// multiple column version of kHeaderColumnCode.
192−function kHeaderColumnCodeGenerator() {
193− var headerColumnCodeTemplate = 'Column { \n\
194− anchors.verticalCenter: parent.verticalCenter; \n\
195− spacing: units.dp(2); \n\
196− width: parent.width - x;\n\
201 var args = Array.prototype.slice.call(arguments);
173 var args = Array.prototype.slice.call(arguments);
202− var code = headerColumnCodeTemplate.arg(args.join(',\n'));
174+ var code = headerContainerCodeTemplate.arg(args.shift()).arg(args.shift()).arg(args.join(',\n'));
203 return code;
175 return code;
@@ -223,7 +195,7 @@ var kMascotImageCode = 'Image { \n\
223 objectName: "mascotImage"; \n\
195 objectName: "mascotImage"; \n\
224 anchors { %1 } \n\
196 anchors { %1 } \n\
225 readonly property int maxSize: Math.max(width, height) * 4; \n\
197 readonly property int maxSize: Math.max(width, height) * 4; \n\
226− source: cardData && cardData["mascot"]; \n\
198+ source: cardData && cardData["mascot"] || ""; \n\
227 width: units.gu(6); \n\
199 width: units.gu(6); \n\
228 height: units.gu(5.625); \n\
200 height: units.gu(5.625); \n\
229 sourceSize { width: maxSize; height: maxSize } \n\
201 sourceSize { width: maxSize; height: maxSize } \n\
@@ -252,6 +224,22 @@ var kTitleLabelCode = 'Label { \n\
252 horizontalAlignment: root.headerAlignment; \n\
224 horizontalAlignment: root.headerAlignment; \n\
227+// %1 is used as extra anchors of emblemIcon
228+// %2 is used as color of emblemIcon
229+var kEmblemIconCode = 'Icon { \n\
231+ objectName: "emblemIcon"; \n\
233+ bottom: titleLabel.baseline; \n\
234+ right: parent.right; \n\
237+ source: cardData && cardData["emblem"] || ""; \n\
240+ height: source != "" ? titleLabel.font.pixelSize : 0; \n\
255// %1 is used as anchors of touchdown effect
243// %1 is used as anchors of touchdown effect
256var kTouchdownCode = 'UbuntuShape { \n\
244var kTouchdownCode = 'UbuntuShape { \n\
257 id: touchdown; \n\
245 id: touchdown; \n\
@@ -268,6 +256,7 @@ var kSubtitleLabelCode = 'Label { \n\
268 id: subtitleLabel; \n\
256 id: subtitleLabel; \n\
269 objectName: "subtitleLabel"; \n\
257 objectName: "subtitleLabel"; \n\
270 anchors { %1 } \n\
258 anchors { %1 } \n\
259+ anchors.topMargin: units.dp(2); \n\
271 elide: Text.ElideRight; \n\
260 elide: Text.ElideRight; \n\
272 fontSize: "small"; \n\
261 fontSize: "small"; \n\
273 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
262 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
@@ -279,12 +268,13 @@ var kSubtitleLabelCode = 'Label { \n\
281// %1 is used as anchors of attributesRow
270// %1 is used as anchors of attributesRow
271+// %2 is used as color of attributesRow
282var kAttributesRowCode = 'CardAttributes { \n\
272var kAttributesRowCode = 'CardAttributes { \n\
283 id: attributesRow; \n\
273 id: attributesRow; \n\
284 objectName: "attributesRow"; \n\
274 objectName: "attributesRow"; \n\
285 anchors { %1 } \n\
275 anchors { %1 } \n\
286 color: %2; \n\
276 color: %2; \n\
287− model: cardData["attributes"]; \n\
277+ model: cardData && cardData["attributes"]; \n\
290// %1 is used as top anchor of summary
280// %1 is used as top anchor of summary
@@ -334,10 +324,11 @@ function cardString(template, components) {
334 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
324 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
335 var hasTitle = components["title"] || false;
325 var hasTitle = components["title"] || false;
336 var hasMascot = components["mascot"] || false;
326 var hasMascot = components["mascot"] || false;
327+ var hasEmblem = components["emblem"] && !(hasMascot && template["card-size"] === "small") || false;
337 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
328 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
338 var hasSubtitle = hasTitle && components["subtitle"] || false;
329 var hasSubtitle = hasTitle && components["subtitle"] || false;
339 var hasHeaderRow = hasMascot && hasTitle;
330 var hasHeaderRow = hasMascot && hasTitle;
340− var hasAttributes = hasTitle && components["attributes"] || false;
331+ var hasAttributes = hasTitle && components["attributes"]["field"] || false;
342 if (hasBackground) {
333 if (hasBackground) {
343 code += kBackgroundLoaderCode;
334 code += kBackgroundLoaderCode;
@@ -348,9 +339,9 @@ function cardString(template, components) {
348 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
339 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
350 var widthCode, heightCode;
341 var widthCode, heightCode;
351− var anchors;
342+ var artAnchors;
352 if (isHorizontal) {
343 if (isHorizontal) {
353− anchors = 'left: parent.left';
344+ artAnchors = 'left: parent.left';
354 if (hasMascot || hasTitle) {
345 if (hasMascot || hasTitle) {
355 widthCode = 'height * artShape.aspect'
346 widthCode = 'height * artShape.aspect'
356 heightCode = 'headerHeight + 2 * units.gu(1)';
347 heightCode = 'headerHeight + 2 * units.gu(1)';
@@ -361,12 +352,12 @@ function cardString(template, components) {
361 heightCode = 'units.gu(7.625)';
352 heightCode = 'units.gu(7.625)';
364− anchors = 'horizontalCenter: parent.horizontalCenter;';
355+ artAnchors = 'horizontalCenter: parent.horizontalCenter;';
365 widthCode = 'root.width'
356 widthCode = 'root.width'
366 heightCode = 'width / artShape.aspect';
357 heightCode = 'width / artShape.aspect';
369− code += kArtShapeHolderCode.arg(anchors).arg(widthCode).arg(heightCode);
360+ code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode);
371 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
362 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
@@ -403,6 +394,8 @@ function cardString(template, components) {
403 headerLeftAnchor = 'left: parent.left;\n';
394 headerLeftAnchor = 'left: parent.left;\n';
397+ var touchdownOnArtShape = !hasBackground && hasArt && !hasMascot && !hasSummary;
406 if (hasHeaderRow) {
399 if (hasHeaderRow) {
407 code += 'readonly property int headerHeight: row.height;\n'
400 code += 'readonly property int headerHeight: row.height;\n'
408 } else if (hasMascot) {
401 } else if (hasMascot) {
@@ -423,191 +416,239 @@ function cardString(template, components) {
423 code += 'readonly property int headerHeight: 0;\n'
416 code += 'readonly property int headerHeight: 0;\n'
426− var mascotShapeCode = "";
419+ var mascotShapeCode = '';
427− var mascotCode = "";
420+ var mascotCode = '';
428 if (hasMascot) {
421 if (hasMascot) {
429 var useMascotShape = !hasBackground && !headerAsOverlay;
422 var useMascotShape = !hasBackground && !headerAsOverlay;
430− var anchors = "";
423+ var mascotAnchors = '';
431 if (!hasHeaderRow) {
424 if (!hasHeaderRow) {
432− anchors += headerLeftAnchor;
425+ mascotAnchors += headerLeftAnchor;
433− anchors += headerVerticalAnchors;
426+ mascotAnchors += headerVerticalAnchors;
434 if (!headerLeftAnchorHasMargin) {
427 if (!headerLeftAnchorHasMargin) {
435− anchors += 'leftMargin: units.gu(1);\n'
428+ mascotAnchors += 'leftMargin: units.gu(1);\n'
438− anchors = "verticalCenter: parent.verticalCenter;"
431+ mascotAnchors = 'verticalCenter: parent.verticalCenter;'
441 if (useMascotShape) {
434 if (useMascotShape) {
442− mascotShapeCode = kMascotShapeLoaderCode.arg(anchors);
435+ mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
445 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
438 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
446− mascotCode = kMascotImageCode.arg(anchors).arg(mascotImageVisible);
439+ mascotCode = kMascotImageCode.arg(mascotAnchors).arg(mascotImageVisible);
449− 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")';
444+ var hasTitleContainer = hasTitle && (hasEmblem || (hasMascot && (hasSubtitle || hasAttributes)));
451− var titleSubtitleCode = "";
445+ var titleSubtitleCode = '';
452 if (hasTitle) {
446 if (hasTitle) {
453− var color;
447+ var titleColor;
454 if (headerAsOverlay) {
448 if (headerAsOverlay) {
455− 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")';
456 } else if (hasSummary) {
450 } else if (hasSummary) {
457− color = 'summary.color';
451+ titleColor = 'summary.color';
458 } else if (hasBackground) {
452 } else if (hasBackground) {
459− color = summaryColorWithBackground;
453+ titleColor = summaryColorWithBackground;
461− color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
455+ titleColor = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
464 var titleAnchors;
458 var titleAnchors;
465 var subtitleAnchors;
459 var subtitleAnchors;
466 var attributesAnchors;
460 var attributesAnchors;
461+ var titleContainerAnchors;
462+ var titleRightAnchor;
464+ var extraRightAnchor = '';
465+ var extraLeftAnchor = '';
466+ if (!touchdownOnArtShape) {
467+ extraRightAnchor = 'rightMargin: units.gu(1); \n';
468+ extraLeftAnchor = 'leftMargin: units.gu(1); \n';
467− if (hasMascot && (hasSubtitle || hasAttributes)) {
471+ if (hasMascot) {
468− // Using row + column
472+ titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
474+ titleContainerAnchors = 'right: parent.right; ';
475+ titleContainerAnchors += headerLeftAnchor;
476+ titleContainerAnchors += headerVerticalAnchors;
477+ if (!headerLeftAnchorHasMargin) {
478+ titleContainerAnchors += extraLeftAnchor;
482+ titleRightAnchor = 'right: emblemIcon.left; \n\
483+ rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0; \n';
485+ titleRightAnchor = 'right: parent.right; \n'
486+ titleRightAnchor += extraRightAnchor;
489+ if (hasTitleContainer) {
490+ // Using headerTitleContainer
491+ titleAnchors = titleRightAnchor;
469− titleAnchors = 'left: parent.left; right: parent.right';
492+ titleAnchors += 'left: parent.left; \n\
494+ subtitleAnchors = 'right: parent.right; \n\
495+ left: parent.left; \n';
470− subtitleAnchors = titleAnchors;
496+ subtitleAnchors += extraRightAnchor;
498+ attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
499+ subtitleAnchors += 'top: titleLabel.bottom;\n';
471− attributesAnchors = subtitleAnchors;
501+ attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
472 } else if (hasMascot) {
503 } else if (hasMascot) {
473− // Using row + label
504+ // Using row + titleContainer
474− titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
505+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
476 if (headerAsOverlay) {
507 if (headerAsOverlay) {
477 // Using anchors to the overlay
508 // Using anchors to the overlay
509+ titleAnchors = titleRightAnchor;
478− titleAnchors = 'left: parent.left; \n\
510+ titleAnchors += 'left: parent.left; \n\
479− leftMargin: units.gu(1); \n\
511+ leftMargin: units.gu(1); \n\
480− right: parent.right; \n\
481− rightMargin: units.gu(1); \n\
482− top: overlayLoader.top; \n\
512+ top: overlayLoader.top; \n\
483− topMargin: units.gu(1);\n';
513+ topMargin: units.gu(1);\n';
485 // Using anchors to the mascot/parent
515 // Using anchors to the mascot/parent
486− titleAnchors = "right: parent.right;\n";
516+ titleAnchors = titleRightAnchor;
487− titleAnchors += "rightMargin: units.gu(1);\n";
488 titleAnchors += headerLeftAnchor;
517 titleAnchors += headerLeftAnchor;
489 titleAnchors += headerVerticalAnchors;
518 titleAnchors += headerVerticalAnchors;
490 if (!headerLeftAnchorHasMargin) {
519 if (!headerLeftAnchorHasMargin) {
491− titleAnchors += 'leftMargin: units.gu(1);\n'
520+ titleAnchors += extraLeftAnchor;
494 subtitleAnchors = 'left: titleLabel.left; \n\
523 subtitleAnchors = 'left: titleLabel.left; \n\
495− leftMargin: titleLabel.leftMargin; \n\
524+ leftMargin: titleLabel.leftMargin; \n';
496− right: titleLabel.right; \n\
525+ subtitleAnchors += extraRightAnchor;
497− rightMargin: titleLabel.rightMargin; \n\
526+ if (hasEmblem) {
498− top: titleLabel.bottom; \n\
527+ // using container
499− topMargin: units.dp(2);\n';
528+ subtitleAnchors += 'right: parent.right; \n';
530+ subtitleAnchors += 'right: titleLabel.right; \n';
500 if (hasSubtitle) {
533 if (hasSubtitle) {
501− attributesAnchors = 'left: subtitleLabel.left; \n\
534+ attributesAnchors = subtitleAnchors + 'top: subtitleLabel.bottom;\n';
502− leftMargin: subtitleLabel.leftMargin; \n\
535+ subtitleAnchors += 'top: titleLabel.bottom;\n';
503− right: subtitleLabel.right; \n\
504− rightMargin: subtitleLabel.rightMargin; \n\
505− top: subtitleLabel.bottom; \n\
506− topMargin: units.dp(2);\n';
508− attributesAnchors = subtitleAnchors;
537+ attributesAnchors = subtitleAnchors + 'top: titleLabel.bottom;\n';
541+ // code for different elements
512 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
542 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
513− var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
543+ var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra);
514− var subtitleCode = "";
544+ var subtitleCode;
547+ // code for the title container
548+ var containerCode = [];
549+ var containerHeight = 'titleLabel.height';
550+ containerCode.push(titleCode);
515 if (hasSubtitle) {
551 if (hasSubtitle) {
516− subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
552+ subtitleCode = kSubtitleLabelCode.arg(subtitleAnchors).arg(titleColor);
553+ containerCode.push(subtitleCode);
554+ containerHeight += ' + subtitleLabel.height';
557+ containerCode.push(kEmblemIconCode.arg(extraRightAnchor).arg(titleColor));
559+ if (hasAttributes) {
560+ attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(titleColor);
561+ containerCode.push(attributesCode);
562+ containerHeight += ' + attributesRow.height';
519− if (hasMascot && (hasSubtitle || hasAttributes)) {
565+ if (hasTitleContainer) {
520− // If using row + column wrap the code in the column
566+ // use container
521− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
567+ titleSubtitleCode = kHeaderContainerCodeGenerator(titleContainerAnchors, containerHeight, containerCode);
522− if (hasSubtitle && hasAttributes) {
523− var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
524− titleSubtitleCode = kHeaderColumnCodeGenerator(titleCode, subtitleCode, attributesCode);
525− } else if (hasSubtitle) {
526− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
527− } else if (hasAttributes) {
528− var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
529− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(attributesCode);
532 titleSubtitleCode = titleCode;
570 titleSubtitleCode = titleCode;
533 if (hasSubtitle) {
571 if (hasSubtitle) {
534− titleSubtitleCode = titleSubtitleCode + subtitleCode;
572+ titleSubtitleCode += subtitleCode;
536 if (hasAttributes) {
574 if (hasAttributes) {
537− var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
538− titleSubtitleCode = titleSubtitleCode + attributesCode;
575+ titleSubtitleCode += attributesCode;
543 if (hasHeaderRow) {
580 if (hasHeaderRow) {
581+ var rowCode = [mascotCode, titleSubtitleCode];
544− if (mascotShapeCode != "") {
582+ if (mascotShapeCode != '') {
545− code += kHeaderRow3Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotShapeCode).arg(mascotCode).arg(titleSubtitleCode);
583+ rowCode.unshift(mascotShapeCode);
547− code += kHeaderRow2Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotCode).arg(titleSubtitleCode);
585+ code += kHeaderRowCodeGenerator(headerVerticalAnchors + headerLeftAnchor, rowCode)
550 code += mascotShapeCode + mascotCode + titleSubtitleCode;
587 code += mascotShapeCode + mascotCode + titleSubtitleCode;
553 if (hasSummary) {
590 if (hasSummary) {
554 var summaryTopAnchor;
591 var summaryTopAnchor;
555− if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
592+ if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
556− else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
593+ else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
557− else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
594+ else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
595+ else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
558− else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
596+ else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
559− else if (hasAttributes) summaryTopAnchor = "attributesRow.bottom";
597+ else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
560− else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
598+ else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
561− else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
599+ else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
562− else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
600+ else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
563− else summaryTopAnchor = "parent.top";
601+ else summaryTopAnchor = 'parent.top';
565− var color;
603+ var summaryColor;
566 if (hasBackground) {
604 if (hasBackground) {
567− color = summaryColorWithBackground;
605+ summaryColor = summaryColorWithBackground;
569− color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
607+ summaryColor = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
572 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
610 var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
574− code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
612+ code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
577 var touchdownAnchors;
615 var touchdownAnchors;
578 if (hasBackground) {
616 if (hasBackground) {
579 touchdownAnchors = 'fill: backgroundLoader';
617 touchdownAnchors = 'fill: backgroundLoader';
580− } else if (hasArt && !hasMascot && !hasSummary) {
618+ } else if (touchdownOnArtShape) {
581 touchdownAnchors = 'fill: artShapeHolder';
619 touchdownAnchors = 'fill: artShapeHolder';
583 touchdownAnchors = 'fill: root'
621 touchdownAnchors = 'fill: root'
585 code += kTouchdownCode.arg(touchdownAnchors);
623 code += kTouchdownCode.arg(touchdownAnchors);
625+ var implicitHeight = 'implicitHeight: ';
587 if (hasSummary) {
626 if (hasSummary) {
588− 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';
589 } else if (hasHeaderRow) {
628 } else if (hasHeaderRow) {
590− code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
629+ implicitHeight += 'row.y + row.height + units.gu(1);\n';
591 } else if (hasMascot) {
630 } else if (hasMascot) {
592− 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';
593 } else if (hasAttributes) {
634 } else if (hasAttributes) {
594− code += 'implicitHeight: attributesRow.y + attributesRow.height + units.gu(1);\n';
635+ implicitHeight += 'attributesRow.y + attributesRow.height + units.gu(1);\n';
595 } else if (hasSubtitle) {
636 } else if (hasSubtitle) {
596− code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
637+ implicitHeight += 'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
597 } else if (hasTitle) {
638 } else if (hasTitle) {
598− code += 'implicitHeight: titleLabel.y + titleLabel.height + units.gu(1);\n';
639+ implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
599 } else if (hasArt) {
640 } else if (hasArt) {
600− code += 'implicitHeight: artShapeHolder.height;\n';
641+ implicitHeight += 'artShapeHolder.height;\n';
602 // Close the AbstractButton
643 // Close the AbstractButton
603− code += '}\n';
644+ code += implicitHeight + '}\n';
605 return code;
646 return code;
608function createCardComponent(parent, template, components) {
649function createCardComponent(parent, template, components) {
609 var imports = 'import QtQuick 2.2; \n\
650 var imports = 'import QtQuick 2.2; \n\
610− import Ubuntu.Components 0.1; \n\
651+ import Ubuntu.Components 1.1; \n\
611 import Dash 0.1;\n';
652 import Dash 0.1;\n';
612 var card = cardString(template, components);
653 var card = cardString(template, components);
613 var code = imports + 'Component {\n' + card + '}\n';
654 var code = imports + 'Component {\n' + card + '}\n';