Unity 8

Merge lp:~cimi/unity8/card-social into lp:unity8

card-social
Merge into trunk

Proposed by Andrea Cimitan on 2016-03-04

Status:	Superseded
Proposed branch:	lp:~cimi/unity8/card-social
Merge into:	lp:unity8
Diff against target:	3382 lines (+2184/-181) 45 files modified debian/control (+2/-2) plugins/Dash/CardCreator.js (+112/-34) plugins/Dash/CardCreatorCache.qml (+3/-3) plugins/Dash/CardSocialActions.qml (+86/-0) plugins/Dash/qmldir (+1/-0) qml/Dash/CardCarousel.qml (+0/-1) qml/Dash/CardGrid.qml (+1/-1) qml/Dash/CardHorizontalList.qml (+1/-1) qml/Dash/CardTool.qml (+29/-28) qml/Dash/CardVerticalJournal.qml (+1/-1) qml/Dash/DashRenderer.qml (+6/-0) qml/Dash/GenericScopeView.qml (+4/-0) tests/mocks/Unity/CMakeLists.txt (+1/-1) tests/mocks/Unity/fake_categories.cpp (+4/-1) tests/mocks/Unity/fake_resultsmodel.cpp (+2/-0) tests/plugins/Dash/cardcreator/1.res (+5/-7) tests/plugins/Dash/cardcreator/1.res.cardcreator (+119/-0) tests/plugins/Dash/cardcreator/10.res (+4/-6) tests/plugins/Dash/cardcreator/10.res.cardcreator (+137/-0) tests/plugins/Dash/cardcreator/11.res (+6/-8) tests/plugins/Dash/cardcreator/11.res.cardcreator (+210/-0) tests/plugins/Dash/cardcreator/12.res (+146/-0) tests/plugins/Dash/cardcreator/12.res.cardcreator (+145/-0) tests/plugins/Dash/cardcreator/12.tst (+3/-0) tests/plugins/Dash/cardcreator/2.res (+4/-6) tests/plugins/Dash/cardcreator/2.res.cardcreator (+136/-0) tests/plugins/Dash/cardcreator/3.res (+4/-6) tests/plugins/Dash/cardcreator/3.res.cardcreator (+137/-0) tests/plugins/Dash/cardcreator/4.res (+4/-6) tests/plugins/Dash/cardcreator/4.res.cardcreator (+109/-0) tests/plugins/Dash/cardcreator/5.res (+6/-8) tests/plugins/Dash/cardcreator/5.res.cardcreator (+156/-0) tests/plugins/Dash/cardcreator/6.res (+3/-5) tests/plugins/Dash/cardcreator/6.res.cardcreator (+126/-0) tests/plugins/Dash/cardcreator/7.res (+4/-6) tests/plugins/Dash/cardcreator/7.res.cardcreator (+149/-0) tests/plugins/Dash/cardcreator/8.res (+4/-6) tests/plugins/Dash/cardcreator/8.res.cardcreator (+107/-0) tests/plugins/Dash/cardcreator/9.res (+3/-5) tests/plugins/Dash/cardcreator/9.res.cardcreator (+118/-0) tests/plugins/Dash/cardcreatortest.cpp (+35/-25) tests/plugins/Dash/cardcreatortest.qml (+4/-4) tests/qmltests/Dash/CardHelpers.js (+5/-3) tests/qmltests/Dash/tst_Card.qml (+38/-3) tests/qmltests/Dash/tst_CardTool.qml (+4/-4)
To merge this branch:	bzr merge lp:~cimi/unity8/card-social
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Unity8 CI Bot	continuous-integration	2016-03-04	Needs Fixing on 2016-03-07
PS Jenkins bot	continuous-integration	2016-03-04	Pending
Albert Astals Cid		2016-03-04	Pending
Review via email: mp+288083@code.launchpad.net

This proposal supersedes a proposal from 2016-02-11.

This proposal has been superseded by a proposal from 2016-03-07.

Commit Message

Add social actions to cards

Description of the Change

* Are there any related MPs required for this MP to build/function as expected? Please list.
yes
https://code.launchpad.net/~stolowski/unity-scopes-shell/social-attributes/+merge/287808
https://code.launchpad.net/~stolowski/unity-api/social-attributes-role/+merge/287802
* Did you perform an exploratory manual test run of your code change and any related functionality?
will with silo, locally tested with mocks
* Did you make sure that your branch does not contain spurious tags?
y
* If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
ye
* If you changed the UI, has there been a design review?
y

Albert Astals Cid (aacid) wrote on 2016-02-11: Posted in a previous version of this proposal

columns: width > units.gu(12) ? 4 : 2

where does this units.gu(12) come from?

review: Needs Information

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-02-11: Posted in a previous version of this proposal

FAILED: Continuous integration, rev:2115
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/285769/+edit-commit-message

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-1-ci/332/rebuild

review: Needs Fixing (continuous-integration)

Andrea Cimitan (cimi) wrote on 2016-02-11: Posted in a previous version of this proposal

14 gu is a small card in CardTool, minus the 1gu*2 per side.... we want
just small cards to have 4 columns
> Review: Needs Information
>
> columns: width > units.gu(12) ? 4 : 2
>
> where does this units.gu(12) come from?

PS Jenkins bot (ps-jenkins) wrote on 2016-02-11: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/7267/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-02-16: Posted in a previous version of this proposal

FAILED: Continuous integration, rev:2116
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/285769/+edit-commit-message

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-1-ci/364/rebuild

review: Needs Fixing (continuous-integration)

PS Jenkins bot (ps-jenkins) wrote on 2016-02-16: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/7302/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-02-16: Posted in a previous version of this proposal

FAILED: Continuous integration, rev:2118
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/285769/+edit-commit-message

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-1-ci/365/rebuild

review: Needs Fixing (continuous-integration)

PS Jenkins bot (ps-jenkins) wrote on 2016-02-16: Posted in a previous version of this proposal

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/unity8-ci/7308/rebuild

review: Needs Fixing (continuous-integration)

Albert Astals Cid (aacid) wrote on 2016-02-22: Posted in a previous version of this proposal

Need commit message and description

review: Needs Fixing

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-02: Posted in a previous version of this proposal

FAILED: Continuous integration, rev:2119
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/285769/+edit-commit-message

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-1-ci/562/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-04: Posted in a previous version of this proposal

FAILED: Continuous integration, rev:2120
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/285769/+edit-commit-message

https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/589/
Executed test runs:
    None: https://unity8-jenkins.ubuntu.com/job/lp-generic-update-mp/686/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/782
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/798
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial/798

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/589/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-04: Posted in a previous version of this proposal

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/591/rebuild

review: Needs Fixing (continuous-integration)

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-04:

FAILED: Continuous integration, rev:2122
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~cimi/unity8/card-social/+merge/288083/+edit-commit-message

https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/593/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/786
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/802
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial/802
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/800/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial/800/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/800/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial/800/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/800/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial/800/console

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/593/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/card-social updated on 2016-03-04

2123. By Andrea Cimitan on 2016-03-04: bumped unity-scopes-impl dep

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-05:

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/602/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/card-social updated on 2016-03-07

2124. By Andrea Cimitan on 2016-03-07: Merge and fix cardCreator test
2125. By Andrea Cimitan on 2016-03-07: Forgot to add test file :)
2126. By Andrea Cimitan on 2016-03-07: merged trunk
2127. By Andrea Cimitan on 2016-03-07: Bumped deps requirements and fixed test

Unity8 CI Bot (unity8-ci-bot) wrote on 2016-03-07:

FAILED: Continuous integration, rev:2127
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/612/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/804
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/820
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial/820
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/818/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial/818/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/818/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial/818/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/818/console
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial/818/console

Click here to trigger a rebuild:
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/612/rebuild

review: Needs Fixing (continuous-integration)

lp:~cimi/unity8/card-social updated on 2016-05-04

2128. By Andrea Cimitan on 2016-03-07: Reworked one if/else
2129. By Andrea Cimitan on 2016-03-07: As review
2130. By Andrea Cimitan on 2016-03-07: Change mocks to be more generic
2131. By Andrea Cimitan on 2016-03-14: merge
2132. By Andrea Cimitan on 2016-03-21: Merges
2133. By Andrea Cimitan on 2016-04-01: Fix for review
2134. By Andrea Cimitan on 2016-04-06: as review
2135. By Andrea Cimitan on 2016-05-04: merged trunk
2136. By Andrea Cimitan on 2016-05-04: fixed card creator test

Unmerged revisions

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Andrea Cimitan

Mohammad Rakibul Hasan

Unity Team

 === modified file 'debian/control'
 --- debian/control	2016-02-19 12:42:44 +0000
 +++ debian/control	2016-03-07 13:12:28 +0000
@@ -29,7 +29,7 @@
                 libqt5xmlpatterns5-dev,
                 libsystemsettings-dev,
                 libudev-dev,
--               libunity-api-dev (>= 7.107),
++               libunity-api-dev (>= 7.108),
                 libusermetricsoutput1-dev,
  # Need those X11 libs touch emulation from mouse events in manual QML tests on a X11 desktop
                 libx11-dev[!armhf],
@@ -134,7 +134,7 @@
           unity-application-impl-13,
           unity-notifications-impl-3,
           unity-plugin-scopes | unity-scopes-impl,
--         unity-scopes-impl-10,
++         unity-scopes-impl-11,
           unity8-fake-env | unity-application-impl,
           ${misc:Depends},
  Breaks: unity8 (<< 7.86),
 === modified file 'plugins/Dash/CardCreator.js'
 --- plugins/Dash/CardCreator.js	2016-02-12 00:11:52 +0000
 +++ plugins/Dash/CardCreator.js	2016-03-07 13:12:28 +0000
@@ -18,12 +18,13 @@
  // %1 is the template["card-background"]["elements"][0]
  // %2 is the template["card-background"]["elements"][1]
