Merge lp:~mterry/unity8/default-icon-background into lp:unity8

[Michael Terry]

Force all app icons to have a background, so we don't get any bleed-through to the dash wallpaper.
UbuntuColors.porcelain is the current color, but we reserve the right to change it. If you don't like that, use a background color in your app icons!

Always specify a backgroundColor for app icons. It looks bad to have the wallpaper peeking through. And per [1], designers don't like transparent icon backgrounds either.

I chose UbuntuColors.porcelain for the default color. My logic was:

- White or black are probably the best/most-neutral choices.
- The current default wallpaper is closer to white than black. So existing transparent icons are expecting to be surrounded by a light color.
- When uploading an app, the developer first sees their icon presented on a whitish webpage background (on myapps.developer.ubuntu.com). They might reasonably expect that it would look like that on their device.
- Since the user obviously isn't picky about the background color, we can deviate from pure white a bit to be more on-brand and use porcelain rather than "#ffffff".

I know that I just filed another branch to get unity8 to use UbuntuColors less, but in this case, it's reasonable. App icons don't relate to the theme, so it's not appropriate to use a themed color name for this case.

I think it's reasonable for us to reserve the right to change the color in the future, though once we establish white-ish as the background, we probably shouldn't deviate much from white-ish.

I didn't go crazy with modifying cards I didn't need to. My primary focus was app icons, though there might be several other places where we load external icons/images that we want to ensure we don't make it look janky.

For testing, search for "sad trombone" in the store and install it. It uses a transparent icon.

[1] https://bugs.launchpad.net/ubuntu/+source/unity8/+bug/1449295/comments/2

== Checklist ==

 * Are there any related MPs required for this MP to build/function as expected? Please list.
 no

 * Did you perform an exploratory manual test run of your code change and any related functionality?
 yes

 * If you changed the packaging (debian), did you subscribe the ubuntu-unity team to this MP?
 NA

 * If you changed the UI, has there been a design review?
 Working on it.

[Unity8 CI Bot (unity8-ci-bot)]

FAILED: Continuous integration, rev:2402
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/1283/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/1726
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/1675
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial+overlay/1675
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1668/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1668/artifact/output/*zip*/output.zip
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/1668/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1668/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1668/artifact/output/*zip*/output.zip
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/1668/console
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1668/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1668
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1668/artifact/output/*zip*/output.zip
    FAILURE: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/1668/console

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

review: Needs Fixing (continuous-integration)

[Albert Astals Cid (aacid)]

This probably conflicts like mad with the current silo (also with the huge stack of changes i have for CardCreator.js) but i guess at least you should stack it into the top of the already approved branches.

[Unity8 CI Bot (unity8-ci-bot)]

PASSED: Continuous integration, rev:2402
https://unity8-jenkins.ubuntu.com/job/lp-unity8-ci/1286/
Executed test runs:
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=vivid+overlay,testname=qmluitests.sh/814
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=xenial+overlay,testname=qmluitests.sh/814
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/test-0-autopkgtest/label=amd64,release=yakkety,testname=qmluitests.sh/814
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-0-fetch/1729
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=vivid+overlay/1678
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=xenial+overlay/1678
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-1-sourcepkg/release=yakkety/1678
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=vivid+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=xenial+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=amd64,release=yakkety/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=vivid+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=xenial+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=armhf,release=yakkety/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=vivid+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=xenial+overlay/1671/artifact/output/*zip*/output.zip
    SUCCESS: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/1671
        deb: https://unity8-jenkins.ubuntu.com/job/build-2-binpkg/arch=i386,release=yakkety/1671/artifact/output/*zip*/output.zip

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

review: Approve (continuous-integration)

[Michael Terry (mterry)]

From Paty when I asked about this branch: "Regarding the opinion on the colour choice for the icons BG, I pinged Mattheiu, who is the icon designer and he is gonna look into this and hopefully, comment on the bug ticket. I'm sorry I'm not able to help more on this. I think porcelain should work well, but I rather not make visual decisions... : P"

So we'll see what Mattheiu says.

Unmerged revisions

2402. By Michael Terry on 2016-05-23

Fix card creator tests

