@@ -294,6 +294,18 @@ var kAttributesRowCode = 'CardAttributes { \n\
294 model: cardData && cardData["attributes"]; \n\
294 model: cardData && cardData["attributes"]; \n\
297+// %1 is used as anchors of socialAttributesRow
298+// %2 is used as color of socialAttributesRow
299+var kSocialAttributesRowCode = 'CardSocialAttributes { \n\
300+ id: socialAttributesRow; \n\
301+ objectName: "socialAttributesRow"; \n\
304+ fontScale: root.fontScale; \n\
305+ model: cardData && cardData["socialAttributes"]; \n\
306+ onClicked: root.clicked(result); \n\
297// %1 is used as top anchor of summary
309// %1 is used as top anchor of summary
298// %2 is used as topMargin anchor of summary
310// %2 is used as topMargin anchor of summary
299// %3 is used as color of summary
311// %3 is used as color of summary
@@ -352,6 +364,11 @@ function cardString(template, components) {
352 var hasSubtitle = hasTitle && components["subtitle"] || false;
364 var hasSubtitle = hasTitle && components["subtitle"] || false;
353 var hasHeaderRow = hasMascot && hasTitle;
365 var hasHeaderRow = hasMascot && hasTitle;
354 var hasAttributes = hasTitle && components["attributes"]["field"] || false;
366 var hasAttributes = hasTitle && components["attributes"]["field"] || false;
367+ var hasSocialAttributes = hasTitle && components["socialAttributes"] || false;
369+ if (hasSocialAttributes) {
370+ code += 'signal clicked(var result);\n';
356 if (hasBackground) {
373 if (hasBackground) {
357 var templateCardBackground = (template && typeof template["card-background"] === "string") ? template["card-background"] : "";
374 var templateCardBackground = (template && typeof template["card-background"] === "string") ? template["card-background"] : "";
@@ -657,6 +674,36 @@ function cardString(template, components) {
657 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
674 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
677+ if (hasSocialAttributes) {
679+ var socialTopAnchor;
682+ socialTopAnchor = 'summary.bottom;';
684+ if (isHorizontal && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
685+ else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
686+ else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
687+ else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
688+ else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
689+ else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
690+ else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
691+ else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
692+ else if (hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
693+ else socialTopAnchor = 'parent.top';
695+ socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
698+ if (hasBackground) {
699+ socialColor = summaryColorWithBackground;
701+ socialColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
704+ code += kSocialAttributesRowCode.arg(socialAnchors).arg(socialColor);
660 var touchdownAnchors;
707 var touchdownAnchors;
661 if (hasBackground) {
708 if (hasBackground) {
662 touchdownAnchors = 'fill: backgroundLoader';
709 touchdownAnchors = 'fill: backgroundLoader';
@@ -668,7 +715,9 @@ function cardString(template, components) {
668 code += kTouchdownCode.arg(touchdownAnchors);
715 code += kTouchdownCode.arg(touchdownAnchors);
670 var implicitHeight = 'implicitHeight: ';
717 var implicitHeight = 'implicitHeight: ';
718+ if (hasSocialAttributes) {
719+ implicitHeight += 'socialAttributesRow.y + socialAttributesRow.height + units.gu(1);\n';
671− if (hasSummary) {
720+ } else if (hasSummary) {
672 implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
721 implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
673 } else if (headerAsOverlay) {
722 } else if (headerAsOverlay) {
674 implicitHeight += 'artShapeHolder.height;\n';
723 implicitHeight += 'artShapeHolder.height;\n';