git.iko.soy/unity8
on xenial help sign in
Optimize Card by not creating an invisible UbuntuShape when unneeded
cb32e94Albert Astals
qml/Dash/Card.qml+36−31
compare with xenial
unifiedsplit
@@ -31,39 +31,44 @@ AbstractButton {
31 property bool showHeader: true
31 property bool showHeader: true
32
32
33 implicitWidth: childrenRect.width
33 implicitWidth: childrenRect.width
34− implicitHeight: summary.y + summary.height + (summary.text && background.visible ? units.gu(1) : 0)
34+ implicitHeight: summary.y + summary.height + (summary.text && backgroundLoader.active ? units.gu(1) : 0)
35
35
36− UbuntuShape {
36+ Loader {
37− id: background
37+ id: backgroundLoader
38− objectName: "background"
38+ objectName: "backgroundLoader"
39− radius: "medium"
40− visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
41− || artAndSummary)
42− property bool artAndSummary: components["art"]["field"] && components["summary"] || false
43− color: getColor(0) || "white"
44− gradientColor: getColor(1) || color
45− anchors.fill: parent
46− image: backgroundImage.source ? backgroundImage : null
47
39
48− property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
40+ readonly property bool artAndSummary: components["art"]["field"] && components["summary"] || false
41+ active: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"] || artAndSummary)
42+ anchors.fill: parent
49
43
44+ sourceComponent: UbuntuShape {
45+ objectName: "background"
46+ radius: "medium"
47+ color: getColor(0) || "white"
48+ gradientColor: getColor(1) || color
49+ anchors.fill: parent
50+ image: backgroundImage.source ? backgroundImage : null
51+
52+ property real luminance: 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b
53+
50− property Image backgroundImage: Image {
54+ property Image backgroundImage: Image {
51− objectName: "backgroundImage"
55+ objectName: "backgroundImage"
52− source: {
56+ source: {
53− if (cardData && typeof cardData["background"] === "string") return cardData["background"]
57+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]
54− else if (template && typeof template["card-background"] === "string") return template["card-background"]
58+ else if (template && typeof template["card-background"] === "string") return template["card-background"]
55− else return ""
59+ else return ""
60+ }
56 }
61 }
57− }
58
62
59− function getColor(index) {
63+ function getColor(index) {
60− if (cardData && typeof cardData["background"] === "object"
64+ if (cardData && typeof cardData["background"] === "object"
61− && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
65+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
62− return cardData["background"]["elements"][index];
66+ return cardData["background"]["elements"][index];
63− } else if (template && typeof template["card-background"] === "object"
67+ } else if (template && typeof template["card-background"] === "object"
64− && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
68+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
65− return template["card-background"]["elements"][index];
69+ return template["card-background"]["elements"][index];
66− } else return undefined;
70+ } else return undefined;
71+ }
67 }
72 }
68 }
73 }
69
74
@@ -187,7 +192,7 @@ AbstractButton {
187 opacity: showHeader ? 1 : 0
192 opacity: showHeader ? 1 : 0
188 inOverlay: root.template && root.template["overlay"] === true
193 inOverlay: root.template && root.template["overlay"] === true
189 fontColor: inOverlay ? "white" : summary.color
194 fontColor: inOverlay ? "white" : summary.color
190− useMascotShape: !background.visible && !inOverlay
195+ useMascotShape: !backgroundLoader.active && !inOverlay
191
196
192 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
197 Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.SnapDuration } }
193 }
198 }
@@ -199,7 +204,7 @@ AbstractButton {
199 top: header.visible ? header.bottom : artShape.bottom
204 top: header.visible ? header.bottom : artShape.bottom
200 left: parent.left
205 left: parent.left
201 right: parent.right
206 right: parent.right
202− margins: background.visible ? units.gu(1) : 0
207+ margins: backgroundLoader.active ? units.gu(1) : 0
203 topMargin: 0
208 topMargin: 0
204 }
209 }
205 wrapMode: Text.Wrap
210 wrapMode: Text.Wrap
@@ -209,6 +214,6 @@ AbstractButton {
209 height: text ? implicitHeight : 0
214 height: text ? implicitHeight : 0
210 fontSize: "small"
215 fontSize: "small"
211 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
216 // TODO karni: Change "grey" to Ubuntu.Components.Palette color once updated.
212− color: background.visible && background.luminance < 0.7 ? "white" : "grey"
217+ color: backgroundLoader.active && backgroundLoader.item.luminance < 0.7 ? "white" : "grey"
213 }
218 }
214}
219}
tests/qmltests/Dash/tst_Card.qml+2−1
@@ -187,6 +187,7 @@ Rectangle {
187 property Item artImage: findChild(card, "artImage")
187 property Item artImage: findChild(card, "artImage")
188 property Item summary: findChild(card, "summaryLabel")
188 property Item summary: findChild(card, "summaryLabel")
189 property Item background: findChild(card, "background")
189 property Item background: findChild(card, "background")
190+ property Item backgroundLoader: findChild(card, "backgroundLoader")
190 property Item backgroundImage: findChild(card, "backgroundImage")
191 property Item backgroundImage: findChild(card, "backgroundImage")
191
192
192 function initTestCase() {
193 function initTestCase() {
@@ -400,7 +401,7 @@ Rectangle {
400
401
401 waitForRendering(card);
402 waitForRendering(card);
402
403
403− tryCompare(background, "visible", data.visible);
404+ tryCompare(backgroundLoader, "active", data.visible);
404
405
405 if (data.hasOwnProperty("color")) {
406 if (data.hasOwnProperty("color")) {
406 tryCompare(background, "color", data.color);
407 tryCompare(background, "color", data.color);
tests/qmltests/Dash/tst_CardBenchmark.qmlnew file+72
@@ -0,0 +1,72 @@
1+/*
2+ * Copyright (C) 2014 Canonical, Ltd.
3+ *
4+ * This program is free software; you can redistribute it and/or modify
5+ * it under the terms of the GNU General Public License as published by
6+ * the Free Software Foundation; version 3.
7+ *
8+ * This program is distributed in the hope that it will be useful,
9+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
10+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
11+ * GNU General Public License for more details.
12+ *
13+ * You should have received a copy of the GNU General Public License
14+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
15+ */
16+
17+import QtQuick 2.0
18+import QtTest 1.0
19+import Ubuntu.Components 0.1
20+import Unity.Test 0.1 as UT
21+import "../../../qml/Dash"
22+import "CardHelpers.js" as Helpers
23+
24+Rectangle {
25+ id: root
26+ width: units.gu(80)
27+ height: units.gu(72)
28+ color: "#88FFFFFF"
29+
30+ property string cardData: '
31+ {
32+ "art": "../../tests/qmltests/Dash/artwork/music-player-design.png",
33+ "mascot": "../../tests/qmltests/Dash/artwork/avatar.png",
34+ "title": "foo",
35+ "subtitle": "bar",
36+ "summary": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
37+ }'
38+
39+ property string artCardModel: '{ "components": { "art": "art" } }'
40+
41+ CardTool {
42+ id: cardTool
43+ template: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(artCardModel))['template'];
44+ components: Helpers.update(JSON.parse(Helpers.defaultLayout), JSON.parse(artCardModel))['components'];
45+ viewWidth: units.gu(48)
46+ }
47+
48+ Repeater {
49+ id: cardRepeater
50+ model: 0
51+ Card {
52+ width: cardTool.cardWidth || implicitWidth
53+ height: cardTool.cardHeight || implicitHeight
54+
55+ template: cardTool.template
56+ components: cardTool.components
57+ cardData: Helpers.mapData(root.cardData, components)
58+ }
59+ }
60+
61+ UT.UnityTestCase {
62+ id: testCase
63+ name: "CardBenchmark"
64+
65+ when: windowShown
66+
67+ function benchmark_time() {
68+ cardRepeater.model = 1
69+ cardRepeater.model = 0
70+ }
71+ }
72+}