on xenial help sign in
Don't create a header if we don't need it

The benchmark is now down to 0.8 msec

commitd45da6fded3df7d4207d45dd8d6fc045392f35aa authorAlbert Astals <albert.astals@canonical.com> dateTue 1 Apr 2014, 09:25 (13 years ago) parent6b42dda
2 files changed+35−27
qml/Dash/Card.qml+27−20 tests/qmltests/Dash/tst_Card.qml+8−7
qml/Dash/Card.qml+27−20
@@ -23,10 +23,9 @@ AbstractButton {
2323 property var components
2424 property var cardData
2525
26− property alias fontScale: header.fontScale
27− property alias headerAlignment: header.headerAlignment
28− property alias headerHeight: header.height
29− readonly property alias title: header.title
26+ property real fontScale: 1.0
27+ property int headerAlignment: Text.AlignLeft
28+ readonly property int headerHeight: headerLoader.item ? headerLoader.item.height : 0
3029
3130 property bool showHeader: true
3231
@@ -114,7 +113,7 @@ AbstractButton {
114113 function updateWidthHeightBindings() {
115114 if (isHorizontal) {
116115 width = Qt.binding(function() { return height * artShape.aspect });
117− height = Qt.binding(function() { return header.height });
116+ height = Qt.binding(function() { return root.headerHeight });
118117 } else {
119118 width = Qt.binding(function() { return root.width });
120119 height = Qt.binding(function() { return width / artShape.aspect });
@@ -135,8 +134,8 @@ AbstractButton {
135134 sourceComponent: ShaderEffect {
136135 id: overlay
137136
138− height: header.height
139− opacity: header.opacity * 0.6
137+ height: headerLoader.item.height
138+ opacity: headerLoader.item.opacity * 0.6
140139
141140 property var source: ShaderEffectSource {
142141 id: shaderSource
@@ -167,9 +166,10 @@ AbstractButton {
167166 }
168167 }
169168
170− CardHeader {
171− id: header
172− objectName: "cardHeader"
169+ Loader {
170+ id: headerLoader
171+ objectName: "cardHeaderLoader"
172+
173173 anchors {
174174 top: {
175175 if (template) {
@@ -186,26 +186,33 @@ AbstractButton {
186186 }
187187 right: parent.right
188188 }
189+ active: cardData && cardData["title"] || cardData && cardData["mascot"] || false
189190
190− mascot: cardData && cardData["mascot"] || ""
191− title: cardData && cardData["title"] || ""
192− subtitle: cardData && cardData["subtitle"] || ""
191+ sourceComponent: CardHeader {
192+ id: header
193+ objectName: "cardHeader"
193194
194− titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
195+ mascot: cardData && cardData["mascot"] || ""
196+ title: cardData && cardData["title"] || ""
197+ subtitle: cardData && cardData["subtitle"] || ""
195198
196− opacity: showHeader ? 1 : 0
197− inOverlay: root.template && root.template["overlay"] === true
198− fontColor: inOverlay ? "white" : summary.color
199− useMascotShape: !backgroundLoader.active && !inOverlay
199+ titleWeight: components && components["subtitle"] ? Font.DemiBold : Font.Normal
200200
201− Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
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+
207+ Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
208+ }
202209 }
203210
204211 Label {
205212 id: summary
206213 objectName: "summaryLabel"
207214 anchors {
208− top: header.visible ? header.bottom : artShape.bottom
215+ top: headerLoader.active ? headerLoader.bottom : artShape.bottom
209216 left: parent.left
210217 right: parent.right
211218 margins: backgroundLoader.active ? units.gu(1) : 0
tests/qmltests/Dash/tst_Card.qml+8−7
@@ -182,6 +182,7 @@ Rectangle {
182182 when: windowShown
183183
184184 property Item header: findChild(card, "cardHeader")
185+ property Item headerLoader: findChild(card, "cardHeaderLoader")
185186 property Item title: findChild(header, "titleLabel")
186187 property Item art: findChild(card, "artShape")
187188 property Item artImage: findChild(card, "artImage")
@@ -245,8 +246,8 @@ Rectangle {
245246 { tag: "Wide", width: units.gu(18.5), aspect: 0.5, index: 0 },
246247 { tag: "Horizontal", width: units.gu(38), index: 5 },
247248 // 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 },
249+ { tag: "NoSummary", height: function() { return headerLoader.y + headerLoader.height }, index: 6 },
250+ { tag: "HorizontalNoSummary", height: function() { return headerLoader.height }, card_layout: "horizontal", index: 6 },
250251 ]
251252 }
252253
@@ -289,7 +290,7 @@ Rectangle {
289290 { tag: "Fit", height: units.gu(38), size: "large", width: units.gu(19), index: 4 },
290291 { tag: "VerticalWidth", width: function() { return header.width }, index: 0 },
291292 { 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 },
293294 ]
294295 }
295296
@@ -333,7 +334,7 @@ Rectangle {
333334 function test_art_layout(data) {
334335 selector.selectedIndex = data.index;
335336
336− tryCompare(testCase.header, "x", data.left());
337+ tryCompare(testCase.headerLoader, "x", data.left());
337338 }
338339
339340 function test_header_layout_data() {
@@ -350,13 +351,13 @@ Rectangle {
350351 function test_header_layout(data) {
351352 selector.selectedIndex = data.index;
352353
353− tryCompareFunction(function() { return testCase.header.y === data.top() }, true);
354− tryCompareFunction(function() { return testCase.header.x === data.left() }, true);
354+ tryCompareFunction(function() { return testCase.headerLoader.y === data.top() }, true);
355+ tryCompareFunction(function() { return testCase.headerLoader.x === data.left() }, true);
355356 }
356357
357358 function test_summary_layout_data() {
358359 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 },
360361 { tag: "Without header", top: function() { return art.y + art.height }, index: 7 },
361362 ]
362363 }