git.iko.soy/unity8
on xenial help sign in
Refactor carousel item activation.
420f25eMichał Sawicz
qml/Components/BaseCarouselDelegate.qml+16
compare with xenial
unifiedsplit
@@ -17,7 +17,23 @@
17import QtQuick 2.0
17import QtQuick 2.0
18import Ubuntu.Components 0.1
18import Ubuntu.Components 0.1
19
19
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+
20Item {
27Item {
28+ /// True if this item is currently "focused" in the carousel.
21 property bool explicitlyScaled
29 property bool explicitlyScaled
30+
31+ /// Model data for this delegate.
22 property var model
32 property var model
33+
34+ /// Will be emitted when the item is tapped.
35+ signal clicked
36+
37+ /// Will be emitted when the item is long-pressed.
38+ signal pressAndHold
23}
39}
qml/Components/Carousel.qml+5−14
@@ -52,16 +52,6 @@ Item {
52 /// exposes the distance to the next row (only one row in carousel, so it's the topMargins)
52 /// exposes the distance to the next row (only one row in carousel, so it's the topMargins)
53 readonly property alias verticalSpacing: listView.verticalMargin
53 readonly property alias verticalSpacing: listView.verticalMargin
54
54
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−
65 implicitHeight: listView.tileHeight * selectedItemScaleFactor
55 implicitHeight: listView.tileHeight * selectedItemScaleFactor
66 opacity: listView.highlightIndex === -1 ? 1 : 0.6
56 opacity: listView.highlightIndex === -1 ? 1 : 0.6
67
57
@@ -167,7 +157,7 @@ Item {
167 /* We're clicking the selected item and
157 /* We're clicking the selected item and
168 we're in the neighbourhood of radius 1 pixel from it.
158 we're in the neighbourhood of radius 1 pixel from it.
169 Let's emit the clicked signal. */
159 Let's emit the clicked signal. */
170− carousel.clicked(index, delegateItem.y)
160+ delegateItem.clicked()
171 return
161 return
172 }
162 }
173
163
@@ -185,7 +175,7 @@ Item {
185 /* We're pressAndHold the selected item and
175 /* We're pressAndHold the selected item and
186 we're in the neighbourhood of radius 1 pixel from it.
176 we're in the neighbourhood of radius 1 pixel from it.
187 Let's emit the pressAndHold signal. */
177 Let's emit the pressAndHold signal. */
188− carousel.pressAndHold(index, delegateItem.y);
178+ delegateItem.pressAndHold();
189 return;
179 return;
190 }
180 }
191
181
@@ -316,8 +306,9 @@ Item {
316 }
306 }
317
307
318 onLoaded: {
308 onLoaded: {
309+ item.objectName = Qt.binding(function() { return "carouselDelegate" + index; });
319− item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; })
310+ item.explicitlyScaled = Qt.binding(function() { return explicitlyScaled; });
320− item.model = Qt.binding(function() { return model; })
311+ item.model = Qt.binding(function() { return model; });
321 }
312 }
322
313
323 MouseArea {
314 MouseArea {
qml/Dash/CardCarousel.qml+3−3
@@ -40,9 +40,6 @@ DashRenderer {
40 cacheBuffer: 1404 // 18px * 13gu * 6
40 cacheBuffer: 1404 // 18px * 13gu * 6
41 model: cardCarousel.model
41 model: cardCarousel.model
42
42
43− onClicked: cardCarousel.clicked(index, null)
44− onPressAndHold: cardCarousel.pressAndHold(index)
45−
46 property real fontScale: 1 / selectedItemScaleFactor
43 property real fontScale: 1 / selectedItemScaleFactor
47 property real headerHeight: cardTool.headerHeight / selectedItemScaleFactor
44 property real headerHeight: cardTool.headerHeight / selectedItemScaleFactor
48
45
@@ -53,6 +50,9 @@ DashRenderer {
53 property var model
50 property var model
54 enabled: false
51 enabled: false
55
52
53+ function clicked() { cardCarousel.clicked(index, model.result) }
54+ function pressAndHold() { cardCarousel.pressAndHold(index, model.result) }
55+
56 sourceComponent: cardTool.cardComponent
56 sourceComponent: cardTool.cardComponent
57 onLoaded: {
57 onLoaded: {
58 item.objectName = "carouselDelegate" + index;
58 item.objectName = "carouselDelegate" + index;
tests/qmltests/Components/tst_Carousel.qml+61−9
@@ -27,21 +27,27 @@ Item {
27 Carousel {
27 Carousel {
28 anchors.fill: parent
28 anchors.fill: parent
29 id: carousel
29 id: carousel
30− model: 40
31
30
32 property int createdDelegates: 0
31 property int createdDelegates: 0
33 property int destroyedDelegates: 0
32 property int destroyedDelegates: 0
34
33
34+ itemComponent: Component {
35− itemComponent: BaseCarouselDelegate {
35+ BaseCarouselDelegate {
36− Rectangle {
36+ Rectangle {
37− anchors.fill: parent
37+ anchors.fill: parent
38− border.color: "black"
38+ border.color: "black"
39− color: "red"
39+ color: "red"
40− Component.onCompleted: carousel.createdDelegates++
40+ Component.onCompleted: carousel.createdDelegates++
41− Component.onDestruction: carousel.destroyedDelegates++
41+ Component.onDestruction: carousel.destroyedDelegates++
42+ }
42 }
43 }
43 }
44 }
44 }
45 }
46+
47+ SignalSpy {
48+ id: spy
49+ }
50+
45 UT.UnityTestCase {
51 UT.UnityTestCase {
46 id: root
52 id: root
47 name: "Carousel"
53 name: "Carousel"
@@ -51,6 +57,8 @@ Item {
51 property int itemCount
57 property int itemCount
52 property real tileWidth
58 property real tileWidth
53
59
60+ property Item listView: findChild(carousel, "listView")
61+
54 property real contentWidth: itemCount * tileWidth
62 property real contentWidth: itemCount * tileWidth
55 // following variables are copied from Carousel.qml
63 // following variables are copied from Carousel.qml
56 // I'm not using the variables directly from there, as then tileWidth and others would be affected as well
64 // I'm not using the variables directly from there, as then tileWidth and others would be affected as well
@@ -60,11 +68,25 @@ Item {
60 property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
68 property real kGapEnd: kMiddleIndex * (1 - gapToEndPhase / gapToMiddlePhase)
61 property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
69 property real kXBeginningEnd: 1 / tileWidth + kMiddleIndex / gapToMiddlePhase
62
70
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+
63 // This test needs to run first since it tests a corner case condition
85 // This test needs to run first since it tests a corner case condition
64 // to where the carousel is just being created
86 // to where the carousel is just being created
65 // That is why it has a 1 in the name
87 // That is why it has a 1 in the name
66 function test_1onlyNeededItemsCreated() {
88 function test_1onlyNeededItemsCreated() {
67− tryCompare(carousel, "createdDelegates", 10);
89+ tryCompare(carousel, "createdDelegates", 9);
68 compare(carousel.destroyedDelegates, 0);
90 compare(carousel.destroyedDelegates, 0);
69 }
91 }
70
92
@@ -243,5 +265,35 @@ Item {
243 var x = carouselList.getXFromContinuousIndex(carousel.model - 1);
265 var x = carouselList.getXFromContinuousIndex(carousel.model - 1);
244 verify(Math.abs(x - carouselList.contentX) < 1);
266 verify(Math.abs(x - carouselList.contentX) < 1);
245 }
267 }
268+
269+ function test_click() {
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+ spy.signalName = "clicked";
275+ spy.target = carouselItem;
276+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
277+ tryCompare(carouselList, "moving", false);
278+ tryCompare(carouselItem, "explicitlyScaled", true);
279+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
280+ spy.wait();
281+ }
282+
283+ function test_pressAndHold() {
284+ var carouselList = findChild(carousel, "listView");
285+ tryCompareFunction(function() { return findChild(carouselList, "carouselDelegate3") ? true : false; }, true);
286+ var carouselItem = findChild(carousel, "carouselDelegate3")
287+ verify(carouselItem, "Could not find delegate");
288+ spy.signalName = "pressAndHold";
289+ spy.target = carouselItem;
290+ mouseClick(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
291+ tryCompare(carouselList, "moving", false);
292+ tryCompare(carouselItem, "explicitlyScaled", true);
293+ mousePress(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
294+ spy.wait();
295+ mouseRelease(carouselItem, carouselItem.width / 2, carouselItem.height / 2);
296+ }
297+
246 }
298 }
247}
299}
tests/qmltests/Dash/tst_DashContent.qml+2
@@ -294,6 +294,8 @@ Item {
294 var dashCategory1 = findChild(scope, "dashCategory1");
294 var dashCategory1 = findChild(scope, "dashCategory1");
295 var tile = findChild(dashCategory1, "carouselDelegate1");
295 var tile = findChild(dashCategory1, "carouselDelegate1");
296 mouseClick(tile, tile.width / 2, tile.height / 2);
296 mouseClick(tile, tile.width / 2, tile.height / 2);
297+ tryCompare(tile, "explicitlyScaled", true);
298+ mouseClick(tile, tile.width / 2, tile.height / 2);
297 tryCompare(previewListView, "open", true);
299 tryCompare(previewListView, "open", true);
298 tryCompare(previewListView, "x", 0);
300 tryCompare(previewListView, "x", 0);
299
301