git.iko.soy/unity8
on xenial help sign in
Horizontal Card layout.
d72234aMichał Karnicki
qml/Dash/Card.qml+14−13
compare with xenial
unifiedsplit
@@ -8,13 +8,14 @@ Item {
8 property var cardData
8 property var cardData
9
9
10 width: {
10 width: {
11− if (template !== undefined) {
11+ if (template !== undefined) {
12+ if (template["card-layout"] === "horizontal") return units.gu(38);
12− switch (template['card-size']) {
13+ switch (template['card-size']) {
13− case "small": return units.gu(12);
14+ case "small": return units.gu(12);
14− case "large": return units.gu(38);
15+ case "large": return units.gu(38);
15− }
16+ }
16− }
17+ }
17− return units.gu(18.5);
18+ return units.gu(18.5);
18 }
19 }
19 height: childrenRect.height
20 height: childrenRect.height
20
21
@@ -23,19 +24,19 @@ Item {
23 objectName: "artShape"
24 objectName: "artShape"
24 width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
25 width: image.fillMode === Image.PreserveAspectCrop || aspect < image.aspect ? image.width : height * image.aspect
25 height: image.fillMode === Image.PreserveAspectCrop || aspect > image.aspect ? image.height : width / image.aspect
26 height: image.fillMode === Image.PreserveAspectCrop || aspect > image.aspect ? image.height : width / image.aspect
26− anchors.horizontalCenter: parent.horizontalCenter
27+ anchors.horizontalCenter: template && template["card-layout"] === "horizontal" ? undefined : parent.horizontalCenter
27
28
28 property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
29 property real aspect: components !== undefined ? components["art"]["aspect-ratio"] : 1
29
30
30 image: Image {
31 image: Image {
31− width: root.width
32+ width: template && template["card-layout"] === "horizontal" ? height * artShape.aspect : root.width
32− height: width / artShape.aspect
33+ height: template && template["card-layout"] === "horizontal" ? header.height : width / artShape.aspect
33 objectName: "artImage"
34 objectName: "artImage"
34 source: cardData && cardData["art"] || ""
35 source: cardData && cardData["art"] || ""
35 // FIXME uncomment when having investigated / fixed the crash
36 // FIXME uncomment when having investigated / fixed the crash
36 //sourceSize.width: width > height ? width : 0
37 //sourceSize.width: width > height ? width : 0
37 //sourceSize.height: height > width ? height : 0
38 //sourceSize.height: height > width ? height : 0
38− fillMode: components["art"]["fill-mode"] == "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
39+ fillMode: components["art"]["fill-mode"] === "fit" ? Image.PreserveAspectFit: Image.PreserveAspectCrop
39
40
40 property real aspect: implicitWidth / implicitHeight
41 property real aspect: implicitWidth / implicitHeight
41 }
42 }
@@ -45,8 +46,8 @@ Item {
45 id: header
46 id: header
46 objectName: "cardHeader"
47 objectName: "cardHeader"
47 anchors {
48 anchors {
48− top: artShape.bottom
49+ top: template && template["card-layout"] === "horizontal" ? artShape.top : artShape.bottom
49− left: parent.left
50+ left: template && template["card-layout"] === "horizontal" ? artShape.right : parent.left
50 right: parent.right
51 right: parent.right
51 }
52 }
52
53
tests/qmltests/Dash/tst_Card.qml+69−1
@@ -84,7 +84,12 @@ Rectangle {
84 {
84 {
85 "name": "Art, title - vertical, fitted",
85 "name": "Art, title - vertical, fitted",
86 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
86 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "art": { "fill-mode": "fit" } }) }
87− }
87+ },
88+ {
89+ "name": "Art, header, summary - horizontal",
90+ "layout": { "template": { "card-layout": "horizontal", "card-size": "medium" },
91+ "components": JSON.parse(fullMapping) }
92+ },
88 ]
93 ]
89
94
90 Card {
95 Card {
@@ -274,5 +279,68 @@ Rectangle {
274 tryCompare(artImage, "fillMode", data.fill);
279 tryCompare(artImage, "fillMode", data.fill);
275 }
280 }
276 }
281 }
282+
283+ function test_art_image_size_data() {
284+ return [
285+ { tag: "CardVerticalMedium", width: header.width, index: 0 },
286+ { tag: "CardHorizontalMedium", height: header.height, index: 5 },
287+ ]
288+ }
289+
290+ function test_art_image_size(data) {
291+ selector.selectedIndex = data.index;
292+
293+ if (data.hasOwnProperty("width")) {
294+ tryCompare(artImage, "width", data.width);
295+ }
296+
297+ if (data.hasOwnProperty("height")) {
298+ tryCompare(artImage, "height", data.height);
299+ }
300+ }
301+
302+ function test_card_horizontal_layout_data() {
303+ return [
304+ { tag: "Horizontal", width: units.gu(38), index: 5 }
305+ ]
306+ }
307+
308+ function test_card_horizontal_layout(data) {
309+ selector.selectedIndex = data.index;
310+
311+ if (data.hasOwnProperty("width")) {
312+ tryCompare(card, "width", data.width);
313+ }
314+ }
315+
316+ function test_art_anchors_data() {
317+ return [
318+ { tag: "CardVertical", headerX: 0, index: 0 },
319+ { tag: "CardHorizontal", headerX: artImage.width, index: 5 },
320+ ];
321+ }
322+
323+ function test_art_anchors(data) {
324+ selector.selectedIndex = data.index;
325+
326+ if (data.hasOwnProperty("headerX")) {
327+ tryCompare(testCase.header.x, data.headerLeft, data.value);
328+ }
329+ }
330+
331+ function test_header_anchors_data() {
332+ return [
333+ { tag: "CardVertical", top: art.bottom, left: card.left, index: 0 },
334+ { tag: "CardHorizontal", top: art.top, left: art.right, index: 5 }
335+ ]
336+ }
337+
338+ function test_header_anchors(data) {
339+ selector.selectedIndex = data.index;
340+
341+ tryCompare(testCase.header, "top", data.top);
342+ tryCompare(testCase.header, "left", data.left);
343+ }
344+
277 }
345 }
278}
346}