@@ -294,6 +294,18 @@ var kAttributesRowCode = 'CardAttributes { \n\
294294 model: cardData && cardData["attributes"]; \n\
295295 }\n';
296296
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\
302+ anchors { %1 } \n\
303+ color: %2; \n\
304+ fontScale: root.fontScale; \n\
305+ model: cardData && cardData["socialAttributes"]; \n\
306+ onClicked: root.clicked(result); \n\
307+ }\n';
308+
297309// %1 is used as top anchor of summary
298310// %2 is used as topMargin anchor of summary
299311// %3 is used as color of summary
@@ -352,6 +364,11 @@ function cardString(template, components) {
352364 var hasSubtitle = hasTitle && components["subtitle"] || false;
353365 var hasHeaderRow = hasMascot && hasTitle;
354366 var hasAttributes = hasTitle && components["attributes"]["field"] || false;
367+ var hasSocialAttributes = hasTitle && components["socialAttributes"] || false;
368+
369+ if (hasSocialAttributes) {
370+ code += 'signal clicked(var result);\n';
371+ }
355372
356373 if (hasBackground) {
357374 var templateCardBackground = (template && typeof template["card-background"] === "string") ? template["card-background"] : "";
@@ -657,6 +674,36 @@ function cardString(template, components) {
657674 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
658675 }
659676
677+ if (hasSocialAttributes) {
678+ var socialAnchors;
679+ var socialTopAnchor;
680+
681+ if (hasSummary) {
682+ socialTopAnchor = 'summary.bottom;';
683+ } else {
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';
694+ }
695+ socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
696+
697+ var socialColor;
698+ if (hasBackground) {
699+ socialColor = summaryColorWithBackground;
700+ } else {
701+ socialColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
702+ }
703+
704+ code += kSocialAttributesRowCode.arg(socialAnchors).arg(socialColor);
705+ }
706+
660707 var touchdownAnchors;
661708 if (hasBackground) {
662709 touchdownAnchors = 'fill: backgroundLoader';
@@ -668,7 +715,9 @@ function cardString(template, components) {
668715 code += kTouchdownCode.arg(touchdownAnchors);
669716
670717 var implicitHeight = 'implicitHeight: ';
671− if (hasSummary) {
718+ if (hasSocialAttributes) {
719+ implicitHeight += 'socialAttributesRow.y + socialAttributesRow.height + units.gu(1);\n';
720+ } else if (hasSummary) {
672721 implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
673722 } else if (headerAsOverlay) {
674723 implicitHeight += 'artShapeHolder.height;\n';