git.iko.soy/unity8
on xenial help sign in
properly fixed the carousel
fbede75Michael Zanetti
Components/Carousel.qml+13−8
compare with xenial
unifiedsplit
@@ -49,8 +49,8 @@ Item {
49 property alias highlightIndex: listView.highlightIndex
49 property alias highlightIndex: listView.highlightIndex
50 /// The column count is required for API compatibility with FilterGrids
50 /// The column count is required for API compatibility with FilterGrids
51 readonly property int columns: listView.count
51 readonly property int columns: listView.count
52− /// Indicates that this component automatically centers the highlighted item
52+ /// exposes the delegate of the currentItem
53− readonly property bool highlightCentered: true
53+ readonly property alias currentItem: listView.currentItem
54
54
55 /// Emitted when the user clicked on an item
55 /// Emitted when the user clicked on an item
56 /// @param index is the index of the clicked item
56 /// @param index is the index of the clicked item
@@ -147,13 +147,9 @@ Item {
147 flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
147 flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
148 maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
148 maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
149 orientation: ListView.Horizontal
149 orientation: ListView.Horizontal
150− currentIndex: highlightIndex
151− highlightFollowsCurrentItem: true
152− preferredHighlightBegin: (width - tileWidth) * 0.5
153− preferredHighlightEnd: (width - tileWidth) * 0.5
154− highlightRangeMode: highlightIndex != -1 ? ListView.StrictlyEnforceRange : ListView.NoHighlightRange
155
150
156 function itemClicked(index, delegateItem) {
151 function itemClicked(index, delegateItem) {
152+ listView.currentIndex = index
157 var x = CarouselJS.getXFromContinuousIndex(index,
153 var x = CarouselJS.getXFromContinuousIndex(index,
158 realWidth,
154 realWidth,
159 realContentWidth,
155 realContentWidth,
@@ -201,6 +197,12 @@ Item {
201 newContentXAnimation.start();
197 newContentXAnimation.start();
202 }
198 }
203
199
200+ onHighlightIndexChanged: {
201+ if (highlightIndex != -1) {
202+ itemClicked(highlightIndex)
203+ }
204+ }
205+
204 onMovementStarted: {
206 onMovementStarted: {
205 stepAnimation.stop()
207 stepAnimation.stop()
206 newContentXAnimation.stop()
208 newContentXAnimation.stop()
@@ -284,6 +286,9 @@ Item {
284 itemTranslationScale,
286 itemTranslationScale,
285 listView.maximumItemTranslation)
287 listView.maximumItemTranslation)
286
288
289+ readonly property real xTransform: listView.viewTranslation + translationX * listView.scaleFactor
290+ readonly property real center: x - listView.contentX + xTransform - drawBuffer + (width/2)
291+
287 width: listView.tileWidth
292 width: listView.tileWidth
288 height: listView.tileHeight
293 height: listView.tileHeight
289 scale: itemScale * explicitScaleFactor
294 scale: itemScale * explicitScaleFactor
@@ -292,7 +297,7 @@ Item {
292 opacity: highlightIndex == -1 ? 1 : (highlightIndex == index ? 0.6 : 0.2)
297 opacity: highlightIndex == -1 ? 1 : (highlightIndex == index ? 0.6 : 0.2)
293
298
294 transform: Translate {
299 transform: Translate {
295− x: listView.viewTranslation + translationX * listView.scaleFactor
300+ x: xTransform
296 }
301 }
297
302
298 Behavior on explicitScaleFactor {
303 Behavior on explicitScaleFactor {
Components/FilterGrid.qml+1−1
@@ -62,7 +62,7 @@ Item {
62 readonly property alias moving: iconTileGrid.moving
62 readonly property alias moving: iconTileGrid.moving
63 readonly property alias pressDelay: iconTileGrid.pressDelay
63 readonly property alias pressDelay: iconTileGrid.pressDelay
64 property alias highlightIndex: iconTileGrid.highlightIndex
64 property alias highlightIndex: iconTileGrid.highlightIndex
65− readonly property bool highlightCentered: false
65+ readonly property alias currentItem: iconTileGrid.currentItem
66
66
67 height: !filterAnimation.running ? childrenRect.height : height
67 height: !filterAnimation.running ? childrenRect.height : height
68 clip: filterAnimation.running
68 clip: filterAnimation.running
Components/ResponsiveGridView.qml+8−1
@@ -41,6 +41,7 @@ Item {
41 readonly property alias moving: gridView.moving
41 readonly property alias moving: gridView.moving
42 readonly property alias pressDelay: gridView.pressDelay
42 readonly property alias pressDelay: gridView.pressDelay
43 property alias highlightIndex: gridView.highlightIndex
43 property alias highlightIndex: gridView.highlightIndex
44+ readonly property alias currentItem: gridView.currentItem
44
45
45 function contentHeightForRows(rows) {
46 function contentHeightForRows(rows) {
46 return rows * cellHeight + verticalSpacing
47 return rows * cellHeight + verticalSpacing
@@ -56,7 +57,6 @@ Item {
56 topMargin: verticalSpacing
57 topMargin: verticalSpacing
57 }
58 }
58 clip: parent.height != totalContentHeight
59 clip: parent.height != totalContentHeight
59− property int highlightIndex: -1
60
60
61 function pixelToGU(value) {
61 function pixelToGU(value) {
62 return Math.floor(value / units.gu(1));
62 return Math.floor(value / units.gu(1));
@@ -78,8 +78,15 @@ Item {
78 property real horizontalSpacing: spacingForColumns(columns)
78 property real horizontalSpacing: spacingForColumns(columns)
79 property real verticalSpacing: horizontalSpacing
79 property real verticalSpacing: horizontalSpacing
80 property int margin: allocatableHorizontalSpace - columns * horizontalSpacing
80 property int margin: allocatableHorizontalSpace - columns * horizontalSpacing
81+ property int highlightIndex: -1
81
82
82 cellWidth: delegateWidth + horizontalSpacing
83 cellWidth: delegateWidth + horizontalSpacing
83 cellHeight: delegateHeight + verticalSpacing
84 cellHeight: delegateHeight + verticalSpacing
85+
86+ onHighlightIndexChanged: {
87+ if (highlightIndex != -1) {
88+ currentIndex = highlightIndex
89+ }
90+ }
84 }
91 }
85}
92}
Components/Tile.qml+1
@@ -28,6 +28,7 @@ AbstractButton {
28 property int imageHeight
28 property int imageHeight
29 opacity: GridView.view.highlightIndex === -1 ? 1 :
29 opacity: GridView.view.highlightIndex === -1 ? 1 :
30 GridView.view.highlightIndex === index ? 0.6 : 0.2
30 GridView.view.highlightIndex === index ? 0.6 : 0.2
31+ readonly property int center: (index % GridView.view.columns * width) + (width / 2)
31
32
32 Behavior on opacity {
33 Behavior on opacity {
33 UbuntuNumberAnimation {}
34 UbuntuNumberAnimation {}
Dash/GenericScopeView.qml+4−6
@@ -215,6 +215,7 @@ ScopeView {
215 if (rendererId == "default") {
215 if (rendererId == "default") {
216 rendererId = getDefaultRendererId(contentType);
216 rendererId = getDefaultRendererId(contentType);
217 }
217 }
218+ return "Generic/GenericCarousel.qml";
218 switch (rendererId) {
219 switch (rendererId) {
219 case "grid": {
220 case "grid": {
220 switch (contentType) {
221 switch (contentType) {
@@ -431,18 +432,15 @@ ScopeView {
431 anchors {
432 anchors {
432 top: previewListView.bottom
433 top: previewListView.bottom
433 left: parent.left
434 left: parent.left
434− leftMargin: previewListView.categoryDelegate.highlightCentered ?
435+ leftMargin: previewListView.categoryDelegate.currentItem ?
435− (parent.width - width) / 2 :
436+ previewListView.categoryDelegate.currentItem.center - (width + margins) / 2 : 0
436− (highlightColumn * cellWidth) + (-width + cellWidth + margins) / 2
437+
437 Behavior on leftMargin {
438 Behavior on leftMargin {
438 UbuntuNumberAnimation {}
439 UbuntuNumberAnimation {}
439 }
440 }
440 }
441 }
441 height: units.gu(1)
442 height: units.gu(1)
442 width: units.gu(2)
443 width: units.gu(2)
443− property int columns: previewListView.categoryDelegate ? previewListView.categoryDelegate.columns : 1
444− property int highlightColumn: previewListView.currentIndex % columns
445− property int cellWidth: previewListView.categoryDelegate ? previewListView.categoryDelegate.cellWidth : 0
446 property int margins: previewListView.categoryDelegate ? previewListView.categoryDelegate.margins : 0
444 property int margins: previewListView.categoryDelegate ? previewListView.categoryDelegate.margins : 0
447 opacity: previewListView.open ? .5 : 0
445 opacity: previewListView.open ? .5 : 0
448
446