@@ -78,52 +78,40 @@ var kArtProportionalShapeCode = 'ProportionalShape { \n\
7878// %2 is used as image width
7979// %3 is used as image height
8080// %4 is whether the image should be visible
81−// %5 is used as aspect ratio fallback
82−// %6 is whether the loader should be asynchronous or not
83−// %7 is the shape code we want to use
84−// %8 is injected as code to artImage
85−// %9 is used as image fallback
81+// %5 is whether the loader should be asynchronous or not
82+// %6 is the shape code we want to use
83+// %7 is injected as code to artImage
84+// %8 is used as image fallback
8685var kArtShapeHolderCode = 'Item { \n\
8786 id: artShapeHolder; \n\
88− height: root.fixedArtShapeSize.height > 0 ? root.fixedArtShapeSize.height : artShapeLoader.height; \n\
89− width: root.fixedArtShapeSize.width > 0 ? root.fixedArtShapeSize.width : artShapeLoader.width; \n\
87+ height: root.fixedArtShapeSize.height; \n\
88+ width: root.fixedArtShapeSize.width; \n\
9089 anchors { %1 } \n\
9190 Loader { \n\
9291 id: artShapeLoader; \n\
9392 objectName: "artShapeLoader"; \n\
94− readonly property string cardArt: cardData && cardData["art"] || %9; \n\
93+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
9594 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
9695 active: cardArt != ""; \n\
97− asynchronous: %6; \n\
96+ asynchronous: %5; \n\
9897 visible: status == Loader.Ready; \n\
9998 sourceComponent: Item { \n\
10099 id: artShape; \n\
101100 objectName: "artShape"; \n\
102101 visible: image.status == Image.Ready; \n\
103102 readonly property alias image: artImage; \n\
104− %7 \n\
105− readonly property real fixedArtShapeSizeAspect: (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) ? root.fixedArtShapeSize.width / root.fixedArtShapeSize.height : -1; \n\
106− readonly property real aspect: fixedArtShapeSizeAspect > 0 ? fixedArtShapeSizeAspect : %5; \n\
107− Component.onCompleted: { updateWidthHeightBindings(); } \n\
108− Connections { target: root; onFixedArtShapeSizeChanged: updateWidthHeightBindings(); } \n\
109− function updateWidthHeightBindings() { \n\
110− if (root.fixedArtShapeSize.height > 0 && root.fixedArtShapeSize.width > 0) { \n\
111− width = root.fixedArtShapeSize.width; \n\
112− height = root.fixedArtShapeSize.height; \n\
113− } else { \n\
114− width = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.width }); \n\
115− height = Qt.binding(function() { return image.status !== Image.Ready ? 0 : image.height }); \n\
116− } \n\
117− } \n\
103+ %6 \n\
104+ width: root.fixedArtShapeSize.width; \n\
105+ height: root.fixedArtShapeSize.height; \n\
118106 CroppedImageMinimumSourceSize { \n\
119107 id: artImage; \n\
120108 objectName: "artImage"; \n\
121109 source: artShapeLoader.cardArt; \n\
122− asynchronous: %6; \n\
110+ asynchronous: %5; \n\
123111 visible: %4; \n\
124112 width: %2; \n\
125113 height: %3; \n\
126− %8 \n\
114+ %7 \n\
127115 } \n\
128116 } \n\
129117 } \n\
@@ -133,11 +121,10 @@ var kArtShapeHolderCode = 'Item { \n\
133121// %2 is used as image width
134122// %3 is used as image height
135123// %4 is whether the image should be visible
136−// %5 is used as aspect ratio
137−// %6 is whether the loader should be asynchronous or not
138−// %7 is the shape code we want to use
139−// %8 is injected as code to artImage
140−// %9 is used as image fallback
124+// %5 is whether the loader should be asynchronous or not
125+// %6 is the shape code we want to use
126+// %7 is injected as code to artImage
127+// %8 is used as image fallback
141128var kArtShapeHolderCodeCardToolCard = 'Item { \n\
142129 id: artShapeHolder; \n\
143130 height: artShapeLoader.height; \n\
@@ -146,29 +133,28 @@ var kArtShapeHolderCodeCardToolCard = 'Item { \n\
146133 Loader { \n\
147134 id: artShapeLoader; \n\
148135 objectName: "artShapeLoader"; \n\
149− readonly property string cardArt: cardData && cardData["art"] || %9; \n\
136+ readonly property string cardArt: cardData && cardData["art"] || %8; \n\
150137 onCardArtChanged: { if (item) { item.image.source = cardArt; } } \n\
151138 active: cardArt != ""; \n\
152− asynchronous: %6; \n\
139+ asynchronous: %5; \n\
153140 visible: status == Loader.Ready; \n\
154141 sourceComponent: Item { \n\
155142 id: artShape; \n\
156143 objectName: "artShape"; \n\
157144 visible: image.status == Image.Ready; \n\
158145 readonly property alias image: artImage; \n\
159− %7 \n\
160− readonly property real aspect: %5; \n\
146+ %6 \n\
161147 width: image.status !== Image.Ready ? 0 : image.width; \n\
162148 height: image.status !== Image.Ready ? 0 : image.height; \n\
163149 CroppedImageMinimumSourceSize { \n\
164150 id: artImage; \n\
165151 objectName: "artImage"; \n\
166152 source: artShapeLoader.cardArt; \n\
167− asynchronous: %6; \n\
153+ asynchronous: %5; \n\
168154 visible: %4; \n\
169155 width: %2; \n\
170156 height: %3; \n\
171− %8 \n\
157+ %7 \n\
172158 } \n\
173159 } \n\
174160 } \n\
@@ -529,37 +515,43 @@ function cardString(template, components, isCardTool, artShapeStyle) {
529515 if (hasArt) {
530516 code += 'readonly property size artShapeSize: artShapeLoader.item ? Qt.size(artShapeLoader.item.width, artShapeLoader.item.height) : Qt.size(-1, -1);\n';
531517
518+ var artShapeAspect;
519+ if (isCardTool) {
520+ var artShapeAspect = components["art"] && components["art"]["aspect-ratio"] || 1;
521+ if (isNaN(artShapeAspect)) {
522+ artShapeAspect = 1;
523+ }
524+ } else {
525+ artShapeAspect = "(root.fixedArtShapeSize.width / root.fixedArtShapeSize.height)";
526+ }
527+
532528 var widthCode, heightCode;
533529 var artAnchors;
534530 if (isHorizontal) {
535531 artAnchors = 'left: parent.left';
536532 if (hasMascot || hasTitle) {
537− widthCode = 'height * artShape.aspect'
533+ widthCode = 'height * ' + artShapeAspect;
538534 heightCode = 'headerHeight + 2 * units.gu(1)';
539535 } else {
540536 // This side of the else is a bit silly, who wants an horizontal layout without mascot and title?
541537 // So we define a "random" height of the image height + 2 gu for the margins
542− widthCode = 'height * artShape.aspect'
538+ widthCode = 'height * ' + artShapeAspect
543539 heightCode = 'units.gu(7.625)';
544540 }
545541 } else {
546542 artAnchors = 'horizontalCenter: parent.horizontalCenter;';
547543 widthCode = 'root.width'
548− heightCode = 'width / artShape.aspect';
544+ heightCode = 'width / ' + artShapeAspect;
549545 }
550546
551− var aspectRatio = components["art"] && components["art"]["aspect-ratio"] || 1;
552− if (isNaN(aspectRatio)) {
553− aspectRatio = 1;
554− }
555547 var fallback = !isCardTool && components["art"] && components["art"]["fallback"] || "";
556548 fallback = encodeURI(fallback);
557549 var fallbackStatusCode = "";
558550 var fallbackURICode = '""';
559551 if (fallback !== "") {
560− // fallbackStatusCode has %9 in it because we want to substitute it for fallbackURICode
561− // which in kArtShapeHolderCode is %9
562− fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %9;';
552+ // fallbackStatusCode has %8 in it because we want to substitute it for fallbackURICode
553+ // which in kArtShapeHolderCode is %8
554+ fallbackStatusCode += 'onStatusChanged: if (status === Image.Error) source = %8;';
563555 fallbackURICode = 'decodeURI("%1")'.arg(fallback);
564556 }
565557 var artShapeHolderShapeCode;
@@ -584,7 +576,6 @@ function cardString(template, components, isCardTool, artShapeStyle) {
584576 .arg(widthCode)
585577 .arg(heightCode)
586578 .arg(isConciergeMode ? "true" : "false")
587− .arg(aspectRatio)
588579 .arg(asynchronous)
589580 .arg(artShapeHolderShapeCode)
590581 .arg(fallbackStatusCode)
@@ -911,10 +902,6 @@ function cardString(template, components, isCardTool, artShapeStyle) {
911902 code += kSummaryLabelCode.arg(summaryTopAnchor).arg(summaryTopMargin).arg(summaryColor);
912903 }
913904
914−// <<<<<<< TREE
915−// if (artShapeStyle != "shadow" && artShapeStyle != "icon") {
916−// var touchdownAnchors;
917−// =======
918905 if (hasSocialActions) {
919906 var socialAnchors;
920907 var socialTopAnchor;