@@ -141,7 +141,16 @@ var headerRowCode = 'Row { \n\
141141 %1 \n\
142142 %2 \n\
143143 anchors.right: parent.right; \n\
144− anchors.margins: margins;\n';
144+ anchors.margins: margins;\n\
145+ %3 \n\
146+ }\n';
147+
148+var headerColumnCode = 'Column { \n\
149+ anchors.verticalCenter: parent.verticalCenter; \n\
150+ spacing: units.dp(2); \n\
151+ width: parent.width - x;\n\
152+ %1 \n\
153+ }\n';
145154
146155var mascotShapeLoaderCode = 'Loader { \n\
147156 id: mascotShapeLoader; \n\
@@ -311,7 +320,6 @@ function cardString(template, components) {
311320
312321 if (hasHeaderRow) {
313322 code += 'readonly property int headerHeight: row.height + row.margins * 2;\n'
314− code += headerRowCode.arg(headerVerticalAnchors).arg(headerLeftAnchor);
315323 } else if (hasMascot) {
316324 code += 'readonly property int headerHeight: mascotImage.height + units.gu(1) * 2;\n'
317325 } else if (hasSubtitle) {
@@ -322,6 +330,7 @@ function cardString(template, components) {
322330 code += 'readonly property int headerHeight: 0;\n'
323331 }
324332
333+ var mascotCode = "";
325334 if (hasMascot) {
326335 var useMascotShape = !hasBackground && !headerAsOverlay;
327336 var anchors = "";
@@ -336,15 +345,16 @@ function cardString(template, components) {
336345 }
337346
338347 if (useMascotShape) {
339− code += mascotShapeLoaderCode.arg(anchors);
348+ mascotCode += mascotShapeLoaderCode.arg(anchors);
340349 }
341350
342351 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
343− code += mascotImageCode.arg(anchors).arg(mascotImageVisible);
352+ mascotCode += mascotImageCode.arg(anchors).arg(mascotImageVisible);
344353 }
345354
346355 var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"';
347356
357+ var titleSubtitleCode = "";
348358 if (hasTitle) {
349359 var color;
350360 if (headerAsOverlay) {
@@ -357,37 +367,29 @@ function cardString(template, components) {
357367 color = '"grey"';
358368 }
359369
360− var titleAnchors = "";
361− var subtitleAnchors = "";
370+ var titleAnchors;
371+ var subtitleAnchors;
362372 if (hasMascot && hasSubtitle) {
373+ // Using row + column
363374 titleAnchors = 'anchors { left: parent.left; right: parent.right }\n';
364375 subtitleAnchors = titleAnchors;
365− code += 'Column { \n\
366− anchors.verticalCenter: parent.verticalCenter; \n\
367− spacing: units.dp(2); \n\
368− width: parent.width - x;\n';
369376 } else if (hasMascot) {
377+ // Using row + label
370378 titleAnchors = 'anchors.verticalCenter: parent.verticalCenter;\n'
371− } else if (headerAsOverlay) {
372− titleAnchors = 'anchors.left: parent.left; \n\
373− anchors.leftMargin: units.gu(1); \n\
374− anchors.right: parent.right; \n\
375− anchors.top: overlayLoader.top; \n\
376− anchors.topMargin: units.gu(1);\n';
377− subtitleAnchors = 'anchors.left: titleLabel.left; \n\
378− anchors.leftMargin: titleLabel.leftMargin; \n\
379− anchors.right: titleLabel.right; \n\
380− anchors.top: titleLabel.bottom; \n\
381− anchors.topMargin: units.dp(2);\n';
382379 } else {
383− titleAnchors = "anchors.right: parent.right;";
384− if (hasMascot) {
385− titleAnchors += 'anchors.left: mascotImage.right; \n\
386− anchors.leftMargin: units.gu(1);\n';
380+ if (headerAsOverlay) {
381+ // Using anchors to the overlay
382+ titleAnchors = 'anchors.left: parent.left; \n\
383+ anchors.leftMargin: units.gu(1); \n\
384+ anchors.right: parent.right; \n\
385+ anchors.top: overlayLoader.top; \n\
386+ anchors.topMargin: units.gu(1);\n';
387387 } else {
388+ // Using anchors to the mascot/parent
389+ titleAnchors = "anchors.right: parent.right;";
388390 titleAnchors += headerLeftAnchor;
391+ titleAnchors += headerVerticalAnchors;
389392 }
390− titleAnchors += headerVerticalAnchors;
391393 subtitleAnchors = 'anchors.left: titleLabel.left; \n\
392394 anchors.leftMargin: titleLabel.leftMargin; \n\
393395 anchors.right: titleLabel.right; \n\
@@ -396,20 +398,22 @@ function cardString(template, components) {
396398 }
397399
398400 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
399− code += titleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
401+ titleSubtitleCode += titleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
400402
401403 if (hasSubtitle) {
402− code += subtitleLabelCode.arg(subtitleAnchors).arg(color);
404+ titleSubtitleCode += subtitleLabelCode.arg(subtitleAnchors).arg(color);
405+ }
403406
404− // Close Column
405− if (hasMascot)
406− code += '}\n';
407+ if (hasMascot && hasSubtitle) {
408+ // If using row + column wrap the code in the column
409+ titleSubtitleCode = headerColumnCode.arg(titleSubtitleCode);
407410 }
408411 }
409412
410413 if (hasHeaderRow) {
411− // Close Row
412− code += '}\n';
414+ code += headerRowCode.arg(headerVerticalAnchors).arg(headerLeftAnchor).arg(mascotCode + titleSubtitleCode);
415+ } else {
416+ code += mascotCode + titleSubtitleCode;
413417 }
414418
415419 if (hasSummary) {