@@ -25,7 +25,7 @@ var kBackgroundLoaderCode = 'Loader {\n\
2525 objectName: "backgroundLoader"; \n\
2626 anchors.fill: parent; \n\
2727 asynchronous: %3; \n\
28− visible: status == Loader.Ready; \n\
28+ visible: status === Loader.Ready; \n\
2929 sourceComponent: UbuntuShape { \n\
3030 objectName: "background"; \n\
3131 radius: "medium"; \n\
@@ -75,7 +75,7 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
7575 aspect: UbuntuShape.DropShadow; \n\
7676 }';
7777
78−// %1 is used as anchors of artShapeHolder
78+// %1 is used as anchors of artShapeLoader
7979// %2 is used as image width
8080// %3 is used as image height
8181// %4 is whether the image should be visible
@@ -83,42 +83,39 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
8383// %6 is the shape code we want to use
8484// %7 is injected as code to artImage
8585// %8 is used as image fallback
86−var kArtShapeHolderCode = 'Item { \n\
87− id: artShapeHolder; \n\
86+var kArtShapeHolderCode = 'Loader { \n\
87+ id: artShapeLoader; \n\
8888 height: root.fixedArtShapeSize.height; \n\
8989 width: root.fixedArtShapeSize.width; \n\
9090 anchors { %1 } \n\
91− Loader { \n\
92− id: artShapeLoader; \n\
93− objectName: "artShapeLoader"; \n\
94− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
95− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
96− active: cardArt != ""; \n\
97− asynchronous: %5; \n\
98− visible: status == Loader.Ready; \n\
99− sourceComponent: Item { \n\
100− id: artShape; \n\
101− objectName: "artShape"; \n\
102− visible: image.status == Image.Ready; \n\
103− readonly property alias image: artImage; \n\
104− %6 \n\
105− width: root.fixedArtShapeSize.width; \n\
106− height: root.fixedArtShapeSize.height; \n\
107− CroppedImageMinimumSourceSize { \n\
108− id: artImage; \n\
109− objectName: "artImage"; \n\
110− source: artShapeLoader.cardArt; \n\
111− asynchronous: %5; \n\
112− visible: %4; \n\
113− width: %2; \n\
114− height: %3; \n\
115− %7 \n\
116− } \n\
91+ objectName: "artShapeLoader"; \n\
92+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
93+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
94+ active: cardArt != ""; \n\
95+ asynchronous: %5; \n\
96+ visible: status === Loader.Ready; \n\
97+ sourceComponent: Item { \n\
98+ id: artShape; \n\
99+ objectName: "artShape"; \n\
100+ visible: image.status === Image.Ready; \n\
101+ readonly property alias image: artImage; \n\
102+ %6 \n\
103+ width: root.fixedArtShapeSize.width; \n\
104+ height: root.fixedArtShapeSize.height; \n\
105+ CroppedImageMinimumSourceSize { \n\
106+ id: artImage; \n\
107+ objectName: "artImage"; \n\
108+ source: artShapeLoader.cardArt; \n\
109+ asynchronous: %5; \n\
110+ visible: %4; \n\
111+ width: %2; \n\
112+ height: %3; \n\
113+ %7 \n\
117114 } \n\
118115 } \n\
119116 }\n';
120117
121−// %1 is used as anchors of artShapeHolder
118+// %1 is used as anchors of artShapeLoader
122119// %2 is used as image width
123120// %3 is used as image height
124121// %4 is whether the image should be visible
@@ -126,37 +123,32 @@ var kArtShapeHolderCode = 'Item { \n\
126123// %6 is the shape code we want to use
127124// %7 is injected as code to artImage
128125// %8 is used as image fallback
129−var kArtShapeHolderCodeCardToolCard = 'Item { \n\
130− id: artShapeHolder; \n\
131− height: artShapeLoader.height; \n\
132− width: artShapeLoader.width; \n\
126+var kArtShapeHolderCodeCardToolCard = 'Loader { \n\
127+ id: artShapeLoader; \n\
133128 anchors { %1 } \n\
134− Loader { \n\
135− id: artShapeLoader; \n\
136− objectName: "artShapeLoader"; \n\
137− readonly property string cardArt: cardData && cardData["art"] || %8; \n\
138− onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
139− active: cardArt != ""; \n\
140− asynchronous: %5; \n\
141− visible: status == Loader.Ready; \n\
142− sourceComponent: Item { \n\
143− id: artShape; \n\
144− objectName: "artShape"; \n\
145− visible: image.status == Image.Ready; \n\
146− readonly property alias image: artImage; \n\
147− %6 \n\
148− width: image.status !== Image.Ready ? 0 : image.width; \n\
149− height: image.status !== Image.Ready ? 0 : image.height; \n\
150− CroppedImageMinimumSourceSize { \n\
151− id: artImage; \n\
152− objectName: "artImage"; \n\
153− source: artShapeLoader.cardArt; \n\
154− asynchronous: %5; \n\
155− visible: %4; \n\
156− width: %2; \n\
157− height: %3; \n\
158− %7 \n\
159− } \n\
129+ objectName: "artShapeLoader"; \n\
130+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
131+ onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
132+ active: cardArt != ""; \n\
133+ asynchronous: %5; \n\
134+ visible: status === Loader.Ready; \n\
135+ sourceComponent: Item { \n\
136+ id: artShape; \n\
137+ objectName: "artShape"; \n\
138+ visible: image.status === Image.Ready; \n\
139+ readonly property alias image: artImage; \n\
140+ %6 \n\
141+ width: image.status !== Image.Ready ? 0 : image.width; \n\
142+ height: image.status !== Image.Ready ? 0 : image.height; \n\
143+ CroppedImageMinimumSourceSize { \n\
144+ id: artImage; \n\
145+ objectName: "artImage"; \n\
146+ source: artShapeLoader.cardArt; \n\
147+ asynchronous: %5; \n\
148+ visible: %4; \n\
149+ width: %2; \n\
150+ height: %3; \n\
151+ %7 \n\
160152 } \n\
161153 } \n\
162154 }\n';
@@ -214,10 +206,10 @@ var kAudioButtonCode = 'AbstractButton { \n\
214206var kOverlayLoaderCode = 'Loader { \n\
215207 id: overlayLoader; \n\
216208 readonly property real overlayHeight: %2 + units.gu(2); \n\
217− anchors.fill: artShapeHolder; \n\
209+ anchors.fill: artShapeLoader; \n\
218210 active: artShapeLoader.active && artShapeLoader.item && artShapeLoader.item.image.status === Image.Ready || false; \n\
219211 asynchronous: %1; \n\
220− visible: showHeader && status == Loader.Ready; \n\
212+ visible: showHeader && status === Loader.Ready; \n\
221213 sourceComponent: UbuntuShapeOverlay { \n\
222214 id: overlay; \n\
223215 property real luminance: Style.luminance(overlayColor); \n\
@@ -274,7 +266,7 @@ var kMascotShapeLoaderCode = 'Loader { \n\
274266 objectName: "mascotShapeLoader"; \n\
275267 asynchronous: %2; \n\
276268 active: mascotImage.status === Image.Ready; \n\
277− visible: showHeader && active && status == Loader.Ready; \n\
269+ visible: showHeader && active && status === Loader.Ready; \n\
278270 width: units.gu(6); \n\
279271 height: units.gu(5.625); \n\
280272 sourceComponent: UbuntuShape { image: mascotImage } \n\
@@ -437,7 +429,7 @@ function sanitizeColor(colorString) {
437429 return colorString;
438430}
439431
440−function cardString(template, components, isCardTool, artShapeStyle) {
432+function cardString(template, components, isCardTool, artShapeStyle, categoryLayout) {
441433 var code;
442434
443435 var templateInteractive = (template == null ? true : (template["non-interactive"] !== undefined ? !template["non-interactive"] : true)) ? "true" : "false";
@@ -592,15 +584,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
592584
593585 var headerVerticalAnchors;
594586 if (headerAsOverlay) {
595− headerVerticalAnchors = 'bottom: artShapeHolder.bottom; \n\
587+ headerVerticalAnchors = 'bottom: artShapeLoader.bottom; \n\
596588 bottomMargin: units.gu(1);\n';
597589 } else {
598590 if (hasArt) {
599591 if (isHorizontal) {
600− headerVerticalAnchors = 'top: artShapeHolder.top; \n\
592+ headerVerticalAnchors = 'top: artShapeLoader.top; \n\
601593 topMargin: units.gu(1);\n';
602594 } else {
603− headerVerticalAnchors = 'top: artShapeHolder.bottom; \n\
595+ headerVerticalAnchors = 'top: artShapeLoader.bottom; \n\
604596 topMargin: units.gu(1);\n';
605597 }
606598 } else {
@@ -612,7 +604,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
612604 var headerLeftAnchor;
613605 var headerLeftAnchorHasMargin = false;
614606 if (isHorizontal && hasArt) {
615− headerLeftAnchor = 'left: artShapeHolder.right; \n\
607+ headerLeftAnchor = 'left: artShapeLoader.right; \n\
616608 leftMargin: units.gu(1);\n';
617609 headerLeftAnchorHasMargin = true;
618610 } else if (isHorizontal && isAudio) {
@@ -866,7 +858,7 @@ function cardString(template, components, isCardTool, artShapeStyle) {
866858 var audioButtonWidth;
867859 var audioButtonHeight;
868860 if (hasArt) {
869− audioButtonAnchorsFill = 'artShapeHolder';
861+ audioButtonAnchorsFill = 'artShapeLoader';
870862 audioButtonWidth = 'undefined';
871863 audioButtonHeight = 'undefined';
872864 } else {
@@ -880,15 +872,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
880872
881873 if (hasSummary) {
882874 var summaryTopAnchor;
883− if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
884− else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
875+ if (isHorizontal && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
876+ else if (headerAsOverlay && hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
885877 else if (hasHeaderRow) summaryTopAnchor = 'row.bottom';
886878 else if (hasTitleContainer) summaryTopAnchor = 'headerTitleContainer.bottom';
887879 else if (hasMascot) summaryTopAnchor = 'mascotImage.bottom';
888880 else if (hasAttributes) summaryTopAnchor = 'attributesRow.bottom';
889881 else if (hasSubtitle) summaryTopAnchor = 'subtitleLabel.bottom';
890882 else if (hasTitle) summaryTopAnchor = 'titleLabel.bottom';
891− else if (hasArt) summaryTopAnchor = 'artShapeHolder.bottom';
883+ else if (hasArt) summaryTopAnchor = 'artShapeLoader.bottom';
892884 else summaryTopAnchor = 'parent.top';
893885
894886 var summaryColor;
@@ -908,15 +900,15 @@ function cardString(template, components, isCardTool, artShapeStyle) {
908900 var socialTopAnchor;
909901
910902 if (hasSummary) socialTopAnchor = 'summary.bottom;';
911− else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
912− else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
903+ else if (isHorizontal && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
904+ else if (headerAsOverlay && hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
913905 else if (hasHeaderRow) socialTopAnchor = 'row.bottom;';
914906 else if (hasTitleContainer) socialTopAnchor = 'headerTitleContainer.bottom;';
915907 else if (hasMascot) socialTopAnchor = 'mascotImage.bottom;';
916908 else if (hasAttributes) socialTopAnchor = 'attributesRow.bottom;';
917909 else if (hasSubtitle) socialTopAnchor = 'subtitleLabel.bottom;';
918910 else if (hasTitle) socialTopAnchor = 'titleLabel.bottom;';
919− else if (hasArt) socialTopAnchor = 'artShapeHolder.bottom;';
911+ else if (hasArt) socialTopAnchor = 'artShapeLoader.bottom;';
920912 else socialTopAnchor = 'parent.top';
921913
922914 socialAnchors = 'top: ' + socialTopAnchor + ' left: parent.left; right: parent.right; topMargin: units.gu(1);'
@@ -936,36 +928,40 @@ function cardString(template, components, isCardTool, artShapeStyle) {
936928 if (hasBackground) {
937929 touchdownAnchors = 'fill: backgroundLoader';
938930 } else if (touchdownOnArtShape) {
939− touchdownAnchors = 'fill: artShapeHolder';
931+ touchdownAnchors = 'fill: artShapeLoader';
940932 } else {
941933 touchdownAnchors = 'fill: root'
942934 }
943935 code += kTouchdownCode.arg(touchdownAnchors);
944936 }
945937
946− var implicitHeight = 'implicitHeight: ';
947− if (hasSocialActions) {
948− implicitHeight += 'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
949− } else if (hasSummary) {
950− implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
951− } else if (isAudio) {
952− implicitHeight += 'audioButton.height;\n';
953− } else if (headerAsOverlay) {
954− implicitHeight += 'artShapeHolder.height;\n';
955− } else if (hasHeaderRow) {
956− implicitHeight += 'row.y + row.height + units.gu(1);\n';
957− } else if (hasMascot) {
958− implicitHeight += 'mascotImage.y + mascotImage.height;\n';
959− } else if (hasTitleContainer) {
960− implicitHeight += 'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
961− } else if (hasAttributes) {
962− implicitHeight += 'attributesRow.y + attributesRow.height + units.gu(1);\n';
963− } else if (hasSubtitle) {
964− implicitHeight += 'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
965− } else if (hasTitle) {
966− implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
967− } else if (hasArt) {
968− implicitHeight += 'artShapeHolder.height;\n';
938+ if (isCardTool || categoryLayout !== "grid") {
939+ var implicitHeight = 'implicitHeight: ';
940+ if (hasSocialActions) {
941+ implicitHeight += 'socialActionsRow.y + socialActionsRow.height + units.gu(1);\n';
942+ } else if (hasSummary) {
943+ implicitHeight += 'summary.y + summary.height + units.gu(1);\n';
944+ } else if (isAudio) {
945+ implicitHeight += 'audioButton.height;\n';
946+ } else if (headerAsOverlay) {
947+ implicitHeight += 'artShapeLoader.height;\n';
948+ } else if (hasHeaderRow) {
949+ implicitHeight += 'row.y + row.height + units.gu(1);\n';
950+ } else if (hasMascot) {
951+ implicitHeight += 'mascotImage.y + mascotImage.height;\n';
952+ } else if (hasTitleContainer) {
953+ implicitHeight += 'headerTitleContainer.y + headerTitleContainer.height + units.gu(1);\n';
954+ } else if (hasAttributes) {
955+ implicitHeight += 'attributesRow.y + attributesRow.height + units.gu(1);\n';
956+ } else if (hasSubtitle) {
957+ implicitHeight += 'subtitleLabel.y + subtitleLabel.height + units.gu(1);\n';
958+ } else if (hasTitle) {
959+ implicitHeight += 'titleLabel.y + titleLabel.height + units.gu(1);\n';
960+ } else if (hasArt) {
961+ implicitHeight += 'artShapeLoader.height;\n';
962+ } else {
963+ implicitHeight = '';
964+ }
969965 } else {
970966 implicitHeight = '';
971967 }
@@ -976,13 +972,13 @@ function cardString(template, components, isCardTool, artShapeStyle) {
976972 return code;
977973}
978974
979−function createCardComponent(parent, template, components, isCardTool, artShapeStyle, identifier) {
975+function createCardComponent(parent, template, components, isCardTool, artShapeStyle, categoryLayout, identifier) {
980976 var imports = 'import QtQuick 2.4; \n\
981977 import Ubuntu.Components 1.3; \n\
982978 import Ubuntu.Settings.Components 0.1; \n\
983979 import Dash 0.1;\n\
984980 import Utils 0.1;\n';
985− var card = cardString(template, components, isCardTool, artShapeStyle);
981+ var card = cardString(template, components, isCardTool, artShapeStyle, categoryLayout);
986982 var code = imports + 'Component {\n' + card + '}\n';
987983
988984 try {