git.iko.soy/unity8
on xenial help sign in
Don't create a header if we don't need it
d45da6fAlbert Astals
qml/Dash/Card.qml+27−20
compare with xenial
unifiedsplit
@@ -23,10 +23,9 @@ AbstractButton {
23 property var components
23 property var components
24 property var cardData
24 property var cardData
25
25
26− property alias fontScale: header.fontScale
26+ property real fontScale: 1.0
27− property alias headerAlignment: header.headerAlignment
27+ property int headerAlignment: Text.AlignLeft
28− property alias headerHeight: header.height
28+ readonly property int headerHeight: headerLoader.item ? headerLoader.item.height : 0
29− readonly property alias title: header.title
30
29
31 property bool showHeader: true
30 property bool showHeader: true
32
31
@@ -114,7 +113,7 @@ AbstractButton {
114 function updateWidthHeightBindings() {
113 function updateWidthHeightBindings() {
115 if (isHorizontal) {
114 if (isHorizontal) {
116 width = Qt.binding(function() { return height * artShape.aspect });
115 width = Qt.binding(function() { return height * artShape.aspect });
117− height = Qt.binding(function() { return header.height });
116+ height = Qt.binding(function() { return root.headerHeight });
118 } else {
117 } else {
119 width = Qt.binding(function() { return root.width });
118 width = Qt.binding(function() { return root.width });
120 height = Qt.binding(function() { return width / artShape.aspect });
119 height = Qt.binding(function() { return width / artShape.aspect });
@@ -135,8 +134,8 @@ AbstractButton {
135 sourceComponent: ShaderEffect {
134 sourceComponent: ShaderEffect {
136 id: overlay
135 id: overlay
137
136
138− height: header.height
137+ height: headerLoader.item.height
139− opacity: header.opacity * 0.6
138+ opacity: headerLoader.item.opacity * 0.6
140
139
141 property var source: ShaderEffectSource {
140 property var source: ShaderEffectSource {
142 id: shaderSource
141 id: shaderSource
@@ -167,9 +166,10 @@ AbstractButton {
167 }
166 }
168 }
167 }
169
168
170− CardHeader {
169+ Loader {
171− id: header
170+ id: headerLoader
172− objectName: "cardHeader"
171+ objectName: "cardHeaderLoader"
172+
173 anchors {
173 anchors {
174 top: {
174 top: {
175 if (template) {
175 if (template) {
@@ -186,26 +186,33 @@ AbstractButton {
186 }
186 }
187 right: parent.right
187 right: parent.right
188 }
188 }
189+ active: cardData && cardData["title"] || cardData && cardData["mascot"] || false
189
190
190− mascot: cardData && cardData["mascot"] || ""
191+ sourceComponent: CardHeader {
191− title: cardData && cardData["title"] || ""
192+ id: header
192− subtitle: cardData && cardData["subtitle"] || ""
193+ objectName: "cardHeader"
193
194
194− titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
195+ mascot: cardData && cardData["mascot"] || ""
196+ title: cardData && cardData["title"] || ""
197+ subtitle: cardData && cardData["subtitle"] || ""
195
198
196− opacity: showHeader ? 1 : 0
199+ titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
197− inOverlay: root.template && root.template["overlay"] === true
198− fontColor: inOverlay ? "white" : summary.color
199− useMascotShape: !backgroundLoader.active && !inOverlay
200
200
201+ opacity: showHeader ? 1 : 0
202+ inOverlay: root.template && root.template["overlay"] === true
203+ fontColor: inOverlay ? "white" : summary.color
204+ useMascotShape: !backgroundLoader.active && !inOverlay
205+ headerAlignment: root.headerAlignment
206+
201− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
207+ Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
208+ }
202 }
209 }
203
210
204 Label {
211 Label {
205 id: summary
212 id: summary
206 objectName: "summaryLabel"
213 objectName: "summaryLabel"
207 anchors {
214 anchors {
208− top: header.visible ? header.bottom : artShape.bottom
215+ top: headerLoader.active ? headerLoader.bottom : artShape.bottom
209 left: parent.left
216 left: parent.left
210 right: parent.right
217 right: parent.right
211 margins: backgroundLoader.active ? units.gu(1) : 0
218 margins: backgroundLoader.active ? units.gu(1) : 0
tests/qmltests/Dash/tst_Card.qml+8−7
@@ -182,6 +182,7 @@ Rectangle {
182 when: windowShown
182 when: windowShown
183
183
184 property Item header: findChild(card, "cardHeader")
184 property Item header: findChild(card, "cardHeader")
185+ property Item headerLoader: findChild(card, "cardHeaderLoader")
185 property Item title: findChild(header, "titleLabel")
186 property Item title: findChild(header, "titleLabel")
186 property Item art: findChild(card, "artShape")
187 property Item art: findChild(card, "artShape")
187 property Item artImage: findChild(card, "artImage")
188 property Item artImage: findChild(card, "artImage")
@@ -245,8 +246,8 @@ Rectangle {
245 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
246 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
246 { tag: "Horizontal", width: units.gu(38), index: 5 },
247 { tag: "Horizontal", width: units.gu(38), index: 5 },
247 // Make sure card ends with header when there's no summary
248 // 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: "NoSummary", height: function() { return headerLoader.y + headerLoader.height }, index: 6 },
249− { tag: "HorizontalNoSummary", height: function() { return header.height }, card_layout: "horizontal", index: 6 },
250+ { tag: "HorizontalNoSummary", height: function() { return headerLoader.height }, card_layout: "horizontal", index: 6 },
250 ]
251 ]
251 }
252 }
252
253
@@ -289,7 +290,7 @@ Rectangle {
289 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
290 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
290 { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
291 { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
291 { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
292 { tag: "HorizontalHeight", height: function() { return header.height }, index: 5 },
292− { tag: "HorizontalWidth", width: function() { return header.x }, index: 5 },
293+ { tag: "HorizontalWidth", width: function() { return headerLoader.x }, index: 5 },
293 ]
294 ]
294 }
295 }
295
296
@@ -333,7 +334,7 @@ Rectangle {
333 function test_art_layout(data) {
334 function test_art_layout(data) {
334 selector.selectedIndex = data.index;
335 selector.selectedIndex = data.index;
335
336
336− tryCompare(testCase.header, "x", data.left());
337+ tryCompare(testCase.headerLoader, "x", data.left());
337 }
338 }
338
339
339 function test_header_layout_data() {
340 function test_header_layout_data() {
@@ -350,13 +351,13 @@ Rectangle {
350 function test_header_layout(data) {
351 function test_header_layout(data) {
351 selector.selectedIndex = data.index;
352 selector.selectedIndex = data.index;
352
353
353− tryCompareFunction(function() { return testCase.header.y === data.top() }, true);
354+ tryCompareFunction(function() { return testCase.headerLoader.y === data.top() }, true);
354− tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
355+ tryCompareFunction(function() { return testCase.headerLoader.x === data.left() }, true);
355 }
356 }
356
357
357 function test_summary_layout_data() {
358 function test_summary_layout_data() {
358 return [
359 return [
359− { tag: "With header", top: function() { return header.y + header.height }, index: 0 },
360+ { tag: "With header", top: function() { return headerLoader.y + headerLoader.height }, index: 0 },
360 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
361 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
361 ]
362 ]
362 }
363 }