@@ -181,15 +181,35 @@ var kHeaderRow3Code = 'Row { \n\
181181 ] \n\
182182 }\n';
183183
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\
184+// %1 is used as anchors
185+// %2 is used as height of the container
186+// %3 is used as first child of the container
187+// %4 is used as second child of the container
188+var kHeader2ContainerCode = 'Item { \n\
189+ id: headerTitleContainer; \n\
190+ anchors { %1 } \n\
191+ width: parent.width - x; \n\
192+ implicitHeight: %2; \n\
193+ data: [ %3\n\
194+ ,\n\
195+ %4 \n\
196+ ] \n\
197+ }\n';
198+
199+// %1 is used as anchors
200+// %2 is used as first child of the container
201+// %3 is used as second child of the container
202+// %4 is used as third child of the container
203+var kHeader3ContainerCode = 'Item { \n\
204+ id: headerTitleContainer; \n\
205+ anchors { %1 } \n\
206+ width: parent.width - x; \n\
207+ implicitHeight: titleLabel.height + subtitleLabel.height; \n\
208+ data: [ %2\n\
209+ ,\n\
210+ %3 \n\
191211 ,\n\
192− %2 \n\
212+ %4 \n\
193213 ] \n\
194214 }\n';
195215
@@ -242,12 +262,25 @@ var kTitleLabelCode = 'Label { \n\
242262 horizontalAlignment: root.headerAlignment; \n\
243263 }\n';
244264
265+var kEmblemImageCode = 'Image { \n\
266+ id: emblemImage; \n\
267+ objectName: "emblemImage"; \n\
268+ anchors { \n\
269+ bottom: titleLabel.baseline; \n\
270+ right: parent.right; \n\ } \n\
271+ source: cardData && cardData["emblem"]; \n\
272+ width: height; \n\
273+ height: titleLabel.font.pixelSize; \n\
274+ fillMode: Image.PreserveAspectFit; \n\
275+ }\n';
276+
245277// %1 is used as anchors of subtitleLabel
246278// %2 is used as color of subtitleLabel
247279var kSubtitleLabelCode = 'Label { \n\
248280 id: subtitleLabel; \n\
249281 objectName: "subtitleLabel"; \n\
250282 anchors { %1 } \n\
283+ anchors.topMargin: units.dp(2); \n\
251284 elide: Text.ElideRight; \n\
252285 fontSize: "small"; \n\
253286 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \n\
@@ -305,6 +338,7 @@ function cardString(template, components) {
305338 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
306339 var hasTitle = components["title"] || false;
307340 var hasMascot = components["mascot"] || false;
341+ var hasEmblem = components["emblem"] && !(hasMascot && template["card-size"] === "small") || false;
308342 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
309343 var hasSubtitle = hasTitle && components["subtitle"] || false;
310344 var hasHeaderRow = hasMascot && hasTitle;
@@ -425,24 +459,44 @@ function cardString(template, components) {
425459
426460 var titleAnchors;
427461 var subtitleAnchors;
428− if (hasMascot && hasSubtitle) {
429− // Using row + column
430− titleAnchors = 'left: parent.left; right: parent.right';
431− subtitleAnchors = titleAnchors;
462+ var titleRightAnchor;
463+ var titleContainerAnchors;
464+
465+ if (hasMascot) {
466+ titleContainerAnchors = 'verticalCenter: parent.verticalCenter; ';
467+ } else {
468+ titleContainerAnchors = 'right: parent.right; ';
469+ titleContainerAnchors += headerLeftAnchor;
470+ titleContainerAnchors += headerVerticalAnchors;
471+ }
472+ if (hasEmblem) {
473+ titleRightAnchor = 'right: emblemImage.left;\n';
474+ } else {
475+ titleRightAnchor = 'right: parent.right;\n';
476+ }
477+
478+ if (hasEmblem || (hasMascot && hasSubtitle)) {
479+ // Using titleContainer (and maybe row)
480+ titleAnchors = titleRightAnchor;
481+ titleAnchors += 'left: parent.left;\n\
482+ top: parent.top;';
483+ subtitleAnchors = 'right: parent.right;\n\
484+ left: parent.left;\n\
485+ top: titleLabel.bottom;\n';
432486 } else if (hasMascot) {
433− // Using row + label
434− titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
487+ // Using row + titleContainer
488+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n';
435489 } else {
436490 if (headerAsOverlay) {
437491 // 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';
492+ titleAnchors = titleRightAnchor;
493+ titleAnchors += 'left: parent.left; \n\
494+ leftMargin: units.gu(1); \n\
495+ top: overlayLoader.top; \n\
496+ topMargin: units.gu(1);\n';
443497 } else {
444498 // Using anchors to the mascot/parent
445− titleAnchors = "right: parent.right;";
499+ titleAnchors = titleRightAnchor;
446500 titleAnchors += headerLeftAnchor;
447501 titleAnchors += headerVerticalAnchors;
448502 if (!headerLeftAnchorHasMargin) {
@@ -451,22 +505,34 @@ function cardString(template, components) {
451505 }
452506 subtitleAnchors = 'left: titleLabel.left; \n\
453507 leftMargin: titleLabel.leftMargin; \n\
454− right: titleLabel.right; \n\
455− top: titleLabel.bottom; \n\
456− topMargin: units.dp(2);\n';
508+ top: titleLabel.bottom;\n';
509+ if (hasEmblem) {
510+ // using container
511+ subtitleAnchors += 'right: parent.right; \n';
512+ } else {
513+ subtitleAnchors += 'right: titleLabel.right; \n';
514+ }
457515 }
458516
459517 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
460− var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
518+ var titleCode;
519+ titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
461520 var subtitleCode = "";
462521 if (hasSubtitle) {
463522 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
464523 }
465524
466− if (hasMascot && hasSubtitle) {
467− // If using row + column wrap the code in the column
468− titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
525+ if (hasEmblem && hasSubtitle) {
526+ // using container 3
527+ titleSubtitleCode = kHeader3ContainerCode.arg(titleContainerAnchors).arg(titleCode).arg(kEmblemImageCode).arg(kSubtitleLabelCode.arg(subtitleAnchors).arg(color));
528+ } else if (hasEmblem) {
529+ // container with emblem
530+ titleSubtitleCode = kHeader2ContainerCode.arg(titleContainerAnchors).arg('titleLabel.height').arg(titleCode).arg(kEmblemImageCode);
531+ } else if (hasMascot && hasSubtitle) {
532+ // container with subtitle
533+ titleSubtitleCode = kHeader2ContainerCode.arg(titleContainerAnchors).arg('titleLabel.height + subtitleLabel.height').arg(titleCode).arg(subtitleCode);
469534 } else {
535+ // no container
470536 titleSubtitleCode = titleCode + subtitleCode;
471537 }
472538 }
@@ -486,6 +552,7 @@ function cardString(template, components) {
486552 if (isHorizontal && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
487553 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
488554 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
555+ else if (hasEmblem || (hasMascot && hasSubtitle)) summaryTopAnchor = "headerTitleContainer.bottom";
489556 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
490557 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
491558 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";