--// %3 is the template["card-background"] string
++// %3 is whether the loader should be asynchronous or not
++// %4 is the template["card-background"] string
  var kBackgroundLoaderCode = 'Loader {\n\
                                  id: backgroundLoader; \n\
                                  objectName: "backgroundLoader"; \n\
                                  anchors.fill: parent; \n\
--                                asynchronous: root.asynchronous; \n\
++                                asynchronous: %3; \n\
                                  visible: status == Loader.Ready; \n\
                                  sourceComponent: UbuntuShape { \n\
                                      objectName: "background"; \n\
@@ -46,7 +47,7 @@
                                          objectName: "backgroundImage"; \n\
                                          source: { \n\
                                              if (cardData && typeof cardData["background"] === "string") return cardData["background"]; \n\
--                                            else return %3; \n\
++                                            else return %4; \n\
                                          } \n\
                                      } \n\
                                      function getColor(index) { \n\
@@ -63,8 +64,9 @@
  // %3 is used as image height
  // %4 is used for artShapeSource.hideSource and inner Loader visible
  // %5 is used as aspect ratio fallback
--// %6 is injected as code to artImage
--// %7 is used as image fallback
++// %6 is whether the loader should be asynchronous or not
++// %7 is injected as code to artImage
++// %8 is used as image fallback
  var kArtShapeHolderCode = 'Item { \n\
                              id: artShapeHolder; \n\
                              height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -73,9 +75,9 @@
                              Loader { \n\
                                  id: artShapeLoader; \n\
                                  objectName: "artShapeLoader"; \n\
--                                readonly property string cardArt: cardData && cardData["art"] || %7; \n\
++                                readonly property string cardArt: cardData && cardData["art"] || %8; \n\
                                  active: cardArt != ""; \n\
--                                asynchronous: root.asynchronous; \n\
++                                asynchronous: %6; \n\
                                  visible: status == Loader.Ready; \n\
                                  sourceComponent: Item { \n\
                                      id: artShape; \n\
@@ -132,10 +134,10 @@
                                          id: artImage; \n\
                                          objectName: "artImage"; \n\
                                          source: artShapeLoader.cardArt; \n\
--                                        asynchronous: root.asynchronous; \n\
++                                        asynchronous: %6; \n\
                                          width: %2; \n\
                                          height: %3; \n\
--                                        %6 \n\
++                                        %7 \n\
                                      } \n\
                                  } \n\
                              } \n\
@@ -187,12 +189,14 @@
                              } \n\
                          }';
++// %1 is whether the loader should be asynchronous or not
++// %2 is the header height code
  var kOverlayLoaderCode = 'Loader { \n\
                              id: overlayLoader; \n\
--                            readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2); \n\
++                            readonly property real overlayHeight: %2 + units.gu(2); \n\
                              anchors.fill: artShapeHolder; \n\
                              active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
--                            asynchronous: root.asynchronous; \n\
++                            asynchronous: %1; \n\
                              visible: showHeader && status == Loader.Ready; \n\
                              sourceComponent: UbuntuShapeOverlay { \n\
                                  id: overlay; \n\
@@ -211,17 +215,19 @@
                          objectName: "outerRow"; \n\
                          property real margins: units.gu(1); \n\
                          spacing: margins; \n\
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight; \n\
++                        %2\
                          anchors { %1 } \n\
                          anchors.right: parent.right; \n\
                          anchors.margins: margins; \n\
                          anchors.rightMargin: 0; \n\
                          data: [ \n\
--                                %2 \n\
++                                %3 \n\
                                  ] \n\
                      }\n';
      var args = Array.prototype.slice.call(arguments);
--    var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(args.join(',\n'));
++    var isCardTool = args.shift();
++    var heightCode = isCardTool ? "" : "height: root.fixedHeaderHeight; \n";
++    var code = kHeaderRowCodeTemplate.arg(args.shift()).arg(heightCode).arg(args.join(',\n'));
      return code;
+ }
@@ -242,10 +248,11 @@
+ }
  // %1 is used as anchors of mascotShapeLoader
++// %2 is whether the loader should be asynchronous or not
  var kMascotShapeLoaderCode = 'Loader { \n\
                                  id: mascotShapeLoader; \n\
                                  objectName: "mascotShapeLoader"; \n\
--                                asynchronous: root.asynchronous; \n\
++                                asynchronous: %2; \n\
                                  active: mascotImage.status === Image.Ready; \n\
                                  visible: showHeader && active && status == Loader.Ready; \n\
                                  width: units.gu(6); \n\
@@ -275,6 +282,7 @@
  // %2 is used as color of titleLabel
  // %3 is used as extra condition for visible of titleLabel
  // %4 is used as title width
++// %5 is used as horizontal alignment
  var kTitleLabelCode = 'Label { \n\
                          id: titleLabel; \n\
                          objectName: "titleLabel"; \n\
@@ -289,7 +297,7 @@
                          width: %4; \n\
                          text: root.title; \n\
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal; \n\
--                        horizontalAlignment: root.titleAlignment; \n\
++                        horizontalAlignment: %5; \n\
                      }\n';
  // %1 is used as extra anchors of emblemIcon
@@ -348,6 +356,17 @@
                              model: cardData && cardData["attributes"]; \n\
                            }\n';
++// %1 is used as anchors of socialActionsRow
++// %2 is used as color of socialActionsRow
++var kSocialActionsRowCode = 'CardSocialActions { \n\
++                               id: socialActionsRow; \n\
++                               objectName: "socialActionsRow"; \n\
++                               anchors { %1 } \n\
++                               color: %2; \n\
++                               model: cardData && cardData["socialActions"]; \n\
++                               onClicked: root.action(actionId); \n\
++                             }\n';
++
  // %1 is used as top anchor of summary
  // %2 is used as topMargin anchor of summary
  // %3 is used as color of summary
@@ -398,7 +417,7 @@
      return colorString;
+ }
--function cardString(template, components) {
++function cardString(template, components, isCardTool) {
      var code;
      var templateInteractive = (template == null ? true : (template["non-interactive"] !== undefined ? !template["non-interactive"] : true)) ? "true" : "false";
@@ -410,16 +429,16 @@
                  property string backgroundShapeStyle: "inset"; \n\
                  property real fontScale: 1.0; \n\
                  property var scopeStyle: null; \n\
--                property int titleAlignment: Text.AlignLeft; \n\
--                property int fixedHeaderHeight: -1; \n\
++                %2\
                  property size fixedArtShapeSize: Qt.size(-1, -1); \n\
                  readonly property string title: cardData && cardData["title"] || ""; \n\
--                property bool asynchronous: true; \n\
                  property bool showHeader: true; \n\
                  implicitWidth: childrenRect.width; \n\
                  enabled: %1; \n\
                  \n'.arg(templateInteractive);
++    code = code.arg(isCardTool ? "" : "property int fixedHeaderHeight: -1; \n");
++
      var hasArt = components["art"] && components["art"]["field"] || false;
      var hasSummary = components["summary"] || false;
      var isConciergeMode = components["art"] && components["art"]["conciergeMode"] || false;
@@ -434,8 +453,11 @@
      var hasSubtitle = hasTitle && components["subtitle"] || false;
      var hasHeaderRow = hasMascot && hasTitle;
      var hasAttributes = hasTitle && components["attributes"] && components["attributes"]["field"] || false;
++    var hasSocialActions = hasTitle && components["socialActions"] || false;
      var isAudio = template["quick-preview-type"] === "audio";
++    var asynchronous = isCardTool ? "false" : "true";
++    code += 'signal action(var actionId);\n';
      if (isAudio) {
          // For now we only support audio cards with [optional] art, title, subtitle
          // in horizontal mode
@@ -468,7 +490,7 @@
                  backgroundElements1 = '"%1"'.arg(element1);
+             }
+         }
--        code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(templateCardBackground);
++        code += kBackgroundLoaderCode.arg(backgroundElements0).arg(backgroundElements1).arg(asynchronous).arg(templateCardBackground);
+     }
      if (hasArt) {
@@ -497,23 +519,31 @@
          if (isNaN(aspectRatio)) {
              aspectRatio = 1;
+         }
--        var fallback = components["art"] && components["art"]["fallback"] || "";
++        var fallback = !isCardTool && components["art"] && components["art"]["fallback"] || "";
          fallback = encodeURI(fallback);
          var fallbackStatusCode = "";
          var fallbackURICode = '""';
          if (fallback !== "") {
              // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
--            // which in kArtShapeHolderCode is %7
--            fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %7;';
++            // which in kArtShapeHolderCode is %8
++            fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %8;';
              fallbackURICode = 'decodeURI("%1")'.arg(fallback);
+         }
--        code += kArtShapeHolderCode.arg(artAnchors).arg(widthCode).arg(heightCode).arg(isConciergeMode ? "false" : "true").arg(aspectRatio).arg(fallbackStatusCode).arg(fallbackURICode);
++        code += kArtShapeHolderCode.arg(artAnchors)
++                                   .arg(widthCode)
++                                   .arg(heightCode)
++                                   .arg(isConciergeMode ? "false" : "true")
++                                   .arg(aspectRatio)
++                                   .arg(asynchronous)
++                                   .arg(fallbackStatusCode)
++                                   .arg(fallbackURICode);
      } else {
          code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
+     }
      if (headerAsOverlay) {
--        code += kOverlayLoaderCode;
++        var headerHeightCode = isCardTool ? "headerHeight" : "root.fixedHeaderHeight";
++        code += kOverlayLoaderCode.arg(asynchronous).arg(headerHeightCode);
+     }
      var headerVerticalAnchors;
@@ -595,11 +625,11 @@
+         }
          if (useMascotShape) {
--            mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors);
++            mascotShapeCode = kMascotShapeLoaderCode.arg(mascotAnchors).arg(asynchronous);
+         }
          var mascotImageVisible = useMascotShape ? 'false' : 'showHeader';
--        var fallback = components["mascot"] && components["mascot"]["fallback"] || "";
++        var fallback = !isCardTool && components["mascot"] && components["mascot"]["fallback"] || "";
          fallback = encodeURI(fallback);
          var fallbackStatusCode = "";
          var fallbackURICode = '""';
@@ -715,9 +745,24 @@
+             }
+         }
++        var titleAlignment = "Text.AlignHCenter";
++        if (template["card-layout"] === "horizontal"
++            || typeof components["title"] !== "object"
++            || components["title"]["align"] === "left") titleAlignment = "Text.AlignLeft";
++        var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
++        for (var key in keys) {
++            key = keys[key];
++            try {
++                if (typeof components[key] === "string"
++                    || typeof components[key]["field"] === "string") titleAlignment = "Text.AlignLeft";
++            } catch (e) {
++                continue;
++            }
++        }
++
          // code for different elements
          var titleLabelVisibleExtra = (headerAsOverlay ? '&& overlayLoader.active': '');
--        var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth);
++        var titleCode = kTitleLabelCode.arg(titleAnchors).arg(titleColor).arg(titleLabelVisibleExtra).arg(titleWidth).arg(titleAlignment);
          var subtitleCode;
          var attributesCode;
@@ -759,7 +804,7 @@
          if (mascotShapeCode != '') {
             rowCode.unshift(mascotShapeCode);
+         }
--        code += kHeaderRowCodeGenerator(headerVerticalAnchors + headerLeftAnchor, rowCode)
++        code += kHeaderRowCodeGenerator(isCardTool, headerVerticalAnchors + headerLeftAnchor, rowCode)
      } else {
          code += mascotShapeCode + mascotCode + titleSubtitleCode;
+     }
@@ -783,7 +828,8 @@
          } else {
              audioButtonAnchorsFill = 'undefined';
              audioButtonWidth = 'height';
--            audioButtonHeight = '(root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1)';
++            audioButtonHeight = isCardTool ? 'headerHeight + 2 * units.gu(1)'
++                                           : 'root.fixedHeaderHeight + 2 * units.gu(1)';
+         }
          code += kAudioButtonCode.arg(audioButtonAnchorsFill).arg(audioButtonWidth).arg(audioButtonHeight);
