git.iko.soy/unity8
on xenial help sign in
Implement support for carousel.
commita383ae68d26b9571b82d0a102da3efbe4adde4fb authorMichał Sawicz <michal.sawicz@canonical.com> dateFri 31 Jan 2014, 17:23 (13 years ago) parent074e847
2 files changed+44−1
compare with xenial
unifiedsplit
qml/Dash/CardTool.qml+12 tests/qmltests/Dash/tst_CardTool.qml+32−1
qml/Dash/CardTool.qml+12
@@ -38,6 +38,11 @@ Item {
3838 */
3939 property var components
4040
41+ /*!
42+ Width of the view, based on which carousel width is calculated.
43+ */
44+ property var viewWidth
45+
4146 // FIXME: Saviq
4247 // Only way for the card below to actually be laid out completely.
4348 // If invisible or in "data" array, some components are not taken into account.
@@ -60,6 +65,11 @@ Item {
6065 case "large": return units.gu(38);
6166 }
6267 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)))
6373 case undefined:
6474 case "organic-grid":
6575 case "journal":
@@ -80,6 +90,8 @@ Item {
8090 return units.gu(18.5);
8191 case "grid":
8292 return card.implicitHeight
93+ case "carousel":
94+ return cardWidth / (components ? components["art"]["aspect-ratio"] : 1)
8395 case undefined:
8496 case "organic-grid":
8597 case "vertical-journal":
tests/qmltests/Dash/tst_CardTool.qml+32−1
@@ -67,7 +67,11 @@ Rectangle {
6767 {
6868 "name": "Art, header, summary - horizontal",
6969 "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+ },
7175 ]
7276
7377 CardTool {
@@ -75,6 +79,7 @@ Rectangle {
7579
7680 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
7781 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
82+ viewWidth: units.gu(Math.round(widthSlider.value))
7883 }
7984
8085 Column {
@@ -83,6 +88,7 @@ Rectangle {
8388
8489 Repeater {
8590 model: [
91+ { label: "View width", value: cardTool.viewWidth && cardTool.viewWidth / units.gu(1) },
8692 { label: "Card width", value: cardTool.cardWidth && cardTool.cardWidth / units.gu(1) },
8793 { label: "Card height", value: cardTool.cardHeight && cardTool.cardHeight / units.gu(1) },
8894 ]
@@ -158,6 +164,7 @@ Rectangle {
158164 { label: "Organic Grid", layout: "organic-grid" },
159165 { label: "Horizontal Journal", layout: "journal" },
160166 { label: "Vertical Journal", layout: "vertical-journal" },
167+ { label: "Carousel", layout: "carousel" },
161168 ]
162169 delegate: OptionSelectorDelegate { text: modelData.label }
163170 onSelectedIndexChanged: {
@@ -170,6 +177,21 @@ Rectangle {
170177 }
171178 }
172179
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+
173195 TextArea {
174196 id: layoutArea
175197 anchors { left: parent.left; right: parent.right }
@@ -205,6 +227,7 @@ Rectangle {
205227 case "organic-grid": layoutSelector.selectedIndex = 1; break;
206228 case "journal": layoutSelector.selectedIndex = 2; break;
207229 case "vertical-journal": layoutSelector.selectedIndex = 3; break;
230+ case "carousel": layoutSelector.selectedIndex = 4; break;
208231 case "grid":
209232 default: layoutSelector.selectedIndex = 0; break;
210233 }
@@ -239,6 +262,10 @@ Rectangle {
239262 { tag: "Journal", width: undefined, height: units.gu(20), size: 20, index: 0, layout_index: 2 },
240263 { tag: "OversizedJournal", width: undefined, height: units.gu(18.5), size: 40, index: 0, layout_index: 2 },
241264 { 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},
242269 ]
243270 }
244271
@@ -248,6 +275,10 @@ Rectangle {
248275 layoutSelector.selectedIndex = data.layout_index;
249276 }
250277
278+ if (data.hasOwnProperty("viewWidth")) {
279+ widthSlider.value = data.viewWidth;
280+ }
281+
251282 if (data.hasOwnProperty("size")) {
252283 cardTool.template['card-size'] = data.size;
253284 cardTool.templateChanged();