git.iko.soy/unity8
on xenial help sign in
Add card background support.
80b2c35Michał Sawicz
qml/Dash/Card.qml+40−2
compare with xenial
unifiedsplit
@@ -30,7 +30,39 @@ Item {
30 property bool showHeader: true
30 property bool showHeader: true
31
31
32 implicitWidth: childrenRect.width
32 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+ }
34
66
35 UbuntuShape {
67 UbuntuShape {
36 id: artShape
68 id: artShape
@@ -136,7 +168,13 @@ Item {
136 Label {
168 Label {
137 id: summary
169 id: summary
138 objectName: "summaryLabel"
170 objectName: "summaryLabel"
171+ anchors {
139− anchors { top: header.visible ? header.bottom : artShape.bottom; left: parent.left; right: parent.right }
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+ }
140 wrapMode: Text.Wrap
178 wrapMode: Text.Wrap
141 maximumLineCount: 5
179 maximumLineCount: 5
142 elide: Text.ElideRight
180 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 {
79 "layout": { "template": { "overlay": true },
79 "layout": { "template": { "overlay": true },
80 "components": JSON.parse(Helpers.fullMapping) }
80 "components": JSON.parse(Helpers.fullMapping) }
81 },
81 },
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+ },
82 ]
97 ]
83
98
84 CardTool {
99 CardTool {
@@ -170,12 +185,16 @@ Rectangle {
170 property Item art: findChild(card, "artShape")
185 property Item art: findChild(card, "artShape")
171 property Item artImage: findChild(card, "artImage")
186 property Item artImage: findChild(card, "artImage")
172 property Item summary: findChild(card, "summaryLabel")
187 property Item summary: findChild(card, "summaryLabel")
188+ property Item background: findChild(card, "background")
189+ property Item backgroundImage: findChild(card, "backgroundImage")
173
190
174 function initTestCase() {
191 function initTestCase() {
175 verify(typeof testCase.header === "object", "Couldn't find header object.");
192 verify(typeof testCase.header === "object", "Couldn't find header object.");
176 verify(typeof testCase.art === "object", "Couldn't find art object.");
193 verify(typeof testCase.art === "object", "Couldn't find art object.");
177 verify(typeof testCase.artImage === "object", "Couldn't find artImage object.");
194 verify(typeof testCase.artImage === "object", "Couldn't find artImage object.");
178 verify(typeof testCase.summary === "object", "Couldn't find summary object.");
195 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.");
179 }
198 }
180
199
181 function cleanup() {
200 function cleanup() {
@@ -354,5 +373,45 @@ Rectangle {
354 compare(testCase.art.height, 0);
373 compare(testCase.art.height, 0);
355 compare(testCase.art.width, 0);
374 compare(testCase.art.width, 0);
356 }
375 }
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+ }
357 }
416 }
358}
417}