+     }
@@ -813,6 +859,36 @@
          code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
+     }
++    if (hasSocialActions) {
++        var socialAnchors;
++        var socialTopAnchor;
++
++        if (hasSummary) {
++            socialTopAnchor = 'summary.bottom;';
++        } else {
++            if (isHorizontal && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
++            else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
++            else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
++            else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
++            else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
++            else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
++            else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
++            else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
++            else if (hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
++            else socialTopAnchor = 'parent.top';
++        }
++        socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
++
++        var socialColor;
++        if (hasBackground) {
++            socialColor = summaryColorWithBackground;
++        } else {
++            socialColor = 'root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText';
++        }
++
++        code += kSocialActionsRowCode.arg(socialAnchors).arg(socialColor);
++    }
++
      var touchdownAnchors;
      if (hasBackground) {
          touchdownAnchors = 'fill: backgroundLoader';
@@ -824,7 +900,9 @@
      code += kTouchdownCode.arg(touchdownAnchors);
      var implicitHeight = 'implicitHeight: ';
--    if (hasSummary) {
++    if (hasSocialActions) {
++        implicitHeight += 'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
++    } else if (hasSummary) {
          implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
      } else if (isAudio) {
          implicitHeight += 'audioButton.height;\n';
@@ -854,13 +932,13 @@
      return code;
+ }
--function createCardComponent(parent, template, components, identifier) {
++function createCardComponent(parent, template, components, isCardTool, identifier) {
      var imports = 'import QtQuick 2.4; \n\
                     import Ubuntu.Components 1.3; \n\
                     import Ubuntu.Settings.Components 0.1; \n\
                     import Dash 0.1;\n\
                     import Utils 0.1;\n';
--    var card = cardString(template, components);
++    var card = cardString(template, components, isCardTool);
      var code = imports + 'Component {\n' + card + '}\n';
      try {
 === modified file 'plugins/Dash/CardCreatorCache.qml'
 --- plugins/Dash/CardCreatorCache.qml	2016-01-21 17:56:08 +0000
 +++ plugins/Dash/CardCreatorCache.qml	2016-03-07 13:12:28 +0000
@@ -23,16 +23,16 @@
      property var cache: new Object();
--    function getCardComponent(template, components) {
++    function getCardComponent(template, components, isCardTool) {
          if (template === undefined || components === undefined)
              return undefined;
          var tString = JSON.stringify(template);
          var cString = JSON.stringify(components);
--        var allString = tString + cString;
++        var allString = tString + cString + isCardTool;
          var component = cache[allString];
          if (component === undefined) {
--            component = CardCreator.createCardComponent(root, template, components, allString);
++            component = CardCreator.createCardComponent(root, template, components, isCardTool, allString);
              cache[allString] = component;
+         }
          return component;
 === added file 'plugins/Dash/CardSocialActions.qml'
 --- plugins/Dash/CardSocialActions.qml	1970-01-01 00:00:00 +0000
 +++ plugins/Dash/CardSocialActions.qml	2016-03-07 13:12:28 +0000
@@ -0,0 +1,86 @@
++/*
++ * Copyright 2016 Canonical Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU General Public License for more details.
++ *
++ * You should have received a copy of the GNU General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.4
++import QtQuick.Layouts 1.1
++import Ubuntu.Components 1.3
++import "../../../qml/Components/ListItems" as ListItems
++
++Column {
++    id: socialActions
++    spacing: units.gu(0.5)
++
++    property alias model: repeater.model
++    property color color: theme.palette.normal.baseText
++
++    signal clicked(var actionId)
++
++    ListItems.ThinDivider {
++        id: divider
++        visible: repeater.count > 0
++        anchors { left: parent.left; right: parent.right; }
++    }
++
++    Row {
++        id: row
++        anchors {
++            left: parent.left
++            right: parent.right
++            leftMargin: units.gu(1)
++            rightMargin: units.gu(1)
++        }
++        spacing: units.gu(2)
++        readonly property int visibleItems: {
++            if (width <= units.gu(12)) // small card
++                return 2;
++            else if (width <= units.gu(21)) // medium card
++                return 3;
++            else // large or horizontal card
++                return 4;
++        }
++
++        Repeater {
++            id: repeater
++            delegate: Loader {
++                height: units.gu(2)
++                active: index < row.visibleItems
++                sourceComponent: AbstractButton {
++                    objectName: "delegate" + index
++                    height: units.gu(2)
++                    width: icon.width
++                    Icon {
++                        id: icon
++                        objectName: "icon"
++
++                        readonly property url urlIcon: modelData && modelData["icon"] || ""
++                        readonly property url urlTemporaryIcon: "temporaryIcon" in modelData && modelData["temporaryIcon"] || ""
++
++                        height: units.gu(2)
++                        // FIXME Workaround for bug https://bugs.launchpad.net/ubuntu/+source/ubuntu-ui-toolkit/+bug/1421293
++                        width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth
++                        source: urlIcon
++                        color: socialActions.color
++
++                        onUrlIconChanged: if (urlIcon) source = urlIcon
++                    }
++
++                    onClicked: socialActions.clicked(modelData["id"]);
++                    onPressedChanged: if (pressed && icon.urlTemporaryIcon != "") icon.source = icon.urlTemporaryIcon
++                }
++            }
++        }
++    }
++}
 === modified file 'plugins/Dash/qmldir'
 --- plugins/Dash/qmldir	2015-05-18 22:17:21 +0000
 +++ plugins/Dash/qmldir	2016-03-07 13:12:28 +0000
@@ -5,6 +5,7 @@
  singleton DashAudioPlayer 0.1 DashAudioPlayer.qml
  ScopeStyle 0.1 ScopeStyle.qml
  CardAttributes 0.1 CardAttributes.qml
++CardSocialActions 0.1 CardSocialActions.qml
  CroppedImageMinimumSourceSize 0.1 CroppedImageMinimumSourceSize.qml
  AudioProgressBar 0.1 AudioProgressBar.qml
  CardAudioProgress 0.1 CardAudioProgress.qml
 === modified file 'qml/Dash/CardCarousel.qml'
 --- qml/Dash/CardCarousel.qml	2016-01-28 14:11:14 +0000
 +++ qml/Dash/CardCarousel.qml	2016-03-07 13:12:28 +0000
@@ -66,7 +66,6 @@
                  item.cardData = Qt.binding(function() { return model; });
                  item.fontScale = Qt.binding(function() { return carousel.fontScale; });
                  item.showHeader = Qt.binding(function() { return loader.explicitlyScaled; });
--                item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
                  item.artShapeStyle = "shadow";
                  item.scopeStyle = cardCarousel.scopeStyle;
+             }
 === modified file 'qml/Dash/CardGrid.qml'
 --- qml/Dash/CardGrid.qml	2016-02-02 08:47:07 +0000
 +++ qml/Dash/CardGrid.qml	2016-03-07 13:12:28 +0000
@@ -70,7 +70,6 @@
                      item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
                      item.fixedArtShapeSize = Qt.binding(function() { return cardTool.artShapeSize; });
                      item.cardData = Qt.binding(function() { return model; });
--                    item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
                      item.scopeStyle = root.scopeStyle;
                      item.artShapeStyle = root.artShapeStyle;
                      item.backgroundShapeStyle = root.backgroundShapeStyle;
@@ -79,6 +78,7 @@
                      target: loader.item
                      onClicked: root.clicked(index, result, loader.item, model)
                      onPressAndHold: root.pressAndHold(index, result, model)
++                    onAction: root.action(index, result, actionId)
+                 }
+             }
+         }
 === modified file 'qml/Dash/CardHorizontalList.qml'
 --- qml/Dash/CardHorizontalList.qml	2016-01-28 14:11:14 +0000
 +++ qml/Dash/CardHorizontalList.qml	2016-03-07 13:12:28 +0000
@@ -53,13 +53,13 @@
                  item.fixedArtShapeSize = Qt.binding(function() { return cardTool.artShapeSize; });
                  item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
                  item.cardData = Qt.binding(function() { return model; });
--                item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
                  item.scopeStyle = root.scopeStyle;
+             }
              Connections {
                  target: loader.item
                  onClicked: root.clicked(index, result, loader.item, model)
                  onPressAndHold: root.pressAndHold(index, result, model)
++                onAction: root.action(index, result, actionId)
+             }
+         }
+     }
 === modified file 'qml/Dash/CardTool.qml'
 --- qml/Dash/CardTool.qml	2016-01-28 14:11:14 +0000
 +++ qml/Dash/CardTool.qml	2016-03-07 13:12:28 +0000
@@ -66,7 +66,7 @@
          return layout;
+     }
--    property var cardComponent: CardCreatorCache.getCardComponent(cardTool.template, cardTool.components);
++    property var cardComponent: CardCreatorCache.getCardComponent(cardTool.template, cardTool.components, false);
      // FIXME: Saviq
      // Only way for the card below to actually be laid out completely.
@@ -139,29 +139,6 @@
      readonly property int headerHeight: cardLoader.item ? cardLoader.item.headerHeight : 0
      property size artShapeSize: cardLoader.item ? cardLoader.item.artShapeSize : 0
--    /*!
--     \brief Desired alignment of title
--     */
--    readonly property int titleAlignment: {
--        if (template["card-layout"] === "horizontal"
--            || typeof components["title"] !== "object"
--            || components["title"]["align"] === "left") return Text.AlignLeft;
--
--        var keys = ["mascot", "emblem", "subtitle", "attributes", "summary"];
--
--        for (var key in keys) {
--            key = keys[key];
--            try {
--                if (typeof components[key] === "string"
--                    || typeof components[key]["field"] === "string") return Text.AlignLeft;
--            } catch (e) {
--                continue;
--            }
--        }
--
--        return Text.AlignHCenter;
--    }
--
      QtObject {
          id: carouselTool
@@ -205,21 +182,45 @@
+         }
+     }
++    Item {
++        id: socialActionsModel
++        property int numOfActions: 0
++        property var model: []
++        property bool hasActions: {
++            var actions = components["socialActions"];
++            var hasActionsFlag = (actions != undefined);
++
++            if (hasActionsFlag) {
++                if (actions["max-count"]) {
++                    numOfActions = actions["max-count"];
++                }
++            }
++            return hasActionsFlag
++        }
++
++        onNumOfActionsChanged: {
++            model = []
++            for (var i = 0; i < numOfActions; i++) {
++                model.push( {"id":"text"+(i+1), "icon":"image://theme/ok" } );
++            }
++        }
++    }
++
      Loader {
          id: cardLoader
--        readonly property var fields: ["art", "mascot", "title", "subtitle", "summary", "attributes"]
++        readonly property var fields: ["art", "mascot", "title", "subtitle", "summary", "attributes", "socialActions"]
          readonly property var maxData: {
              "art": Qt.resolvedUrl("graphics/pixel.png"),
              "mascot": Qt.resolvedUrl("graphics/pixel.png"),
              "title": "—\n—",
              "subtitle": "—",
              "summary": "—\n—\n—\n—\n—",
--            "attributes": attributesModel.model
++            "attributes": attributesModel.model,
++            "socialActions": socialActionsModel.model
+         }
--        sourceComponent: cardTool.cardComponent
++        sourceComponent: CardCreatorCache.getCardComponent(cardTool.template, cardTool.components, true);
          onLoaded: {
              item.objectName = "cardToolCard";
--            item.asynchronous = false;
              item.width = Qt.binding(function() { return cardTool.cardWidth !== -1 ? cardTool.cardWidth : item.implicitWidth; });
              item.height = Qt.binding(function() { return cardTool.cardHeight !== -1 ? cardTool.cardHeight : item.implicitHeight; });
+         }
 === modified file 'qml/Dash/CardVerticalJournal.qml'
 --- qml/Dash/CardVerticalJournal.qml	2016-01-28 14:11:14 +0000
 +++ qml/Dash/CardVerticalJournal.qml	2016-03-07 13:12:28 +0000
@@ -72,13 +72,13 @@
                  item.fixedArtShapeSize = Qt.binding(function() { return cardTool.artShapeSize; });
                  item.fixedHeaderHeight = Qt.binding(function() { return cardTool.headerHeight; });
                  item.cardData = Qt.binding(function() { return model; });
--                item.titleAlignment = Qt.binding(function() { return cardTool.titleAlignment; });
                  item.scopeStyle = root.scopeStyle;
+             }
              Connections {
                  target: loader.item
                  onClicked: root.clicked(index, result, loader.item, model)
                  onPressAndHold: root.pressAndHold(index, result, model)
++                onAction: root.action(index, result, actionId)
+             }
+         }
+     }
 === modified file 'qml/Dash/DashRenderer.qml'
 --- qml/Dash/DashRenderer.qml	2015-07-15 15:07:19 +0000
 +++ qml/Dash/DashRenderer.qml	2016-03-07 13:12:28 +0000
@@ -57,4 +57,10 @@
      /// @param result result model of the clicked item, used for activation
      /// @param itemModel model of the item
      signal pressAndHold(int index, var result, var itemModel)
++
++    /// Emitted when the user clicked on an item action
++    /// @param index is the index of the clicked item
++    /// @param result result model of the clicked item, used for activation
++    /// @param actionId id of the clicked action
++    signal action(int index, var result, var actionId)
+ }
 === modified file 'qml/Dash/GenericScopeView.qml'
 --- qml/Dash/GenericScopeView.qml	2016-02-19 11:50:12 +0000
 +++ qml/Dash/GenericScopeView.qml	2016-03-07 13:12:28 +0000
@@ -385,6 +385,10 @@
                          scopeView.itemPressedAndHeld(result, baseItem.category);
+                     }
++                    onAction: { // (int index, var result, var actionId)
++                        scope.activateAction(result, baseitem.categoryId, actionId);
++                    }
++
                      function categoryItemCount() {
                          var categoryItemCount = -1;
                          if (!rendererLoader.expanded && !seeAllLabel.visible && target.collapsedItemCount > 0) {
 === modified file 'tests/mocks/Unity/CMakeLists.txt'
 --- tests/mocks/Unity/CMakeLists.txt	2016-02-19 12:42:44 +0000
 +++ tests/mocks/Unity/CMakeLists.txt	2016-03-07 13:12:28 +0000
@@ -8,7 +8,7 @@
  add_subdirectory(Screens)
  pkg_search_module(GOBJECT gobject-2.0 REQUIRED)
--pkg_check_modules(SCOPES_API REQUIRED unity-shell-scopes=10)
++pkg_check_modules(SCOPES_API REQUIRED unity-shell-scopes=11)
  include_directories(
    ${CMAKE_CURRENT_BINARY_DIR}
 === modified file 'tests/mocks/Unity/fake_categories.cpp'
 --- tests/mocks/Unity/fake_categories.cpp	2016-01-14 09:26:28 +0000
 +++ tests/mocks/Unity/fake_categories.cpp	2016-03-07 13:12:28 +0000
@@ -88,7 +88,7 @@
+         }
          case RoleComponents:
+         {
--            QVariantMap map, artMap, attributeMap;
++            QVariantMap map, artMap, attributeMap, socialActionMap;
              if (index.row() % 2 != 0) {
                  artMap["aspect-ratio"] = QString("1.%1").arg(index.row());
              } else {
@@ -99,6 +99,9 @@
              map["title"] = "HOLA";
              map["subtitle"] = "HOLA";
              attributeMap["field"] = "attribute";
++            socialActionMap["icon"] = "image://theme/cancel";
++            socialActionMap["id"] = "dislike";
++            map["socialActions"] = socialActionMap;
              map["attributes"] = attributeMap;
              return map;
+         }
 === modified file 'tests/mocks/Unity/fake_resultsmodel.cpp'
 --- tests/mocks/Unity/fake_resultsmodel.cpp	2015-11-23 15:41:34 +0000
 +++ tests/mocks/Unity/fake_resultsmodel.cpp	2016-03-07 13:12:28 +0000
@@ -72,6 +72,8 @@
          case RoleUri:
          case RoleCategoryId:
          case RoleDndUri:
++        case RoleAttributes:
++        case RoleSocialActions:
              return QString();
          case RoleResult:
              return QString("Result.%1.%2").arg(m_categoryId).arg(index.row());
 === modified file 'tests/plugins/Dash/cardcreator/1.res'
 --- tests/plugins/Dash/cardcreator/1.res	2016-02-11 13:13:31 +0000
 +++ tests/plugins/Dash/cardcreator/1.res	2016-03-07 13:12:28 +0000
@@ -5,15 +5,13 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
--                property bool showHeader: true;
++                property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
  Item  {
                              id: artShapeHolder;
@@ -25,7 +23,7 @@
                                  objectName: "artShapeLoader";
                                  readonly property string cardArt: cardData && cardData["art"] || "";
                                  active: cardArt != "";
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: Item {
                                      id: artShape;
@@ -82,7 +80,7 @@
                                          id: artImage;
                                          objectName: "artImage";
                                          source: artShapeLoader.cardArt;
--                                        asynchronous: root.asynchronous;
++                                        asynchronous: true;
                                          width: root.width;
                                          height: width / artShape.aspect;
+                                     }
@@ -108,7 +106,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignHCenter;
+                     }
  UbuntuShape {
      id: touchdown;
 === added file 'tests/plugins/Dash/cardcreator/1.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/1.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/1.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,119 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item  {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: true;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: true;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 1.6;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: false;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++readonly property int headerHeight: titleLabel.height;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        left: parent.left;
++                        top: artShapeHolder.bottom;
++                        topMargin: units.gu(1);
++                        }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignHCenter;
++                    }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: artShapeHolder }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: titleLabel.y + titleLabel.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/10.res'
 --- tests/plugins/Dash/cardcreator/10.res	2016-02-02 08:47:07 +0000
 +++ tests/plugins/Dash/cardcreator/10.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -59,7 +57,7 @@
                          objectName: "outerRow";
                          property real margins: units.gu(1);
                          spacing: margins;
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                        height: root.fixedHeaderHeight;
                          anchors { top: parent.top;
                                       topMargin: units.gu(1);
  left: parent.left;
@@ -103,7 +101,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  ,Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/10.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/10.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/10.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,137 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return "";
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? "" : "";
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: row.height;
++Row {
++                        id: row;
++                        objectName: "outerRow";
++                        property real margins: units.gu(1);
++                        spacing: margins;
++                        anchors { top: parent.top;
++                                     topMargin: units.gu(1);
++left: parent.left;
++ }
++                        anchors.right: parent.right;
++                        anchors.margins: margins;
++                        anchors.rightMargin: 0;
++                        data: [
++                                CroppedImageMinimumSourceSize {
++                            id: mascotImage;
++                            objectName: "mascotImage";
++                            anchors { verticalCenter: parent.verticalCenter; }
++                            source: cardData && cardData["mascot"] || "";
++                            width: units.gu(6);
++                            height: units.gu(5.625);
++                            horizontalAlignment: Image.AlignHCenter;
++                            verticalAlignment: Image.AlignVCenter;
++                            visible: showHeader;
++
++                        }
++,Item {
++                            id: headerTitleContainer;
++                            anchors { verticalCenter: parent.verticalCenter;  }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height;
++                            data: [
++                                Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++rightMargin: units.gu(1);
++left: parent.left;
++                             top: parent.top; }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++,Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { right: parent.right;
++                               left: parent.left;
++rightMargin: units.gu(1);
++top: titleLabel.bottom;
++ }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++
++                            ]
++                        }
++
++                                ]
++                    }
++UbuntuShape {
++                        id: touchdown;
++                        objectName: "touchdown";
++                        anchors { fill: backgroundLoader }
++                        visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++                        radius: "medium";
++                        borderSource: "radius_pressed.sci"
++                    }
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/11.res'
 --- tests/plugins/Dash/cardcreator/11.res	2016-02-11 13:13:31 +0000
 +++ tests/plugins/Dash/cardcreator/11.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -63,7 +61,7 @@
                                  objectName: "artShapeLoader";
                                  readonly property string cardArt: cardData && cardData["art"] || decodeURI("%5C");
                                  active: cardArt != "";
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: Item {
                                      id: artShape;
@@ -120,7 +118,7 @@
                                          id: artImage;
                                          objectName: "artImage";
                                          source: artShapeLoader.cardArt;
--                                        asynchronous: root.asynchronous;
++                                        asynchronous: true;
                                          width: root.width;
                                          height: width / artShape.aspect;
                                          onStatusChanged: if (status === Image.Error) source = decodeURI("%5C");
@@ -134,7 +132,7 @@
                          objectName: "outerRow";
                          property real margins: units.gu(1);
                          spacing: margins;
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                        height: root.fixedHeaderHeight;
                          anchors { top: artShapeHolder.bottom;
                                           topMargin: units.gu(1);
  left: parent.left;
@@ -178,7 +176,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  ,Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/11.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/11.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/11.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,210 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return "";
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? "#E9E9E9" : undefined;
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: true;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: true;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 1;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: false;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++readonly property int headerHeight: row.height;
++Row {
++                        id: row;
++                        objectName: "outerRow";
++                        property real margins: units.gu(1);
++                        spacing: margins;
++                        anchors { top: artShapeHolder.bottom;
++                                         topMargin: units.gu(1);
++left: parent.left;
++ }
++                        anchors.right: parent.right;
++                        anchors.margins: margins;
++                        anchors.rightMargin: 0;
++                        data: [
++                                CroppedImageMinimumSourceSize {
++                            id: mascotImage;
++                            objectName: "mascotImage";
++                            anchors { verticalCenter: parent.verticalCenter; }
++                            source: cardData && cardData["mascot"] || "";
++                            width: units.gu(6);
++                            height: units.gu(5.625);
++                            horizontalAlignment: Image.AlignHCenter;
++                            verticalAlignment: Image.AlignVCenter;
++                            visible: showHeader;
++                        }
++,Item {
++                            id: headerTitleContainer;
++                            anchors { verticalCenter: parent.verticalCenter;  }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height;
++                            data: [
++                                Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++rightMargin: units.gu(1);
++left: parent.left;
++                             top: parent.top; }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++,Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { right: parent.right;
++                               left: parent.left;
++rightMargin: units.gu(1);
++top: titleLabel.bottom;
++ }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++
++                            ]
++                        }
++
++                                ]
++                    }
++UbuntuShape {
++                        id: touchdown;
++                        objectName: "touchdown";
++                        anchors { fill: backgroundLoader }
++                        visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++                        radius: "medium";
++                        borderSource: "radius_pressed.sci"
++                    }
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === added file 'tests/plugins/Dash/cardcreator/12.res'
 --- tests/plugins/Dash/cardcreator/12.res	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/12.res	2016-03-07 13:12:28 +0000
@@ -0,0 +1,146 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property int fixedHeaderHeight: -1;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item  {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: true;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: true;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: true;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 0.75;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: true;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        left: parent.left;
++                        top: artShapeHolder.bottom;
++                        topMargin: units.gu(1);
++                        }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { left: titleLabel.left;
++                            leftMargin: titleLabel.leftMargin;
++                            right: titleLabel.right;
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++CardSocialActions {
++    id: socialActionsRow;
++    objectName: "socialActionsRow";
++    anchors { top: subtitleLabel.bottom; left: parent.left; right: parent.right; topMargin: units.gu(1); }
++    color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++    model: cardData && cardData["socialActions"];
++    onClicked: root.action(actionId);
++}
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: artShapeHolder }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: socialActionsRow.y + socialActionsRow.height + units.gu(1);
++}
 === added file 'tests/plugins/Dash/cardcreator/12.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/12.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/12.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,145 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item  {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: true;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: true;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 0.75;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: false;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        left: parent.left;
++                        top: artShapeHolder.bottom;
++                        topMargin: units.gu(1);
++                        }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { left: titleLabel.left;
++                            leftMargin: titleLabel.leftMargin;
++                            right: titleLabel.right;
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++CardSocialActions {
++    id: socialActionsRow;
++    objectName: "socialActionsRow";
++    anchors { top: subtitleLabel.bottom; left: parent.left; right: parent.right; topMargin: units.gu(1); }
++    color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++    model: cardData && cardData["socialActions"];
++    onClicked: root.action(actionId);
++}
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: artShapeHolder }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: socialActionsRow.y + socialActionsRow.height + units.gu(1);
++}
 === added file 'tests/plugins/Dash/cardcreator/12.tst'
 --- tests/plugins/Dash/cardcreator/12.tst	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/12.tst	2016-03-07 13:12:28 +0000
@@ -0,0 +1,3 @@
++template: {"card-layout":"vertical","card-size":"small","category-layout":"grid","collapsed-rows":2}
++components: {"art":{"aspect-ratio":0.75,"field":"art"},"subtitle":{"field":"price"},"title":{"field":"title"},"attributes":{},"socialActions":[{"id":"like","label":"text1","icon":"image://theme/ok","temporaryIcon":"image://theme/undo"},{"id":"share","label":"text2","icon":"image://theme/cancel"}]}
++result: 12.res
 === modified file 'tests/plugins/Dash/cardcreator/2.res'
 --- tests/plugins/Dash/cardcreator/2.res	2016-01-28 14:11:14 +0000
 +++ tests/plugins/Dash/cardcreator/2.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -59,7 +57,7 @@
                          objectName: "outerRow";
                          property real margins: units.gu(1);
                          spacing: margins;
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                        height: root.fixedHeaderHeight;
                          anchors { top: parent.top;
                          topMargin: units.gu(1);
                          left: parent.left;
@@ -102,7 +100,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
                                      ,Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/2.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/2.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/2.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,136 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return "";
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? "#E9E9E9" : undefined;
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: row.height;
++Row {
++                        id: row;
++                        objectName: "outerRow";
++                        property real margins: units.gu(1);
++                        spacing: margins;
++                        anchors { top: parent.top;
++                        topMargin: units.gu(1);
++                        left: parent.left;
++                        }
++                        anchors.right: parent.right;
++                        anchors.margins: margins;
++                        anchors.rightMargin: 0;
++                        data: [
++CroppedImageMinimumSourceSize {
++                            id: mascotImage;
++                            objectName: "mascotImage";
++                            anchors { verticalCenter: parent.verticalCenter; }
++                            source: cardData && cardData["mascot"] || "";
++                            width: units.gu(6);
++                            height: units.gu(5.625);
++                            horizontalAlignment: Image.AlignHCenter;
++                            verticalAlignment: Image.AlignVCenter;
++                            visible: showHeader;
++                        }
++,Item {
++                            id: headerTitleContainer;
++                            anchors { verticalCenter: parent.verticalCenter;  }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height;
++                            data: [
++                                Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        rightMargin: units.gu(1);
++                        left: parent.left;
++                        top: parent.top; }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++                                    ,Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { right: parent.right;
++                            left: parent.left;
++                            rightMargin: units.gu(1);
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++
++                                  ]
++                        }
++
++                                ]
++                    }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: backgroundLoader }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/3.res'
 --- tests/plugins/Dash/cardcreator/3.res	2016-02-11 13:13:31 +0000
 +++ tests/plugins/Dash/cardcreator/3.res	2016-03-07 13:12:28 +0000
@@ -5,15 +5,13 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
  Item  {
                              id: artShapeHolder;
@@ -25,7 +23,7 @@
                                  objectName: "artShapeLoader";
                                  readonly property string cardArt: cardData && cardData["art"] || decodeURI("IHAVE%5C%22ESCAPED%5C%22QUOTES%5C%22");
                                  active: cardArt != "";
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: Item {
                                      id: artShape;
@@ -82,7 +80,7 @@
                                          id: artImage;
                                          objectName: "artImage";
                                          source: artShapeLoader.cardArt;
--                                        asynchronous: root.asynchronous;
++                                        asynchronous: true;
                                          width: root.width;
                                          height: width / artShape.aspect;
                                          onStatusChanged: if (status === Image.Error) source = decodeURI("IHAVE%5C%22ESCAPED%5C%22QUOTES%5C%22");
@@ -109,7 +107,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/3.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/3.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/3.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,137 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item  {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: true;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: true;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 0.75;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: false;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        left: parent.left;
++                        top: artShapeHolder.bottom;
++                        topMargin: units.gu(1);
++                        }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { left: titleLabel.left;
++                            leftMargin: titleLabel.leftMargin;
++                            right: titleLabel.right;
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: artShapeHolder }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: subtitleLabel.y + subtitleLabel.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/4.res'
 --- tests/plugins/Dash/cardcreator/4.res	2016-01-28 14:11:14 +0000
 +++ tests/plugins/Dash/cardcreator/4.res	2016-03-07 13:12:28 +0000
@@ -5,15 +5,13 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  readonly property size artShapeSize: Qt.size(-1, -1);
  readonly property int headerHeight: row.height;
  Row {
@@ -21,7 +19,7 @@
                      objectName: "outerRow";
                      property real margins: units.gu(1);
                      spacing: margins;
--                    height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                    height: root.fixedHeaderHeight;
                      anchors { top: parent.top;
                                       topMargin: units.gu(1);
                      left: parent.left;
@@ -33,7 +31,7 @@
  Loader {
                          id: mascotShapeLoader;
                          objectName: "mascotShapeLoader";
--                        asynchronous: root.asynchronous;
++                        asynchronous: true;
                          active: mascotImage.status === Image.Ready;
                          visible: showHeader && active && status == Loader.Ready;
                          width: units.gu(6);
@@ -77,7 +75,7 @@
                      width: undefined;
                      text: root.title;
                      font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                    horizontalAlignment: root.titleAlignment;
++                    horizontalAlignment: Text.AlignLeft;
+                 }
  ,Label {
                          id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/4.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/4.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/4.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,109 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: row.height;
++Row {
++                    id: row;
++                    objectName: "outerRow";
++                    property real margins: units.gu(1);
++                    spacing: margins;
++                    anchors { top: parent.top;
++                                     topMargin: units.gu(1);
++                    left: parent.left;
++}
++                    anchors.right: parent.right;
++                    anchors.margins: margins;
++                    anchors.rightMargin: 0;
++data: [
++Loader {
++                        id: mascotShapeLoader;
++                        objectName: "mascotShapeLoader";
++                        asynchronous: false;
++                        active: mascotImage.status === Image.Ready;
++                        visible: showHeader && active && status == Loader.Ready;
++                        width: units.gu(6);
++                        height: units.gu(5.625);
++                        sourceComponent: UbuntuShape { image: mascotImage }
++                        anchors { verticalCenter: parent.verticalCenter; }
++                    }
++
++,CroppedImageMinimumSourceSize {
++                    id: mascotImage;
++                    objectName: "mascotImage";
++                    anchors { verticalCenter: parent.verticalCenter; }
++                    source: cardData && cardData["mascot"] || "";
++                    width: units.gu(6);
++                    height: units.gu(5.625);
++                    horizontalAlignment: Image.AlignHCenter;
++                    verticalAlignment: Image.AlignVCenter;
++                    visible: false;
++                }
++
++,Item {
++                            id: headerTitleContainer;
++                            anchors { verticalCenter: parent.verticalCenter;  }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height;
++                            data: [
++Label {
++                    id: titleLabel;
++                    objectName: "titleLabel";
++                    anchors { right: parent.right;
++                    rightMargin: units.gu(1);
++                    left: parent.left;
++                    top: parent.top; }
++                    elide: Text.ElideRight;
++                    fontSize: "small";
++                    wrapMode: Text.Wrap;
++                    maximumLineCount: 2;
++                    font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                    color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                    visible: showHeader ;
++                    width: undefined;
++                    text: root.title;
++                    font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                    horizontalAlignment: Text.AlignLeft;
++                }
++,Label {
++                        id: subtitleLabel;
++                        objectName: "subtitleLabel";
++                        anchors { right: parent.right;
++                        left: parent.left;
++                        rightMargin: units.gu(1);
++                        top: titleLabel.bottom;
++                        }
++                        anchors.topMargin: units.dp(2);
++                        elide: Text.ElideRight;
++                        maximumLineCount: 1;
++                        fontSize: "x-small";
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: titleLabel.visible && titleLabel.text;
++                        text: cardData && cardData["subtitle"] || "";
++                        font.weight: Font.Light;
++                    }
++]
++}
++]
++}
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: root }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/5.res'
 --- tests/plugins/Dash/cardcreator/5.res	2016-02-11 13:13:31 +0000
 +++ tests/plugins/Dash/cardcreator/5.res	2016-03-07 13:12:28 +0000
@@ -5,15 +5,13 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: false;
--
++signal action(var actionId);
  readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
  Item  {
                              id: artShapeHolder;
@@ -25,7 +23,7 @@
                                  objectName: "artShapeLoader";
                                  readonly property string cardArt: cardData && cardData["art"] || "";
                                  active: cardArt != "";
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: Item {
                                      id: artShape;
@@ -82,7 +80,7 @@
                                          id: artImage;
                                          objectName: "artImage";
                                          source: artShapeLoader.cardArt;
--                                        asynchronous: root.asynchronous;
++                                        asynchronous: true;
                                          width: root.width;
                                          height: width / artShape.aspect;
+                                     }
@@ -91,10 +89,10 @@
+                         }
  Loader {
                              id: overlayLoader;
--                            readonly property real overlayHeight: (fixedHeaderHeight > 0 ? fixedHeaderHeight : headerHeight) + units.gu(2);
++                            readonly property real overlayHeight: root.fixedHeaderHeight + units.gu(2);
                              anchors.fill: artShapeHolder;
                              active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false;
--                            asynchronous: root.asynchronous;
++                            asynchronous: true;
                              visible: showHeader && status == Loader.Ready;
                              sourceComponent: UbuntuShapeOverlay {
                                  id: overlay;
@@ -126,7 +124,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/5.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/5.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/5.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,156 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: false;
++signal action(var actionId);
++readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);
++Item  {
++                            id: artShapeHolder;
++                            height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height;
++                            width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width;
++                            anchors { horizontalCenter: parent.horizontalCenter; }
++                            Loader {
++                                id: artShapeLoader;
++                                objectName: "artShapeLoader";
++                                readonly property string cardArt: cardData && cardData["art"] || "";
++                                active: cardArt != "";
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: Item {
++                                    id: artShape;
++                                    objectName: "artShape";
++                                    visible: image.status == Image.Ready;
++                                    readonly property alias image: artImage;
++                                    ShaderEffectSource {
++                                        id: artShapeSource;
++                                        sourceItem: artImage;
++                                        anchors.centerIn: parent;
++                                        width: 1;
++                                        height: 1;
++                                        hideSource: false;
++                                    }
++                                    Loader {
++                                        anchors.fill: parent;
++                                        visible: false;
++                                        sourceComponent: root.artShapeStyle === "icon" ? artShapeIconComponent : artShapeShapeComponent;
++                                        Component {
++                                            id: artShapeShapeComponent;
++                                            UbuntuShape {
++                                                source: artShapeSource;
++                                                sourceFillMode: UbuntuShape.PreserveAspectCrop;
++                                                radius: "medium";
++                                                aspect: {
++                                                    switch (root.artShapeStyle) {
++                                                        case "inset": return UbuntuShape.Inset;
++                                                        case "shadow": return UbuntuShape.DropShadow;
++                                                        default:
++                                                        case "flat": return UbuntuShape.Flat;
++                                                    }
++                                                }
++                                            }
++                                        }
++                                        Component {
++                                            id: artShapeIconComponent;
++                                            ProportionalShape { source: artShapeSource; aspect: UbuntuShape.DropShadow; }
++                                        }
++                                    }
++                                    readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;
++                                    readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : 1;
++                                    Component.onCompleted: { updateWidthHeightBindings(); }
++                                    Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); }
++                                    function updateWidthHeightBindings() {
++                                        if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) {
++                                            width = root.fixedArtShapeSize.width;
++                                            height = root.fixedArtShapeSize.height;
++                                        } else {
++                                            width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width });
++                                            height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height });
++                                        }
++                                    }
++                                    CroppedImageMinimumSourceSize {
++                                        id: artImage;
++                                        objectName: "artImage";
++                                        source: artShapeLoader.cardArt;
++                                        asynchronous: false;
++                                        width: root.width;
++                                        height: width / artShape.aspect;
++                                    }
++                                }
++                            }
++                        }
++Loader {
++                            id: overlayLoader;
++                            readonly property real overlayHeight: headerHeight + units.gu(2);
++                            anchors.fill: artShapeHolder;
++                            active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false;
++                            asynchronous: false;
++                            visible: showHeader && status == Loader.Ready;
++                            sourceComponent: UbuntuShapeOverlay {
++                                id: overlay;
++                                property real luminance: Style.luminance(overlayColor);
++                                aspect: UbuntuShape.Flat;
++                                radius: "medium";
++                                overlayColor: cardData && cardData["overlayColor"] || "#99000000";
++                                overlayRect: Qt.rect(0, 1 - overlayLoader.overlayHeight / height, 1, 1);
++                            }
++                        }
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        rightMargin: units.gu(1);
++                        left: parent.left;
++                        leftMargin: units.gu(1);
++                        top: overlayLoader.top;
++                        topMargin: units.gu(1) + overlayLoader.height - overlayLoader.overlayHeight;
++                        }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader && overlayLoader.active;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { left: titleLabel.left;
++                            leftMargin: titleLabel.leftMargin;
++                            rightMargin: units.gu(1);
++                            right: titleLabel.right;
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: root.scopeStyle && overlayLoader.item ? root.scopeStyle.getTextColor(overlayLoader.item.luminance) : (overlayLoader.item && overlayLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: artShapeHolder }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: artShapeHolder.height;
++}
 === modified file 'tests/plugins/Dash/cardcreator/6.res'
 --- tests/plugins/Dash/cardcreator/6.res	2016-02-02 08:47:07 +0000
 +++ tests/plugins/Dash/cardcreator/6.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -81,7 +79,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  ,Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/6.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/6.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/6.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,126 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return decodeURI("http://assets.ubuntu.com/sites/ubuntu/latest/u/img/logos/logo-ubuntu-grey.png");
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? undefined : undefined;
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin;
++Item {
++                            id: headerTitleContainer;
++                            anchors { right: parent.right; left: parent.left;
++                            top: parent.top;
++                            topMargin: units.gu(1);
++                            leftMargin: units.gu(1);
++                            }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height;
++                            data: [
++                                Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: emblemIcon.left;
++                        rightMargin: emblemIcon.width > 0 ? units.gu(0.5) : 0;
++                        left: parent.left;
++                        top: parent.top; }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++,Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { right: parent.right;
++                            left: parent.left;
++                            rightMargin: units.gu(1);
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++,Icon {
++                            id: emblemIcon;
++                            objectName: "emblemIcon";
++                            anchors {
++                            bottom: titleLabel.baseline;
++                            right: parent.right;
++                            rightMargin: units.gu(1);
++                            }
++                            source: cardData && cardData["emblem"] || "";
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            height: source != "" ? titleLabel.font.pixelSize : 0;
++                            width: implicitWidth > 0 && implicitHeight > 0 ? (implicitWidth / implicitHeight * height) : implicitWidth;
++                        }
++
++                            ]
++                        }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: backgroundLoader }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: headerTitleContainer.y + headerTitleContainer.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/7.res'
 --- tests/plugins/Dash/cardcreator/7.res	2016-01-28 14:11:14 +0000
 +++ tests/plugins/Dash/cardcreator/7.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -59,7 +57,7 @@
                          objectName: "outerRow";
                          property real margins: units.gu(1);
                          spacing: margins;
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                        height: root.fixedHeaderHeight;
                          anchors { top: parent.top;
                          topMargin: units.gu(1);
                          left: parent.left;
@@ -103,7 +101,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  ,Label {
                              id: subtitleLabel;
 === added file 'tests/plugins/Dash/cardcreator/7.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/7.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/7.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,149 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return "";
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? "#E9E9E9" : "#E9AAE9";
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: row.height;
++Row {
++                        id: row;
++                        objectName: "outerRow";
++                        property real margins: units.gu(1);
++                        spacing: margins;
++                        anchors { top: parent.top;
++                        topMargin: units.gu(1);
++                        left: parent.left;
++                        }
++                        anchors.right: parent.right;
++                        anchors.margins: margins;
++                        anchors.rightMargin: 0;
++                        data: [
++CroppedImageMinimumSourceSize {
++                            id: mascotImage;
++                            objectName: "mascotImage";
++                            anchors { verticalCenter: parent.verticalCenter; }
++                            source: cardData && cardData["mascot"] || "";
++                            width: units.gu(6);
++                            height: units.gu(5.625);
++                            horizontalAlignment: Image.AlignHCenter;
++                            verticalAlignment: Image.AlignVCenter;
++                            visible: showHeader;
++                        }
++
++,Item {
++                            id: headerTitleContainer;
++                            anchors { verticalCenter: parent.verticalCenter;  }
++                            width: parent.width - x;
++                            implicitHeight: titleLabel.height + subtitleLabel.height + attributesRow.height;
++                            data: [
++                                Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++                        rightMargin: units.gu(1);
++                        left: parent.left;
++                        top: parent.top; }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++,Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { right: parent.right;
++                            left: parent.left;
++                            rightMargin: units.gu(1);
++                            top: titleLabel.bottom;
++                            }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++,CardAttributes {
++                            id: attributesRow;
++                            objectName: "attributesRow";
++                            anchors { right: parent.right;
++                            left: parent.left;
++                            rightMargin: units.gu(1);
++                            top: subtitleLabel.bottom;
++                            }
++                            color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                            fontScale: root.fontScale;
++                            model: cardData && cardData["attributes"];
++                          }
++
++                    ]
++                }
++
++                                ]
++                    }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: backgroundLoader }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/8.res'
 --- tests/plugins/Dash/cardcreator/8.res	2016-01-28 14:11:14 +0000
 +++ tests/plugins/Dash/cardcreator/8.res	2016-03-07 13:12:28 +0000
