git.iko.soy/unity8
on xenial help sign in
Adds carousel dynamic switch

Merge lp:~unity-team/unity8/carouselTool-new-dash https://code.launchpad.net/~unity-team/unity8/carouselTool-new-dash/+merge/209746

commit87a12999d0ba8ef996bfd6be202868afd633e8aa authorAlbert Astals <albert.astals@canonical.com> dateTue 11 Mar 2014, 16:26 (13 years ago) parenta4ded32e9ffb1e
7 files changed+91−76
compare with xenial
unifiedsplit
qml/Dash/CardCarousel.qml+3−11 qml/Dash/CardFilterGrid.qml+2−12 qml/Dash/CardTool.qml+43−10 qml/Dash/DashRenderer.qml+5−6 qml/Dash/GenericScopeView.qml+18−22 tests/qmltests/Dash/tst_CardTool.qml+20 tests/qmltests/Dash/tst_GenericScopeView.qml−15
qml/Dash/CardCarousel.qml+3−11
@@ -32,14 +32,6 @@ DashRenderer {
3232 height: carousel.implicitHeight + units.gu(6)
3333 verticalSpacing: units.gu(3)
3434
35− CardTool {
36− id: cardTool
37−
38− template: cardCarousel.template
39− components: cardCarousel.components
40− viewWidth: cardCarousel.width
41− }
42−
4335 Carousel {
4436 id: carousel
4537 anchors.fill: parent
@@ -47,7 +39,7 @@ DashRenderer {
4739 // FIXME we need to "reverse" the carousel to make the selected item the size
4840 // and push others back.
4941 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor
50− selectedItemScaleFactor: 1.38
42+ selectedItemScaleFactor: cardTool.carouselSelectedItemScaleFactor
5143 cacheBuffer: 1404 // 18px * 13gu * 6
5244 model: cardCarousel.model
5345 highlightIndex: cardCarousel.highlightIndex
@@ -63,8 +55,8 @@ DashRenderer {
6355 objectName: "delegate" + index
6456 headerHeight: carousel.headerHeight
6557 cardData: model
66− template: cardCarousel.template
67− components: cardCarousel.components
58+ template: cardTool.template
59+ components: cardTool.components
6860
6961 property bool explicitlyScaled
7062 property var model
qml/Dash/CardFilterGrid.qml+2−12
@@ -26,16 +26,6 @@ DashFilterGrid {
2626 verticalSpacing: units.gu(1)
2727 collapsedRowCount: Math.min(2, template && template["collapsed-rows"] || 2)
2828
29− CardTool {
30− id: cardTool
31−
32− template: genericFilterGrid.template
33− // We can't trust the template since it may happen it is carousel
34− // that is being should as a grid because of the lack of elements
35− categoryLayout: "grid"
36− components: genericFilterGrid.components
37− }
38−
3929 delegate: Item {
4030 width: genericFilterGrid.cellWidth
4131 height: genericFilterGrid.cellHeight
@@ -47,8 +37,8 @@ DashFilterGrid {
4737 anchors.horizontalCenter: parent.horizontalCenter
4838 objectName: "delegate" + index
4939 cardData: model
50− template: genericFilterGrid.template
51− components: genericFilterGrid.components
40+ template: cardTool.template
41+ components: cardTool.components
5242
5343 headerAlignment: cardTool.headerAlignment
5444
qml/Dash/CardTool.qml+43−10
@@ -28,6 +28,22 @@ import QtQuick 2.0
2828
2929Item {
3030 id: cardTool
31+
32+ /*!
33+ \brief Number of cards.
34+ */
35+ property int count
36+
37+ /*!
38+ \brief Width of the category view.
39+ */
40+ property real viewWidth
41+
42+ /*!
43+ \brief Scaling factor of selected Carousel item.
44+ */
45+ readonly property real carouselSelectedItemScaleFactor: 1.38 // XXX assuming 1.38 carousel scaling factor for cards
46+
3147 /*!
3248 \brief Template supplied for the category.
3349 */
@@ -39,14 +55,15 @@ Item {
3955 property var components
4056
4157 /*!
42− \brief Width of the view, based on which carousel width is calculated.
58+ \brief The category layout for this card tool.
4359 */
44− property var viewWidth
60+ property string categoryLayout: {
61+ var layout = template["category-layout"];
4562
46− /*!
47− \brief The category layout for this card tool
48− */
49− property string categoryLayout: template ? template["category-layout"] : ""
63+ // carousel fallback mode to grid
64+ if (layout === "carousel" && count <= Math.ceil(carouselTool.realPathItemCount)) layout = "grid";
65+ return layout;
66+ }
5067
5168 // FIXME: Saviq
5269 // Only way for the card below to actually be laid out completely.
@@ -71,10 +88,7 @@ Item {
7188 }
7289 return units.gu(18.5);
7390 case "carousel":
74− if (viewWidth === undefined) return undefined
75− if (viewWidth <= units.gu(40)) return units.gu(18)
76− if (viewWidth >= units.gu(128)) return units.gu(26)
77− return units.gu(18 + Math.round((viewWidth - units.gu(40))/ units.gu(11)))
91+ return carouselTool.minimumTileWidth;
7892 case undefined:
7993 case "organic-grid":
8094 case "journal":
@@ -128,6 +142,25 @@ Item {
128142 return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
129143 }
130144
145+ QtObject {
146+ id: carouselTool
147+
148+ property real minimumTileWidth: {
149+ if (cardTool.viewWidth === undefined) return undefined;
150+ if (cardTool.viewWidth <= units.gu(40)) return units.gu(18);
151+ if (cardTool.viewWidth >= units.gu(128)) return units.gu(26);
152+ return units.gu(18 + Math.round((cardTool.viewWidth - units.gu(40)) / units.gu(11)));
153+ }
154+
155+ readonly property real pathItemCount: 4.8457 /// (848 / 175) reference values
156+
157+ property real realPathItemCount: {
158+ var scaledMinimumTileWidth = minimumTileWidth / cardTool.carouselSelectedItemScaleFactor;
159+ var tileWidth = Math.max(cardTool.viewWidth / pathItemCount, scaledMinimumTileWidth);
160+ return Math.min(cardTool.viewWidth / tileWidth, pathItemCount);
161+ }
162+ }
163+
131164 Card {
132165 id: card
133166 objectName: "card"
qml/Dash/DashRenderer.qml+5−6
@@ -50,6 +50,11 @@ Item {
5050 // The model to renderer
5151 property var model
5252
53+ /*!
54+ \brief CardTool component.
55+ */
56+ property var cardTool
57+
5358 /// Emitted when the user clicked on an item
5459 /// @param index is the index of the clicked item
5560 /// @param itemY is y of the clicked delegate
@@ -62,10 +67,4 @@ Item {
6267
6368 function startFilterAnimation(filter) {
6469 }
65−
66− /// Category template definition from the scope
67− property var template
68−
69− /// Component mapping and configuration from the scope
70− property var components
7170}
qml/Dash/GenericScopeView.qml+18−22
@@ -138,6 +138,15 @@ FocusScope {
138138 readonly property string category: categoryId
139139 readonly property var item: rendererLoader.item
140140
141+ CardTool {
142+ id: cardTool
143+
144+ count: results.count
145+ template: model.renderer
146+ components: model.components
147+ viewWidth: parent.width
148+ }
149+
141150 Loader {
142151 id: rendererLoader
143152 anchors {
@@ -146,7 +155,14 @@ FocusScope {
146155 right: parent.right
147156 }
148157
149− source: getRenderer(model.renderer, results)
158+ source: {
159+ switch (cardTool.categoryLayout) {
160+ case "carousel": return "CardCarousel.qml";
161+ case "running-apps": return "Apps/RunningApplicationsGrid.qml";
162+ case "grid":
163+ default: return "CardFilterGrid.qml";
164+ }
165+ }
150166
151167 onLoaded: {
152168 if (item.enableHeightBehavior !== undefined && item.enableHeightBehaviorOnNextCreation !== undefined) {
@@ -170,9 +186,7 @@ FocusScope {
170186 }
171187 }
172188 updateDelegateCreationRange();
173− // FIXME: should be "template", not "renderer"
174− item.template = Qt.binding(function() { return model.renderer });
175− item.components = Qt.binding(function() { return model.components });
189+ item.cardTool = cardTool;
176190 }
177191
178192 Component.onDestruction: {
@@ -325,22 +339,4 @@ FocusScope {
325339 }
326340 }
327341 }
328−
329− function getRenderer(template, results) {
330− var layout = template["category-layout"];
331−
332− if (layout == "running-apps") {
333− return "Apps/RunningApplicationsGrid.qml";
334− }
335−
336− if (layout === "carousel") {
337− // TODO: Selectively disable carousel, 4 is fixed for now, should change depending on form factor
338− if (results.count <= 4) layout = "grid";
339− }
340− switch (layout) {
341− case "carousel": return "CardCarousel.qml";
342− case "grid":
343− default: return "CardFilterGrid.qml";
344− }
345− }
346342}
tests/qmltests/Dash/tst_CardTool.qml+20
@@ -93,6 +93,7 @@ Rectangle {
9393 CardTool {
9494 id: cardTool
9595
96+ count: 8
9697 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];
9798 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];
9899 viewWidth: units.gu(Math.round(widthSlider.value))
@@ -343,5 +344,24 @@ Rectangle {
343344 tryCompare(cardTool, data.property, data.value);
344345 }
345346 }
347+
348+ function test_categoryLayout_data() {
349+ return [
350+ { tag: "Default Grid", layout_index: 0, count: 2, viewWidth: units.gu(40), layout: "grid" },
351+ { tag: "Long carousel", layout_index: 4, count: 6, viewWidth: units.gu(140), layout: "carousel" },
352+ { tag: "Long carousel fallback", layout_index: 4, count: 5, viewWidth: units.gu(140), layout: "grid" },
353+ { tag: "Short carousel", layout_index: 4, count: 4, viewWidth: units.gu(30), layout: "carousel" },
354+ { tag: "Short carousel fallback", layout_index: 4, count: 3, viewWidth: units.gu(30), layout: "grid" },
355+ { tag: "Journal", layout_index: 2, count: 8, viewWidth: units.gu(30), layout: "journal" }
356+ ]
357+ }
358+
359+ function test_categoryLayout(data) {
360+ selector.selectedIndex = 0;
361+ layoutSelector.selectedIndex = data.layout_index;
362+ cardTool.viewWidth = data.viewWidth;
363+ cardTool.count = data.count;
364+ compare(cardTool.categoryLayout, data.layout);
365+ }
346366 }
347367}
tests/qmltests/Dash/tst_GenericScopeView.qml−15
@@ -300,21 +300,6 @@ Item {
300300 tryCompare(category, "filtered", true);
301301 }
302302
303− function test_getRendererCarouselGridFallback() {
304− var template = new Object()
305− template["category-layout"] = "carousel"
306− var results = new Object()
307− var renderer
308−
309− results.count = 5
310− renderer = genericScopeView.getRenderer(template, results)
311− compare(renderer, "CardCarousel.qml")
312−
313− results.count = 4
314− renderer = genericScopeView.getRenderer(template, results)
315− compare(renderer, "CardFilterGrid.qml")
316− }
317−
318303 function test_showPreviewCarousel() {
319304 tryCompareFunction(function() { return findChild(genericScopeView, "carouselDelegate") != null; }, true);
320305 var tile = findChild(genericScopeView, "carouselDelegate");