@@ -30,6 +30,7 @@ function createCardComponent(parent, template, components) {
3030 property var cardData; \
3131 property real fontScale: 1.0; \
3232 property int headerAlignment: Text.AlignLeft; \
33+ property int fixedHeaderHeight: -1; \
3334 property size fixedArtShapeSize: Qt.size(-1, -1); \
3435 readonly property string title: cardData && cardData["title"] || ""; \
3536 property bool asynchronous: true; \
@@ -41,12 +42,11 @@ function createCardComponent(parent, template, components) {
4142 var artAndSummary = hasArt && hasSummary;
4243 var isHorizontal = template["card-layout"] === "horizontal";
4344 var hasBackground = !isHorizontal && (template["card-background"] || components["background"] || artAndSummary);
44− var inOverlay = hasArt && template && template["overlay"] === true;
4545 var hasTitle = components["title"] || false;
4646 var hasMascot = components["mascot"] || false;
47+ var inOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
4748 var hasSubtitle = components["subtitle"] || false;
4849 var hasHeaderRow = hasMascot && hasTitle;
49− var mascotImageHeight = 'units.gu(5.625)';
5050
5151 if (hasBackground) {
5252 code += 'Loader {\
@@ -88,12 +88,12 @@ function createCardComponent(parent, template, components) {
8888 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);'
8989 var imageWidthHeight;
9090 if (isHorizontal) {
91− if (hasMascot) {
91+ if (hasMascot || hasTitle) {
9292 imageWidthHeight = 'width: height * artShape.aspect; \
93− height: mascotImage.height + 2 * units.gu(1);'
93+ height: headerHeight;'
9494 } else {
9595 imageWidthHeight = 'width: height * artShape.aspect; \
96− height: ' + mascotImageHeight + ' + 2 * units.gu(1);'
96+ height: units.gu(8.625)';
9797 }
9898 } else {
9999 imageWidthHeight = 'width: root.width; \
@@ -144,12 +144,7 @@ function createCardComponent(parent, template, components) {
144144 }
145145
146146 if (inOverlay) {
147− var height;
148− if (hasMascot) {
149− var height = 'mascotImage.height + 2 * units.gu(1);';
150− } else {
151− var height = mascotImageHeight + ' + 2 * units.gu(1);';
152− }
147+ var height = 'fixedHeaderHeight != -1 ? fixedHeaderHeight : headerHeight;';
153148 code += 'Loader { \
154149 id: overlayLoader; \
155150 anchors { \
@@ -219,6 +214,7 @@ function createCardComponent(parent, template, components) {
219214 }
220215
221216 if (hasHeaderRow) {
217+ code += 'readonly property int headerHeight: row.height + row.margins * 2;'
222218 code += 'Row { \
223219 id: row; \
224220 objectName: "outerRow"; \
@@ -237,6 +233,7 @@ function createCardComponent(parent, template, components) {
237233 anchors += headerLeftAnchor;
238234 anchors += 'anchors.leftMargin: units.gu(1);'
239235 anchors += headerVerticalAnchors;
236+ code += 'readonly property int headerHeight: mascotImage.height + units.gu(1) * 2;'
240237 } else {
241238 anchors = "anchors.verticalCenter: parent.verticalCenter;"
242239 }
@@ -262,7 +259,7 @@ function createCardComponent(parent, template, components) {
262259 readonly property int maxSize: Math.max(width, height) * 4; \
263260 source: cardData && cardData["mascot"]; \
264261 width: units.gu(6); \
265− height: ' + mascotImageHeight + '; \
262+ height: units.gu(5.625); \
266263 sourceSize { width: maxSize; height: maxSize } \
267264 fillMode: Image.PreserveAspectCrop; \
268265 horizontalAlignment: Image.AlignHCenter; \
@@ -296,16 +293,17 @@ function createCardComponent(parent, template, components) {
296293 width: parent.width - x;';
297294 } else if (hasMascot) {
298295 titleAnchors = 'anchors.verticalCenter: parent.verticalCenter;'
299− } else if (inOverlay && hasSubtitle) {
300− titleAnchors = 'anchors.leftMargin: units.gu(1); \
296+ } else if (inOverlay) {
297+ titleAnchors = 'anchors.left: parent.left; \
298+ anchors.leftMargin: units.gu(1); \
301299 anchors.right: parent.right; \
302− anchors.bottom: subtitleLabel.top; \
303− anchors.bottomMargin: units.dp(2);';
304− titleAnchors += headerLeftAnchor;
300+ anchors.top: overlayLoader.top; \
301+ anchors.topMargin: units.gu(1);';
305302 subtitleAnchors = 'anchors.left: titleLabel.left; \
306303 anchors.leftMargin: titleLabel.leftMargin; \
307− anchors.right: titleLabel.right;';
308− subtitleAnchors += headerVerticalAnchors;
304+ anchors.right: titleLabel.right; \
305+ anchors.top: titleLabel.bottom; \
306+ anchors.topMargin: units.dp(2);';
309307 } else {
310308 titleAnchors = "anchors.right: parent.right;";
311309 if (hasMascot) {
@@ -321,6 +319,13 @@ function createCardComponent(parent, template, components) {
321319 anchors.top: titleLabel.bottom; \
322320 anchors.topMargin: units.dp(2);';
323321 }
322+ if (!hasHeaderRow) {
323+ if (hasSubtitle) {
324+ code += 'readonly property int headerHeight: subtitleLabel.y + subtitleLabel.height - titleLabel.y + titleLabel.anchors.topMargin * 2 + subtitleLabel.anchors.topMargin;'
325+ } else {
326+ code += 'readonly property int headerHeight: titleLabel.height + titleLabel.anchors.topMargin * 2;'
327+ }
328+ }
324329
325330 code += 'Label { \
326331 id: titleLabel; \
@@ -332,7 +337,7 @@ function createCardComponent(parent, template, components) {
332337 maximumLineCount: 2; \
333338 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \
334339 color: ' + color + '; \
335− visible: showHeader; \
340+ visible: showHeader ' + (inOverlay ? '&& overlayLoader.active': '') + '; \
336341 text: root.title; \
337342 font.weight: components && components["subtitle"] ? Font.DemiBold : Font.Normal; \
338343 horizontalAlignment: root.headerAlignment; \
@@ -347,7 +352,7 @@ function createCardComponent(parent, template, components) {
347352 fontSize: "small"; \
348353 font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale); \
349354 color: ' + color + '; \
350− visible: showHeader && titleLabel.text; \
355+ visible: titleLabel.visible && titleLabel.text; \
351356 text: cardData && cardData["subtitle"] || ""; \
352357 font.weight: Font.Light; \
353358 horizontalAlignment: root.headerAlignment; \