@@ -5,20 +5,18 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  Loader {
                                  id: backgroundLoader;
                                  objectName: "backgroundLoader";
                                  anchors.fill: parent;
--                                asynchronous: root.asynchronous;
++                                asynchronous: true;
                                  visible: status == Loader.Ready;
                                  sourceComponent: UbuntuShape {
                                      objectName: "background";
@@ -59,7 +57,7 @@
                          objectName: "outerRow";
                          property real margins: units.gu(1);
                          spacing: margins;
--                        height: root.fixedHeaderHeight != -1 ? root.fixedHeaderHeight : implicitHeight;
++                        height: root.fixedHeaderHeight;
                          anchors { top: parent.top;
                                       topMargin: units.gu(1);
  left: parent.left;
@@ -94,7 +92,7 @@
                          width: parent.width - x;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
+                                 ]
 === added file 'tests/plugins/Dash/cardcreator/8.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/8.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/8.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,107 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++Loader {
++                                id: backgroundLoader;
++                                objectName: "backgroundLoader";
++                                anchors.fill: parent;
++                                asynchronous: false;
++                                visible: status == Loader.Ready;
++                                sourceComponent: UbuntuShape {
++                                    objectName: "background";
++                                    radius: "medium";
++                                    aspect: {
++                                        switch (root.backgroundShapeStyle) {
++                                            case "inset": return UbuntuShape.Inset;
++                                            case "shadow": return UbuntuShape.DropShadow;
++                                            default:
++                                            case "flat": return UbuntuShape.Flat;
++                                        }
++                                    }
++                                    backgroundColor: getColor(0) || "white";
++                                    secondaryBackgroundColor: getColor(1) || backgroundColor;
++                                    backgroundMode: UbuntuShape.VerticalGradient;
++                                    anchors.fill: parent;
++                                    source: backgroundImage.source ? backgroundImage : null;
++                                    property real luminance: Style.luminance(backgroundColor);
++                                    property Image backgroundImage: Image {
++                                        objectName: "backgroundImage";
++                                        source: {
++                                            if (cardData && typeof cardData["background"] === "string") return cardData["background"];
++                                            else return "";
++                                        }
++                                    }
++                                    function getColor(index) {
++                                        if (cardData && typeof cardData["background"] === "object"
++                                            && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
++                                            return cardData["background"]["elements"][index];
++                                        } else return index === 0 ? "#E9E9E9" : "#E9AAE9";
++                                    }
++                                }
++                            }
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: row.height;
++Row {
++                        id: row;
++                        objectName: "outerRow";
++                        property real margins: units.gu(1);
++                        spacing: margins;
++                        anchors { top: parent.top;
++                                     topMargin: units.gu(1);
++left: parent.left;
++ }
++                        anchors.right: parent.right;
++                        anchors.margins: margins;
++                        anchors.rightMargin: 0;
++                        data: [
++                                CroppedImageMinimumSourceSize {
++                            id: mascotImage;
++                            objectName: "mascotImage";
++                            anchors { verticalCenter: parent.verticalCenter; }
++                            source: cardData && cardData["mascot"] || "";
++                            width: units.gu(6);
++                            height: units.gu(5.625);
++                            horizontalAlignment: Image.AlignHCenter;
++                            verticalAlignment: Image.AlignVCenter;
++                            visible: showHeader;
++                        }
++,Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { verticalCenter: parent.verticalCenter;
++ }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: backgroundLoader.active && backgroundLoader.item && root.scopeStyle ? root.scopeStyle.getTextColor(backgroundLoader.item.luminance) : (backgroundLoader.item && backgroundLoader.item.luminance > 0.7 ? theme.palette.normal.baseText : "white");
++                        visible: showHeader ;
++                        width: parent.width - x;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++
++                                ]
++                    }
++UbuntuShape {
++    id: touchdown;
++    objectName: "touchdown";
++    anchors { fill: backgroundLoader }
++    visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++    radius: "medium";
++    borderSource: "radius_pressed.sci"
++}
++implicitHeight: row.y + row.height + units.gu(1);
++}
 === modified file 'tests/plugins/Dash/cardcreator/9.res'
 --- tests/plugins/Dash/cardcreator/9.res	2016-02-12 00:11:52 +0000
 +++ tests/plugins/Dash/cardcreator/9.res	2016-03-07 13:12:28 +0000
