@@ -187,6 +187,21 @@ var kHeaderColumnCode = 'Column { \n\
190+// multiple column version of kHeaderColumnCode.
191+function kHeaderColumnCodeGenerator() {
192+ var headerColumnCodeTemplate = 'Column { \n\
193+ anchors.verticalCenter: parent.verticalCenter; \n\
194+ spacing: units.dp(2); \n\
195+ width: parent.width - x;\n\
200+ var args = Array.prototype.slice.call(arguments);
201+ var code = headerColumnCodeTemplate.arg(args.join(',\n'));
190// %1 is used as anchors of mascotShapeLoader
205// %1 is used as anchors of mascotShapeLoader
191var kMascotShapeLoaderCode = 'Loader { \n\
206var kMascotShapeLoaderCode = 'Loader { \n\
192 id: mascotShapeLoader; \n\
207 id: mascotShapeLoader; \n\
@@ -218,7 +233,7 @@ var kMascotImageCode = 'Image { \n\
220// %1 is used as anchors of titleLabel
235// %1 is used as anchors of titleLabel
221−// %1 is used as color of titleLabel
236+// %2 is used as color of titleLabel
222// %3 is used as extra condition for visible of titleLabel
237// %3 is used as extra condition for visible of titleLabel
223var kTitleLabelCode = 'Label { \n\
238var kTitleLabelCode = 'Label { \n\
224 id: titleLabel; \n\
239 id: titleLabel; \n\
@@ -252,6 +267,15 @@ var kSubtitleLabelCode = 'Label { \n\
252 horizontalAlignment: root.headerAlignment; \n\
267 horizontalAlignment: root.headerAlignment; \n\
270+// %1 is used as anchors of attributesRow
271+var kAttributesRowCode = 'CardAttributes { \n\
272+ id: attributesRow; \n\
273+ objectName: "attributesRow"; \n\
276+ model: cardData && cardData["attributes"] || undefined; \n\
255// %1 is used as top anchor of summary
279// %1 is used as top anchor of summary
256// %2 is used as topMargin anchor of summary
280// %2 is used as topMargin anchor of summary
257// %3 is used as color of summary
281// %3 is used as color of summary
@@ -302,6 +326,7 @@ function cardString(template, components) {
302 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
326 var headerAsOverlay = hasArt && template && template["overlay"] === true && (hasTitle || hasMascot);
303 var hasSubtitle = hasTitle && components["subtitle"] || false;
327 var hasSubtitle = hasTitle && components["subtitle"] || false;
304 var hasHeaderRow = hasMascot && hasTitle;
328 var hasHeaderRow = hasMascot && hasTitle;
329+ var hasAttributes = hasTitle && components["attributes"] || false;
306 if (hasBackground) {
331 if (hasBackground) {
307 code += kBackgroundLoaderCode;
332 code += kBackgroundLoaderCode;
@@ -371,6 +396,14 @@ function cardString(template, components) {
371 code += 'readonly property int headerHeight: row.height;\n'
396 code += 'readonly property int headerHeight: row.height;\n'
372 } else if (hasMascot) {
397 } else if (hasMascot) {
373 code += 'readonly property int headerHeight: mascotImage.height;\n'
398 code += 'readonly property int headerHeight: mascotImage.height;\n'
399+ } else if (hasAttributes) {
400+ if (hasTitle && hasSubtitle) {
401+ code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + attributesRow.height + attributesRow.anchors.topMargin;\n'
402+ } else if (hasTitle) {
403+ code += 'readonly property int headerHeight: titleLabel.height + attributesRow.height + attributesRow.anchors.topMargin;\n'
405+ code += 'readonly property int headerHeight: attributesRow.height;\n'
374 } else if (hasSubtitle) {
407 } else if (hasSubtitle) {
375 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
408 code += 'readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;\n'
376 } else if (hasTitle) {
409 } else if (hasTitle) {
@@ -419,10 +452,12 @@ function cardString(template, components) {
420 var titleAnchors;
453 var titleAnchors;
421 var subtitleAnchors;
454 var subtitleAnchors;
455+ var attributesAnchors;
422− if (hasMascot && hasSubtitle) {
456+ if (hasMascot && (hasSubtitle || hasAttributes)) {
423 // Using row + column
457 // Using row + column
424 titleAnchors = 'left: parent.left; right: parent.right';
458 titleAnchors = 'left: parent.left; right: parent.right';
425 subtitleAnchors = titleAnchors;
459 subtitleAnchors = titleAnchors;
460+ attributesAnchors = subtitleAnchors;
426 } else if (hasMascot) {
461 } else if (hasMascot) {
427 // Using row + label
462 // Using row + label
428 titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
463 titleAnchors = 'verticalCenter: parent.verticalCenter;\n'
@@ -432,11 +467,13 @@ function cardString(template, components) {
432 titleAnchors = 'left: parent.left; \n\
467 titleAnchors = 'left: parent.left; \n\
433 leftMargin: units.gu(1); \n\
468 leftMargin: units.gu(1); \n\
434 right: parent.right; \n\
469 right: parent.right; \n\
470+ rightMargin: units.gu(1); \n\
435 top: overlayLoader.top; \n\
471 top: overlayLoader.top; \n\
436 topMargin: units.gu(1);\n';
472 topMargin: units.gu(1);\n';
438 // Using anchors to the mascot/parent
474 // Using anchors to the mascot/parent
439− titleAnchors = "right: parent.right;";
475+ titleAnchors = "right: parent.right;\n";
476+ titleAnchors += "rightMargin: units.gu(1);\n";
440 titleAnchors += headerLeftAnchor;
477 titleAnchors += headerLeftAnchor;
441 titleAnchors += headerVerticalAnchors;
478 titleAnchors += headerVerticalAnchors;
442 if (!headerLeftAnchorHasMargin) {
479 if (!headerLeftAnchorHasMargin) {
@@ -446,8 +483,19 @@ function cardString(template, components) {
446 subtitleAnchors = 'left: titleLabel.left; \n\
483 subtitleAnchors = 'left: titleLabel.left; \n\
447 leftMargin: titleLabel.leftMargin; \n\
484 leftMargin: titleLabel.leftMargin; \n\
448 right: titleLabel.right; \n\
485 right: titleLabel.right; \n\
486+ rightMargin: titleLabel.rightMargin; \n\
449 top: titleLabel.bottom; \n\
487 top: titleLabel.bottom; \n\
450 topMargin: units.dp(2);\n';
488 topMargin: units.dp(2);\n';
490+ attributesAnchors = 'left: subtitleLabel.left; \n\
491+ leftMargin: subtitleLabel.leftMargin; \n\
492+ right: subtitleLabel.right; \n\
493+ rightMargin: subtitleLabel.rightMargin; \n\
494+ top: subtitleLabel.bottom; \n\
495+ topMargin: units.dp(2);\n';
497+ attributesAnchors = subtitleAnchors;
453 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
501 var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
@@ -457,11 +505,27 @@ function cardString(template, components) {
457 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
505 subtitleCode += kSubtitleLabelCode.arg(subtitleAnchors).arg(color);
460− if (hasMascot && hasSubtitle) {
508+ if (hasMascot && (hasSubtitle || hasAttributes)) {
461 // If using row + column wrap the code in the column
509 // If using row + column wrap the code in the column
462 titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
510 titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
511+ if (hasSubtitle && hasAttributes) {
512+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
513+ titleSubtitleCode = kHeaderColumnCodeGenerator(titleCode, subtitleCode, attributesCode);
514+ } else if (hasSubtitle) {
515+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(subtitleCode);
516+ } else if (hasAttributes) {
517+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
518+ titleSubtitleCode = kHeaderColumnCode.arg(titleCode).arg(attributesCode);
464− titleSubtitleCode = titleCode + subtitleCode;
521+ titleSubtitleCode = titleCode;
523+ titleSubtitleCode = titleSubtitleCode + subtitleCode;
525+ if (hasAttributes) {
526+ var attributesCode = kAttributesRowCode.arg(attributesAnchors).arg(color);
527+ titleSubtitleCode = titleSubtitleCode + attributesCode;
@@ -481,6 +545,7 @@ function cardString(template, components) {
481 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
545 else if (headerAsOverlay && hasArt) summaryTopAnchor = "artShapeHolder.bottom";
482 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
546 else if (hasHeaderRow) summaryTopAnchor = "row.bottom";
483 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
547 else if (hasMascot) summaryTopAnchor = "mascotImage.bottom";
548+ else if (hasAttributes) summaryTopAnchor = "attributesRow.bottom";
484 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
549 else if (hasSubtitle) summaryTopAnchor = "subtitleLabel.bottom";
485 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
550 else if (hasTitle) summaryTopAnchor = "titleLabel.bottom";
486 else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
551 else if (hasArt) summaryTopAnchor = "artShapeHolder.bottom";
@@ -493,7 +558,7 @@ function cardString(template, components) {
493 color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
558 color = 'root.scopeStyle ? root.scopeStyle.foreground : "grey"';
496− var summaryTopMargin = (hasMascot || hasSubtitle ? 'anchors.margins' : '0');
561+ var summaryTopMargin = (hasMascot || hasSubtitle || hasAttributes ? 'anchors.margins' : '0');
498 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
563 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(color);
@@ -504,6 +569,8 @@ function cardString(template, components) {
504 code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
569 code += 'implicitHeight: row.y + row.height + units.gu(1);\n';
505 } else if (hasMascot) {
570 } else if (hasMascot) {
506 code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
571 code += 'implicitHeight: mascotImage.y + mascotImage.height;\n';
572+ } else if (hasAttributes) {
573+ code += 'implicitHeight: attributesRow.y + attributesRow.height + units.gu(1);\n';
507 } else if (hasSubtitle) {
574 } else if (hasSubtitle) {
508 code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
575 code += 'implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
509 } else if (hasTitle) {
576 } else if (hasTitle) {
@@ -520,8 +587,10 @@ function cardString(template, components) {
520function createCardComponent(parent, template, components) {
587function createCardComponent(parent, template, components) {
521 var imports = 'import QtQuick 2.2; \n\
588 var imports = 'import QtQuick 2.2; \n\
522 import Ubuntu.Components 0.1; \n\
589 import Ubuntu.Components 0.1; \n\
523− import Ubuntu.Thumbnailer 0.1;\n';
590+ import Ubuntu.Thumbnailer 0.1;\n\
591+ import Dash 0.1;\n';
524 var card = cardString(template, components);
592 var card = cardString(template, components);
525 var code = imports + 'Component {\n' + card + '}\n';
593 var code = imports + 'Component {\n' + card + '}\n';
526 return Qt.createQmlObject(code, parent, "createCardComponent");
595 return Qt.createQmlObject(code, parent, "createCardComponent");