on xenial help sign in
Add card background support.
commit80b2c3549572fc58be2a3c6b399649b4c07d961f authorMichał Sawicz <michal.sawicz@canonical.com> dateFri 21 Feb 2014, 09:05 (13 years ago) parenta61bf6fe6999ad
3 files changed+99−2
qml/Dash/Card.qml+40−2 tests/qmltests/Dash/artwork/checkers.png tests/qmltests/Dash/tst_Card.qml+59
qml/Dash/Card.qml+40−2
@@ -30,7 +30,39 @@ Item {
3030 property bool showHeader: true
3131
3232 implicitWidth: childrenRect.width
33− implicitHeight: summary.y + summary.height
33+ implicitHeight: summary.y + summary.height + (summary.text && background.visible ? units.gu(1) : 0)
34+
35+ UbuntuShape {
36+ id: background
37+ objectName: "background"
38+ radius: "medium"
39+ visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
40+ || artAndSummary)
41+ property bool artAndSummary: components["art"]["field"] && components["summary"] || false
42+ color: getColor(0) || "white"
43+ gradientColor: getColor(1) || color
44+ anchors.fill: parent
45+ image: backgroundImage.source ? backgroundImage : null
46+
47+ property Image backgroundImage: Image {
48+ objectName: "backgroundImage"
49+ source: {
50+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]
51+ else if (template && typeof template["card-background"] === "string") return template["card-background"]
52+ else return ""
53+ }
54+ }
55+
56+ function getColor(index) {
57+ if (cardData && typeof cardData["background"] === "object"
58+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
59+ return cardData["background"]["elements"][index];
60+ } else if (template && typeof template["card-background"] === "object"
61+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
62+ return template["card-background"]["elements"][index];
63+ } else return undefined;
64+ }
65+ }
3466
3567 UbuntuShape {
3668 id: artShape
@@ -136,7 +168,13 @@ Item {
136168 Label {
137169 id: summary
138170 objectName: "summaryLabel"
139− anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
171+ anchors {
172+ top: header.visible ? header.bottom : artShape.bottom
173+ left: parent.left
174+ right: parent.right
175+ margins: background.visible ? units.gu(1) : 0
176+ topMargin: 0
177+ }
140178 wrapMode: Text.Wrap
141179 maximumLineCount: 5
142180 elide: Text.ElideRight
tests/qmltests/Dash/artwork/checkers.pngnew file

Binary file not shown.

tests/qmltests/Dash/tst_Card.qml+59
@@ -79,6 +79,21 @@ Rectangle {
7979 "layout": { "template": { "overlay": true },
8080 "components": JSON.parse(Helpers.fullMapping) }
8181 },
82+ {
83+ "name": "Art, header - grey background",
84+ "layout": { "template": { "card-background": { "type": "color", "elements": ["grey"] } },
85+ "components": JSON.parse(Helpers.fullMapping) }
86+ },
87+ {
88+ "name": "Art, header - gradient background",
89+ "layout": { "template": { "card-background": { "type": "gradient", "elements": ["grey", "white"] } },
90+ "components": JSON.parse(Helpers.fullMapping) }
91+ },
92+ {
93+ "name": "Art, header - image background",
94+ "layout": { "template": { "card-background": Qt.resolvedUrl("artwork/checkers.png") },
95+ "components": JSON.parse(Helpers.fullMapping) }
96+ },
8297 ]
8398
8499 CardTool {
@@ -170,12 +185,16 @@ Rectangle {
170185 property Item art: findChild(card, "artShape")
171186 property Item artImage: findChild(card, "artImage")
172187 property Item summary: findChild(card, "summaryLabel")
188+ property Item background: findChild(card, "background")
189+ property Item backgroundImage: findChild(card, "backgroundImage")
173190
174191 function initTestCase() {
175192 verify(typeof testCase.header === "object", "Couldn't find header object.");
176193 verify(typeof testCase.art === "object", "Couldn't find art object.");
177194 verify(typeof testCase.artImage === "object", "Couldn't find artImage object.");
178195 verify(typeof testCase.summary === "object", "Couldn't find summary object.");
196+ verify(typeof testCase.artImage === "object", "Couldn't find background object.");
197+ verify(typeof testCase.summary === "object", "Couldn't find backgroundImage object.");
179198 }
180199
181200 function cleanup() {
@@ -354,5 +373,45 @@ Rectangle {
354373 compare(testCase.art.height, 0);
355374 compare(testCase.art.width, 0);
356375 }
376+
377+ function test_background_data() {
378+ return [
379+ { tag: "Art and summary", visible: true, color: "#ffffff", index: 0 },
380+ { tag: "No Summary", visible: false, index: 6 },
381+ { tag: "Horizontal", visible: false, index: 5 },
382+ { tag: "Grey background", visible: true, color: "#808080", index: 10 },
383+ { tag: "Overriden Gradient background", visible: true, color: "#808080", gradientColor: "#ffffff",
384+ background: {type: "color", elements: ["grey", "white"]}, index: 10 },
385+ { tag: "Overriden Image background", visible: true, image: Qt.resolvedUrl("artwork/checkers.png"),
386+ background: Qt.resolvedUrl("artwork/checkers.png"), index: 10 },
387+ { tag: "Gradient background", visible: true, color: "#808080", gradientColor: "#ffffff", index: 11 },
388+ { tag: "Image background", visible: true, image: Qt.resolvedUrl("artwork/checkers.png"), index: 12 },
389+ ];
390+ }
391+
392+ function test_background(data) {
393+ selector.selectedIndex = data.index;
394+
395+ if (data.hasOwnProperty("background")) {
396+ card.cardData["background"] = data.background;
397+ card.cardDataChanged();
398+ }
399+
400+ waitForRendering(card);
401+
402+ tryCompare(background, "visible", data.visible);
403+
404+ if (data.hasOwnProperty("color")) {
405+ tryCompare(background, "color", data.color);
406+ }
407+
408+ if (data.hasOwnProperty("gradientColor")) {
409+ tryCompare(background, "gradientColor", data.gradientColor);
410+ }
411+
412+ if (data.hasOwnProperty("image")) {
413+ tryCompare(backgroundImage, "source", data.image);
414+ }
415+ }
357416 }
358417}