@@ -5,15 +5,13 @@
                  property string backgroundShapeStyle: "inset";
                  property real fontScale: 1.0;
                  property var scopeStyle: null;
--                property int titleAlignment: Text.AlignLeft;
                  property int fixedHeaderHeight: -1;
                  property size fixedArtShapeSize: Qt.size(-1, -1);
                  readonly property string title: cardData && cardData["title"] || "";
--                property bool asynchronous: true;
                  property bool showHeader: true;
                  implicitWidth: childrenRect.width;
                  enabled: true;
--
++signal action(var actionId);
  readonly property size artShapeSize: Qt.size(-1, -1);
  readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;
  Label {
@@ -36,7 +34,7 @@
                          width: undefined;
                          text: root.title;
                          font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
--                        horizontalAlignment: root.titleAlignment;
++                        horizontalAlignment: Text.AlignLeft;
+                     }
  Label {
                              id: subtitleLabel;
@@ -72,7 +70,7 @@
                              id: audioButton;
                              anchors.fill: undefined;
                              width: height;
--                            height: (root.fixedHeaderHeight > 0 ? root.fixedHeaderHeight : headerHeight) + 2 * units.gu(1);
++                            height: root.fixedHeaderHeight + 2 * units.gu(1);
                              readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || "";
                              UbuntuShape {
                                  anchors.fill: parent;
 === added file 'tests/plugins/Dash/cardcreator/9.res.cardcreator'
 --- tests/plugins/Dash/cardcreator/9.res.cardcreator	1970-01-01 00:00:00 +0000
 +++ tests/plugins/Dash/cardcreator/9.res.cardcreator	2016-03-07 13:12:28 +0000
@@ -0,0 +1,118 @@
++AbstractButton {
++                id: root;
++                property var cardData;
++                property string artShapeStyle: "inset";
++                property string backgroundShapeStyle: "inset";
++                property real fontScale: 1.0;
++                property var scopeStyle: null;
++                property size fixedArtShapeSize: Qt.size(-1, -1);
++                readonly property string title: cardData && cardData["title"] || "";
++                property bool showHeader: true;
++                implicitWidth: childrenRect.width;
++                enabled: true;
++signal action(var actionId);
++readonly property size artShapeSize: Qt.size(-1, -1);
++readonly property int headerHeight: titleLabel.height + subtitleLabel.height + subtitleLabel.anchors.topMargin + audioProgressBar.height + audioProgressBar.anchors.topMargin;
++Label {
++                        id: titleLabel;
++                        objectName: "titleLabel";
++                        anchors { right: parent.right;
++rightMargin: units.gu(1);
++left: audioButton.right;
++                            leftMargin: units.gu(1);
++top: parent.top;
++                                     topMargin: units.gu(1);
++ }
++                        elide: Text.ElideRight;
++                        fontSize: "small";
++                        wrapMode: Text.Wrap;
++                        maximumLineCount: 2;
++                        font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                        color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                        visible: showHeader ;
++                        width: undefined;
++                        text: root.title;
++                        font.weight: cardData && cardData["subtitle"] ? Font.DemiBold : Font.Normal;
++                        horizontalAlignment: Text.AlignLeft;
++                    }
++Label {
++                            id: subtitleLabel;
++                            objectName: "subtitleLabel";
++                            anchors { left: titleLabel.left;
++                               leftMargin: titleLabel.leftMargin;
++rightMargin: units.gu(1);
++right: titleLabel.right;
++top: titleLabel.bottom;
++ }
++                            anchors.topMargin: units.dp(2);
++                            elide: Text.ElideRight;
++                            maximumLineCount: 1;
++                            fontSize: "x-small";
++                            font.pixelSize: Math.round(FontUtils.sizeToPixels(fontSize) * fontScale);
++                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                            visible: titleLabel.visible && titleLabel.text;
++                            text: cardData && cardData["subtitle"] || "";
++                            font.weight: Font.Light;
++                        }
++CardAudioProgress {
++                            id: audioProgressBar;
++                            duration: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["duration"]) || 0;
++                            source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || "";
++                            anchors {
++                                bottom: audioButton.bottom;
++                                left: audioButton.right;
++                                right: parent.right;
++                                margins: units.gu(1);
++                            }
++                            color: root.scopeStyle ? root.scopeStyle.foreground : theme.palette.normal.baseText;
++                         }AbstractButton {
++                            id: audioButton;
++                            anchors.fill: undefined;
++                            width: height;
++                            height: headerHeight + 2 * units.gu(1);
++                            readonly property url source: (cardData["quickPreviewData"] && cardData["quickPreviewData"]["uri"]) || "";
++                            UbuntuShape {
++                                anchors.fill: parent;
++                                visible: parent.pressed;
++                                radius: "medium";
++                            }
++                            Rectangle {
++                                color: Qt.rgba(0, 0, 0, 0.5);
++                                anchors.centerIn: parent;
++                                width: parent.width * 0.5;
++                                height: width;
++                                radius: width / 2;
++                            }
++                            Icon {
++                                anchors.centerIn: parent;
++                                width: parent.width * 0.3;
++                                height: width;
++                                opacity: 0.9;
++                                name: DashAudioPlayer.playing && AudioUrlComparer.compare(parent.source, DashAudioPlayer.currentSource) ? "media-playback-pause" : "media-playback-start";
++                                color: "white";
++                            }
++                            onClicked: {
++                                if (AudioUrlComparer.compare(source, DashAudioPlayer.currentSource)) {
++                                    if (DashAudioPlayer.playing) {
++                                        DashAudioPlayer.pause();
++                                    } else {
++                                        DashAudioPlayer.play();
++                                    }
++                                } else {
++                                    var playlist = (cardData["quickPreviewData"] && cardData["quickPreviewData"]["playlist"]) || null;
++                                    DashAudioPlayer.playSource(source, playlist);
++                                }
++                            }
++                            onPressAndHold: {
++                                root.pressAndHold();
++                            }
++                        }UbuntuShape {
++                        id: touchdown;
++                        objectName: "touchdown";
++                        anchors { fill: root }
++                        visible: root.artShapeStyle != "shadow" && root.artShapeStyle != "icon" && root.pressed;
++                        radius: "medium";
++                        borderSource: "radius_pressed.sci"
++                    }
++implicitHeight: audioButton.height;
++}
 === modified file 'tests/plugins/Dash/cardcreatortest.cpp'
 --- tests/plugins/Dash/cardcreatortest.cpp	2016-01-25 16:49:26 +0000
 +++ tests/plugins/Dash/cardcreatortest.cpp	2016-03-07 13:12:28 +0000
@@ -45,6 +45,30 @@
          delete view;
+     }
++    void compareFileContents(const QString &filePath, const QString cardStringResult)
++    {
++        QFile testResultFile(filePath);
++        QVERIFY(testResultFile.open(QIODevice::ReadOnly));
++        QTextStream ts2(&testResultFile);
++
++        // Record failed results to /tmp
++        const QString executedResult = cardStringResult;
++        QTemporaryFile tmpFile(QDir::tempPath() + QDir::separator() + "testCardCreatorFailedResultXXXXXX");
++        tmpFile.open();
++        tmpFile.setAutoRemove(false);
++        tmpFile.write(executedResult.toUtf8().constData());
++
++        // Line by line comparison
++        const QStringList expectedLines = ts2.readAll().trimmed().replace(QRegExp("\n\\s*\n"),"\n").split("\n");
++        const QStringList cardStringResultLines = cardStringResult.trimmed().replace(QRegExp("\n\\s*\n"),"\n").split("\n");
++        for (int i = 0; i < expectedLines.size(); ++i) {
++            QCOMPARE(cardStringResultLines[i].simplified(), expectedLines[i].simplified());
++        }
++
++        // Remove the result if it passed
++        tmpFile.setAutoRemove(true);
++    }
++
      void testKnownCases()
