← Back to branch summary

~zsombi/ubuntu-ui-toolkit/labelThemingFix

« back to all changes in this revision

Viewing changes to src/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml

  • Committer: Tarmac
  • Author(s): Tim Peeters
  • Date: 2016-03-02 17:18:32 UTC
  • mfrom: (1872.3.12 75-sectionsScroll)
  • Revision ID: tarmac-20160302171832-rbwqsxsbsab1sljf
Properly disable left/right arrows on sections when at the beginning/end of the list. Fixes: https://bugs.launchpad.net/bugs/1551356.

Approved by ubuntu-sdk-build-bot.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Ubuntu/Components/Themes/Ambiance/1.3/SectionsStyle.qml
236
236
            }
237
237
 
238
238
            SmoothedAnimation {
 
239
                objectName: "sections_scroll_animation"
239
240
                id: contentXAnim
240
241
                target: sectionsListView
241
242
                property: "contentX"
251
252
 
252
253
        property real iconsDisabledOpacity: 0.3
253
254
 
254
 
        property bool hoveringLeft: false
255
 
        property bool hoveringRight: false
256
 
 
257
 
        function checkHovering(mouse) {
258
 
            if (mouse.x < listViewContainer.listViewMargins) {
259
 
                if (!hoveringLeft) hoveringLeft = true;
260
 
            } else if (mouse.x > width - listViewContainer.listViewMargins) {
261
 
                if (!hoveringRight) hoveringRight = true;
262
 
            } else {
263
 
                hoveringLeft = false;
264
 
                hoveringRight = false;
265
 
            }
266
 
        }
267
 
 
268
255
        anchors.fill: parent
269
256
        hoverEnabled: true
270
257
 
271
 
        onPositionChanged: checkHovering(mouse)
272
 
        onExited: {
273
 
            hoveringLeft = false;
274
 
            hoveringRight = false;
275
 
        }
 
258
        property bool pressedLeft: false
 
259
        property bool pressedRight: false
276
260
        onPressed: {
277
 
            if (!hoveringLeft && !hoveringRight) {
278
 
                mouse.accepted = false;
279
 
            }
 
261
            pressedLeft = leftIcon.contains(mouse);
 
262
            pressedRight = rightIcon.contains(mouse);
 
263
            mouse.accepted = pressedLeft || pressedRight;
280
264
        }
281
265
        onClicked: {
282
266
            // positionViewAtIndex() does not provide animation
 
267
            var scrollDirection = 0;
 
268
            if (pressedLeft && leftIcon.contains(mouse)) {
 
269
                scrollDirection = -1;
 
270
            } else if (pressedRight && rightIcon.contains(mouse)) {
 
271
                scrollDirection = 1;
 
272
            } else {
 
273
                // User pressed on the left or right icon, and then released inside of the
 
274
                // MouseArea but outside of the icon that was pressed.
 
275
                return;
 
276
            }
283
277
            if (contentXAnim.running) contentXAnim.stop();
284
 
            var newContentX = sectionsListView.contentX + (sectionsListView.width * (hoveringLeft ? -1 : 1));
 
278
            var newContentX = sectionsListView.contentX + (sectionsListView.width * scrollDirection);
285
279
            contentXAnim.from = sectionsListView.contentX;
286
280
            // make sure we don't overshoot bounds
287
281
            contentXAnim.to = MathUtils.clamp(
288
282
                        newContentX,
289
 
                        sectionsListView.originX,
 
283
                        0.0, // estimation of originX is some times wrong when scrolling towards the beginning
290
284
                        sectionsListView.originX + sectionsListView.contentWidth - sectionsListView.width);
291
285
            contentXAnim.start();
292
286
        }
293
287
 
294
288
        Icon {
295
 
            id: leftHoveringIcon
 
289
            id: leftIcon
 
290
            objectName: "left_scroll_icon"
 
291
            // return whether the pressed event was done inside the area of the icon
 
292
            function contains(mouse) {
 
293
                return (mouse.x < listViewContainer.listViewMargins &&
 
294
                        !sectionsListView.atXBeginning);
 
295
            }
296
296
            anchors {
297
297
                left: parent.left
298
298
                leftMargin: (listViewContainer.listViewMargins - width) / 2
315
315
        }
316
316
 
317
317
        Icon {
318
 
            id: rightHoveringIcon
 
318
            id: rightIcon
 
319
            objectName: "right_scroll_icon"
 
320
            // return whether the pressed event was done inside the area of the icon
 
321
            function contains(mouse) {
 
322
                return (mouse.x > (hoveringArea.width - listViewContainer.listViewMargins) &&
 
323
                        !sectionsListView.atXEnd);
 
324
            }
319
325
            anchors {
320
326
                right: parent.right
321
327
                rightMargin: (listViewContainer.listViewMargins - width) / 2
387
393
            when: hoveringArea.containsMouse
388
394
            PropertyChanges { target: mask; visible: true }
389
395
            PropertyChanges { target: listViewContainer; opacity: 0.0 }
390
 
            PropertyChanges { target: leftHoveringIcon; visible: true; }
391
 
            PropertyChanges { target: rightHoveringIcon; visible: true; }
 
396
            PropertyChanges { target: leftIcon; visible: true; }
 
397
            PropertyChanges { target: rightIcon; visible: true; }
392
398
        }
393
399
    ]
394
400
}