43ad863 · unity8 · git.iko.soy

qml/Dash/CardCarousel.qml+3−11

compare with xenial

unifiedsplit

@@ -32,14 +32,6 @@ DashRenderer {

32 height: carousel.implicitHeight + units.gu(6)

33 verticalSpacing: units.gu(3)

34

35− CardTool {

36− id: cardTool

37−

38− template: cardCarousel.template

39− components: cardCarousel.components

40− viewWidth: cardCarousel.width

41− }

42−

43 Carousel {

35 Carousel {

44 id: carousel

36 id: carousel

45 anchors.fill: parent

37 anchors.fill: parent

@@ -47,7 +39,7 @@ DashRenderer {

47 // FIXME we need to "reverse" the carousel to make the selected item the size

39 // FIXME we need to "reverse" the carousel to make the selected item the size

48 // and push others back.

40 // and push others back.

49 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor

41 minimumTileWidth: cardTool.cardWidth / selectedItemScaleFactor

50− selectedItemScaleFactor: 1.38

42+ selectedItemScaleFactor: cardTool.carouselSelectedItemScaleFactor

51 cacheBuffer: 1404 // 18px * 13gu * 6

43 cacheBuffer: 1404 // 18px * 13gu * 6

52 model: cardCarousel.model

44 model: cardCarousel.model

53 highlightIndex: cardCarousel.highlightIndex

45 highlightIndex: cardCarousel.highlightIndex

@@ -63,8 +55,8 @@ DashRenderer {

63 objectName: "carouselDelegate" + index

55 objectName: "carouselDelegate" + index

64 headerHeight: carousel.headerHeight

56 headerHeight: carousel.headerHeight

65 cardData: model

57 cardData: model

66− template: cardCarousel.template

58+ template: cardTool.template

67− components: cardCarousel.components

59+ components: cardTool.components

68

60

69 property bool explicitlyScaled

61 property bool explicitlyScaled

70 property var model

62 property var model

qml/Dash/CardFilterGrid.qml+2−12

@@ -26,16 +26,6 @@ DashFilterGrid {

26 verticalSpacing: units.gu(1)

27 collapsedRowCount: Math.min(2, template && template["collapsed-rows"] || 2)

28

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−

39 delegate: Item {

29 delegate: Item {

40 width: genericFilterGrid.cellWidth

30 width: genericFilterGrid.cellWidth

41 height: genericFilterGrid.cellHeight

31 height: genericFilterGrid.cellHeight

@@ -47,8 +37,8 @@ DashFilterGrid {

47 anchors.horizontalCenter: parent.horizontalCenter

37 anchors.horizontalCenter: parent.horizontalCenter

48 objectName: "delegate" + index

38 objectName: "delegate" + index

49 cardData: model

39 cardData: model

50− template: genericFilterGrid.template

40+ template: cardTool.template

51− components: genericFilterGrid.components

41+ components: cardTool.components

52

42

53 headerAlignment: cardTool.headerAlignment

43 headerAlignment: cardTool.headerAlignment

54

44

qml/Dash/CardTool.qml+43−10

@@ -28,6 +28,22 @@ import QtQuick 2.0

28

29Item {

30 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+

31 /*!

47 /*!

32 \brief Template supplied for the category.

48 \brief Template supplied for the category.

33 */

49 */

@@ -39,14 +55,15 @@ Item {

39 property var components

55 property var components

40

56

41 /*!

57 /*!

42− \brief Width of the view, based on which carousel width is calculated.

58+ \brief The category layout for this card tool.

43 */

59 */

44− property var viewWidth

60+ property string categoryLayout: {

61+ var layout = template["category-layout"];

45

62

46− /*!

63+ // carousel fallback mode to grid

47− \brief The category layout for this card tool

64+ if (layout === "carousel" && count <= Math.ceil(carouselTool.realPathItemCount)) layout = "grid";

48− */

65+ return layout;

49− property string categoryLayout: template ? template["category-layout"] : ""

66+ }

50

67

51 // FIXME: Saviq

68 // FIXME: Saviq

52 // Only way for the card below to actually be laid out completely.

69 // Only way for the card below to actually be laid out completely.

@@ -71,10 +88,7 @@ Item {

71 }

88 }

72 return units.gu(18.5);

89 return units.gu(18.5);

73 case "carousel":

90 case "carousel":

74− if (viewWidth === undefined) return undefined

91+ return carouselTool.minimumTileWidth;

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)))

78 case undefined:

92 case undefined:

79 case "organic-grid":

93 case "organic-grid":

80 case "journal":

94 case "journal":

@@ -128,6 +142,25 @@ Item {

128 return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;

142 return (template["card-layout"] === "horizontal") ? Text.AlignLeft : Text.AlignHCenter;

129 }

143 }

130

144

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+

131 Card {

164 Card {

132 id: card

165 id: card

133 objectName: "cardToolCard"

166 objectName: "cardToolCard"

qml/Dash/DashRenderer.qml+5−6

@@ -50,6 +50,11 @@ Item {

50 // The model to renderer

51 property var model

52

53+ /*!

54+ \brief CardTool component.

55+ */

56+ property var cardTool

57+

53 /// Emitted when the user clicked on an item

58 /// Emitted when the user clicked on an item

54 /// @param index is the index of the clicked item

59 /// @param index is the index of the clicked item

55 /// @param itemY is y of the clicked delegate

60 /// @param itemY is y of the clicked delegate

@@ -62,10 +67,4 @@ Item {

62

67

63 function startFilterAnimation(filter) {

68 function startFilterAnimation(filter) {

64 }

69 }

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

71}

70}

qml/Dash/GenericScopeView.qml+18−22

@@ -133,6 +133,15 @@ FocusScope {

133 readonly property string category: categoryId

134 readonly property var item: rendererLoader.item

135

136+ CardTool {

137+ id: cardTool

138+

139+ count: results.count

140+ template: model.renderer

141+ components: model.components

142+ viewWidth: parent.width

143+ }

144+

136 Loader {

145 Loader {

137 id: rendererLoader

146 id: rendererLoader

138 anchors {

147 anchors {

@@ -141,7 +150,14 @@ FocusScope {

141 right: parent.right

150 right: parent.right

142 }

151 }

143

152

144− source: getRenderer(model.renderer, results)

153+ source: {

154+ switch (cardTool.categoryLayout) {

155+ case "carousel": return "CardCarousel.qml";

156+ case "running-apps": return "Apps/RunningApplicationsGrid.qml";

157+ case "grid":

158+ default: return "CardFilterGrid.qml";

159+ }

160+ }

145

161

146 onLoaded: {

162 onLoaded: {

147 if (item.enableHeightBehavior !== undefined && item.enableHeightBehaviorOnNextCreation !== undefined) {

163 if (item.enableHeightBehavior !== undefined && item.enableHeightBehaviorOnNextCreation !== undefined) {

@@ -165,9 +181,7 @@ FocusScope {

165 }

181 }

166 }

182 }

167 updateDelegateCreationRange();

183 updateDelegateCreationRange();

168− // FIXME: should be "template", not "renderer"

184+ item.cardTool = cardTool;

169− item.template = Qt.binding(function() { return model.renderer });

170− item.components = Qt.binding(function() { return model.components });

171 }

185 }

172

186

173 Component.onDestruction: {

187 Component.onDestruction: {

@@ -320,22 +334,4 @@ FocusScope {

320 }

334 }

321 }

335 }

322 }

336 }

323−

324− function getRenderer(template, results) {

325− var layout = template["category-layout"];

326−

327− if (layout == "running-apps") {

328− return "Apps/RunningApplicationsGrid.qml";

329− }

330−

331− if (layout === "carousel") {

332− // TODO: Selectively disable carousel, 4 is fixed for now, should change depending on form factor

333− if (results.count <= 4) layout = "grid";

334− }

335− switch (layout) {

336− case "carousel": return "CardCarousel.qml";

337− case "grid":

338− default: return "CardFilterGrid.qml";

339− }

340− }

341}

337}

tests/qmltests/Dash/tst_CardTool.qml+20

@@ -93,6 +93,7 @@ Rectangle {

93 CardTool {

94 id: cardTool

95

96+ count: 8

96 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];

97 template: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['template'];

97 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];

98 components: Helpers.update(JSON.parse(Helpers.defaultLayout), Helpers.tryParse(layoutArea.text, layoutError))['components'];

98 viewWidth: units.gu(Math.round(widthSlider.value))

99 viewWidth: units.gu(Math.round(widthSlider.value))

@@ -343,5 +344,24 @@ Rectangle {

343 tryCompare(cardTool, data.property, data.value);

344 tryCompare(cardTool, data.property, data.value);

344 }

345 }

346 }

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+ }

346 }

366 }

347}

367}

tests/qmltests/Dash/tst_GenericScopeView.qml−15

@@ -135,21 +135,6 @@ Item {

135 tryCompare(category, "filtered", true);

136 }

137

138− function test_getRendererCarouselGridFallback() {

139− var template = new Object()

140− template["category-layout"] = "carousel"

141− var results = new Object()

142− var renderer

143−

144− results.count = 5

145− renderer = genericScopeView.getRenderer(template, results)

146− compare(renderer, "CardCarousel.qml")

147−

148− results.count = 4

149− renderer = genericScopeView.getRenderer(template, results)

150− compare(renderer, "CardFilterGrid.qml")

151− }

152−

153 function test_filter_expand_expand_collapse() {

138 function test_filter_expand_expand_collapse() {

154 // wait for the item to be there

139 // wait for the item to be there

155 tryCompareFunction(function() { return findChild(genericScopeView, "dashSectionHeader2") != null; }, true);

140 tryCompareFunction(function() { return findChild(genericScopeView, "dashSectionHeader2") != null; }, true);