@@ -74,7 +74,7 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
7474 aspect: UbuntuShape.DropShadow; \n\
7575 }';
7676
77−// %1 is used as anchors of artShapeHolder
77+// %1 is used as anchors of artShapeLoader
7878// %2 is used as image width
7979// %3 is used as image height
8080// %4 is whether the image should be visible
@@ -82,42 +82,37 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
8282// %6 is the shape code we want to use
8383// %7 is injected as code to artImage
8484// %8 is used as image fallback
85−var kArtShapeHolderCode = 'Item { \n\
86− id: artShapeHolder; \n\
87− height: root.fixedArtShapeSize.height; \n\
88− width: root.fixedArtShapeSize.width; \n\
85+var kArtShapeHolderCode = 'Loader { \n\
86+ id: artShapeLoader; \n\
8987 anchors { %1 } \n\
90− Loader { \n\
91− id: artShapeLoader; \n\
92− objectName: "artShapeLoader"; \n\
93− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
94− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
95− active: cardArt != ""; \n\
96− asynchronous: %5; \n\
97− visible: status == Loader.Ready; \n\
98− sourceComponent: Item { \n\
99− id: artShape; \n\
100− objectName: "artShape"; \n\
101− visible: image.status == Image.Ready; \n\
102− readonly property alias image: artImage; \n\
103− %6 \n\
104− width: root.fixedArtShapeSize.width; \n\
105− height: root.fixedArtShapeSize.height; \n\
106− CroppedImageMinimumSourceSize { \n\
107− id: artImage; \n\
108− objectName: "artImage"; \n\
109− source: artShapeLoader.cardArt; \n\
110− asynchronous: %5; \n\
111− visible: %4; \n\
112− width: %2; \n\
113− height: %3; \n\
114− %7 \n\
115− } \n\
88+ objectName: "artShapeLoader"; \n\
89+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
90+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
91+ active: cardArt != ""; \n\
92+ asynchronous: %5; \n\
93+ visible: status == Loader.Ready; \n\
94+ sourceComponent: Item { \n\
95+ id: artShape; \n\
96+ objectName: "artShape"; \n\
97+ visible: image.status == Image.Ready; \n\
98+ readonly property alias image: artImage; \n\
99+ %6 \n\
100+ width: root.fixedArtShapeSize.width; \n\
101+ height: root.fixedArtShapeSize.height; \n\
102+ CroppedImageMinimumSourceSize { \n\
103+ id: artImage; \n\
104+ objectName: "artImage"; \n\
105+ source: artShapeLoader.cardArt; \n\
106+ asynchronous: %5; \n\
107+ visible: %4; \n\
108+ width: %2; \n\
109+ height: %3; \n\
110+ %7 \n\
116111 } \n\
117112 } \n\
118113 }\n';
119114
120−// %1 is used as anchors of artShapeHolder
115+// %1 is used as anchors of artShapeLoader
121116// %2 is used as image width
122117// %3 is used as image height
123118// %4 is whether the image should be visible
@@ -125,37 +120,32 @@ var kArtShapeHolderCode = 'Item { \n\
125120// %6 is the shape code we want to use
126121// %7 is injected as code to artImage
127122// %8 is used as image fallback
128−var kArtShapeHolderCodeCardToolCard = 'Item { \n\
129− id: artShapeHolder; \n\
130− height: artShapeLoader.height; \n\
131− width: artShapeLoader.width; \n\
123+var kArtShapeHolderCodeCardToolCard = 'Loader { \n\
124+ id: artShapeLoader; \n\
132125 anchors { %1 } \n\
133− Loader { \n\
134− id: artShapeLoader; \n\
135− objectName: "artShapeLoader"; \n\
136− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
137− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
138− active: cardArt != ""; \n\
139− asynchronous: %5; \n\
140− visible: status == Loader.Ready; \n\
141− sourceComponent: Item { \n\
142− id: artShape; \n\
143− objectName: "artShape"; \n\
144− visible: image.status == Image.Ready; \n\
145− readonly property alias image: artImage; \n\
146− %6 \n\
147− width: image.status !== Image.Ready ? 0 : image.width; \n\
148− height: image.status !== Image.Ready ? 0 : image.height; \n\
149− CroppedImageMinimumSourceSize { \n\
150− id: artImage; \n\
151− objectName: "artImage"; \n\
152− source: artShapeLoader.cardArt; \n\
153− asynchronous: %5; \n\
154− visible: %4; \n\
155− width: %2; \n\
156− height: %3; \n\
157− %7 \n\
158− } \n\
126+ objectName: "artShapeLoader"; \n\
127+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
128+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
129+ active: cardArt != ""; \n\
130+ asynchronous: %5; \n\
131+ visible: status == Loader.Ready; \n\
132+ sourceComponent: Item { \n\
133+ id: artShape; \n\
134+ objectName: "artShape"; \n\
135+ visible: image.status == Image.Ready; \n\
136+ readonly property alias image: artImage; \n\
137+ %6 \n\
138+ width: image.status !== Image.Ready ? 0 : image.width; \n\
139+ height: image.status !== Image.Ready ? 0 : image.height; \n\
140+ CroppedImageMinimumSourceSize { \n\
141+ id: artImage; \n\
142+ objectName: "artImage"; \n\
143+ source: artShapeLoader.cardArt; \n\
144+ asynchronous: %5; \n\
145+ visible: %4; \n\
146+ width: %2; \n\
147+ height: %3; \n\
148+ %7 \n\
159149 } \n\
160150 } \n\
161151 }\n';
@@ -213,7 +203,7 @@ var kAudioButtonCode = 'AbstractButton { \n\
213203var kOverlayLoaderCode = 'Loader { \n\
214204 id: overlayLoader; \n\
215205 readonly property real overlayHeight: %2 + units.gu(2); \n\
216− anchors.fill: artShapeHolder; \n\
206+ anchors.fill: artShapeLoader; \n\
217207 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
218208 asynchronous: %1; \n\
219209 visible: showHeader && status == Loader.Ready; \n\
@@ -591,15 +581,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
591581
592582 var headerVerticalAnchors;
593583 if (headerAsOverlay) {
594− headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
584+ headerVerticalAnchors = 'bottom: artShapeLoader.bottom; \n\
595585 bottomMargin: units.gu(1);\n';
596586 } else {
597587 if (hasArt) {
598588 if (isHorizontal) {
599− headerVerticalAnchors = 'top: artShapeHolder.top; \n\
589+ headerVerticalAnchors = 'top: artShapeLoader.top; \n\
600590 topMargin: units.gu(1);\n';
601591 } else {
602− headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
592+ headerVerticalAnchors = 'top: artShapeLoader.bottom; \n\
603593 topMargin: units.gu(1);\n';
604594 }
605595 } else {
@@ -611,7 +601,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
611601 var headerLeftAnchor;
612602 var headerLeftAnchorHasMargin = false;
613603 if (isHorizontal && hasArt) {
614− headerLeftAnchor = 'left: artShapeHolder.right; \n\
604+ headerLeftAnchor = 'left: artShapeLoader.right; \n\
615605 leftMargin: units.gu(1);\n';
616606 headerLeftAnchorHasMargin = true;
617607 } else if (isHorizontal && isAudio) {
@@ -865,7 +855,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
865855 var audioButtonWidth;
866856 var audioButtonHeight;
867857 if (hasArt) {
868− audioButtonAnchorsFill = 'artShapeHolder';
858+ audioButtonAnchorsFill = 'artShapeLoader';
869859 audioButtonWidth = 'undefined';
870860 audioButtonHeight = 'undefined';
871861 } else {
@@ -879,15 +869,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
879869
880870 if (hasSummary) {
881871 var summaryTopAnchor;
882− if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
883− else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
872+ if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
873+ else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
884874 else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
885875 else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
886876 else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
887877 else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
888878 else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
889879 else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
890− else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
880+ else if (hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
891881 else summaryTopAnchor = 'parent.top';
892882
893883 var summaryColor;
@@ -907,15 +897,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
907897 var socialTopAnchor;
908898
909899 if (hasSummary) socialTopAnchor = 'summary.bottom;';
910− else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
911− else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
900+ else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
901+ else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
912902 else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
913903 else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
914904 else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
915905 else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
916906 else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
917907 else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
918− else if (hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
908+ else if (hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
919909 else socialTopAnchor = 'parent.top';
920910
921911 socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
@@ -935,7 +925,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
935925 if (hasBackground) {
936926 touchdownAnchors = 'fill: backgroundLoader';
937927 } else if (touchdownOnArtShape) {
938− touchdownAnchors = 'fill: artShapeHolder';
928+ touchdownAnchors = 'fill: artShapeLoader';
939929 } else {
940930 touchdownAnchors = 'fill: root'
941931 }
@@ -950,7 +940,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
950940 } else if (isAudio) {
951941 implicitHeight += 'audioButton.height;\n';
952942 } else if (headerAsOverlay) {
953− implicitHeight += 'artShapeHolder.height;\n';
943+ implicitHeight += 'artShapeLoader.height;\n';
954944 } else if (hasHeaderRow) {
955945 implicitHeight += 'row.y + row.height + units.gu(1);\n';
956946 } else if (hasMascot) {
@@ -964,7 +954,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
964954 } else if (hasTitle) {
965955 implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
966956 } else if (hasArt) {
967− implicitHeight += 'artShapeHolder.height;\n';
957+ implicitHeight += 'artShapeLoader.height;\n';
968958 } else {
969959 implicitHeight = '';
970960 }