@@ -193,6 +193,21 @@ var kHeaderColumnCode = 'Column { \n\
196+// multiple column version of kHeaderColumnCode.
197+function kHeaderColumnCodeGenerator() {
198+ var headerColumnCodeTemplate = 'Column { \n\
199+ anchors.verticalCenter: parent.verticalCenter; \n\
200+ spacing: units.dp(2); \n\
201+ width: parent.width - x;\n\
206+ var args = Array.prototype.slice.call(arguments);
207+ var code = headerColumnCodeTemplate.arg(args.join(',\n'));
196// %1 is used as anchors of mascotShapeLoader
211// %1 is used as anchors of mascotShapeLoader
197var kMascotShapeLoaderCode = 'Loader { \n\
212var kMascotShapeLoaderCode = 'Loader { \n\
198 id: mascotShapeLoader; \n\
213 id: mascotShapeLoader; \n\
@@ -224,7 +239,7 @@ var kMascotImageCode = 'Image { \n\
226// %1 is used as anchors of titleLabel
241// %1 is used as anchors of titleLabel
227−// %1 is used as color of titleLabel
242+// %2 is used as color of titleLabel
228// %3 is used as extra condition for visible of titleLabel
243// %3 is used as extra condition for visible of titleLabel
229var kTitleLabelCode = 'Label { \n\
244var kTitleLabelCode = 'Label { \n\
230 id: titleLabel; \n\
245 id: titleLabel; \n\
@@ -258,6 +273,15 @@ var kSubtitleLabelCode = 'Label { \n\
258 horizontalAlignment: root.headerAlignment; \n\
273 horizontalAlignment: root.headerAlignment; \n\
276+// %1 is used as anchors of attributesRow
277+var kAttributesRowCode = 'CardAttributes { \n\
278+ id: attributesRow; \n\
279+ objectName: "attributesRow"; \n\
282+ model: cardData && cardData["attributes"] || undefined; \n\
261// %1 is used as top anchor of summary
285// %1 is used as top anchor of summary
262// %2 is used as topMargin anchor of summary
286// %2 is used as topMargin anchor of summary
263// %3 is used as color of summary
287// %3 is used as color of summary
@@ -308,6 +332,7 @@ function cardString(template, components) {
308 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
332 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
309 var hasSubtitle = hasTitle && components["subtitle"] || false;
333 var hasSubtitle = hasTitle && components["subtitle"] || false;
310 var hasHeaderRow = hasMascot && hasTitle;
334 var hasHeaderRow = hasMascot && hasTitle;
335+ var hasAttributes = hasTitle && components["attributes"] || false;
312 if (hasBackground) {
337 if (hasBackground) {
313 code += kBackgroundLoaderCode;
338 code += kBackgroundLoaderCode;
@@ -377,6 +402,14 @@ function cardString(template, components) {
377 code += 'readonly property int headerHeight: row.height;\n'
402 code += 'readonly property int headerHeight: row.height;\n'
378 } else if (hasMascot) {
403 } else if (hasMascot) {
379 code += 'readonly property int headerHeight: mascotImage.height;\n'
404 code += 'readonly property int headerHeight: mascotImage.height;\n'
405+ } else if (hasAttributes) {
406+ if (hasTitle && hasSubtitle) {
407+ code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n'
408+ } else if (hasTitle) {
409+ code += 'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n'
411+ code += 'readonly property int headerHeight: attributesRow.height;\n'
380 } else if (hasSubtitle) {
413 } else if (hasSubtitle) {
381 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
414 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
382 } else if (hasTitle) {
415 } else if (hasTitle) {
@@ -425,10 +458,12 @@ function cardString(template, components) {
426 var titleAnchors;
459 var titleAnchors;
427 var subtitleAnchors;
460 var subtitleAnchors;
461+ var attributesAnchors;
428− if (hasMascot && hasSubtitle) {
462+ if (hasMascot && (hasSubtitle || hasAttributes)) {
429 // Using row + column
463 // Using row + column
430 titleAnchors = 'left: parent.left; right: parent.right';
464 titleAnchors = 'left: parent.left; right: parent.right';
431 subtitleAnchors = titleAnchors;
465 subtitleAnchors = titleAnchors;
466+ attributesAnchors = subtitleAnchors;
432 } else if (hasMascot) {
467 } else if (hasMascot) {
433 // Using row + label
468 // Using row + label
434 titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
469 titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
@@ -438,11 +473,13 @@ function cardString(template, components) {
438 titleAnchors = 'left: parent.left; \n\
473 titleAnchors = 'left: parent.left; \n\
439 leftMargin: units.gu(1); \n\
474 leftMargin: units.gu(1); \n\
440 right: parent.right; \n\
475 right: parent.right; \n\
476+ rightMargin: units.gu(1); \n\
441 top: overlayLoader.top; \n\
477 top: overlayLoader.top; \n\
442 topMargin: units.gu(1);\n';
478 topMargin: units.gu(1);\n';
444 // Using anchors to the mascot/parent
480 // Using anchors to the mascot/parent
445− titleAnchors = "right: parent.right;";
481+ titleAnchors = "right: parent.right;\n";
482+ titleAnchors += "rightMargin: units.gu(1);\n";
446 titleAnchors += headerLeftAnchor;
483 titleAnchors += headerLeftAnchor;
447 titleAnchors += headerVerticalAnchors;
484 titleAnchors += headerVerticalAnchors;
448 if (!headerLeftAnchorHasMargin) {
485 if (!headerLeftAnchorHasMargin) {
@@ -452,8 +489,19 @@ function cardString(template, components) {
452 subtitleAnchors = 'left: titleLabel.left; \n\
489 subtitleAnchors = 'left: titleLabel.left; \n\
453 leftMargin: titleLabel.leftMargin; \n\
490 leftMargin: titleLabel.leftMargin; \n\
454 right: titleLabel.right; \n\
491 right: titleLabel.right; \n\
492+ rightMargin: titleLabel.rightMargin; \n\
455 top: titleLabel.bottom; \n\
493 top: titleLabel.bottom; \n\
456 topMargin: units.dp(2);\n';
494 topMargin: units.dp(2);\n';
496+ attributesAnchors = 'left: subtitleLabel.left; \n\
497+ leftMargin: subtitleLabel.leftMargin; \n\
498+ right: subtitleLabel.right; \n\
499+ rightMargin: subtitleLabel.rightMargin; \n\
500+ top: subtitleLabel.bottom; \n\
501+ topMargin: units.dp(2);\n';
503+ attributesAnchors = subtitleAnchors;
459 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
507 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
@@ -463,11 +511,27 @@ function cardString(template, components) {
463 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
511 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
466− if (hasMascot && hasSubtitle) {
514+ if (hasMascot && (hasSubtitle || hasAttributes)) {
467 // If using row + column wrap the code in the column
515 // If using row + column wrap the code in the column
468 titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
516 titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
517+ if (hasSubtitle && hasAttributes) {
518+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
519+ titleSubtitleCode = kHeaderColumnCodeGenerator(titleCode, subtitleCode, attributesCode);
520+ } else if (hasSubtitle) {
521+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
522+ } else if (hasAttributes) {
523+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
524+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(attributesCode);
470− titleSubtitleCode = titleCode + subtitleCode;
527+ titleSubtitleCode = titleCode;
529+ titleSubtitleCode = titleSubtitleCode + subtitleCode;
531+ if (hasAttributes) {
532+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
533+ titleSubtitleCode = titleSubtitleCode + attributesCode;
@@ -487,6 +551,7 @@ function cardString(template, components) {
487 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
551 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
488 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
552 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
489 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
553 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
554+ else if (hasAttributes) summaryTopAnchor = "attributesRow.bottom";
490 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
555 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
491 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
556 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
492 else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
557 else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
@@ -499,7 +564,7 @@ function cardString(template, components) {
499 color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
564 color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
502− var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
567+ var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
504 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
569 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
@@ -510,6 +575,8 @@ function cardString(template, components) {
510 code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
575 code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
511 } else if (hasMascot) {
576 } else if (hasMascot) {
512 code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
577 code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
578+ } else if (hasAttributes) {
579+ code += 'implicitHeight: attributesRow.y + attributesRow.height + units.gu(1);\n';
513 } else if (hasSubtitle) {
580 } else if (hasSubtitle) {
514 code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
581 code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
515 } else if (hasTitle) {
582 } else if (hasTitle) {
@@ -526,8 +593,10 @@ function cardString(template, components) {
526function createCardComponent(parent, template, components) {
593function createCardComponent(parent, template, components) {
527 var imports = 'import QtQuick 2.2; \n\
594 var imports = 'import QtQuick 2.2; \n\
528 import Ubuntu.Components 0.1; \n\
595 import Ubuntu.Components 0.1; \n\
529− import Ubuntu.Thumbnailer 0.1;\n';
596+ import Ubuntu.Thumbnailer 0.1;\n\
597+ import Dash 0.1;\n';
530 var card = cardString(template, components);
598 var card = cardString(template, components);
531 var code = imports + 'Component {\n' + card + '}\n';
599 var code = imports + 'Component {\n' + card + '}\n';
532 return Qt.createQmlObject(code, parent, "createCardComponent");
601 return Qt.createQmlObject(code, parent, "createCardComponent");