+     {
          const QString templateString("template: ");
@@ -68,33 +92,19 @@
              const QString templateJSON = lines[0].mid(templateString.length());
              const QString componentsJSON = lines[1].mid(componentsString.length());
              const QString resultFileName = lines[2].mid(resultString.length());
--
              QVariant cardStringResult;
--            QMetaObject::invokeMethod(view->rootObject(), "cardString", Q_RETURN_ARG(QVariant, cardStringResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON));
--
--            QFile testResultFile(testDirPath + resultFileName);
--            QVERIFY(testResultFile.open(QIODevice::ReadOnly));
--            QTextStream ts2(&testResultFile);
--
--            // Record failed results to /tmp
--            const QString executedResult = cardStringResult.toString();
--            QTemporaryFile tmpFile(QDir::tempPath() + QDir::separator() + "testCardCreatorFailedResultXXXXXX");
--            tmpFile.open();
--            tmpFile.setAutoRemove(false);
--            tmpFile.write(executedResult.toUtf8().constData());
--
--            // Line by line comparison
--            const QStringList expectedLines = ts2.readAll().trimmed().replace(QRegExp("\n\\s*\n"),"\n").split("\n");
--            const QStringList cardStringResultLines = cardStringResult.toString().trimmed().replace(QRegExp("\n\\s*\n"),"\n").split("\n");
--            for (int i = 0; i < expectedLines.size(); ++i) {
--                QCOMPARE(cardStringResultLines[i].simplified(), expectedLines[i].simplified());
--            }
--
--            // Remove the result if it passed
--            tmpFile.setAutoRemove(true);
--
              QVariant createCardComponentResult;
--            QMetaObject::invokeMethod(view->rootObject(), "createCardComponent", Q_RETURN_ARG(QVariant, createCardComponentResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON));
++
++            QMetaObject::invokeMethod(view->rootObject(), "cardString", Q_RETURN_ARG(QVariant, cardStringResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON), Q_ARG(QVariant, false));
++            compareFileContents(testDirPath + resultFileName, cardStringResult.toString());
++
++            QMetaObject::invokeMethod(view->rootObject(), "cardString", Q_RETURN_ARG(QVariant, cardStringResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON), Q_ARG(QVariant, true));
++            compareFileContents(testDirPath + resultFileName + ".cardcreator", cardStringResult.toString());
++
++            QMetaObject::invokeMethod(view->rootObject(), "createCardComponent", Q_RETURN_ARG(QVariant, createCardComponentResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON), Q_ARG(QVariant, false));
++            QVERIFY(createCardComponentResult.toBool());
++
++            QMetaObject::invokeMethod(view->rootObject(), "createCardComponent", Q_RETURN_ARG(QVariant, createCardComponentResult), Q_ARG(QVariant, templateJSON), Q_ARG(QVariant, componentsJSON), Q_ARG(QVariant, true));
              QVERIFY(createCardComponentResult.toBool());
+         }
+     }
 === modified file 'tests/plugins/Dash/cardcreatortest.qml'
 --- tests/plugins/Dash/cardcreatortest.qml	2015-07-15 15:07:19 +0000
 +++ tests/plugins/Dash/cardcreatortest.qml	2016-03-07 13:12:28 +0000
