git.iko.soy/unity8
on xenial help sign in
Improve Card and CardHeader layouts:
9d03f19Michał Sawicz
qml/Dash/Card.qml+3−1
compare with xenial
unifiedsplit
@@ -37,6 +37,7 @@ Item {
37
37
38 UbuntuShape {
38 UbuntuShape {
39 id: artShape
39 id: artShape
40+ radius: "medium"
40 objectName: "artShape"
41 objectName: "artShape"
41 width: {
42 width: {
42 if (!visible) return 0
43 if (!visible) return 0
@@ -82,11 +83,12 @@ Item {
82
83
83 Label {
84 Label {
84 objectName: "summaryLabel"
85 objectName: "summaryLabel"
85− anchors { top: header.bottom; left: parent.left; right: parent.right }
86+ anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
86 wrapMode: Text.Wrap
87 wrapMode: Text.Wrap
87 maximumLineCount: 5
88 maximumLineCount: 5
88 elide: Text.ElideRight
89 elide: Text.ElideRight
89 text: cardData && cardData["summary"] || ""
90 text: cardData && cardData["summary"] || ""
90 height: text ? implicitHeight : 0
91 height: text ? implicitHeight : 0
92+ fontSize: "small"
91 }
93 }
92}
94}
qml/Dash/CardHeader.qml+14−3
@@ -27,14 +27,21 @@ Item {
27 property alias altPrice: altPriceLabel.text
27 property alias altPrice: altPriceLabel.text
28
28
29 visible: mascotImage.status === Image.Ready || title || price
29 visible: mascotImage.status === Image.Ready || title || price
30− height: row.height > 0 ? row.height + row.spacing * 2 : 0
30+ height: row.height > 0 ? row.height + row.margins * 2 : 0
31
31
32 Row {
32 Row {
33 id: row
33 id: row
34 objectName: "outerRow"
34 objectName: "outerRow"
35
35
36− anchors { top: parent.top; left: parent.left; right: parent.right; margins: spacing }
36+ property real margins: units.gu(1)
37− spacing: units.gu(1)
37+
38+ anchors {
39+ top: parent.top; left: parent.left; right: parent.right
40+ margins: margins
41+ leftMargin: spacing
42+ rightMargin: spacing
43+ }
44+ spacing: mascotShape.visible ? margins : 0
38
45
39 UbuntuShape {
46 UbuntuShape {
40 id: mascotShape
47 id: mascotShape
@@ -59,6 +66,7 @@ Item {
59 Column {
66 Column {
60 objectName: "column"
67 objectName: "column"
61 width: parent.width - x
68 width: parent.width - x
69+ spacing: units.gu(0.5)
62
70
63 Label {
71 Label {
64 id: titleLabel
72 id: titleLabel
@@ -68,6 +76,7 @@ Item {
68 font.weight: Font.DemiBold
76 font.weight: Font.DemiBold
69 wrapMode: Text.Wrap
77 wrapMode: Text.Wrap
70 maximumLineCount: 2
78 maximumLineCount: 2
79+ fontSize: "small"
71 }
80 }
72
81
73 Label {
82 Label {
@@ -75,7 +84,9 @@ Item {
75 objectName: "subtitleLabel"
84 objectName: "subtitleLabel"
76 anchors { left: parent.left; right: parent.right }
85 anchors { left: parent.left; right: parent.right }
77 elide: Text.ElideRight
86 elide: Text.ElideRight
87+ font.weight: Font.Light
78 visible: titleLabel.text && text
88 visible: titleLabel.text && text
89+ fontSize: "x-small"
79 }
90 }
80
91
81 Row {
92 Row {
tests/qmltests/Dash/tst_Card.qml+22−5
@@ -110,6 +110,10 @@ Rectangle {
110 "name": "Art, header - vertical",
110 "name": "Art, header - vertical",
111 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "summary": undefined }) }
111 "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "summary": undefined }) }
112 },
112 },
113+ {
114+ "name": "Art, summary - vertical",
115+ "layout": { "components": { "art": "art", "summary": "summary" } }
116+ },
113 {
117 {
114 "name": "Header title only - horizontal",
118 "name": "Header title only - horizontal",
115 "layout": { "template": { "card-layout": "horizontal" },
119 "layout": { "template": { "card-layout": "horizontal" },
@@ -356,13 +360,26 @@ Rectangle {
356 tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
360 tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
357 }
361 }
358
362
363+ function test_summary_layout_data() {
364+ return [
365+ { tag: "With header", top: function() { return header.y + header.height }, index: 0 },
366+ { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
367+ ]
368+ }
369+
370+ function test_summary_layout(data) {
371+ selector.selectedIndex = data.index;
372+
373+ tryCompareFunction(function() { return testCase.summary.y === data.top() }, true);
374+ }
375+
359 function test_art_visibility() {
376 function test_art_visibility() {
360− selector.selectedIndex = 7
377+ selector.selectedIndex = 8;
361
378
362− tryCompare(testCase.artImage, "source", "")
379+ tryCompare(testCase.artImage, "source", "");
363− compare(testCase.art.visible, false)
380+ compare(testCase.art.visible, false);
364− compare(testCase.art.height, 0)
381+ compare(testCase.art.height, 0);
365− compare(testCase.art.width, 0)
382+ compare(testCase.art.width, 0);
366 }
383 }
367 }
384 }
368}
385}
tests/qmltests/Dash/tst_CardHeader.qml+3−3
@@ -120,9 +120,9 @@ Rectangle {
120
120
121 function test_dimensions_data() {
121 function test_dimensions_data() {
122 return [
122 return [
123− { tag: "Column width", object: column, width: cardHeader.width - testCase.outerRow.spacing * 2 },
123+ { tag: "Column width", object: column, width: cardHeader.width },
124− { tag: "Column width", object: column, width: cardHeader.width - mascot.width - testCase.outerRow.spacing * 3, mascot: "artwork/avatar.png" },
124+ { tag: "Column width with mascot", object: column, width: cardHeader.width - mascot.width - outerRow.margins * 3, mascot: "artwork/avatar.png" },
125− { tag: "Header height", object: cardHeader, height: function() { return subtitleLabel.y + subtitleLabel.height + outerRow.spacing * 2 } },
125+ { tag: "Header height", object: cardHeader, height: function() { return subtitleLabel.y + subtitleLabel.height + outerRow.margins * 2 } },
126 ]
126 ]
127 }
127 }
128
128