on xenial help sign in
Add card background support.
commitf66bc618d5986c58f3e8b713b48dbaec40ec9cfe authorMichał Sawicz <michal.sawicz@canonical.com> dateTue 18 Feb 2014, 17:41 (13 years ago) parentc9a7bb3
3 files changed+95−1
qml/Dash/Card.qml+36−1 tests/qmltests/Dash/artwork/checkers.png tests/qmltests/Dash/tst_Card.qml+59
qml/Dash/Card.qml+36−1
@@ -31,6 +31,38 @@ Item {
3131 implicitWidth: childrenRect.width
3232 implicitHeight: summary.y + summary.height
3333
34+ UbuntuShape {
35+ id: background
36+ objectName: "background"
37+ radius: "medium"
38+ visible: template["card-layout"] !== "horizontal" && (template["card-background"] || components["background"]
39+ || artAndSummary)
40+ property bool artAndSummary: typeof components["art"] === "string" || typeof components["art"]["field"] === "string" && components["summary"]
41+ color: getColor(0) || "white"
42+ gradientColor: getColor(1) || color
43+ anchors.fill: parent
44+ image: backgroundImage.source ? backgroundImage : null
45+
46+ property Image backgroundImage: Image {
47+ objectName: "backgroundImage"
48+ source: {
49+ if (cardData && typeof cardData["background"] === "string") return cardData["background"]
50+ else if (template && typeof template["card-background"] === "string") return template["card-background"]
51+ else return ""
52+ }
53+ }
54+
55+ function getColor(index) {
56+ if (cardData && typeof cardData["background"] === "object"
57+ && (cardData["background"]["type"] === "color" || cardData["background"]["type"] === "gradient")) {
58+ return cardData["background"]["elements"][index];
59+ } else if (template && typeof template["card-background"] === "object"
60+ && (template["card-background"]["type"] === "color" || template["card-background"]["type"] === "gradient")) {
61+ return template["card-background"]["elements"][index];
62+ } else return undefined;
63+ }
64+ }
65+
3466 UbuntuShape {
3567 id: artShape
3668 radius: "medium"
@@ -135,7 +167,10 @@ Item {
135167 Label {
136168 id: summary
137169 objectName: "summaryLabel"
138− anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
170+ anchors {
171+ top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right
172+ margins: background.artAndSummary ? units.gu(1) : 0; topMargin: 0
173+ }
139174 wrapMode: Text.Wrap
140175 maximumLineCount: 5
141176 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}