git.iko.soy/unity8
on xenial help sign in
Implement support for carousel.
a383ae6Michał Sawicz
qml/Dash/CardTool.qml+12
compare with xenial
unifiedsplit
@@ -38,6 +38,11 @@ Item {
38 */
38 */
39 property var components
39 property var components
40
40
41+ /*!
42+ Width of the view, based on which carousel width is calculated.
43+ */
44+ property var viewWidth
45+
41 // FIXME: Saviq
46 // FIXME: Saviq
42 // Only way for the card below to actually be laid out completely.
47 // Only way for the card below to actually be laid out completely.
43 // If invisible or in "data" array, some components are not taken into account.
48 // If invisible or in "data" array, some components are not taken into account.
@@ -60,6 +65,11 @@ Item {
60 case "large": return units.gu(38);
65 case "large": return units.gu(38);
61 }
66 }
62 return units.gu(18.5);
67 return units.gu(18.5);
68+ case "carousel":
69+ if (viewWidth === undefined) return undefined
70+ if (viewWidth <= units.gu(40)) return units.gu(18)
71+ if (viewWidth >= units.gu(128)) return units.gu(26)
72+ return units.gu(18 + Math.round((viewWidth - units.gu(40))/ units.gu(11)))
63 case undefined:
73 case undefined:
64 case "organic-grid":
74 case "organic-grid":
65 case "journal":
75 case "journal":
@@ -80,6 +90,8 @@ Item {
80 return units.gu(18.5);
90 return units.gu(18.5);
81 case "grid":
91 case "grid":
82 return card.implicitHeight
92 return card.implicitHeight
93+ case "carousel":
94+ return cardWidth / (components ? components["art"]["aspect-ratio"] : 1)
83 case undefined:
95 case undefined:
84 case "organic-grid":
96 case "organic-grid":
85 case "vertical-journal":
97 case "vertical-journal":
tests/qmltests/Dash/tst_CardTool.qml+32−1
@@ -67,7 +67,11 @@ Rectangle {
67 {
67 {
68 "name": "Art, header, summary - horizontal",
68 "name": "Art, header, summary - horizontal",
69 "layout": { "template": { "card-layout": "horizontal" }, "components": JSON.parse(Helpers.fullMapping) }
69 "layout": { "template": { "card-layout": "horizontal" }, "components": JSON.parse(Helpers.fullMapping) }
70− }
70+ },
71+ {
72+ "name": "Art, header - portrait",
73+ "layout": { "components": Helpers.update(JSON.parse(Helpers.fullMapping), { "art": {"aspect-ratio": 0.5, "summary": undefined }}) }
74+ },
71 ]
75 ]
72
76
73 CardTool {
77 CardTool {
@@ -75,6 +79,7 @@ Rectangle {
75
79
76 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
80 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
77 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
81 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
82+ viewWidth: units.gu(Math.round(widthSlider.value))
78 }
83 }
79
84
80 Column {
85 Column {
@@ -83,6 +88,7 @@ Rectangle {
83
88
84 Repeater {
89 Repeater {
85 model: [
90 model: [
91+ { label: "View width", value: cardTool.viewWidth && cardTool.viewWidth / units.gu(1) },
86 { label: "Card width", value: cardTool.cardWidth && cardTool.cardWidth / units.gu(1) },
92 { label: "Card width", value: cardTool.cardWidth && cardTool.cardWidth / units.gu(1) },
87 { label: "Card height", value: cardTool.cardHeight && cardTool.cardHeight / units.gu(1) },
93 { label: "Card height", value: cardTool.cardHeight && cardTool.cardHeight / units.gu(1) },
88 ]
94 ]
@@ -158,6 +164,7 @@ Rectangle {
158 { label: "Organic Grid", layout: "organic-grid" },
164 { label: "Organic Grid", layout: "organic-grid" },
159 { label: "Horizontal Journal", layout: "journal" },
165 { label: "Horizontal Journal", layout: "journal" },
160 { label: "Vertical Journal", layout: "vertical-journal" },
166 { label: "Vertical Journal", layout: "vertical-journal" },
167+ { label: "Carousel", layout: "carousel" },
161 ]
168 ]
162 delegate: OptionSelectorDelegate { text: modelData.label }
169 delegate: OptionSelectorDelegate { text: modelData.label }
163 onSelectedIndexChanged: {
170 onSelectedIndexChanged: {
@@ -170,6 +177,21 @@ Rectangle {
170 }
177 }
171 }
178 }
172
179
180+ Label {
181+ anchors { left: parent.left; right: parent.right }
182+ height: units.gu(3)
183+ verticalAlignment: Text.AlignBottom
184+ text: "View width:"
185+ }
186+
187+ Slider {
188+ id: widthSlider
189+ minimumValue: 30
190+ maximumValue: 140
191+ live: true
192+ value: 40
193+ }
194+
173 TextArea {
195 TextArea {
174 id: layoutArea
196 id: layoutArea
175 anchors { left: parent.left; right: parent.right }
197 anchors { left: parent.left; right: parent.right }
@@ -205,6 +227,7 @@ Rectangle {
205 case "organic-grid": layoutSelector.selectedIndex = 1; break;
227 case "organic-grid": layoutSelector.selectedIndex = 1; break;
206 case "journal": layoutSelector.selectedIndex = 2; break;
228 case "journal": layoutSelector.selectedIndex = 2; break;
207 case "vertical-journal": layoutSelector.selectedIndex = 3; break;
229 case "vertical-journal": layoutSelector.selectedIndex = 3; break;
230+ case "carousel": layoutSelector.selectedIndex = 4; break;
208 case "grid":
231 case "grid":
209 default: layoutSelector.selectedIndex = 0; break;
232 default: layoutSelector.selectedIndex = 0; break;
210 }
233 }
@@ -239,6 +262,10 @@ Rectangle {
239 { tag: "Journal", width: undefined, height: units.gu(20), size: 20, index: 0, layout_index: 2 },
262 { tag: "Journal", width: undefined, height: units.gu(20), size: 20, index: 0, layout_index: 2 },
240 { tag: "OversizedJournal", width: undefined, height: units.gu(18.5), size: 40, index: 0, layout_index: 2 },
263 { tag: "OversizedJournal", width: undefined, height: units.gu(18.5), size: 40, index: 0, layout_index: 2 },
241 { tag: "VerticalJournal", width: units.gu(18.5), height: undefined, index: 0, layout_index: 3 },
264 { tag: "VerticalJournal", width: units.gu(18.5), height: undefined, index: 0, layout_index: 3 },
265+ { tag: "SmallCarousel", width: units.gu(18), height: units.gu(18), viewWidth: 30, index: 0, layout_index: 4},
266+ { tag: "MediumCarousel", width: units.gu(22), height: units.gu(22), viewWidth: 84, index: 0, layout_index: 4},
267+ { tag: "LargeCarousel", width: units.gu(26), height: units.gu(26), viewWidth: 140, index: 0, layout_index: 4},
268+ { tag: "PortraitCarousel", width: units.gu(22), height: units.gu(44), viewWidth: 84, index: 10, layout_index: 4},
242 ]
269 ]
243 }
270 }
244
271
@@ -248,6 +275,10 @@ Rectangle {
248 layoutSelector.selectedIndex = data.layout_index;
275 layoutSelector.selectedIndex = data.layout_index;
249 }
276 }
250
277
278+ if (data.hasOwnProperty("viewWidth")) {
279+ widthSlider.value = data.viewWidth;
280+ }
281+
251 if (data.hasOwnProperty("size")) {
282 if (data.hasOwnProperty("size")) {
252 cardTool.template['card-size'] = data.size;
283 cardTool.template['card-size'] = data.size;
253 cardTool.templateChanged();
284 cardTool.templateChanged();