2401. By Michael Terry on 2016-05-23

Always provide a background color for app icons

=== modified file 'plugins/Dash/CardCreator.js'
--- plugins/Dash/CardCreator.js	2016-05-04 14:09:00 +0000
+++ plugins/Dash/CardCreator.js	2016-05-23 20:50:30 +0000
@@ -65,8 +65,9 @@
 // %4 is whether the image or the Loader with the UbuntuShape/ProportionalShape should be visible
 // %5 is used as aspect ratio fallback
 // %6 is whether the loader should be asynchronous or not
-// %7 is injected as code to artImage
-// %8 is used as image fallback
+// %7 is used as the background color for the art's UbuntuShape
+// %8 is injected as code to artImage
+// %9 is used as image fallback
 var kArtShapeHolderCode = 'Item { \n\
                             id: artShapeHolder; \n\
                             height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
@@ -75,7 +76,7 @@
                             Loader { \n\
                                 id: artShapeLoader; \n\
                                 objectName: "artShapeLoader"; \n\
-                                readonly property string cardArt: cardData && cardData["art"] || %8; \n\
+                                readonly property string cardArt: cardData && cardData["art"] || %9; \n\
                                 active: cardArt != ""; \n\
                                 asynchronous: %6; \n\
                                 visible: status == Loader.Ready; \n\
@@ -92,6 +93,7 @@
                                             id: artShapeShapeComponent; \n\
                                             UbuntuShape { \n\
                                                 source: artImage; \n\
+                                                backgroundColor: %7; \n\
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop; \n\
                                                 radius: "medium"; \n\
                                                 aspect: { \n\
@@ -106,7 +108,7 @@
                                         } \n\
                                         Component { \n\
                                             id: artShapeIconComponent; \n\
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; } \n\
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: %7; } \n\
                                         } \n\
                                     } \n\
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
@@ -130,7 +132,7 @@
                                         visible: !%4; \n\
                                         width: %2; \n\
                                         height: %3; \n\
-                                        %7 \n\
+                                        %8 \n\
                                     } \n\
                                 } \n\
                             } \n\
@@ -519,9 +521,9 @@
         var fallbackStatusCode = "";
         var fallbackURICode = '""';
         if (fallback !== "") {
-            // fallbackStatusCode has %6 in it because we want to substitute it for fallbackURICode
-            // which in kArtShapeHolderCode is %8
-            fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %8;';
+            // fallbackStatusCode has %9 in it because we want to substitute it for fallbackURICode
+            // which in kArtShapeHolderCode is %9
+            fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %9;';
             fallbackURICode = 'decodeURI("%1")'.arg(fallback);
         }
         code += kArtShapeHolderCode.arg(artAnchors)
@@ -530,8 +532,9 @@
                                    .arg(isConciergeMode ? "false" : "true")
                                    .arg(aspectRatio)
                                    .arg(asynchronous)
+                                   .arg(hasBackground ? '"transparent"' : 'UbuntuColors.porcelain')
                                    .arg(fallbackStatusCode)
-                                   .arg(fallbackURICode);
+                                   .arg(fallbackURICode); // must be last, it might contain %N strings
     } else {
         code += 'readonly property size artShapeSize: Qt.size(-1, -1);\n'
     }

=== added file 'qml/Components/ExternalIcon.qml'
--- qml/Components/ExternalIcon.qml	1970-01-01 00:00:00 +0000
+++ qml/Components/ExternalIcon.qml	2016-05-23 20:50:30 +0000
@@ -0,0 +1,49 @@
+/*
+ * Copyright (C) 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 Ubuntu.Components 1.3
+
+/*! \brief Display icon for an app
+
+    This widget shows the specified image, with standard settings for showing
+    an app icon.
+
+    If you make any important changes here, you may also want to update
+    kArtShapeHolderCode in CardCreator.js, since that is used to show app
+    icons in the dash.
+ */
+
+ProportionalShape {
+    id: root
+
+    property alias icon: iconImage.source
+    property alias cache: iconImage.cache
+
+    readonly property alias status: iconImage.status
+
+    // It's bad form to bleed through, so we provide a color of last resort
+    backgroundColor: UbuntuColors.porcelain
+
+    sourceHorizontalAlignment: UbuntuShape.AlignHCenter
+    sourceVerticalAlignment: UbuntuShape.AlignVCenter
+
+    source: Image {
+        id: iconImage
+        sourceSize.width: root.width
+        sourceSize.height: root.height
+    }
+}

