on xenial help sign in
Fix CardHeader and Card heights (empty Label does have non-zero height apparently).
be2d485Michał Sawicz
qml/Dash/Card.qml+1
@@ -79,5 +79,6 @@ Item {
79 maximumLineCount: 5
79 maximumLineCount: 5
80 elide: Text.ElideRight
80 elide: Text.ElideRight
81 text: cardData && cardData["summary"] || ""
81 text: cardData && cardData["summary"] || ""
82+ height: text ? implicitHeight : 0
82 }
83 }
83}
84}
qml/Dash/CardHeader.qml+5−1
@@ -56,9 +56,9 @@ Item {
56
56
57 Label {
57 Label {
58 id: titleLabel
58 id: titleLabel
59+ objectName: "titleLabel"
59 anchors { left: parent.left; right: parent.right }
60 anchors { left: parent.left; right: parent.right }
60 elide: Text.ElideRight
61 elide: Text.ElideRight
61− objectName: "titleLabel"
62 font.weight: Font.DemiBold
62 font.weight: Font.DemiBold
63 wrapMode: Text.Wrap
63 wrapMode: Text.Wrap
64 maximumLineCount: 2
64 maximumLineCount: 2
@@ -66,6 +66,7 @@ Item {
66
66
67 Label {
67 Label {
68 id: subtitleLabel
68 id: subtitleLabel
69+ objectName: "subtitleLabel"
69 anchors { left: parent.left; right: parent.right }
70 anchors { left: parent.left; right: parent.right }
70 elide: Text.ElideRight
71 elide: Text.ElideRight
71 visible: titleLabel.text && text
72 visible: titleLabel.text && text
@@ -90,6 +91,7 @@ Item {
90 elide: Text.ElideRight
91 elide: Text.ElideRight
91 font.weight: Font.DemiBold
92 font.weight: Font.DemiBold
92 color: Theme.palette.selected.foreground
93 color: Theme.palette.selected.foreground
94+ visible: text
93 }
95 }
94
96
95 Label {
97 Label {
@@ -98,6 +100,7 @@ Item {
98 width: parent.labelWidth
100 width: parent.labelWidth
99 elide: Text.ElideRight
101 elide: Text.ElideRight
100 horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
102 horizontalAlignment: parent.labels === 3 ? Text.AlignHCenter : Text.AlignRight
103+ visible: text
101 }
104 }
102
105
103 Label {
106 Label {
@@ -105,6 +108,7 @@ Item {
105 width: parent.labelWidth
108 width: parent.labelWidth
106 elide: Text.ElideRight
109 elide: Text.ElideRight
107 horizontalAlignment: Text.AlignRight
110 horizontalAlignment: Text.AlignRight
111+ visible: text
108 }
112 }
109 }
113 }
110 }
114 }
tests/qmltests/Dash/tst_Card.qml+21−4
@@ -106,6 +106,10 @@ Rectangle {
106 "layout": { "template": { "card-layout": "horizontal" },
106 "layout": { "template": { "card-layout": "horizontal" },
107 "components": JSON.parse(fullMapping) }
107 "components": JSON.parse(fullMapping) }
108 },
108 },
109+ {
110+ "name": "Art, header - vertical",
111+ "layout": { "components": Helpers.update(JSON.parse(root.fullMapping), { "summary": undefined }) }
112+ },
109 ]
113 ]
110
114
111 Card {
115 Card {
@@ -189,7 +193,10 @@ Rectangle {
189 property Item summary: findChild(card, "summaryLabel")
193 property Item summary: findChild(card, "summaryLabel")
190
194
191 function initTestCase() {
195 function initTestCase() {
192− verify(testCase.header !== undefined, "Couldn't find header object.");
196+ verify(typeof testCase.header === "object", "Couldn't find header object.");
197+ verify(typeof testCase.art === "object", "Couldn't find art object.");
198+ verify(typeof testCase.artImage === "object", "Couldn't find artImage object.");
199+ verify(typeof testCase.summary === "object", "Couldn't find summary object.");
193 }
200 }
194
201
195 function cleanup() {
202 function cleanup() {
@@ -237,6 +244,9 @@ Rectangle {
237 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
244 { tag: "Large", width: units.gu(38), size: "large", index: 0 },
238 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
245 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
239 { tag: "Horizontal", width: units.gu(38), index: 5 },
246 { tag: "Horizontal", width: units.gu(38), index: 5 },
247+ // Make sure card ends with header when there's no summary
248+ { tag: "NoSummary", height: function() { return header.y + header.height }, index: 6 },
249+ { tag: "HorizontalNoSummary", height: function() { return header.height }, card_layout: "horizontal", index: 6 },
240 ]
250 ]
241 }
251 }
242
252
@@ -248,6 +258,11 @@ Rectangle {
248 card.templateChanged();
258 card.templateChanged();
249 }
259 }
250
260
261+ if (data.hasOwnProperty("card_layout")) {
262+ card.template['card-layout'] = data.card_layout;
263+ card.templateChanged();
264+ }
265+
251 if (data.hasOwnProperty("aspect")) {
266 if (data.hasOwnProperty("aspect")) {
252 card.components['art']['aspect-ratio'] = data.aspect;
267 card.components['art']['aspect-ratio'] = data.aspect;
253 card.componentsChanged();
268 card.componentsChanged();
@@ -257,7 +272,9 @@ Rectangle {
257 tryCompare(card, "width", data.width);
272 tryCompare(card, "width", data.width);
258 }
273 }
259
274
275+ if (typeof data.height === "function") {
276+ tryCompareFunction(function() { return card.height === data.height() }, true);
260− if (data.hasOwnProperty("height")) {
277+ } else if (data.hasOwnProperty("height")) {
261 tryCompare(card, "height", data.height);
278 tryCompare(card, "height", data.height);
262 }
279 }
263 }
280 }
@@ -308,7 +325,7 @@ Rectangle {
308 function test_art_layout_data() {
325 function test_art_layout_data() {
309 return [
326 return [
310 { tag: "Vertical", left: function() { return 0 }, index: 0},
327 { tag: "Vertical", left: function() { return 0 }, index: 0},
311− { tag: "Horizontal", left: function() { return art.width }, index: 5 }
328+ { tag: "Horizontal", left: function() { return art.width }, index: 5 },
312 ];
329 ];
313 }
330 }
314
331
@@ -323,7 +340,7 @@ Rectangle {
323 { tag: "Vertical", top: function() { return art.y + art.height },
340 { tag: "Vertical", top: function() { return art.y + art.height },
324 left: function() { return art.x }, index: 0 },
341 left: function() { return art.x }, index: 0 },
325 { tag: "Horizontal", top: function() { return art.y },
342 { tag: "Horizontal", top: function() { return art.y },
326− left: function() { return art.x + art.width }, index: 5 }
343+ left: function() { return art.x + art.width }, index: 5 },
327 ]
344 ]
328 }
345 }
329
346
tests/qmltests/Dash/tst_CardHeader.qml+13−8
@@ -52,11 +52,11 @@ Rectangle {
52 property Item column: findChild(cardHeader, "column")
52 property Item column: findChild(cardHeader, "column")
53
53
54 function initTestCase() {
54 function initTestCase() {
55− verify(testCase.mascot !== undefined, "Couldn't find mascot object.");
55+ verify(typeof testCase.mascot === "object", "Couldn't find mascot object.");
56− verify(testCase.titleLabel !== undefined, "Couldn't find titleLabel object.");
56+ verify(typeof testCase.titleLabel === "object", "Couldn't find titleLabel object.");
57− verify(testCase.subtitleLabel !== undefined, "Couldn't find subtitleLabel object.");
57+ verify(typeof testCase.subtitleLabel === "object", "Couldn't find subtitleLabel object.");
58− verify(testCase.prices !== undefined, "Couldn't find prices object.");
58+ verify(typeof testCase.prices === "object", "Couldn't find prices object.");
59− verify(testCase.oldPriceLabel !== undefined, "Couldn't find oldPriceLabel object.");
59+ verify(typeof testCase.oldPriceLabel === "object", "Couldn't find oldPriceLabel object.");
60 }
60 }
61
61
62 function cleanup() {
62 function cleanup() {
@@ -86,7 +86,7 @@ Rectangle {
86 { tag: "Empty", visible: false },
86 { tag: "Empty", visible: false },
87 { tag: "Title only", title: "Foo", visible: true },
87 { tag: "Title only", title: "Foo", visible: true },
88 { tag: "Subtitle only", subtitle: "Bar", visible: false },
88 { tag: "Subtitle only", subtitle: "Bar", visible: false },
89− { tag: "Both", title: "Foo", subtitle: "Bar", visible: true }
89+ { tag: "Both", title: "Foo", subtitle: "Bar", visible: true },
90 ]
90 ]
91 }
91 }
92
92
@@ -104,7 +104,7 @@ Rectangle {
104 { tag: "Main and Alt", main: "$1.25", alt: "€1.00", visible: true },
104 { tag: "Main and Alt", main: "$1.25", alt: "€1.00", visible: true },
105 { tag: "Main and Old", main: "$1.25", old: "$2.00", visible: true, oldAlign: Text.AlignRight },
105 { tag: "Main and Old", main: "$1.25", old: "$2.00", visible: true, oldAlign: Text.AlignRight },
106 { tag: "Alt and Old", alt: "€1.00", old: "$2.00", visible: false },
106 { tag: "Alt and Old", alt: "€1.00", old: "$2.00", visible: false },
107− { tag: "All", main: "$1.25", alt: "€1.00", old: "$2.00", visible: true, oldAlign: Text.AlignHCenter }
107+ { tag: "All", main: "$1.25", alt: "€1.00", old: "$2.00", visible: true, oldAlign: Text.AlignHCenter },
108 ]
108 ]
109 }
109 }
110
110
@@ -121,7 +121,8 @@ Rectangle {
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 - testCase.outerRow.spacing * 2 },
124− { tag: "Column width", object: column, width: cardHeader.width - mascot.width - testCase.outerRow.spacing * 3, mascot: "artwork/avatar.png" }
124+ { tag: "Column width", object: column, width: cardHeader.width - mascot.width - testCase.outerRow.spacing * 3, mascot: "artwork/avatar.png" },
125+ { tag: "Header height", object: cardHeader, height: function() { return subtitleLabel.y + subtitleLabel.height + outerRow.spacing * 2 } },
125 ]
126 ]
126 }
127 }
127
128
@@ -133,6 +134,10 @@ Rectangle {
133 if (data.hasOwnProperty("width")) {
134 if (data.hasOwnProperty("width")) {
134 tryCompare(data.object, "width", data.width);
135 tryCompare(data.object, "width", data.width);
135 }
136 }
137+
138+ if (data.hasOwnProperty("height")) {
139+ tryCompareFunction(function() { return data.object.height === data.height() }, true);
140+ }
136 }
141 }
137 }
142 }
138}
143}