@@ -19,11 +19,11 @@
  Item {
      id: root
--    function cardString(template, components) {
--        return CardCreator.cardString(JSON.parse(template), JSON.parse(components));
++    function cardString(template, components, isCardCreator) {
++        return CardCreator.cardString(JSON.parse(template), JSON.parse(components), isCardCreator);
+     }
--    function createCardComponent(template, components) {
--        return CardCreator.createCardComponent(root, JSON.parse(template), JSON.parse(components)) !== null;
++    function createCardComponent(template, components, isCardCreator) {
++        return CardCreator.createCardComponent(root, JSON.parse(template), JSON.parse(components), isCardCreator) !== null;
+     }
+ }
 === modified file 'tests/qmltests/Dash/CardHelpers.js'
 --- tests/qmltests/Dash/CardHelpers.js	2015-05-15 12:57:48 +0000
 +++ tests/qmltests/Dash/CardHelpers.js	2016-03-07 13:12:28 +0000
@@ -16,7 +16,7 @@
  .pragma library
--var components = ["title", "art", "subtitle", "mascot", "emblem", "summary", "attributes", "overlayColor", "quickPreviewData"]
++var components = ["title", "art", "subtitle", "mascot", "emblem", "summary", "attributes", "socialActions", "overlayColor", "quickPreviewData"]
  var defaultLayout = ' \
  { \
@@ -38,7 +38,8 @@
      "mascot": null, \
      "emblem": null, \
      "summary": null, \
--    "attributes": { "max-count": 2 } \
++    "attributes": { "max-count": 2 },
++    "socialActions": { "max-count": 4 } \
    }, \
    "resources": {} \
  }'
