on xenial help sign in
Refactor carousel item activation.

Approved by: Andrea Cimitan, Michael Zanetti

commit05913070abec73149624d5e3edc9017c3e84fad5 authorMichał Sawicz <michal.sawicz@canonical.com> dateWed 9 Jul 2014, 19:43 (12 years ago) parentd56d8b403d74e2
5 files changed+82−22
qml/Components/BaseCarouselDelegate.qml+19 qml/Components/Carousel.qml+5−14 qml/Dash/CardCarousel.qml+6−4 tests/qmltests/Components/tst_Carousel.qml+48−2 tests/qmltests/Dash/tst_DashContent.qml+4−2
qml/Components/BaseCarouselDelegate.qml+19
@@ -17,7 +17,26 @@
1717import QtQuick 2.0
1818import Ubuntu.Components 0.1
1919
20+/*!
21+ \brief Base delegate for use with the Carousel component
22+
23+ Use this as the base of your component in a Carousel, the properties
24+ will get updated and signals emitted accordingly.
25+*/
26+
2027Item {
28+ /// True if this item is currently "focused" in the carousel.
2129 property bool explicitlyScaled
30+
31+ /// Model index for this delegate.
32+ property int index
33+
34+ /// Model data for this delegate.
2235 property var model
36+
37+ /// Will be emitted when the item is tapped.
38+ signal clicked
39+
40+ /// Will be emitted when the item is long-pressed.
41+ signal pressAndHold
2342}
qml/Components/Carousel.qml+5−14
@@ -52,16 +52,6 @@ Item {
5252 /// exposes the distance to the next row (only one row in carousel, so it's the topMargins)
5353 readonly property alias verticalSpacing: listView.verticalMargin
5454
55− /// Emitted when the user clicked on an item
56− /// @param index is the index of the clicked item
57− /// @param itemY is y of the clicked delegate
58− signal clicked(int index, real itemY)
59−
60− /// Emitted when the user pressed and held on an item
61− /// @param index is the index of the held item
62− /// @param itemY is y of the held delegate
63− signal pressAndHold(int index, real itemY)
64−
6555 implicitHeight: listView.tileHeight * selectedItemScaleFactor
6656 opacity: listView.highlightIndex === -1 ? 1 : 0.6
6757
@@ -167,7 +157,7 @@ Item {
167157 /* We're clicking the selected item and
168158 we're in the neighbourhood of radius 1 pixel from it.
169159 Let's emit the clicked signal. */
170− carousel.clicked(index, delegateItem.y)
160+ delegateItem.clicked()
171161 return
172162 }
173163
@@ -185,7 +175,7 @@ Item {
185175 /* We're pressAndHold the selected item and
186176 we're in the neighbourhood of radius 1 pixel from it.
187177 Let's emit the pressAndHold signal. */
188− carousel.pressAndHold(index, delegateItem.y);
178+ delegateItem.pressAndHold();
189179 return;
190180 }
191181
@@ -316,8 +306,9 @@ Item {
316306 }
317307
318308 onLoaded: {
319− item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
320− item.model = Qt.binding(function() { return model; })
309+ item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; });
310+ item.index = Qt.binding(function() { return index; });
311+ item.model = Qt.binding(function() { return model; });
321312 }
322313
323314 MouseArea {
qml/Dash/CardCarousel.qml+6−4
@@ -40,9 +40,6 @@ DashRenderer {
4040 cacheBuffer: 1404 // 18px * 13gu * 6
4141 model: cardCarousel.model
4242
43− onClicked: cardCarousel.clicked(index, null)
44− onPressAndHold: cardCarousel.pressAndHold(index)
45−
4643 property real fontScale: 1 / selectedItemScaleFactor
4744 property real headerHeight: cardTool.headerHeight / selectedItemScaleFactor
4845
@@ -51,11 +48,16 @@ DashRenderer {
5148
5249 property bool explicitlyScaled
5350 property var model
51+ property int index
5452 enabled: false
5553
54+ objectName: "carouselDelegate" + index
55+
56+ function clicked() { cardCarousel.clicked(index, model.result) }
57+ function pressAndHold() { cardCarousel.pressAndHold(index, model.result) }
58+
5659 sourceComponent: cardTool.cardComponent
5760 onLoaded: {
58− item.objectName = "carouselDelegate" + index;
5961 item.fixedHeaderHeight = Qt.binding(function() { return carousel.headerHeight; });
6062 item.height = Qt.binding(function() { return cardTool.cardHeight; });
6163 item.cardData = Qt.binding(function() { return model; });
tests/qmltests/Components/tst_Carousel.qml+48−2
@@ -27,12 +27,13 @@ Item {
2727 Carousel {
2828 anchors.fill: parent
2929 id: carousel
30− model: 40
3130
3231 property int createdDelegates: 0
3332 property int destroyedDelegates: 0
3433
3534 itemComponent: BaseCarouselDelegate {
35+ objectName: "carouselDelegate" + index
36+
3637 Rectangle {
3738 anchors.fill: parent
3839 border.color: "black"
@@ -42,6 +43,11 @@ Item {
4243 }
4344 }
4445 }
46+
47+ SignalSpy {
48+ id: spy
49+ }
50+
4551 UT.UnityTestCase {
4652 id: root
4753 name: "Carousel"
@@ -51,6 +57,8 @@ Item {
5157 property int itemCount
5258 property real tileWidth
5359
60+ property Item listView: findChild(carousel, "listView")
61+
5462 property real contentWidth: itemCount * tileWidth
5563 // following variables are copied from Carousel.qml
5664 // I'm not using the variables directly from there, as then tileWidth and others would be affected as well
@@ -60,11 +68,25 @@ Item {
6068 property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
6169 property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
6270
71+ function init() {
72+ carousel.model = 40;
73+ waitForRendering(carousel)
74+ listView.positionViewAtBeginning();
75+ }
76+
77+ function cleanup() {
78+ carousel.model = 0;
79+ carousel.createdDelegates = 0;
80+ carousel.destroyedDelegates = 0;
81+ spy.target = null;
82+ spy.signalName = "";
83+ }
84+
6385 // This test needs to run first since it tests a corner case condition
6486 // to where the carousel is just being created
6587 // That is why it has a 1 in the name
6688 function test_1onlyNeededItemsCreated() {
67− tryCompare(carousel, "createdDelegates", 10);
89+ tryCompare(carousel, "createdDelegates", 9);
6890 compare(carousel.destroyedDelegates, 0);
6991 }
7092
@@ -243,5 +265,29 @@ Item {
243265 var x = carouselList.getXFromContinuousIndex(carousel.model - 1);
244266 verify(Math.abs(x - carouselList.contentX) < 1);
245267 }
268+
269+ function test_activate() {
270+ var carouselList = findChild(carousel, "listView");
271+ tryCompareFunction(function() { return findChild(carouselList, "carouselDelegate3") ? true : false; }, true);
272+ var carouselItem = findChild(carousel, "carouselDelegate3")
273+ verify(carouselItem, "Could not find delegate");
274+
275+ spy.signalName = "clicked";
276+ spy.target = carouselItem;
277+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
278+ tryCompare(carouselList, "moving", false);
279+ tryCompare(carouselItem, "explicitlyScaled", true);
280+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
281+ spy.wait();
282+
283+ spy.signalName = "pressAndHold";
284+ spy.target = carouselItem;
285+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
286+ tryCompare(carouselList, "moving", false);
287+ tryCompare(carouselItem, "explicitlyScaled", true);
288+ mousePress(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
289+ spy.wait();
290+ mouseRelease(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
291+ }
246292 }
247293}
tests/qmltests/Dash/tst_DashContent.qml+4−2
@@ -279,7 +279,7 @@ Item {
279279 if (scope != null) {
280280 var dashCategory1 = findChild(scope, "dashCategory1");
281281 if (dashCategory1 != null) {
282− var tile = findChild(dashCategory1, "carouselDelegate1");
282+ var tile = findChild(dashCategory1, "carouselDelegate3");
283283 return tile != null;
284284 }
285285 }
@@ -292,7 +292,9 @@ Item {
292292
293293 var scope = findChild(dashContent, "MockScope1 loader");
294294 var dashCategory1 = findChild(scope, "dashCategory1");
295− var tile = findChild(dashCategory1, "carouselDelegate1");
295+ var tile = findChild(dashCategory1, "carouselDelegate3");
296+ mouseClick(tile, tile.width / 2, tile.height / 2);
297+ tryCompare(tile, "explicitlyScaled", true);
296298 mouseClick(tile, tile.width / 2, tile.height / 2);
297299 tryCompare(previewListView, "open", true);
298300 tryCompare(previewListView, "x", 0);