on xenial help sign in
properly fixed the carousel
commitfbede75a240cf9fa1ffd681f112e5da59448eac6 authorMichael Zanetti <michael.zanetti@canonical.com> dateFri 4 Oct 2013, 19:14 (13 years ago) parentb5e6cf2
5 files changed+27−16
Components/Carousel.qml+13−8 Components/FilterGrid.qml+1−1 Components/ResponsiveGridView.qml+8−1 Components/Tile.qml+1 Dash/GenericScopeView.qml+4−6
Components/Carousel.qml+13−8
@@ -49,8 +49,8 @@ Item {
4949 property alias highlightIndex: listView.highlightIndex
5050 /// The column count is required for API compatibility with FilterGrids
5151 readonly property int columns: listView.count
52− /// Indicates that this component automatically centers the highlighted item
53− readonly property bool highlightCentered: true
52+ /// exposes the delegate of the currentItem
53+ readonly property alias currentItem: listView.currentItem
5454
5555 /// Emitted when the user clicked on an item
5656 /// @param index is the index of the clicked item
@@ -147,13 +147,9 @@ Item {
147147 flickDeceleration: Math.max(1500 * Math.pow(realWidth / referenceWidth, 1.5), 1500) // 1500 is platform default
148148 maximumFlickVelocity: Math.max(2500 * Math.pow(realWidth / referenceWidth, 1.5), 2500) // 2500 is platform default
149149 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
155150
156151 function itemClicked(index, delegateItem) {
152+ listView.currentIndex = index
157153 var x = CarouselJS.getXFromContinuousIndex(index,
158154 realWidth,
159155 realContentWidth,
@@ -201,6 +197,12 @@ Item {
201197 newContentXAnimation.start();
202198 }
203199
200+ onHighlightIndexChanged: {
201+ if (highlightIndex != -1) {
202+ itemClicked(highlightIndex)
203+ }
204+ }
205+
204206 onMovementStarted: {
205207 stepAnimation.stop()
206208 newContentXAnimation.stop()
@@ -284,6 +286,9 @@ Item {
284286 itemTranslationScale,
285287 listView.maximumItemTranslation)
286288
289+ readonly property real xTransform: listView.viewTranslation + translationX * listView.scaleFactor
290+ readonly property real center: x - listView.contentX + xTransform - drawBuffer + (width/2)
291+
287292 width: listView.tileWidth
288293 height: listView.tileHeight
289294 scale: itemScale * explicitScaleFactor
@@ -292,7 +297,7 @@ Item {
292297 opacity: highlightIndex == -1 ? 1 : (highlightIndex == index ? 0.6 : 0.2)
293298
294299 transform: Translate {
295− x: listView.viewTranslation + translationX * listView.scaleFactor
300+ x: xTransform
296301 }
297302
298303 Behavior on explicitScaleFactor {
Components/FilterGrid.qml+1−1
@@ -62,7 +62,7 @@ Item {
6262 readonly property alias moving: iconTileGrid.moving
6363 readonly property alias pressDelay: iconTileGrid.pressDelay
6464 property alias highlightIndex: iconTileGrid.highlightIndex
65− readonly property bool highlightCentered: false
65+ readonly property alias currentItem: iconTileGrid.currentItem
6666
6767 height: !filterAnimation.running ? childrenRect.height : height
6868 clip: filterAnimation.running
Components/ResponsiveGridView.qml+8−1
@@ -41,6 +41,7 @@ Item {
4141 readonly property alias moving: gridView.moving
4242 readonly property alias pressDelay: gridView.pressDelay
4343 property alias highlightIndex: gridView.highlightIndex
44+ readonly property alias currentItem: gridView.currentItem
4445
4546 function contentHeightForRows(rows) {
4647 return rows * cellHeight + verticalSpacing
@@ -56,7 +57,6 @@ Item {
5657 topMargin: verticalSpacing
5758 }
5859 clip: parent.height != totalContentHeight
59− property int highlightIndex: -1
6060
6161 function pixelToGU(value) {
6262 return Math.floor(value / units.gu(1));
@@ -78,8 +78,15 @@ Item {
7878 property real horizontalSpacing: spacingForColumns(columns)
7979 property real verticalSpacing: horizontalSpacing
8080 property int margin: allocatableHorizontalSpace - columns * horizontalSpacing
81+ property int highlightIndex: -1
8182
8283 cellWidth: delegateWidth + horizontalSpacing
8384 cellHeight: delegateHeight + verticalSpacing
85+
86+ onHighlightIndexChanged: {
87+ if (highlightIndex != -1) {
88+ currentIndex = highlightIndex
89+ }
90+ }
8491 }
8592}
Components/Tile.qml+1
@@ -28,6 +28,7 @@ AbstractButton {
2828 property int imageHeight
2929 opacity: GridView.view.highlightIndex === -1 ? 1 :
3030 GridView.view.highlightIndex === index ? 0.6 : 0.2
31+ readonly property int center: (index % GridView.view.columns * width) + (width / 2)
3132
3233 Behavior on opacity {
3334 UbuntuNumberAnimation {}
Dash/GenericScopeView.qml+4−6
@@ -215,6 +215,7 @@ ScopeView {
215215 if (rendererId == "default") {
216216 rendererId = getDefaultRendererId(contentType);
217217 }
218+ return "Generic/GenericCarousel.qml";
218219 switch (rendererId) {
219220 case "grid": {
220221 switch (contentType) {
@@ -431,18 +432,15 @@ ScopeView {
431432 anchors {
432433 top: previewListView.bottom
433434 left: parent.left
434− leftMargin: previewListView.categoryDelegate.highlightCentered ?
435− (parent.width - width) / 2 :
436− (highlightColumn * cellWidth) + (-width + cellWidth + margins) / 2
435+ leftMargin: previewListView.categoryDelegate.currentItem ?
436+ previewListView.categoryDelegate.currentItem.center - (width + margins) / 2 : 0
437+
437438 Behavior on leftMargin {
438439 UbuntuNumberAnimation {}
439440 }
440441 }
441442 height: units.gu(1)
442443 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
446444 property int margins: previewListView.categoryDelegate ? previewListView.categoryDelegate.margins : 0
447445 opacity: previewListView.open ? .5 : 0
448446