Merge lp:~uriboni/unity-2d/launcher-autoscroll into lp:unity-2d/3.0

[Florian Boucault]

[launcher] Adds an autoscrolling feature to the launcher. It works by having two sensitive zones at the top and bottom of the launcher. When the mouse enters these zones, the laucher will scroll up or down if needed, until the mouse leaves the zone.

[Florian Boucault (fboucault)]

* First few pixels at the top are not triggering the autoscroll.
* Autoscrolling is active even though there is not enough content to fill the ListView (for example if you have around 5-8 applications in a medium resolution monitor, the trash will not be at the bottom though if you stick the mouse cursor at the bottom of the launcher, the autoscrolling is triggered).

review: Needs Fixing (functional)

[Florian Boucault (fboucault)]

HACK about the mouse coordinates should be FIXME.

review: Needs Fixing

[Florian Boucault (fboucault)]

"Implements a ListView that have two mouse sensitive areas"
should read
"ListView that has two mouse sensitive areas"

review: Needs Fixing

[Florian Boucault (fboucault)]

After testing I think it would be better to have 'autoScrollSize' to be itemHeight / 2 instead of itemHeight / 3

review: Needs Fixing

[Florian Boucault (fboucault)]

Sometimes the following WARNING is issued in the console:

AutoScrollingListView.qml:105 Insufficient Arguments

[Florian Boucault (fboucault)]

While the workaround for the QML bug is essentially fine, it would have been simpler to write using property binding.

We do not have time to simplify it now, so let's keep it as is.

[Florian Boucault (fboucault)]

Why do you need an extra property 'spacingSize'? Using 'spacing' is enough.

review: Needs Fixing

[Florian Boucault (fboucault)]

"""
"Implements a ListView that have two mouse sensitive areas"
should read
"ListView that has two mouse sensitive areas"
"""

Quoting my previous comment here. You will notice that not only have I replaced the 'have' with 'has' but also I removed the 'Implements a'. It's a new class, we *know* it implements something.

review: Needs Fixing

[Ugo Riboni (uriboni)]

Fixed the last remarks and made sure the autoscroll happens only when it needs to.
Also have a look at the padding stuff in commit 394, which to me seems a quite clean way of doing it, but comments always welcome.

[Florian Boucault (fboucault)]

Good to go!

review: Approve

[Florian Boucault (fboucault)]

No proposals found for merge of lp:~unity-2d-team/unity-2d/launcher-layout into lp:unity-2d.

[Florian Boucault (fboucault)]

Good to go, again.

review: Approve