=== modified file 'qml/Dash/Previews/PreviewHeader.qml'
--- qml/Dash/Previews/PreviewHeader.qml	2016-03-10 22:39:24 +0000
+++ qml/Dash/Previews/PreviewHeader.qml	2016-05-23 20:50:30 +0000
@@ -18,6 +18,7 @@
 import Ubuntu.Components 1.3
 import Dash 0.1
 import "../"
+import "../../Components"
 
 /*! This preview widget shows a header
  *  The title comes in widgetData["title"]
@@ -71,26 +72,17 @@
                 visible: active
 
                 anchors.verticalCenter: parent.verticalCenter
-                // TODO karni: Icon aspect-ratio is 8:7.5. Revisit these values to avoid fraction of pixels.
-                width: units.gu(6)
-                height: units.gu(5.625)
-                readonly property int maxSize: Math.max(width, height) * 4
                 asynchronous: true
 
-                sourceComponent: UbuntuShape {
+                sourceComponent: ExternalIcon {
                     objectName: "mascotShape"
-                    visible: source.status === Image.Ready
-                    sourceFillMode: UbuntuShape.PreserveAspectCrop
-                    sourceHorizontalAlignment: UbuntuShape.AlignHCenter
-                    sourceVerticalAlignment: UbuntuShape.AlignVCenter
-                    source: Image {
-                        source: headerRoot.mascot
-                        width: source ? mascotShapeLoader.width : 0
-                        height: mascotShapeLoader.height
-
-                        sourceSize { width: mascotShapeLoader.maxSize; height: mascotShapeLoader.maxSize }
-                        onStatusChanged: if (status === Image.Error) source = headerRoot.fallback;
-                    }
+                    visible: status === Image.Ready
+
+                    // TODO karni: Icon aspect-ratio is 8:7.5. Revisit these values to avoid fraction of pixels.
+                    width: source ? units.gu(6) : 0
+
+                    icon: headerRoot.mascot
+                    onStatusChanged: if (status === Image.Error) icon = headerRoot.fallback;
                 }
             }
 

=== modified file 'qml/Launcher/LauncherDelegate.qml'
--- qml/Launcher/LauncherDelegate.qml	2016-03-29 13:51:56 +0000
+++ qml/Launcher/LauncherDelegate.qml	2016-05-23 20:50:30 +0000
@@ -16,6 +16,7 @@
 
 import QtQuick 2.4
 import Ubuntu.Components 1.3
+import "../Components"
 
 Item {
     id: root
@@ -139,18 +140,13 @@
             visible: root.highlighted
         }
 
-        ProportionalShape {
+        ExternalIcon {
             id: iconShape
             anchors.centerIn: parent
             width: root.itemWidth
             aspect: UbuntuShape.DropShadow
-            source: Image {
-                id: iconImage
-                sourceSize.width: iconShape.width
-                sourceSize.height: iconShape.height
-                source: root.iconName
-                cache: false // see lpbug#1543290 why no cache
-            }
+            icon: root.iconName
+            cache: false // see lpbug#1543290 why no cache
         }
 
         UbuntuShape {

=== modified file 'qml/Stages/Splash.qml'
--- qml/Stages/Splash.qml	2016-03-08 20:59:22 +0000
+++ qml/Stages/Splash.qml	2016-05-23 20:50:30 +0000
@@ -108,25 +108,17 @@
         cache: false
     }
 
-    UbuntuShape {
+    ExternalIcon {
         id: iconShape
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.verticalCenter: parent.verticalCenter
         anchors.verticalCenterOffset: -units.gu(4)
         width: units.gu(8)
-        height: units.gu(7.5)
 
         visible: d.showIcon
 
-        radius: "medium"
         aspect: UbuntuShape.Flat
-        sourceFillMode: Image.PreserveAspectCrop
-        source: Image {
-            id: iconImage
-            sourceSize.width: iconShape.width
-            sourceSize.height: iconShape.height
-            source: d.showIcon ? root.icon : ""
-        }
+        icon: d.showIcon ? root.icon : ""
     }
 
     Label {

=== modified file 'tests/plugins/Dash/cardcreator/1.res'
--- tests/plugins/Dash/cardcreator/1.res	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/1.res	2016-05-23 20:50:30 +0000
@@ -38,6 +38,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -52,7 +53,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/1.res.cardcreator'
--- tests/plugins/Dash/cardcreator/1.res.cardcreator	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/1.res.cardcreator	2016-05-23 20:50:30 +0000
@@ -37,6 +37,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -51,7 +52,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/11.res'
--- tests/plugins/Dash/cardcreator/11.res	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/11.res	2016-05-23 20:50:30 +0000
@@ -76,6 +76,7 @@
                                             id: artShapeShapeComponent; 
                                             UbuntuShape { 
                                                 source: artImage;
+                                                backgroundColor: "transparent";
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop; 
                                                 radius: "medium"; 
                                                 aspect: { 
@@ -90,7 +91,7 @@
                                         } 
                                         Component { 
                                             id: artShapeIconComponent; 
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: "transparent"; }
                                         } 
                                     } 
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; 

=== modified file 'tests/plugins/Dash/cardcreator/11.res.cardcreator'
--- tests/plugins/Dash/cardcreator/11.res.cardcreator	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/11.res.cardcreator	2016-05-23 20:50:30 +0000
@@ -75,6 +75,7 @@
                                             id: artShapeShapeComponent; 
                                             UbuntuShape { 
                                                 source: artImage;
+                                                backgroundColor: "transparent";
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop; 
                                                 radius: "medium"; 
                                                 aspect: { 
@@ -89,7 +90,7 @@
                                         } 
                                         Component { 
                                             id: artShapeIconComponent; 
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: "transparent"; }
                                         } 
                                     } 
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; 

=== modified file 'tests/plugins/Dash/cardcreator/12.res'
--- tests/plugins/Dash/cardcreator/12.res	2016-05-04 14:25:02 +0000
+++ tests/plugins/Dash/cardcreator/12.res	2016-05-23 20:50:30 +0000
@@ -38,6 +38,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -52,7 +53,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/12.res.cardcreator'
--- tests/plugins/Dash/cardcreator/12.res.cardcreator	2016-05-04 14:25:02 +0000
+++ tests/plugins/Dash/cardcreator/12.res.cardcreator	2016-05-23 20:50:30 +0000
@@ -37,6 +37,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -51,7 +52,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/3.res'
--- tests/plugins/Dash/cardcreator/3.res	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/3.res	2016-05-23 20:50:30 +0000
@@ -38,6 +38,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -52,7 +53,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/3.res.cardcreator'
--- tests/plugins/Dash/cardcreator/3.res.cardcreator	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/3.res.cardcreator	2016-05-23 20:50:30 +0000
@@ -37,6 +37,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -51,7 +52,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/5.res'
--- tests/plugins/Dash/cardcreator/5.res	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/5.res	2016-05-23 20:50:30 +0000
@@ -38,6 +38,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -52,7 +53,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;

=== modified file 'tests/plugins/Dash/cardcreator/5.res.cardcreator'
--- tests/plugins/Dash/cardcreator/5.res.cardcreator	2016-05-04 14:09:00 +0000
+++ tests/plugins/Dash/cardcreator/5.res.cardcreator	2016-05-23 20:50:30 +0000
@@ -37,6 +37,7 @@
                                             id: artShapeShapeComponent;
                                             UbuntuShape {
                                                 source: artImage;
+                                                backgroundColor: UbuntuColors.porcelain;
                                                 sourceFillMode: UbuntuShape.PreserveAspectCrop;
                                                 radius: "medium";
                                                 aspect: {
@@ -51,7 +52,7 @@
                                         }
                                         Component {
                                             id: artShapeIconComponent;
-                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; }
+                                            ProportionalShape { source: artImage; aspect: UbuntuShape.DropShadow; backgroundColor: UbuntuColors.porcelain; }
                                         }
                                     }
                                     readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1;