git.iko.soy/unity8
on xenial help sign in
Horizontal Card layout.
9bb2f35Michał Karnicki
qml/Dash/Card.qml+7−6
compare with xenial
unifiedsplit
@@ -25,6 +25,7 @@ Item {
25
25
26 width: {
26 width: {
27 if (template !== undefined) {
27 if (template !== undefined) {
28+ if (template["card-layout"] === "horizontal") return units.gu(38);
28 switch (template['card-size']) {
29 switch (template['card-size']) {
29 case "small": return units.gu(12);
30 case "small": return units.gu(12);
30 case "large": return units.gu(38);
31 case "large": return units.gu(38);
@@ -39,19 +40,19 @@ Item {
39 objectName: "artShape"
40 objectName: "artShape"
40 width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
41 width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
41 height: image.fillMode === Image.PreserveAspectCrop || aspect > image.aspect ? image.height : width / image.aspect
42 height: image.fillMode === Image.PreserveAspectCrop || aspect > image.aspect ? image.height : width / image.aspect
42− anchors.horizontalCenter: parent.horizontalCenter
43+ anchors.horizontalCenter: template && template["card-layout"] === "horizontal" ? undefined : parent.horizontalCenter
43
44
44 property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
45 property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
45
46
46 image: Image {
47 image: Image {
47− width: root.width
48+ width: template && template["card-layout"] === "horizontal" ? height * artShape.aspect : root.width
48− height: width / artShape.aspect
49+ height: template && template["card-layout"] === "horizontal" ? header.height : width / artShape.aspect
49 objectName: "artImage"
50 objectName: "artImage"
50 source: cardData && cardData["art"] || ""
51 source: cardData && cardData["art"] || ""
51 // FIXME uncomment when having investigated / fixed the crash
52 // FIXME uncomment when having investigated / fixed the crash
52 //sourceSize.width: width > height ? width : 0
53 //sourceSize.width: width > height ? width : 0
53 //sourceSize.height: height > width ? height : 0
54 //sourceSize.height: height > width ? height : 0
54− fillMode: components["art"]["fill-mode"] == "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
55+ fillMode: components["art"]["fill-mode"] === "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
55
56
56 property real aspect: implicitWidth / implicitHeight
57 property real aspect: implicitWidth / implicitHeight
57 }
58 }
@@ -61,8 +62,8 @@ Item {
61 id: header
62 id: header
62 objectName: "cardHeader"
63 objectName: "cardHeader"
63 anchors {
64 anchors {
64− top: artShape.bottom
65+ top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
65− left: parent.left
66+ left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
66 right: parent.right
67 right: parent.right
67 }
68 }
68
69
tests/qmltests/Dash/tst_Card.qml+45−3
@@ -100,7 +100,12 @@ Rectangle {
100 {
100 {
101 "name": "Art, title - vertical, fitted",
101 "name": "Art, title - vertical, fitted",
102 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
102 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
103− }
103+ },
104+ {
105+ "name": "Art, header, summary - horizontal",
106+ "layout": { "template": { "card-layout": "horizontal" },
107+ "components": JSON.parse(fullMapping) }
108+ },
104 ]
109 ]
105
110
106 Card {
111 Card {
@@ -231,6 +236,7 @@ Rectangle {
231 { tag: "Small", width: units.gu(12), size: "small", index: 0 },
236 { tag: "Small", width: units.gu(12), size: "small", index: 0 },
232 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
237 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
233 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
238 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
239+ { tag: "Horizontal", width: units.gu(38), index: 5 },
234 ]
240 ]
235 }
241 }
236
242
@@ -263,6 +269,9 @@ Rectangle {
263 { tag: "Large", width: units.gu(38), index: 2 },
269 { tag: "Large", width: units.gu(38), index: 2 },
264 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
270 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
265 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
271 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
272+ { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
273+ { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
274+ { tag: "HorizontalWidth", width: function() { return header.x }, index: 5 },
266 ]
275 ]
267 }
276 }
268
277
@@ -280,16 +289,49 @@ Rectangle {
280 }
289 }
281
290
282 if (data.hasOwnProperty("width")) {
291 if (data.hasOwnProperty("width")) {
292+ if (typeof data.width === "function") {
293+ tryCompareFunction(function() { return art.width === data.width() }, true);
283− tryCompare(art, "width", data.width);
294+ } else tryCompare(art, "width", data.width);
284 }
295 }
285
296
286 if (data.hasOwnProperty("height")) {
297 if (data.hasOwnProperty("height")) {
298+ if (typeof data.height === "function") {
299+ tryCompareFunction(function() { return art.height === data.height() }, true);
287− tryCompare(art, "height", data.height);
300+ } else tryCompare(art, "height", data.height);
288 }
301 }
289
302
290 if (data.hasOwnProperty("fill")) {
303 if (data.hasOwnProperty("fill")) {
291 tryCompare(artImage, "fillMode", data.fill);
304 tryCompare(artImage, "fillMode", data.fill);
292 }
305 }
293 }
306 }
307+
308+ function test_art_layout_data() {
309+ return [
310+ { tag: "Vertical", left: function() { return 0 }, index: 0},
311+ { tag: "Horizontal", left: function() { return art.width }, index: 5 }
312+ ];
313+ }
314+
315+ function test_art_layout(data) {
316+ selector.selectedIndex = data.index;
317+
318+ tryCompare(testCase.header, "x", data.left());
319+ }
320+
321+ function test_header_layout_data() {
322+ return [
323+ { tag: "Vertical", top: function() { return art.y + art.height },
324+ left: function() { return art.x }, index: 0 },
325+ { tag: "Horizontal", top: function() { return art.y },
326+ left: function() { return art.x + art.width }, index: 5 }
327+ ]
328+ }
329+
330+ function test_header_layout(data) {
331+ selector.selectedIndex = data.index;
332+
333+ tryCompareFunction(function() { return testCase.header.y === data.top() }, true);
334+ tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
335+ }
294 }
336 }
295}
337}