=== added file 'launcher/AutoScrollingListView.qml'
--- launcher/AutoScrollingListView.qml	1970-01-01 00:00:00 +0000
+++ launcher/AutoScrollingListView.qml	2011-02-16 15:55:29 +0000
@@ -0,0 +1,132 @@
+import Qt 4.7
+
+/* AutoScrollingListView
+
+   ListView that has two mouse sensitive areas, one at the top and one at the bottom.
+   While the cursors is in these areas the list automatically scrolls in the direction
+   where the area is until the cursor exits the area or the scrolling reaches the edge.
+
+   In addition to this, it is possible to add padding at the top and/or bottom of the
+   list that takes part in the scrolling (contrary to what would happen by adding this
+   extra space using margins).
+
+   The property 'autoScrollSize' controls how tall are the two sensitive areas.
+   The speed of the scrolling is controlled by 'autoScrollVelocity'.
+   You can check if we are currently autoscrolling using the 'autoScrolling' property.
+   The properties 'paddingTop' and 'paddingBottom' control the size of the padding.
+*/
+ListView {
+    id: list
+    property int autoScrollSize
+    property real autoScrollVelocity
+    property bool autoScrolling: scrollUp.running || scrollDown.running
+    property int paddingTop: 0
+    property int paddingBottom: 0
+
+    /* We implement the padding by adding an empty footer and header
+       of the requested size. The header and footer are inside the ListView
+       (contrary to the use of anchors.margins, which adds space outside).
+       However they are not included in contentHeight, therefore we need to
+       adjust the rest of the autoscrolling code to take them into account.
+    */
+    header: Item { height: list.paddingTop }
+    footer: Item { height: list.paddingBottom }
+
+    /* This is necessary to initially scroll to a position where the header
+       is visible. Otherwise the edge of the first item would be at the top
+       of the list */
+    contentY: 0 - paddingTop
+
+    MouseArea {
+        id: scrollZoneTop
+        width: parent.width
+        height: autoScrollSize
+        anchors.top: parent.top
+        hoverEnabled: true
+    }
+
+    MouseArea {
+        id: scrollZoneBottom
+        width: parent.width
+        height: autoScrollSize
+        anchors.bottom: parent.bottom
+        hoverEnabled: true
+    }
+
+    SmoothedAnimation {
+        id: scrollUp
+        target: list
+        property: "contentY"
+        to: 0 - paddingTop
+        velocity: autoScrollVelocity
+        running: scrollZoneTop.containsMouse
+    }
+
+    SmoothedAnimation {
+        id: scrollDown
+        target: list
+        property: "contentY"
+        to: contentHeight + paddingBottom - height
+        velocity: autoScrollVelocity
+        running: scrollZoneBottom.containsMouse && contentHeight + paddingBottom > height
+    }
+
+    /* The code below this comment is only needed as a workaround for a strange behavior
+       (or bug) in QML. Essentially MouseEvents have an accepted property, but in most cases
+       it doesn't matter what you set it to: the event is always accepted and not propagated
+       further. This prevents mouse activity on the two MouseAreas to flow down to the list
+       items. Therefore we need to forward the events we need (entered, exited, clicked).
+       The QT bug reference is:
+       http://bugreports.qt.nokia.com/browse/QTBUG-13007?focusedCommentId=137123
+    */
+    property variant itemBelow: null
+
+    Connections {
+        target: scrollZoneTop
+        onEntered: updateItemBelow(scrollZoneTop)
+        onPositionChanged: updateItemBelow(scrollZoneTop)
+        onClicked: forwardClick(scrollZoneTop, mouse)
+    }
+
+    Connections {
+        target: scrollZoneBottom
+        onEntered: updateItemBelow(scrollZoneBottom)
+        onPositionChanged: updateItemBelow(scrollZoneBottom)
+        onClicked: forwardClick(scrollZoneBottom, mouse)
+    }
+
+    onContentYChanged: updateItemBelow((scrollZoneBottom.containsMouse) ? scrollZoneBottom :
+                                       (scrollZoneTop.containsMouse) ? scrollZoneTop : null)
+
+    function updateItemBelow(zone) {
+        if (zone == null) return
+        var point = zone.mapToItem(list.contentItem, zone.mouseX, zone.mouseY)
+        var item = list.contentItem.childAt(point.x, point.y)
+        /* Ignore header, footer and any item that doesn't have the signals
+           we need to forward */
+        if (item && (typeof(item.entered) != "function" ||
+                     typeof(item.exited) != "function")) item = null;
+
+        if (item == null) {
+            if (itemBelow != null) {
+                itemBelow.exited()
+                itemBelow = null
+            }
+        } else {
+            if (itemBelow != item && itemBelow != null) itemBelow.exited()
+            item.entered()
+            itemBelow = item
+        }
+    }
+
+    /* FIXME: We forward the click but the coordinates will be wrong since they are expressed in the
+       coordinate system of the MouseArea where it happened. However they are readonly properties in
+       the MouseEvent so we can't update them with the translated values.
+       It should be ok for now since we don't use them for now.
+    */
+    function forwardClick(zone, mouse) {
+        var point = zone.mapToItem(list.contentItem, zone.mouseX, zone.mouseY)
+        var item = list.contentItem.childAt(point.x, point.y)
+        if (item && typeof(item.clicked) == "function") item.clicked(mouse)
+    }
+}

=== modified file 'launcher/Launcher.qml'
--- launcher/Launcher.qml	2011-02-16 11:11:46 +0000
+++ launcher/Launcher.qml	2011-02-16 15:55:29 +0000
@@ -13,12 +13,18 @@
         source: "artwork/background.png"
     }
 
-    ListView {
+    AutoScrollingListView {
         id: list
+
         spacing: 5
-        anchors.topMargin: 5
+        paddingTop: 5
+        paddingBottom: 5
+
         anchors.fill: parent
         focus: true
+        property int itemHeight: 54
+        autoScrollSize: itemHeight / 2
+        autoScrollVelocity: 200
 
         /* Keep a reference to the currently visible contextual menu */
         property variant visibleMenu
@@ -39,7 +45,7 @@
             urgent: item.urgent
             launching: item.launching
             pips: Math.min(item.windowCount, 3)
-            tileSize: 54
+            tileSize: list.itemHeight
 
             /* Best way I could find to check if the item is an application or the
                workspaces switcher. There may be something cleaner and better. */
@@ -60,7 +66,9 @@
                 list.visibleMenu = item.menu
                 // The extra 4 pixels are needed to center exactly with the arrow
                 // that indicated the active tile.
-                item.menu.show(width, y + height / 2 - list.contentY + panel.y + 4)
+                item.menu.show(width,
+                               y + height / 2 - list.contentY +
+                               panel.y - list.paddingTop + 4)
             }
 
             onClicked: {
@@ -76,7 +84,7 @@
 
             /* Display the tooltip when hovering the item only when the list
                is not moving */
-            onEntered: if (!list.moving) showMenu()
+            onEntered: if (!list.moving && !list.autoScrolling) showMenu()
             onExited: {
                 /* When unfolded, leave enough time for the user to reach the
                    menu. Necessary because there is some void between the item
@@ -91,6 +99,7 @@
             Connections {
                 target: list
                 onMovementStarted: item.menu.hide()
+                onAutoScrollingChanged: if (list.autoScrolling) item.menu.hide()
             }
 
             function setIconGeometry() {