on xenial help sign in
Adds carousel dynamic switch
commit691e9b2f4285d777334dbf1b61279112552b1a3f authorAndrea Cimitan <andrea.cimitan@gmail.com> dateFri 14 Mar 2014, 15:45 (13 years ago) parent9880f69a252165
2 files changed+66−8
qml/Dash/CardTool.qml+46−8 tests/qmltests/Dash/tst_CardTool.qml+20
qml/Dash/CardTool.qml+46−8
@@ -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,9 +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"];
62+
63+ // carousel fallback mode to grid
64+ if (layout === "carousel" && count <= Math.ceil(carouselTool.realPathItemCount)) layout = "grid";
65+ return layout;
66+ }
4567
4668 // FIXME: Saviq
4769 // Only way for the card below to actually be laid out completely.
@@ -56,7 +78,7 @@ Item {
5678 If undefined, should use implicit width of the actual card.
5779 */
5880 readonly property var cardWidth: {
59− switch (template !== undefined && template["category-layout"]) {
81+ switch (categoryLayout) {
6082 case "grid":
6183 case "vertical-journal":
6284 if (template["card-layout"] === "horizontal") return units.gu(38);
@@ -66,10 +88,7 @@ Item {
6688 }
6789 return units.gu(18.5);
6890 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)))
91+ return carouselTool.minimumTileWidth;
7392 case undefined:
7493 case "organic-grid":
7594 case "journal":
@@ -84,7 +103,7 @@ Item {
84103 If undefined, should use implicit height of the actual card.
85104 */
86105 readonly property var cardHeight: {
87− switch (template !== undefined && template["category-layout"]) {
106+ switch (categoryLayout) {
88107 case "journal":
89108 if (template["card-size"] >= 12 && template["card-size"] <= 38) return units.gu(template["card-size"]);
90109 return units.gu(18.5);
@@ -123,6 +142,25 @@ Item {
123142 return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;
124143 }
125144
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+
126164 Card {
127165 id: card
128166 objectName: "card"
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}