@@ -16,7 +16,7 @@
1616
1717.pragma library
1818
19−var backgroundLoaderCode = 'Loader {\n\
19+var kBackgroundLoaderCode = 'Loader {\n\
2020 id: backgroundLoader; \n\
2121 objectName: "backgroundLoader"; \n\
2222 anchors.fill: parent; \n\
@@ -53,7 +53,7 @@ var backgroundLoaderCode = 'Loader {\n\
5353// %1 is used as anchors of artShapeHolder
5454// %2 is used as image width
5555// %3 is used as image height
56−var artShapeHolderCode = 'Item { \n\
56+var kArtShapeHolderCode = 'Item { \n\
5757 id: artShapeHolder; \n\
5858 height: root.fixedArtShapeSize.height != -1 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
5959 width: root.fixedArtShapeSize.width != -1 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
@@ -96,7 +96,7 @@ var artShapeHolderCode = 'Item { \n\
9696 } \n\
9797 }\n';
9898
99−var overlayLoaderCode = 'Loader { \n\
99+var kOverlayLoaderCode = 'Loader { \n\
100100 id: overlayLoader; \n\
101101 anchors { \n\
102102 left: artShapeHolder.left; \n\
@@ -137,21 +137,46 @@ var overlayLoaderCode = 'Loader { \n\
137137 } \n\
138138 }\n';
139139
140−var headerRowCode = 'Row { \n\
140+// %1 is used as anchors of row
141+// %2 is used as first child of the row
142+// %3 is used as second child of the row
143+var kHeaderRow2Code = 'Row { \n\
141144 id: row; \n\
142145 objectName: "outerRow"; \n\
143146 property real margins: units.gu(1); \n\
144147 spacing: margins; \n\
145− %1 \n\
146− %2 \n\
148+ anchors { %1 } \n\
147149 anchors.right: parent.right; \n\
148150 anchors.margins: margins;\n\
149− %3 \n\
151+ data: [ %2\n\
152+ ,\n\
153+ %3 \n\
154+ ] \n\
155+ }\n';
156+
157+// %1 is used as anchors of row
158+// %2 is used as first child of the row
159+// %3 is used as second child of the row
160+// %4 is used as third child of the row
161+var kHeaderRow3Code = 'Row { \n\
162+ id: row; \n\
163+ objectName: "outerRow"; \n\
164+ property real margins: units.gu(1); \n\
165+ spacing: margins; \n\
166+ anchors { %1 } \n\
167+ anchors.right: parent.right; \n\
168+ anchors.margins: margins;\n\
169+ data: [ %2\n\
170+ ,\n\
171+ %3 \n\
172+ ,\n\
173+ %4 \n\
174+ ] \n\
150175 }\n';
151176
152177// %1 is used as first child of the column
153178// %2 is used as second child of the column
154−var headerColumnCode = 'Column { \n\
179+var kHeaderColumnCode = 'Column { \n\
155180 anchors.verticalCenter: parent.verticalCenter; \n\
156181 spacing: units.dp(2); \n\
157182 width: parent.width - x;\n\
@@ -161,7 +186,8 @@ var headerColumnCode = 'Column { \n\
161186 ] \n\
162187 }\n';
163188
164−var mascotShapeLoaderCode = 'Loader { \n\
189+// %1 is used as anchors of mascotShapeLoader
190+var kMascotShapeLoaderCode = 'Loader { \n\
165191 id: mascotShapeLoader; \n\
166192 objectName: "mascotShapeLoader"; \n\
167193 asynchronous: root.asynchronous; \n\
@@ -170,13 +196,15 @@ var mascotShapeLoaderCode = 'Loader { \n\
170196 width: units.gu(6); \n\
171197 height: units.gu(5.625); \n\
172198 sourceComponent: UbuntuShape { image: mascotImage } \n\
173− %1 \n\
199+ anchors { %1 } \n\
174200 }\n';
175201
176−var mascotImageCode = 'Image { \n\
202+// %1 is used as anchors of mascotImage
203+// %2 is used as visible of mascotImage
204+var kMascotImageCode = 'Image { \n\
177205 id: mascotImage; \n\
178206 objectName: "mascotImage"; \n\
179− %1 \n\
207+ anchors { %1 } \n\
180208 readonly property int maxSize: Math.max(width, height) * 4; \n\
181209 source: cardData && cardData["mascot"]; \n\
182210 width: units.gu(6); \n\
@@ -188,10 +216,13 @@ var mascotImageCode = 'Image { \n\
188216 visible: %2; \n\
189217 }\n';
190218
191−var titleLabelCode = 'Label { \n\
219+// %1 is used as anchors of titleLabel
220+// %1 is used as color of titleLabel
221+// %3 is used as extra condition for visible of titleLabel
222+var kTitleLabelCode = 'Label { \n\
192223 id: titleLabel; \n\
193224 objectName: "titleLabel"; \n\
194− %1 \n\
225+ anchors { %1 } \n\
195226 elide: Text.ElideRight; \n\
196227 fontSize: "small"; \n\
197228 wrapMode: Text.Wrap; \n\
@@ -206,7 +237,7 @@ var titleLabelCode = 'Label { \n\
206237
207238// %1 is used as anchors of subtitleLabel
208239// %2 is used as color of subtitleLabel
209−var subtitleLabelCode = 'Label { \n\
240+var kSubtitleLabelCode = 'Label { \n\
210241 id: subtitleLabel; \n\
211242 objectName: "subtitleLabel"; \n\
212243 anchors { %1 } \n\
@@ -223,7 +254,7 @@ var subtitleLabelCode = 'Label { \n\
223254// %1 is used as top anchor of summary
224255// %2 is used as topMargin anchor of summary
225256// %3 is used as color of summary
226−var summaryLabelCode = 'Label { \n\
257+var kSummaryLabelCode = 'Label { \n\
227258 id: summary; \n\
228259 objectName: "summaryLabel"; \n\
229260 anchors { \n\
@@ -270,7 +301,7 @@ function cardString(template, components) {
270301 var hasHeaderRow = hasMascot && hasTitle;
271302
272303 if (hasBackground) {
273− code += backgroundLoaderCode;
304+ code += kBackgroundLoaderCode;
274305 }
275306
276307 if (hasArt) {
@@ -295,41 +326,41 @@ function cardString(template, components) {
295326 heightCode = 'width / artShape.aspect';
296327 }
297328
298− code += artShapeHolderCode.arg(anchors).arg(widthCode).arg(heightCode);
329+ code += kArtShapeHolderCode.arg(anchors).arg(widthCode).arg(heightCode);
299330 } else {
300331 code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
301332 }
302333
303334 if (headerAsOverlay) {
304− code += overlayLoaderCode;
335+ code += kOverlayLoaderCode;
305336 }
306337
307338 var headerVerticalAnchors;
308339 if (headerAsOverlay) {
309− headerVerticalAnchors = 'anchors.bottom: artShapeHolder.bottom; \n\
310− anchors.bottomMargin: units.gu(1);\n';
340+ headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
341+ bottomMargin: units.gu(1);\n';
311342 } else {
312343 if (hasArt) {
313344 if (isHorizontal) {
314− headerVerticalAnchors = 'anchors.top: artShapeHolder.top; \n\
315− anchors.topMargin: units.gu(1);\n';
345+ headerVerticalAnchors = 'top: artShapeHolder.top; \n\
346+ topMargin: units.gu(1);\n';
316347 } else {
317− headerVerticalAnchors = 'anchors.top: artShapeHolder.bottom; \n\
318− anchors.topMargin: units.gu(1);\n';
348+ headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
349+ topMargin: units.gu(1);\n';
319350 }
320351 } else {
321− headerVerticalAnchors = 'anchors.top: parent.top; \n\
322− anchors.topMargin: units.gu(1);\n';
352+ headerVerticalAnchors = 'top: parent.top; \n\
353+ topMargin: units.gu(1);\n';
323354 }
324355 }
325356 var headerLeftAnchor;
326357 var headerLeftAnchorHasMagin = false;
327358 if (isHorizontal && hasArt) {
328− headerLeftAnchor = 'anchors.left: artShapeHolder.right; \n\
329− anchors.leftMargin: units.gu(1);\n';
359+ headerLeftAnchor = 'left: artShapeHolder.right; \n\
360+ leftMargin: units.gu(1);\n';
330361 headerLeftAnchorHasMagin = true;
331362 } else {
332− headerLeftAnchor = 'anchors.left: parent.left;\n';
363+ headerLeftAnchor = 'left: parent.left;\n';
333364 }
334365
335366 if (hasHeaderRow) {
@@ -344,6 +375,7 @@ function cardString(template, components) {
344375 code += 'readonly property int headerHeight: 0;\n'
345376 }
346377
378+ var mascotShapeCode = "";
347379 var mascotCode = "";
348380 if (hasMascot) {
349381 var useMascotShape = !hasBackground && !headerAsOverlay;
@@ -352,18 +384,18 @@ function cardString(template, components) {
352384 anchors += headerLeftAnchor;
353385 anchors += headerVerticalAnchors;
354386 if (!headerLeftAnchorHasMagin) {
355− anchors += 'anchors.leftMargin: units.gu(1);\n'
387+ anchors += 'leftMargin: units.gu(1);\n'
356388 }
357389 } else {
358− anchors = "anchors.verticalCenter: parent.verticalCenter;"
390+ anchors = "verticalCenter: parent.verticalCenter;"
359391 }
360392
361393 if (useMascotShape) {
362− mascotCode += mascotShapeLoaderCode.arg(anchors);
394+ mascotShapeCode = kMascotShapeLoaderCode.arg(anchors);
363395 }
364396
365397 var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
366− mascotCode += mascotImageCode.arg(anchors).arg(mascotImageVisible);
398+ mascotCode = kMascotImageCode.arg(anchors).arg(mascotImageVisible);
367399 }
368400
369401 var summaryColorWithBackground = 'backgroundLoader.active && backgroundLoader.item && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"';
@@ -385,22 +417,22 @@ function cardString(template, components) {
385417 var subtitleAnchors;
386418 if (hasMascot && hasSubtitle) {
387419 // Using row + column
388− titleAnchors = 'anchors { left: parent.left; right: parent.right }\n';
389− subtitleAnchors = 'left: parent.left; right: parent.right';
420+ titleAnchors = 'left: parent.left; right: parent.right';
421+ subtitleAnchors = titleAnchors;
390422 } else if (hasMascot) {
391423 // Using row + label
392− titleAnchors = 'anchors.verticalCenter: parent.verticalCenter;\n'
424+ titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
393425 } else {
394426 if (headerAsOverlay) {
395427 // Using anchors to the overlay
396− titleAnchors = 'anchors.left: parent.left; \n\
397− anchors.leftMargin: units.gu(1); \n\
398− anchors.right: parent.right; \n\
399− anchors.top: overlayLoader.top; \n\
400− anchors.topMargin: units.gu(1);\n';
428+ titleAnchors = 'left: parent.left; \n\
429+ leftMargin: units.gu(1); \n\
430+ right: parent.right; \n\
431+ top: overlayLoader.top; \n\
432+ topMargin: units.gu(1);\n';
401433 } else {
402434 // Using anchors to the mascot/parent
403− titleAnchors = "anchors.right: parent.right;";
435+ titleAnchors = "right: parent.right;";
404436 titleAnchors += headerLeftAnchor;
405437 titleAnchors += headerVerticalAnchors;
406438 }
@@ -412,24 +444,28 @@ function cardString(template, components) {
412444 }
413445
414446 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
415− var titleCode = titleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
447+ var titleCode = kTitleLabelCode.arg(titleAnchors).arg(color).arg(titleLabelVisibleExtra);
416448 var subtitleCode = "";
417449 if (hasSubtitle) {
418− subtitleCode += subtitleLabelCode.arg(subtitleAnchors).arg(color);
450+ subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
419451 }
420452
421453 if (hasMascot && hasSubtitle) {
422454 // If using row + column wrap the code in the column
423− titleSubtitleCode = headerColumnCode.arg(titleCode).arg(subtitleCode);
455+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
424456 } else {
425457 titleSubtitleCode = titleCode + subtitleCode;
426458 }
427459 }
428460
429461 if (hasHeaderRow) {
430− code += headerRowCode.arg(headerVerticalAnchors).arg(headerLeftAnchor).arg(mascotCode + titleSubtitleCode);
462+ if (mascotShapeCode != "") {
463+ code += kHeaderRow3Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotShapeCode).arg(mascotCode).arg(titleSubtitleCode);
464+ } else {
465+ code += kHeaderRow2Code.arg(headerVerticalAnchors + headerLeftAnchor).arg(mascotCode).arg(titleSubtitleCode);
466+ }
431467 } else {
432− code += mascotCode + titleSubtitleCode;
468+ code += mascotShapeCode + mascotCode + titleSubtitleCode;
433469 }
434470
435471 if (hasSummary) {
@@ -452,7 +488,7 @@ function cardString(template, components) {
452488
453489 var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
454490
455− code += summaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
491+ code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
456492 }
457493
458494 if (hasSummary) {