@@ -52,7 +53,8 @@
    "emblem": "emblem", \
    "overlayColor": "overlayColor", \
    "summary": "summary", \
--  "attributes": "attributes" \
++  "attributes": "attributes", \
++  "socialActions": "socialActions" \
  }'
 === modified file 'tests/qmltests/Dash/tst_Card.qml'
 --- tests/qmltests/Dash/tst_Card.qml	2016-02-11 13:13:31 +0000
 +++ tests/qmltests/Dash/tst_Card.qml	2016-03-07 13:12:28 +0000
@@ -36,6 +36,10 @@
        "subtitle": "bar",
        "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
        "attributes": [{"value":"text1","icon":"image://theme/ok"},{"value":"text2","icon":"image://theme/cancel"}],
++      "socialActions": [{"id":"like","label":"text1","icon":"image://theme/ok","temporaryIcon":"image://theme/undo"},
++                        {"id":"share","label":"text2","icon":"image://theme/cancel"},
++                        {"id":"like","label":"text1","icon":"image://theme/ok","temporaryIcon":"image://theme/undo"},
++                        {"id":"share","label":"text2","icon":"image://theme/cancel"}],
        "quickPreviewData": {"uri": "/some/file", "duration": "14"}
      }'
@@ -211,6 +215,11 @@
+         }
+     }
++    SignalSpy {
++        id: signalSpy
++        signalName: "action"
++    }
++
      UT.UnityTestCase {
          id: testCase
          name: "Card"
@@ -274,9 +283,11 @@
                  { tag: "Wide", width: units.gu(18), index: 0 },
                  { tag: "Horizontal", width: units.gu(38), index: 5 },
                  // Make sure card ends with header when there's no summary
--                { tag: "NoSummary", height: function() { var cardToolRow = findChild(cardTool, "outerRow");
--                                                         return cardToolRow.y + cardToolRow.height + units.gu(1) }, index: 6 },
--                { tag: "HorizontalNoSummary", height: function() { return headerRow.height + units.gu(2) }, card_layout: "horizontal", index: 6 },
++                { tag: "NoSummary", height: function() { var socialActionsRow = findChild(cardTool, "socialActionsRow");
++                                                         return socialActionsRow.y + socialActionsRow.height + units.gu(1) }, index: 6 },
++                { tag: "HorizontalNoSummary", height: function() { var socialActionsRow = findChild(cardTool, "socialActionsRow");
++                                                                   return socialActionsRow.y + socialActionsRow.height + units.gu(1) },
++                                              card_layout: "horizontal", index: 6 },
+             ]
+         }
@@ -641,5 +652,29 @@
                  verify((card.width - titleToCard.x - titleToCard.width) === units.gu(1));
+             }
+         }
++
++        function test_action() {
++            selector.selectedIndex = 0;
++            waitForRendering(card);
++
++            signalSpy.target = card;
++            var socialActionsRow = findChild(card, "socialActionsRow");
++            var delegate0 = findChild(socialActionsRow, "delegate0");
++            var icon0 = findChild(delegate0, "icon");
++            var delegate1 = findChild(socialActionsRow, "delegate1");
++            var icon1 = findChild(delegate1, "icon");
++
++            compare(icon0.source, "image://theme/ok");
++            mouseClick(delegate0, delegate0.height / 2, delegate0.height / 2);
++            tryCompare(signalSpy, "count", 1);
++            compare(signalSpy.signalArguments[0][0], "like");
++            compare(icon0.source, "image://theme/undo");
++
++            compare(icon1.source, "image://theme/cancel");
++            mouseClick(delegate1, delegate1.height / 2, delegate1.height / 2);
++            tryCompare(signalSpy, "count", 2);
++            compare(signalSpy.signalArguments[1][0], "share");
++            compare(icon1.source, "image://theme/cancel");
++        }
+     }
+ }
 === modified file 'tests/qmltests/Dash/tst_CardTool.qml'
 --- tests/qmltests/Dash/tst_CardTool.qml	2015-11-06 10:20:36 +0000
 +++ tests/qmltests/Dash/tst_CardTool.qml	2016-03-07 13:12:28 +0000
@@ -339,22 +339,22 @@
          function test_card_title_alignment(data) {
              selector.selectedIndex = data.index;
--            tryCompare(cardTool, "titleAlignment", Text.AlignLeft);
++            tryCompareFunction(function() { return findChild(internalCard, "titleLabel").horizontalAlignment == Text.AlignLeft; }, true);
              cardTool.components['title'] = { "field": "title", "align": "center" };
              cardTool.componentsChanged();
--            tryCompare(cardTool, "titleAlignment", data.value);
++            tryCompareFunction(function() { return findChild(internalCard, "titleLabel").horizontalAlignment == data.value; }, true);
              cardTool.components['title'] = { "field": "title" };
              cardTool.componentsChanged();
--            tryCompare(cardTool, "titleAlignment", data.value);
++            tryCompareFunction(function() { return findChild(internalCard, "titleLabel").horizontalAlignment == data.value; }, true);
              cardTool.components['title'] = { "field": "title", "align": "left" };
              cardTool.componentsChanged();
--            tryCompare(cardTool, "titleAlignment", Text.AlignLeft);
++            tryCompareFunction(function() { return findChild(internalCard, "titleLabel").horizontalAlignment == Text.AlignLeft; }, true);
+         }
          function test_categoryLayout_data() {