on xenial help sign in
Horizontal Card layout.
commit9bb2f3504c14a6982164b0368f126381c697465c authorMichał Karnicki <michal.karnicki@canonical.com> dateFri 10 Jan 2014, 11:54 (13 years ago) parent4d7d3005ba6049
2 files changed+52−9
qml/Dash/Card.qml+7−6 tests/qmltests/Dash/tst_Card.qml+45−3
qml/Dash/Card.qml+7−6
@@ -25,6 +25,7 @@ Item {
2525
2626 width: {
2727 if (template !== undefined) {
28+ if (template["card-layout"] === "horizontal") return units.gu(38);
2829 switch (template['card-size']) {
2930 case "small": return units.gu(12);
3031 case "large": return units.gu(38);
@@ -39,19 +40,19 @@ Item {
3940 objectName: "artShape"
4041 width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
4142 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
4344
4445 property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
4546
4647 image: Image {
47− width: root.width
48− height: width / artShape.aspect
48+ width: template && template["card-layout"] === "horizontal" ? height * artShape.aspect : root.width
49+ height: template && template["card-layout"] === "horizontal" ? header.height : width / artShape.aspect
4950 objectName: "artImage"
5051 source: cardData && cardData["art"] || ""
5152 // FIXME uncomment when having investigated / fixed the crash
5253 //sourceSize.width: width > height ? width : 0
5354 //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
5556
5657 property real aspect: implicitWidth / implicitHeight
5758 }
@@ -61,8 +62,8 @@ Item {
6162 id: header
6263 objectName: "cardHeader"
6364 anchors {
64− top: artShape.bottom
65− left: parent.left
65+ top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
66+ left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
6667 right: parent.right
6768 }
6869
tests/qmltests/Dash/tst_Card.qml+45−3
@@ -100,7 +100,12 @@ Rectangle {
100100 {
101101 "name": "Art, title - vertical, fitted",
102102 "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+ },
104109 ]
105110
106111 Card {
@@ -231,6 +236,7 @@ Rectangle {
231236 { tag: "Small", width: units.gu(12), size: "small", index: 0 },
232237 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
233238 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
239+ { tag: "Horizontal", width: units.gu(38), index: 5 },
234240 ]
235241 }
236242
@@ -263,6 +269,9 @@ Rectangle {
263269 { tag: "Large", width: units.gu(38), index: 2 },
264270 { tag: "Wide", height: units.gu(19), size: "large", index: 3 },
265271 { 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 },
266275 ]
267276 }
268277
@@ -280,16 +289,49 @@ Rectangle {
280289 }
281290
282291 if (data.hasOwnProperty("width")) {
283− tryCompare(art, "width", data.width);
292+ if (typeof data.width === "function") {
293+ tryCompareFunction(function() { return art.width === data.width() }, true);
294+ } else tryCompare(art, "width", data.width);
284295 }
285296
286297 if (data.hasOwnProperty("height")) {
287− tryCompare(art, "height", data.height);
298+ if (typeof data.height === "function") {
299+ tryCompareFunction(function() { return art.height === data.height() }, true);
300+ } else tryCompare(art, "height", data.height);
288301 }
289302
290303 if (data.hasOwnProperty("fill")) {
291304 tryCompare(artImage, "fillMode", data.fill);
292305 }
293306 }
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+ }
294336 }
295337}