@@ -25,7 +25,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
25 objectName: "backgroundLoader"; \n\
25 objectName: "backgroundLoader"; \n\
26 anchors.fill: parent; \n\
26 anchors.fill: parent; \n\
27 asynchronous: %3; \n\
27 asynchronous: %3; \n\
28− visible: status == Loader.Ready; \n\
28+ visible: status === Loader.Ready; \n\
29 sourceComponent: UbuntuShape { \n\
29 sourceComponent: UbuntuShape { \n\
30 objectName: "background"; \n\
30 objectName: "background"; \n\
31 radius: "medium"; \n\
31 radius: "medium"; \n\
@@ -75,7 +75,7 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
75 aspect: UbuntuShape.DropShadow; \n\
75 aspect: UbuntuShape.DropShadow; \n\
78−// %1 is used as anchors of artShapeHolder
78+// %1 is used as anchors of artShapeLoader
79// %2 is used as image width
79// %2 is used as image width
80// %3 is used as image height
80// %3 is used as image height
81// %4 is whether the image should be visible
81// %4 is whether the image should be visible
@@ -83,42 +83,39 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
83// %6 is the shape code we want to use
83// %6 is the shape code we want to use
84// %7 is injected as code to artImage
84// %7 is injected as code to artImage
85// %8 is used as image fallback
85// %8 is used as image fallback
86−var kArtShapeHolderCode = 'Item { \n\
86+var kArtShapeHolderCode = 'Loader { \n\
87− id: artShapeHolder; \n\
87+ id: artShapeLoader; \n\
88 height: root.fixedArtShapeSize.height; \n\
88 height: root.fixedArtShapeSize.height; \n\
89 width: root.fixedArtShapeSize.width; \n\
89 width: root.fixedArtShapeSize.width; \n\
90 anchors { %1 } \n\
90 anchors { %1 } \n\
92− id: artShapeLoader; \n\
93− objectName: "artShapeLoader"; \n\
91+ objectName: "artShapeLoader"; \n\
94− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
92+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
95− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
93+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
96− active: cardArt != ""; \n\
94+ active: cardArt != ""; \n\
97− asynchronous: %5; \n\
95+ asynchronous: %5; \n\
98− visible: status == Loader.Ready; \n\
96+ visible: status === Loader.Ready; \n\
99− sourceComponent: Item { \n\
97+ sourceComponent: Item { \n\
100− id: artShape; \n\
98+ id: artShape; \n\
101− objectName: "artShape"; \n\
99+ objectName: "artShape"; \n\
102− visible: image.status == Image.Ready; \n\
100+ visible: image.status === Image.Ready; \n\
103− readonly property alias image: artImage; \n\
101+ readonly property alias image: artImage; \n\
105− width: root.fixedArtShapeSize.width; \n\
103+ width: root.fixedArtShapeSize.width; \n\
106− height: root.fixedArtShapeSize.height; \n\
104+ height: root.fixedArtShapeSize.height; \n\
107− CroppedImageMinimumSourceSize { \n\
105+ CroppedImageMinimumSourceSize { \n\
108− id: artImage; \n\
106+ id: artImage; \n\
109− objectName: "artImage"; \n\
107+ objectName: "artImage"; \n\
110− source: artShapeLoader.cardArt; \n\
108+ source: artShapeLoader.cardArt; \n\
111− asynchronous: %5; \n\
109+ asynchronous: %5; \n\
112− visible: %4; \n\
110+ visible: %4; \n\
113− width: %2; \n\
111+ width: %2; \n\
114− height: %3; \n\
112+ height: %3; \n\
121−// %1 is used as anchors of artShapeHolder
118+// %1 is used as anchors of artShapeLoader
122// %2 is used as image width
119// %2 is used as image width
123// %3 is used as image height
120// %3 is used as image height
124// %4 is whether the image should be visible
121// %4 is whether the image should be visible
@@ -126,37 +123,32 @@ var kArtShapeHolderCode = 'Item { \n\
126// %6 is the shape code we want to use
123// %6 is the shape code we want to use
127// %7 is injected as code to artImage
124// %7 is injected as code to artImage
128// %8 is used as image fallback
125// %8 is used as image fallback
129−var kArtShapeHolderCodeCardToolCard = 'Item { \n\
126+var kArtShapeHolderCodeCardToolCard = 'Loader { \n\
130− id: artShapeHolder; \n\
131− height: artShapeLoader.height; \n\
132− width: artShapeLoader.width; \n\
127+ id: artShapeLoader; \n\
133 anchors { %1 } \n\
128 anchors { %1 } \n\
135− id: artShapeLoader; \n\
136− objectName: "artShapeLoader"; \n\
129+ objectName: "artShapeLoader"; \n\
137− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
130+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
138− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
131+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
139− active: cardArt != ""; \n\
132+ active: cardArt != ""; \n\
140− asynchronous: %5; \n\
133+ asynchronous: %5; \n\
141− visible: status == Loader.Ready; \n\
134+ visible: status === Loader.Ready; \n\
142− sourceComponent: Item { \n\
135+ sourceComponent: Item { \n\
143− id: artShape; \n\
136+ id: artShape; \n\
144− objectName: "artShape"; \n\
137+ objectName: "artShape"; \n\
145− visible: image.status == Image.Ready; \n\
138+ visible: image.status === Image.Ready; \n\
146− readonly property alias image: artImage; \n\
139+ readonly property alias image: artImage; \n\
148− width: image.status !== Image.Ready ? 0 : image.width; \n\
141+ width: image.status !== Image.Ready ? 0 : image.width; \n\
149− height: image.status !== Image.Ready ? 0 : image.height; \n\
142+ height: image.status !== Image.Ready ? 0 : image.height; \n\
150− CroppedImageMinimumSourceSize { \n\
143+ CroppedImageMinimumSourceSize { \n\
151− id: artImage; \n\
144+ id: artImage; \n\
152− objectName: "artImage"; \n\
145+ objectName: "artImage"; \n\
153− source: artShapeLoader.cardArt; \n\
146+ source: artShapeLoader.cardArt; \n\
154− asynchronous: %5; \n\
147+ asynchronous: %5; \n\
155− visible: %4; \n\
148+ visible: %4; \n\
156− width: %2; \n\
149+ width: %2; \n\
157− height: %3; \n\
150+ height: %3; \n\
@@ -214,10 +206,10 @@ var kAudioButtonCode = 'AbstractButton { \n\
214var kOverlayLoaderCode = 'Loader { \n\
206var kOverlayLoaderCode = 'Loader { \n\
215 id: overlayLoader; \n\
207 id: overlayLoader; \n\
216 readonly property real overlayHeight: %2 + units.gu(2); \n\
208 readonly property real overlayHeight: %2 + units.gu(2); \n\
217− anchors.fill: artShapeHolder; \n\
209+ anchors.fill: artShapeLoader; \n\
218 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
210 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
219 asynchronous: %1; \n\
211 asynchronous: %1; \n\
220− visible: showHeader && status == Loader.Ready; \n\
212+ visible: showHeader && status === Loader.Ready; \n\
221 sourceComponent: UbuntuShapeOverlay { \n\
213 sourceComponent: UbuntuShapeOverlay { \n\
222 id: overlay; \n\
214 id: overlay; \n\
223 property real luminance: Style.luminance(overlayColor); \n\
215 property real luminance: Style.luminance(overlayColor); \n\
@@ -274,7 +266,7 @@ var kMascotShapeLoaderCode = 'Loader { \n\
274 objectName: "mascotShapeLoader"; \n\
266 objectName: "mascotShapeLoader"; \n\
275 asynchronous: %2; \n\
267 asynchronous: %2; \n\
276 active: mascotImage.status === Image.Ready; \n\
268 active: mascotImage.status === Image.Ready; \n\
277− visible: showHeader && active && status == Loader.Ready; \n\
269+ visible: showHeader && active && status === Loader.Ready; \n\
278 width: units.gu(6); \n\
270 width: units.gu(6); \n\
279 height: units.gu(5.625); \n\
271 height: units.gu(5.625); \n\
280 sourceComponent: UbuntuShape { image: mascotImage } \n\
272 sourceComponent: UbuntuShape { image: mascotImage } \n\
@@ -596,15 +588,15 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
597 var headerVerticalAnchors;
589 var headerVerticalAnchors;
598 if (headerAsOverlay) {
590 if (headerAsOverlay) {
599− headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
591+ headerVerticalAnchors = 'bottom: artShapeLoader.bottom; \n\
600 bottomMargin: units.gu(1);\n';
592 bottomMargin: units.gu(1);\n';
602 if (hasArt) {
594 if (hasArt) {
603 if (isHorizontal) {
595 if (isHorizontal) {
604− headerVerticalAnchors = 'top: artShapeHolder.top; \n\
596+ headerVerticalAnchors = 'top: artShapeLoader.top; \n\
605 topMargin: units.gu(1);\n';
597 topMargin: units.gu(1);\n';
607− headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
599+ headerVerticalAnchors = 'top: artShapeLoader.bottom; \n\
608 topMargin: units.gu(1);\n';
600 topMargin: units.gu(1);\n';
@@ -616,7 +608,7 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
616 var headerLeftAnchor;
608 var headerLeftAnchor;
617 var headerLeftAnchorHasMargin = false;
609 var headerLeftAnchorHasMargin = false;
618 if (isHorizontal && hasArt) {
610 if (isHorizontal && hasArt) {
619− headerLeftAnchor = 'left: artShapeHolder.right; \n\
611+ headerLeftAnchor = 'left: artShapeLoader.right; \n\
620 leftMargin: units.gu(1);\n';
612 leftMargin: units.gu(1);\n';
621 headerLeftAnchorHasMargin = true;
613 headerLeftAnchorHasMargin = true;
622 } else if (isHorizontal && isAudio) {
614 } else if (isHorizontal && isAudio) {
@@ -870,7 +862,7 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
870 var audioButtonWidth;
862 var audioButtonWidth;
871 var audioButtonHeight;
863 var audioButtonHeight;
872 if (hasArt) {
864 if (hasArt) {
873− audioButtonAnchorsFill = 'artShapeHolder';
865+ audioButtonAnchorsFill = 'artShapeLoader';
874 audioButtonWidth = 'undefined';
866 audioButtonWidth = 'undefined';
875 audioButtonHeight = 'undefined';
867 audioButtonHeight = 'undefined';
@@ -884,15 +876,15 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
885 if (hasSummary) {
877 if (hasSummary) {
886 var summaryTopAnchor;
878 var summaryTopAnchor;
887− if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
879+ if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
888− else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
880+ else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
889 else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
881 else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
890 else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
882 else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
891 else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
883 else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
892 else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
884 else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
893 else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
885 else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
894 else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
886 else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
895− else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
887+ else if (hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
896 else summaryTopAnchor = 'parent.top';
888 else summaryTopAnchor = 'parent.top';
898 var summaryColor;
890 var summaryColor;
@@ -912,15 +904,15 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
912 var socialTopAnchor;
904 var socialTopAnchor;
914 if (hasSummary) socialTopAnchor = 'summary.bottom;';
906 if (hasSummary) socialTopAnchor = 'summary.bottom;';
915− else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
907+ else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
916− else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
908+ else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
917 else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
909 else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
918 else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
910 else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
919 else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
911 else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
920 else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
912 else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
921 else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
913 else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
922 else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
914 else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
923− else if (hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
915+ else if (hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
924 else socialTopAnchor = 'parent.top';
916 else socialTopAnchor = 'parent.top';
926 socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
918 socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
@@ -940,7 +932,7 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
940 if (hasBackground) {
932 if (hasBackground) {
941 touchdownAnchors = 'fill: backgroundLoader';
933 touchdownAnchors = 'fill: backgroundLoader';
942 } else if (touchdownOnArtShape) {
934 } else if (touchdownOnArtShape) {
943− touchdownAnchors = 'fill: artShapeHolder';
935+ touchdownAnchors = 'fill: artShapeLoader';
945 touchdownAnchors = 'fill: root'
937 touchdownAnchors = 'fill: root'
@@ -956,7 +948,7 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
956 } else if (isAudio) {
948 } else if (isAudio) {
957 implicitHeight += 'audioButton.height;\n';
949 implicitHeight += 'audioButton.height;\n';
958 } else if (headerAsOverlay) {
950 } else if (headerAsOverlay) {
959− implicitHeight += 'artShapeHolder.height;\n';
951+ implicitHeight += 'artShapeLoader.height;\n';
960 } else if (hasHeaderRow) {
952 } else if (hasHeaderRow) {
961 implicitHeight += 'row.y + row.height + units.gu(1);\n';
953 implicitHeight += 'row.y + row.height + units.gu(1);\n';
962 } else if (hasMascot) {
954 } else if (hasMascot) {
@@ -970,7 +962,7 @@ function cardString(template, components, isCardTool, artShapeStyle, categoryLay
970 } else if (hasTitle) {
962 } else if (hasTitle) {
971 implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
963 implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
972 } else if (hasArt) {
964 } else if (hasArt) {
973− implicitHeight += 'artShapeHolder.height;\n';
965+ implicitHeight += 'artShapeLoader.height;\n';
975 implicitHeight = '';
967 implicitHeight = '';