Unity 8

Merge lp:~mzanetti/unity8/dnd-and-quicklists into lp:unity8

dnd-and-quicklists
Merge into trunk

Proposed by Michael Zanetti on 2013-07-24

Status:	Merged
Approved by:	Michał Sawicz on 2013-08-19
Approved revision:	143
Merged at revision:	214
Proposed branch:	lp:~mzanetti/unity8/dnd-and-quicklists
Merge into:	lp:unity8
Diff against target:	1268 lines (+694/-364) 13 files modified Launcher/FoldingLauncherDelegate.qml (+94/-250) Launcher/Launcher.qml (+2/-2) Launcher/LauncherDelegate.qml (+137/-0) Launcher/LauncherPanel.qml (+330/-101) Launcher/graphics/launcher_bg@18.sci (+0/-5) Launcher/graphics/launcher_bg@30.sci (+5/-0) plugins/Unity/Launcher/backend/launcherbackend.cpp (+1/-1) plugins/Unity/Launcher/launcheritem.cpp (+8/-1) plugins/Unity/Launcher/launchermodel.cpp (+34/-4) plugins/Unity/Launcher/plugin.cpp (+2/-0) plugins/Unity/Launcher/quicklistmodel.cpp (+11/-0) plugins/Unity/Launcher/quicklistmodel.h (+10/-0) tests/qmltests/Launcher/tst_Launcher.qml (+60/-0)
To merge this branch:	bzr merge lp:~mzanetti/unity8/dnd-and-quicklists
Related bugs:	Link a bug report

Reviewer	Review Type	Date Requested	Status
Michał Sawicz		2013-07-24	Approve on 2013-08-19
PS Jenkins bot (community)	continuous-integration		Approve on 2013-08-19
Review via email: mp+176653@code.launchpad.net

Commit message

Add Drag'n'drop support to Launcher

As dragging an item pins it to the launcher this also contains initial quicklist and pinning support in the plugin part.

Description of the change

Quicklist support in the UI has been temporarily dropped as the Popover is nowhere near ready for that use case yet. So this one has Quicklist support only in the C++ part.

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

122. By Michael Zanetti on 2013-08-16: remove duplicate dummy items again

Revision history for this message

Michał Sawicz (saviq) wrote on 2013-08-16:

Outputs:

state changed to expanded
state changed to

There's some jerkiness when going back from expanded state, the folded items jump into place - especially if you drop the item in a place where it will become folded. Either we should scroll more (so that the item isn't folded after dropping) or maybe delay the folding... Or something...

review: Needs Information (functional)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/652/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2013-08-16:

> There's some jerkiness when going back from expanded state, the folded items
> jump into place - especially if you drop the item in a place where it will
> become folded. Either we should scroll more (so that the item isn't folded
> after dropping) or maybe delay the folding... Or something...

This is the same bug as the initial folded item. Should be fixed once we manage to patch the ListView in upstream Qt.

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

123. By Michael Zanetti on 2013-08-16: remove debug print

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2013-08-16:

> Outputs:
>
> state changed to expanded
> state changed to

removed

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2013-08-16:

> > There's some jerkiness when going back from expanded state, the folded items
> > jump into place - especially if you drop the item in a place where it will
> > become folded. Either we should scroll more (so that the item isn't folded
> > after dropping) or maybe delay the folding... Or something...
>
>
> This is the same bug as the initial folded item. Should be fixed once we
> manage to patch the ListView in upstream Qt.

Right... there's another issue. By the time the transition from "expanded" to "" is triggered, the item is still closer to the center, which means less folding. Apparently the target angle gets calculated for this position, e.g. 18°. Now, while it folds to that target angle it gets also moved towards the end because of the dropped item is expanding. Being towards closer to the edge means that now it would need to fold to 53° instead of only 18° though. Once the folding transition to 18° is done, it updates again to the new target angle which causes the jump. Need to figure a solution.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/654/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2013-08-16:

Download full text (3.2 KiB)

I wonder if it'd make sense to "enable: angle != 0" the ShaderEffect?

=====

Ultimately I'd like to see a shader-based replacement for the three rotations...

=====

Ideas of better names for LauncherDelegate and LauncherListDelegate? Like LauncherItem and LauncherDelegate, maybe?

=====

604 + Item {

Do we really need this?

=====

658 + layoutDirection: root.inverted ? Qt.RightToLeft : Qt.LeftToRight

Hum?

=====

662 + // destructed. Note that if the move() operation when dragging switches

destructed → destroyed

=====

Can we protect ourselves somehow from the "breaks badly"? Like limit the dragging distance?

=====

674 + NumberAnimation { properties: "x,y"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

743 + NumberAnimation { properties: "angle,offset"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

749 + NumberAnimation { properties: "angle,offset"; duration: UbuntuAnimation.BriskDuration; easing: UbuntuAnimation.StandardEasing }

754 + NumberAnimation { properties: "height"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

760 + NumberAnimation { properties: "height"; duration: UbuntuAnimation.BriskDuration; easing: UbuntuAnimation.StandardEasing }

Use UbuntuNumberAnimation {} here.

=====

You need a State { name: "" } with the default values, otherwise the *current* values (e.g. in the middle of a transition) will be assumed as the default ones.

=====
695 + opacity: parent.dragging ? 1 : 0
696 + Behavior on opacity {
697 + NumberAnimation { duration: UbuntuAnimation.FastDuration }
698 + }

Since there are states already, maybe move that there? UbuntuNumberAnimation could be used here, too, although I think someone said we shouldn't use the easing for opacity?

=====

729 + }
730 +
731 + ]

Drop newline.

=====

767 + anchors.fill: parent
768 + anchors.topMargin: launcherListView.topMargin
769 + anchors.bottomMargin: launcherListView.bottomMargin

Try to remember and group those.

=====

778 + var realContentY = launcherListView.contentY + launcherListView.topMargin

785 + var realContentY = launcherListView.contentY + launcherListView.topMargin

873 + var realContentY = launcherListView.contentY + launcherListView.topMargin

Should take originY into account.

Maybe make it into a function to reuse? Same for realItemHeight?

=====

790 + if (index == 0 || index == launcherListView.count -1) {

Space before -.

=====

Will dragging work fine with the launcher (not) inverted?

=====

There's quicklist-related stuff in launcheritem, care to move it to when it will actually work?

===...

I wonder if it'd make sense to "enable: angle != 0" the ShaderEffect?

=====

Ultimately I'd like to see a shader-based replacement for the three rotations...

=====

Ideas of better names for LauncherDelegate and LauncherListDelegate? Like LauncherItem and LauncherDelegate, maybe?

=====

604 +            Item {

Do we really need this?

=====

658 +                    layoutDirection: root.inverted ? Qt.RightToLeft : Qt.LeftToRight

Hum?

=====

662 +                    // destructed. Note that if the move() operation when dragging switches

destructed → destroyed

=====

Can we protect ourselves somehow from the "breaks badly"? Like limit the dragging distance?

=====

674 +                        NumberAnimation { properties: "x,y"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

743 +                                NumberAnimation { properties: "angle,offset"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

749 +                                NumberAnimation { properties: "angle,offset"; duration: UbuntuAnimation.BriskDuration; easing: UbuntuAnimation.StandardEasing }

754 +                                NumberAnimation { properties: "height"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }

760 +                                NumberAnimation { properties: "height"; duration: UbuntuAnimation.BriskDuration; easing: UbuntuAnimation.StandardEasing }

Use UbuntuNumberAnimation {} here.

=====

You need a State { name: "" } with the default values, otherwise the *current* values (e.g. in the middle of a transition) will be assumed as the default ones.

=====
 695 +                            opacity: parent.dragging ? 1 : 0
 696 +                            Behavior on opacity {
 697 +                                NumberAnimation { duration: UbuntuAnimation.FastDuration }
 698 +                            }

Since there are states already, maybe move that there? UbuntuNumberAnimation could be used here, too, although I think someone said we shouldn't use the easing for opacity?

=====

729 +                            }
 730 +
 731 +                        ]

Drop newline.

=====

767 +                        anchors.fill: parent
 768 +                        anchors.topMargin: launcherListView.topMargin
 769 +                        anchors.bottomMargin: launcherListView.bottomMargin

Try to remember and group those.

=====

778 +                            var realContentY = launcherListView.contentY + launcherListView.topMargin

785 +                            var realContentY = launcherListView.contentY + launcherListView.topMargin

873 +                            var realContentY = launcherListView.contentY + launcherListView.topMargin

Should take originY into account.

Maybe make it into a function to reuse? Same for realItemHeight?

=====

790 +                            if (index == 0 || index == launcherListView.count -1) {

Space before -.

=====

Will dragging work fine with the launcher (not) inverted?

=====

There's quicklist-related stuff in launcheritem, care to move it to when it will actually work?

=====

Working good!

[1] http://developer.ubuntu.com/api/ubuntu-12.10/qml/mobile/qml-ubuntu-components0-ubuntunumberanimation.html

review: Needs Fixing

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

124. By Michael Zanetti on 2013-08-16: make folding after dragging sequential to expanding to avoid weird jumpiness
125. By Michael Zanetti on 2013-08-16: LauncherListDelegate -> FoldingLauncherDelegate
126. By Michael Zanetti on 2013-08-16: remove unneeded listview layoutdireaction property
127. By Michael Zanetti on 2013-08-16: fix comment
128. By Michael Zanetti on 2013-08-16: limit drag area size to avoid brakage when dragging far outside the window
129. By Michael Zanetti on 2013-08-16: use UbuntuNumberAnimation where appropriate
130. By Michael Zanetti on 2013-08-16: handle dropIndicator's state in the other states too
131. By Michael Zanetti on 2013-08-16: drop empty line
132. By Michael Zanetti on 2013-08-16: group anchors
133. By Michael Zanetti on 2013-08-16: use properties instead of common calculations
134. By Michael Zanetti on 2013-08-16: add whitespace

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2013-08-16:

Download full text (5.1 KiB)

> I wonder if it'd make sense to "enable: angle != 0" the ShaderEffect?

Hmm... Not sure... I also use itemOpacity when it is unfolded. Would require to be very careful with distinguishing opacity and itemOpacity (which intentionally are 2 different things). The gain would be very minimal I think.

>
> =====
>
> Ultimately I'd like to see a shader-based replacement for the three
> rotations...

Sure. But somewhat out of the scope of this merge.

>
> =====
>
> Ideas of better names for LauncherDelegate and LauncherListDelegate? Like
> LauncherItem and LauncherDelegate, maybe?

renamed LauncherListDelegate to FoldingLauncherDelegate.

>
> =====
>
> 604 + Item {
>
> Do we really need this?

Yes. This does the clipping when unfolded. I need to have the MouseArea to be a child of the ListView otherwise weird mouse event stealing things will happen. Also, the dragTarget (the dragFakeItem) should be in a parent of the same size as the MouseArea or it indtroduces long calculations and nasty jumping at transitions. I tried that before.

>
> =====
>
> 658 + layoutDirection: root.inverted ? Qt.RightToLeft :
> Qt.LeftToRight
>
> Hum?

I got fed up by the rotating thing and tried if we couldn't abuse the layoutDirection for the inversion. Doesn't work unfortunately. Removed this leftover.

>
> =====
>
> 662 + // destructed. Note that if the move() operation
> when dragging switches
>
> destructed → destroyed

fixed.

>
> =====
>
> Can we protect ourselves somehow from the "breaks badly"? Like limit the
> dragging distance?

Very good point. I've limited the drag area and haven't been able to reproduce this any more.

>
> =====
>
> 674 + NumberAnimation { properties: "x,y"; duration:
> UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }
>
> 743 + NumberAnimation { properties:
> "angle,offset"; duration: UbuntuAnimation.FastDuration; easing:
> UbuntuAnimation.StandardEasing }
>
> 749 + NumberAnimation { properties:
> "angle,offset"; duration: UbuntuAnimation.BriskDuration; easing:
> UbuntuAnimation.StandardEasing }
>
> 754 + NumberAnimation { properties: "height";
> duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing
> }
>
> 760 + NumberAnimation { properties: "height";
> duration: UbuntuAnimation.BriskDuration; easing:
> UbuntuAnimation.StandardEasing }
>
> Use UbuntuNumberAnimation {} here.

Done.

>
> =====
>
> You need a State { name: "" } with the default values, otherwise the *current*
> values (e.g. in the middle of a transition) will be assumed as the default
> ones.

The behavior you describe is pretty much what I want. When leaving one of those special states, just go back to whatever it was before.

>
> =====
> 695 + opacity: parent.dragging ? 1 : 0
> 696 + Behavior on opacity {
> 697 + NumberAnimation { duration:
> UbuntuAnimation.FastDuration }
> 698 + }
>
> ...

> I wonder if it'd make sense to "enable: angle != 0" the ShaderEffect?

> 
> =====
> 
> Ultimately I'd like to see a shader-based replacement for the three
> rotations...

Sure. But somewhat out of the scope of this merge.

> 
> =====
> 
> Ideas of better names for LauncherDelegate and LauncherListDelegate? Like
> LauncherItem and LauncherDelegate, maybe?

renamed LauncherListDelegate to FoldingLauncherDelegate.

> 
> =====
> 
>  604 +            Item {
> 
> Do we really need this?

> 
> =====
> 
>  658 +                    layoutDirection: root.inverted ? Qt.RightToLeft :
> Qt.LeftToRight
> 
> Hum?

I got fed up by the rotating thing and tried if we couldn't abuse the layoutDirection for the inversion. Doesn't work unfortunately. Removed this leftover.

> 
> =====
> 
>  662 +                    // destructed. Note that if the move() operation
> when dragging switches
> 
> destructed → destroyed

fixed.

> 
> =====
> 
> Can we protect ourselves somehow from the "breaks badly"? Like limit the
> dragging distance?

Very good point. I've limited the drag area and haven't been able to reproduce this any more.

> 
> =====
> 
>  674 +                        NumberAnimation { properties: "x,y"; duration:
> UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }
> 
>  743 +                                NumberAnimation { properties:
> "angle,offset"; duration: UbuntuAnimation.FastDuration; easing:
> UbuntuAnimation.StandardEasing }
> 
>  749 +                                NumberAnimation { properties:
> "angle,offset"; duration: UbuntuAnimation.BriskDuration; easing:
> UbuntuAnimation.StandardEasing }
> 
>  754 +                                NumberAnimation { properties: "height";
> duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing
> }
> 
>  760 +                                NumberAnimation { properties: "height";
> duration: UbuntuAnimation.BriskDuration; easing:
> UbuntuAnimation.StandardEasing }
> 
> Use UbuntuNumberAnimation {} here.

Done.

> 
> =====
> 
> You need a State { name: "" } with the default values, otherwise the *current*
> values (e.g. in the middle of a transition) will be assumed as the default
> ones.

The behavior you describe is pretty much what I want. When leaving one of those special states, just go back to whatever it was before.

> 
> =====
>  695 +                            opacity: parent.dragging ? 1 : 0
>  696 +                            Behavior on opacity {
>  697 +                                NumberAnimation { duration:
> UbuntuAnimation.FastDuration }
>  698 +                            }
> 
> Since there are states already, maybe move that there? UbuntuNumberAnimation
> could be used here, too, although I think someone said we shouldn't use the
> easing for opacity?

Moved it over to the states. Yes, we should never use Easing on opacity changes.

> 
> =====
> 
>  729 +                            }
>  730 +
>  731 +                        ]
> 
> Drop newline.

done.

> 
> =====
> 
>  767 +                        anchors.fill: parent
>  768 +                        anchors.topMargin: launcherListView.topMargin
>  769 +                        anchors.bottomMargin:
> launcherListView.bottomMargin
> 
> Try to remember and group those.

done.

> 
> =====
> 
>  778 +                            var realContentY = launcherListView.contentY
> + launcherListView.topMargin
> 
>  785 +                            var realContentY = launcherListView.contentY
> + launcherListView.topMargin
> 
>  873 +                            var realContentY = launcherListView.contentY
> + launcherListView.topMargin
> 
> Should take originY into account.
> 
> Maybe make it into a function to reuse? Same for realItemHeight?

changed them to be properties of the ListView.

> 
> =====
> 
>  790 +                            if (index == 0 || index ==
> launcherListView.count -1) {
> 
> Space before -.

fixed.

> 
> =====
> 
> Will dragging work fine with the launcher (not) inverted?

Yes, I always set inverted to false while developing and only set it back to true before changing the merge request to "Needs Review". Makes development less brainfucking and tests both directions :)

> 
> =====
> 
> There's quicklist-related stuff in launcheritem, care to move it to when it
> will actually work?

It works. I just removed the UI because the Popover is really nowhere near ready for this. But functionality works ok already. I have a quicklist here that lets me pin items and remove items.

If you don't mind I'd prefer to leave this code as it's a bit wired up with the automatic pinning when starting a drag. I just removed all the quicklist UI code for this review.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/660/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/664/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

135. By Michael Zanetti on 2013-08-16: take originY into account for progressiveScrolling

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/668/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

136. By Michael Zanetti on 2013-08-16: use new launcher background asset

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/669/rebuild

review: Needs Fixing (continuous-integration)

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-16

137. By Michael Zanetti on 2013-08-16: fix relasing before dragging, improve test
138. By Michael Zanetti on 2013-08-16: invert it again

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/670/rebuild

review: Needs Fixing (continuous-integration)

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-16:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/671/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) wrote on 2013-08-19:

I wonder if invoking dnd should be disabled on folded icons? Otherwise:
* when two items are folded and you long press the bottom one, the one on top of it will be used
* there's no unfolding animation visible when invoking d'n'd on a folded icon

Dropping at the top still results in some jumping.

Weren't "other" launcher items supposed to dim on long press? They only dim onDrag now, somewhat tricky to see that it's "now" if only the item under your finger changes.

Sometimes I end up with an empty space the size of an item that... Sometimes moves around, sometimes not. Dragging *inside* the launcher seems to be the easiest to reproduce.

I'd be OK with merging this if you say these should be fixed at a later iteration, though.

review: Needs Information

lp:~mzanetti/unity8/dnd-and-quicklists updated on 2013-08-19

139. By Michael Zanetti on 2013-08-19: make dropping at the end of the listView more smooth
140. By Michael Zanetti on 2013-08-19: also make dropping at the second last position smoother
141. By Michael Zanetti on 2013-08-19: only apply flicking when in postDragging state
142. By Michael Zanetti on 2013-08-19: cleanup
143. By Michael Zanetti on 2013-08-19: disable dragging of items with an angle > 20 degrees
add an animation for dragging of items with an angle > 0 and < 20
remove foldingMouseAreas as they are not needed any more after all the other dnd changes

Revision history for this message

Michael Zanetti (mzanetti) wrote on 2013-08-19:

> I wonder if invoking dnd should be disabled on folded icons? Otherwise:
> * when two items are folded and you long press the bottom one, the one on top
> of it will be used

Disabled dragging of items with an angle > 20 degrees

> * there's no unfolding animation visible when invoking d'n'd on a folded icon

Added an animation when starting dragging

>
> Dropping at the top still results in some jumping.

Should be gone now. The last issue, that the top/bottom dropped items are still slightly folded is the Qt bug we're trying to fix.

>
> Weren't "other" launcher items supposed to dim on long press? They only dim
> onDrag now, somewhat tricky to see that it's "now" if only the item under your
> finger changes.

Nope, according to Martin's design they should only be dimmed once a dnd operation starts. I agree that its a bit hard to see if the finger covers the current item. However, this will improve once the quicklists are back because that one appears immediately on longpress and goes away the same time the other icons dim.

>
> Sometimes I end up with an empty space the size of an item that... Sometimes
> moves around, sometimes not. Dragging *inside* the launcher seems to be the
> easiest to reproduce.

Yes. I fear this is a Qt bug. Need to discuss this with Albert. If you make the window a bit smaller, and then drag into the progressiveScrollingarea you'll see that newly created delegates are positioned correctly. Seems like _sometimes_ the displace animation fails to start.

>
> I'd be OK with merging this if you say these should be fixed at a later
> iteration, though.

afaics only the Qt bugs left.

Revision history for this message

PS Jenkins bot (ps-jenkins) wrote on 2013-08-19:

Click here to trigger a rebuild:
http://s-jenkins:8080/job/unity8-ci/673/rebuild

review: Approve (continuous-integration)

Revision history for this message

Michał Sawicz (saviq) on 2013-08-19:

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk

Subscribers

People subscribed via source and target branches

to all changes:

Michael Zanetti

Mohammad Rakibul Hasan

Unity Team

 === renamed file 'Launcher/LauncherDelegate.qml' => 'Launcher/FoldingLauncherDelegate.qml'
 --- Launcher/LauncherDelegate.qml	2013-07-02 19:19:46 +0000
 +++ Launcher/FoldingLauncherDelegate.qml	2013-08-19 11:48:45 +0000
@@ -17,149 +17,112 @@
  import QtQuick 2.0
  import Ubuntu.Components 0.1
--Item {
++LauncherDelegate {
      id: root
--    property string iconName
--
--    property real angle: 0
--    property bool highlighted: false
--    property real offset: 0
--    property alias brightness: transformEffect.brightness
--    property real itemOpacity: 1
--
--    property real maxAngle: 0
--    property bool inverted: false
--
--    readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * height
--    readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * height
--
--    property bool dragging:false
--
--    signal clicked()
--    signal longtap()
--    signal released()
--
--    Item {
--        id: iconItem
--        width: parent.width
--        height: parent.height
--        anchors.centerIn: parent
--
--        UbuntuShape {
--            id: iconShape
--            anchors.fill: parent
--            anchors.margins: units.gu(0.5)
--            radius: "medium"
--
--            image: Image {
--                id: iconImage
--                sourceSize.width: iconShape.width
--                sourceSize.height: iconShape.height
--                source: "../graphics/applicationIcons/" + root.iconName + ".png"
--            }
--
--            MouseArea {
--                id: mouseArea
--                anchors.fill: parent
--                onClicked: root.clicked()
--                onCanceled: root.released()
--                preventStealing: false
--
--                onPressAndHold: {
--                    root.state = "moving"
--                }
--                onReleased: {
--                    root.state = "docked"
--                }
--            }
--        }
--        BorderImage {
--            id: overlayHighlight
--            anchors.centerIn: iconItem
--            rotation: inverted ? 180 : 0
--            source: isSelected ? "graphics/selected.sci" : "graphics/non-selected.sci"
--            width: root.width + units.gu(0.5)
--            height: width
--            property bool isSelected: root.highlighted || mouseArea.pressed
--            onIsSelectedChanged: shaderEffectSource.scheduleUpdate();
--        }
--    }
--
--    ShaderEffect {
--        id: transformEffect
--        anchors.centerIn: parent
--        anchors.verticalCenterOffset: root.offset
--        width: parent.width
--        height: parent.height
--        property real itemOpacity: root.itemOpacity
--        property real brightness: 0
--        property real angle: root.angle
--        rotation: root.inverted ? 180 : 0
--
--
--        property variant source: ShaderEffectSource {
--            id: shaderEffectSource
--            sourceItem: iconItem
--            hideSource: true
--            live: false
--        }
--
--        transform: [
--            // Rotating 3 times at top/bottom because that increases the perspective.
--            // This is a hack, but as QML does not support real 3D coordinates
--            // getting a higher perspective can only be done by a hack. This is the most
--            // readable/understandable one I could come up with.
--            Rotation {
--                axis { x: 1; y: 0; z: 0 }
--                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
--                angle: root.angle * 0.7
--            },
--            Rotation {
--                axis { x: 1; y: 0; z: 0 }
--                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
--                angle: root.angle * 0.7
--            },
--            Rotation {
--                axis { x: 1; y: 0; z: 0 }
--                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
--                angle: root.angle * 0.7
--            },
--            // Because rotating it 3 times moves it more to the front/back, i.e. it gets
--            // bigger/smaller and we need a scale to compensate that again.
--            Scale {
--                xScale: 1 - (Math.abs(angle) / 500)
--                yScale: 1 - (Math.abs(angle) / 500)
--                origin { x: iconItem.width / 2; y: iconItem.height / 2}
--            }
--        ]
--
--        // Using a fragment shader instead of QML's opacity and BrightnessContrast
--        // to be able to do both in one step which gives quite some better performance
--        fragmentShader: "
--            varying highp vec2 qt_TexCoord0;
--            uniform sampler2D source;
--            uniform lowp float brightness;
--            uniform lowp float itemOpacity;
--            void main(void)
--            {
--                highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
--                sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
--                sourceColor *= itemOpacity;
--                gl_FragColor = sourceColor;
--            }"
++    // The angle used for rotating
++    angle: {
++        // First/last items are special
++        if (index == 0 || index == priv.listView.count-1) {
++            if (priv.distanceFromEdge < 0) {
++                // proportion equation: distanceFromTopEdge : angle = totalUnfoldedHeight/2 : maxAngle
++                return Math.max(-maxAngle, priv.distanceFromEdge * maxAngle / (priv.listView.foldingAreaHeight)) * priv.orientationFlag
++            }
++            return 0; // Don't fold first/last item as long as inside the view
++        }
++
++        // Are we in the already completely outside the flickable? Fold for the last 5 degrees
++        if (priv.distanceFromEdge < 0) {
++            // proportion equation: -distanceFromTopEdge : angle = totalUnfoldedHeight : 5
++            return Math.max(-maxAngle, (priv.distanceFromEdge * 5 / priv.listView.foldingAreaHeight) - (maxAngle-5)) * priv.orientationFlag
++        }
++
++        // We are overlapping with the folding area, fold the icon to maxAngle - 5 degrees
++        if (priv.overlapWithFoldingArea > 0) {
++            // proportion equation: overlap: totalHeight = angle : (maxAngle - 5)
++            return -priv.overlapWithFoldingArea * (maxAngle -5) / priv.listView.foldingAreaHeight * priv.orientationFlag;
++        }
++        return 0;
++    }
++
++    // This is the offset that keeps the items inside the panel
++    offset: {
++        // First/last items are special
++        if (index == 0 || index == priv.listView.count-1) {
++            // Just keep them bound to the edges in case they're outside of the visible area
++            if (priv.distanceFromEdge < 0) {
++                return (-priv.distanceFromEdge - (height - effectiveHeight)) * priv.orientationFlag;
++            }
++            return 0;
++        }
++
++        // Are we already completely outside the flickable? Stop the icon here.
++        if (priv.distanceFromEdge < -priv.totalUnfoldedHeight) {
++            return (-priv.distanceFromEdge - (root.height - effectiveHeight)) * priv.orientationFlag;
++        }
++
++        // We're touching the edge, move slower than the actual flicking speed.
++        if (priv.distanceFromEdge < 0) {
++            return (Math.abs(priv.distanceFromEdge) * priv.totalEffectiveHeight / priv.totalUnfoldedHeight) * priv.orientationFlag
++        }
++        return 0;
++    }
++
++    itemOpacity: {
++        // First/last items are special
++        if (index == 0 || index == priv.listView.count-1) {
++            if (priv.distanceFromEdge < 0) {
++                // Fade from 1 to 0 in the distance of 3 * foldingAreaHeight (which is when the next item reaches the edge)
++                return 1.0 - (-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
++            }
++            return 1; // Don't make first/last item transparent as long as inside the view
++        }
++
++        // Are we already completely outside the flickable? Fade from 0.75 to 0 in 2 items height
++        if (priv.distanceFromEdge < 0) {
++            // proportion equation: -distanceFromEdge : 1-opacity = totalUnfoldedHeight : 0.75
++            return 0.75 - (-priv.distanceFromEdge * 0.75 / (priv.totalUnfoldedHeight*2))
++        }
++
++        // We are overlapping with the folding area, fade out to 0.75
++        if (priv.overlapWithFoldingArea > 0) {
++            // proportion equation: overlap : totalHeight = 1-opacity : 0.25
++            return 1 - (priv.overlapWithFoldingArea * 0.25 / priv.listView.foldingAreaHeight)
++        }
++        return 1;
++    }
++
++    brightness: {
++        // First/last items are special
++        if (index == 0 || index == priv.listView.count-1) {
++            if (priv.distanceFromEdge < 0) {
++                return -(-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
++            }
++            return 0;
++        }
++        // Are we already completely outside the flickable? Fade from 0.7 to 0 in 2 items height
++        if (priv.distanceFromEdge < 0) {
++            return -0.3 - (-priv.distanceFromEdge * 0.1 / (priv.totalUnfoldedHeight*2))
++        }
++
++        // We are overlapping with the folding area, fade out to 0.7
++        if (priv.overlapWithFoldingArea > 0) {
++            return - (priv.overlapWithFoldingArea * 0.3 / priv.listView.foldingAreaHeight)
++        }
++        return 0;
+     }
      QtObject {
          id: priv
          property ListView listView: root.ListView.view
--        property real totalUnfoldedHeight: listView.itemSize + listView.spacing
++        property real totalUnfoldedHeight: listView.itemHeight + listView.spacing
          property real totalEffectiveHeight: effectiveHeight + listView.spacing
          property real effectiveContentY: listView.contentY - listView.originY
          property real effectiveY: y - listView.originY
++        property real bottomDraggingDistanceOffset: listView.draggedIndex > index ? totalUnfoldedHeight : 0
          property real distanceFromTopEdge: -(effectiveContentY + listView.topMargin - index*totalUnfoldedHeight)
--        property real distanceFromBottomEdge: listView.height - listView.bottomMargin - (effectiveY+height) + effectiveContentY
++        property real distanceFromBottomEdge: listView.height - listView.bottomMargin - (effectiveY+height) + effectiveContentY + bottomDraggingDistanceOffset
          property real distanceFromEdge: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? distanceFromBottomEdge : distanceFromTopEdge
          property real orientationFlag: Math.abs(distanceFromBottomEdge) < Math.abs(distanceFromTopEdge) ? -1 : 1
@@ -167,123 +130,4 @@
          property real overlapWithFoldingArea: listView.foldingAreaHeight - distanceFromEdge
+     }
--    states: [
--        State {
--            name: "docked"
--            PropertyChanges {
--                target: root
--
--                // This is the offset that keeps the items inside the panel
--                offset: {
--                    // First/last items are special
--                    if (index == 0 || index == priv.listView.count-1) {
--                        // Just keep them bound to the edges in case they're outside of the visible area
--                        if (priv.distanceFromEdge < 0) {
--                            return (-priv.distanceFromEdge - (height - effectiveHeight)) * priv.orientationFlag;
--                        }
--                        return 0;
--                    }
--
--                    // Are we already completely outside the flickable? Stop the icon here.
--                    if (priv.distanceFromEdge < -priv.totalUnfoldedHeight) {
--                        return (-priv.distanceFromEdge - (root.height - effectiveHeight)) * priv.orientationFlag;
--                    }
--
--                    // We're touching the edge, move slower than the actual flicking speed.
--                    if (priv.distanceFromEdge < 0) {
--                        return (Math.abs(priv.distanceFromEdge) * priv.totalEffectiveHeight / priv.totalUnfoldedHeight) * priv.orientationFlag
--                    }
--                    return 0;
--                }
--
--                // The angle used for rotating
--                angle: {
--                    // First/last items are special
--                    if (index == 0 || index == priv.listView.count-1) {
--                        if (priv.distanceFromEdge < 0) {
--                            // proportion equation: distanceFromTopEdge : angle = totalUnfoldedHeight/2 : maxAngle
--                            return Math.max(-maxAngle, priv.distanceFromEdge * maxAngle / (priv.listView.foldingAreaHeight)) * priv.orientationFlag
--                        }
--                        return 0; // Don't fold first/last item as long as inside the view
--                    }
--
--                    // Are we in the already completely outside the flickable? Fold for the last 5 degrees
--                    if (priv.distanceFromEdge < 0) {
--                        // proportion equation: -distanceFromTopEdge : angle = totalUnfoldedHeight : 5
--                        return Math.max(-maxAngle, (priv.distanceFromEdge * 5 / priv.listView.foldingAreaHeight) - (maxAngle-5)) * priv.orientationFlag
--                    }
--
--                    // We are overlapping with the folding area, fold the icon to maxAngle - 5 degrees
--                    if (priv.overlapWithFoldingArea > 0) {
--                        // proportion equation: overlap: totalHeight = angle : (maxAngle - 5)
--                        return -priv.overlapWithFoldingArea * (maxAngle -5) / priv.listView.foldingAreaHeight * priv.orientationFlag;
--                    }
--                    return 0;
--                }
--
--                itemOpacity: {
--                    // First/last items are special
--                    if (index == 0 || index == priv.listView.count-1) {
--                        if (priv.distanceFromEdge < 0) {
--                            // Fade from 1 to 0 in the distance of 3 * foldingAreaHeight (which is when the next item reaches the edge)
--                            return 1.0 - (-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
--                        }
--                        return 1; // Don't make first/last item transparent as long as inside the view
--                    }
--
--                    // Are we already completely outside the flickable? Fade from 0.75 to 0 in 2 items height
--                    if (priv.distanceFromEdge < 0) {
--                        // proportion equation: -distanceFromEdge : 1-opacity = totalUnfoldedHeight : 0.75
--                        return 0.75 - (-priv.distanceFromEdge * 0.75 / (priv.totalUnfoldedHeight*2))
--                    }
--
--                    // We are overlapping with the folding area, fade out to 0.75
--                    if (priv.overlapWithFoldingArea > 0) {
--                        // proportion equation: overlap : totalHeight = 1-opacity : 0.25
--                        return 1 - (priv.overlapWithFoldingArea * 0.25 / priv.listView.foldingAreaHeight)
--                    }
--                    return 1;
--                }
--
--                brightness: {
--                    // First/last items are special
--                    if (index == 0 || index == priv.listView.count-1) {
--                        if (priv.distanceFromEdge < 0) {
--                            return -(-priv.distanceFromEdge / (priv.listView.foldingAreaHeight * 3))
--                        }
--                        return 0;
--                    }
--                    // Are we already completely outside the flickable? Fade from 0.7 to 0 in 2 items height
--                    if (priv.distanceFromEdge < 0) {
--                        return -0.3 - (-priv.distanceFromEdge * 0.1 / (priv.totalUnfoldedHeight*2))
--                    }
--
--                    // We are overlapping with the folding area, fade out to 0.7
--                    if (priv.overlapWithFoldingArea > 0) {
--                        return - (priv.overlapWithFoldingArea * 0.3 / priv.listView.foldingAreaHeight)
--                    }
--                    return 0;
--                }
--            }
--        },
--
--        State {
--            name: "moving"
--            PropertyChanges {
--                target: launcherDelegate;
--                offset: 0
--                angle: 0
--            }
--            PropertyChanges {
--                target: root
--                highlighted: true
--                dragging: true
--            }
--            PropertyChanges {
--                target: mouseArea
--                preventStealing: true
--                drag.target: root
--            }
--        }
--    ]
+ }
 === modified file 'Launcher/Launcher.qml'
 --- Launcher/Launcher.qml	2013-07-05 11:34:14 +0000
 +++ Launcher/Launcher.qml	2013-08-19 11:48:45 +0000
@@ -135,9 +135,9 @@
          id: backgroundShade
          anchors.fill: parent
          color: "black"
--        opacity: root.state == "visible" ? 0.4 : 0
++        opacity: root.state == "visible" ? 0.6 : 0
--        Behavior on opacity { NumberAnimation { duration: 200; easing.type: Easing.OutQuad} }
++        Behavior on opacity { NumberAnimation { duration: UbuntuAnimation.BriskDuration } }
+     }
      LauncherPanel {
 === added file 'Launcher/LauncherDelegate.qml'
 --- Launcher/LauncherDelegate.qml	1970-01-01 00:00:00 +0000
 +++ Launcher/LauncherDelegate.qml	2013-08-19 11:48:45 +0000
@@ -0,0 +1,137 @@
++/*
++ * Copyright (C) 2013 Canonical, Ltd.
++ *
++ * This program is free software; you can redistribute it and/or modify
++ * it under the terms of the GNU General Public License as published by
++ * the Free Software Foundation; version 3.
++ *
++ * This program is distributed in the hope that it will be useful,
++ * but WITHOUT ANY WARRANTY; without even the implied warranty of
++ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
++ * GNU General Public License for more details.
++ *
++ * You should have received a copy of the GNU General Public License
++ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
++ */
++
++import QtQuick 2.0
++import Ubuntu.Components 0.1
++
++Item {
++    id: root
++
++    property string iconName
++
++    property bool highlighted: false
++    property real maxAngle: 0
++    property bool inverted: false
++
++    readonly property int effectiveHeight: Math.cos(angle * Math.PI / 180) * itemHeight
++    readonly property real foldedHeight: Math.cos(maxAngle * Math.PI / 180) * itemHeight
++
++    property int itemWidth
++    property int itemHeight
++    // The angle used for rotating
++    property real angle: 0
++    // This is the offset that keeps the items inside the panel
++    property real offset: 0
++    property real itemOpacity: 1
++    property real brightness: 0
++
++    Item {
++        id: iconItem
++        width: parent.itemWidth
++        height: parent.itemHeight
++        anchors.centerIn: parent
++
++        UbuntuShape {
++            id: iconShape
++            anchors.fill: parent
++            anchors.margins: units.gu(0.5)
++            radius: "medium"
++
++            image: Image {
++                id: iconImage
++                sourceSize.width: iconShape.width
++                sourceSize.height: iconShape.height
++                source: "../graphics/applicationIcons/" + iconName + ".png"
++                property string iconName: root.iconName
++                onIconNameChanged: shaderEffectSource.scheduleUpdate();
++            }
++        }
++
++        BorderImage {
++            id: overlayHighlight
++            anchors.centerIn: iconItem
++            rotation: inverted ? 180 : 0
++            source: isSelected ? "graphics/selected.sci" : "graphics/non-selected.sci"
++            width: root.itemWidth + units.gu(0.5)
++            height: root.itemHeight + units.gu(0.5)
++            property bool isSelected: root.highlighted
++            onIsSelectedChanged: shaderEffectSource.scheduleUpdate();
++        }
++    }
++
++    ShaderEffect {
++        id: transformEffect
++        anchors.centerIn: parent
++        anchors.verticalCenterOffset: root.offset
++        width: parent.itemWidth
++        height: parent.itemHeight
++        property real itemOpacity: root.itemOpacity
++        property real brightness: Math.max(-1, root.brightness)
++        property real angle: root.angle
++        rotation: root.inverted ? 180 : 0
++
++        property variant source: ShaderEffectSource {
++            id: shaderEffectSource
++            sourceItem: iconItem
++            hideSource: true
++            live: false
++        }
++
++        transform: [
++            // Rotating 3 times at top/bottom because that increases the perspective.
++            // This is a hack, but as QML does not support real 3D coordinates
++            // getting a higher perspective can only be done by a hack. This is the most
++            // readable/understandable one I could come up with.
++            Rotation {
++                axis { x: 1; y: 0; z: 0 }
++                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
++                angle: root.angle * 0.7
++            },
++            Rotation {
++                axis { x: 1; y: 0; z: 0 }
++                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
++                angle: root.angle * 0.7
++            },
++            Rotation {
++                axis { x: 1; y: 0; z: 0 }
++                origin { x: iconItem.width / 2; y: angle > 0 ? 0 : iconItem.height; z: 0 }
++                angle: root.angle * 0.7
++            },
++            // Because rotating it 3 times moves it more to the front/back, i.e. it gets
++            // bigger/smaller and we need a scale to compensate that again.
++            Scale {
++                xScale: 1 - (Math.abs(angle) / 500)
++                yScale: 1 - (Math.abs(angle) / 500)
++                origin { x: iconItem.width / 2; y: iconItem.height / 2}
++            }
++        ]
++
++        // Using a fragment shader instead of QML's opacity and BrightnessContrast
++        // to be able to do both in one step which gives quite some better performance
++        fragmentShader: "
++            varying highp vec2 qt_TexCoord0;
++            uniform sampler2D source;
++            uniform lowp float brightness;
++            uniform lowp float itemOpacity;
++            void main(void)
++            {
++                highp vec4 sourceColor = texture2D(source, qt_TexCoord0);
++                sourceColor.rgb = mix(sourceColor.rgb, vec3(step(0.0, brightness)), abs(brightness));
++                sourceColor *= itemOpacity;
++                gl_FragColor = sourceColor;
++            }"
++    }
++}
 === modified file 'Launcher/LauncherPanel.qml'
 --- Launcher/LauncherPanel.qml	2013-07-11 08:19:10 +0000
 +++ Launcher/LauncherPanel.qml	2013-08-19 11:48:45 +0000
@@ -16,6 +16,7 @@
  import QtQuick 2.0
  import Ubuntu.Components 0.1
++import Ubuntu.Components.ListItems 0.1 as ListItems
  import Unity 0.1
  import Unity.Launcher 0.1
  import "../Components/ListItems"
@@ -28,54 +29,33 @@
      property var model
      property bool inverted: true
      property bool dragging: false
--    property bool moving: launcherListView.moving || launcherListView.flicking
--    property int dragPosition: 0
++    property bool moving: launcherListView.moving || launcherListView.flicking || dndArea.draggedIndex >= 0
      property int highlightIndex: -1
      signal applicationSelected(string desktopFile)
      signal dashItemSelected(int index)
--    onDragPositionChanged: {
--        var effectiveDragPosition = root.inverted ? launcherListView.height - dragPosition : dragPosition - mainColumn.anchors.margins
--
--        var hiddenContentHeight = launcherListView.contentHeight - launcherListView.height
--        // Shortening scrollable height because the first/last item needs to be fully expanded before reaching the top/bottom
--        var scrollableHeight = launcherListView.height - (launcherListView.itemSize + launcherColumn.spacing) *2
--        // As we shortened the scrollableHeight, lets move everything down by the itemSize
--        var shortenedEffectiveDragPosition = effectiveDragPosition - launcherListView.itemSize - launcherColumn.spacing
--        var newContentY = shortenedEffectiveDragPosition * hiddenContentHeight / scrollableHeight
--
--        // limit top/bottom to prevent overshooting
--        launcherListView.contentY = Math.min(hiddenContentHeight, Math.max(0, newContentY));
--
--        // Now calculate the current index:
--        // > the current mouse position + the hidden/scolled content on top is the mouse position in the averall view
--        // > adjust that removing all the margins
--        // > divide by itemSize to get index
--        highlightIndex = (effectiveDragPosition + launcherListView.contentY - mainColumn.anchors.margins*3 - launcherColumn.spacing/2) / (launcherListView.itemSize + launcherColumn.spacing)
--    }
--
      BorderImage {
          id: background
          source: "graphics/launcher_bg.sci"
          anchors.fill: parent
++        anchors.rightMargin: root.inverted ? 0 : -units.gu(1)
++        anchors.leftMargin: root.inverted ? -units.gu(1) : 0
++        rotation: root.rotation
+     }
      Column {
          id: mainColumn
          anchors {
              fill: parent
--            topMargin: units.gu(0.5)
--            bottomMargin: units.gu(1)
              leftMargin: units.gu(0.5)
              rightMargin: units.gu(0.5)
+         }
--        spacing: units.gu(0.5)
          MouseArea {
              id: dashItem
              width: parent.width
--            height: units.gu(6.5)
++            height: units.gu(7)
              onClicked: root.dashItemSelected(0)
              z: 1
              Image {
@@ -100,87 +80,336 @@
              anchors.left: parent.left
              anchors.right: parent.right
              height: parent.height - dashItem.height - parent.spacing*2
--            ListView {
--                id: launcherListView
--                objectName: "launcherListView"
++
++            Item {
                  anchors.fill: parent
--                anchors.topMargin: -itemSize
--                anchors.bottomMargin: -itemSize
--                topMargin: itemSize
--                bottomMargin: itemSize
--                height: parent.height - dashItem.height - parent.spacing*2
--                model: root.model
--                cacheBuffer: itemSize * 3
--                snapMode: ListView.SnapToItem
--                highlightRangeMode: ListView.ApplyRange
--                preferredHighlightBegin: (height - itemSize) / 2
--                preferredHighlightEnd: (height + itemSize) / 2
--
--                // The height of the area where icons start getting folded
--                property int foldingAreaHeight: itemSize * 0.75
--                property int itemSize: width
--                property int clickFlickSpeed: units.gu(60)
--
--                delegate: LauncherDelegate {
--                    id: launcherDelegate
--                    objectName: "launcherDelegate" + index
--                    width: launcherListView.itemSize
--                    height: launcherListView.itemSize
--                    iconName: model.icon
--                    inverted: root.inverted
--                    highlighted: root.dragging && index === root.highlightIndex
--                    z: -Math.abs(offset)
--                    state: "docked"
--                    maxAngle: 60
--
--                    onClicked: {
--                        // First/last item do the scrolling at more than 12 degrees
--                        if (index == 0 || index == launcherListView.count -1) {
--                            if (angle > 12) {
++                clip: true
++
++                ListView {
++                    id: launcherListView
++                    objectName: "launcherListView"
++                    anchors {
++                        fill: parent
++                        topMargin: -extensionSize + units.gu(0.5)
++                        bottomMargin: -extensionSize + units.gu(1)
++                    }
++                    topMargin: extensionSize
++                    bottomMargin: extensionSize
++                    height: parent.height - dashItem.height - parent.spacing*2
++                    model: root.model
++                    cacheBuffer: itemHeight * 3
++                    snapMode: interactive ? ListView.SnapToItem : ListView.NoSnap
++                    highlightRangeMode: ListView.ApplyRange
++                    preferredHighlightBegin: (height - itemHeight) / 2
++                    preferredHighlightEnd: (height + itemHeight) / 2
++                    spacing: units.gu(0.5)
++
++                    // The size of the area the ListView is extended to make sure items are not
++                    // destroyed when dragging them outside the list. This needs to be at least
++                    // itemHeight to prevent folded items from disappearing and DragArea limits
++                    // need to be smaller than this size to avoid breakage.
++                    property int extensionSize: itemHeight * 3
++
++                    // The height of the area where icons start getting folded
++                    property int foldingAreaHeight: itemHeight * 0.75
++                    property int itemWidth: width
++                    property int itemHeight: width * 7.5 / 8
++                    property int clickFlickSpeed: units.gu(60)
++                    property int draggedIndex: dndArea.draggedIndex
++                    property real realContentY: contentY - originY + topMargin
++                    property int realItemHeight: itemHeight + spacing
++
++                    displaced: Transition {
++                        NumberAnimation { properties: "x,y"; duration: UbuntuAnimation.FastDuration; easing: UbuntuAnimation.StandardEasing }
++                    }
++
++                    delegate: FoldingLauncherDelegate {
++                        id: launcherDelegate
++                        objectName: "launcherDelegate" + index
++                        itemHeight: launcherListView.itemHeight
++                        itemWidth: launcherListView.itemWidth
++                        width: itemWidth
++                        height: itemHeight
++                        iconName: model.icon
++                        inverted: root.inverted
++                        highlighted: dragging && index === root.highlightIndex
++                        z: -Math.abs(offset)
++                        maxAngle: 60
++                        property bool dragging: false
++
++                        ThinDivider {
++                            id: dropIndicator
++                            objectName: "dropIndicator"
++                            anchors.centerIn: parent
++                            width: parent.width + mainColumn.anchors.leftMargin + mainColumn.anchors.rightMargin
++                            opacity: 0
++                        }
++
++                        states: [
++                            State {
++                                name: "selected"
++                                when: dndArea.selectedItem === launcherDelegate && fakeDragItem.visible && !dragging
++                                PropertyChanges {
++                                    target: launcherDelegate
++                                    itemOpacity: 0
++                                }
++                            },
++                            State {
++                                name: "dragging"
++                                when: dragging
++                                PropertyChanges {
++                                    target: launcherDelegate
++                                    height: units.gu(1)
++                                    itemOpacity: 0
++                                }
++                                PropertyChanges {
++                                    target: dropIndicator
++                                    opacity: 1
++                                }
++                            },
++                            State {
++                                name: "expanded"
++                                when: dndArea.draggedIndex >= 0 && (dndArea.preDragging || dndArea.dragging || dndArea.postDragging) && dndArea.draggedIndex != index
++                                PropertyChanges {
++                                    target: launcherDelegate
++                                    angle: 0
++                                    offset: 0
++                                    itemOpacity: 0.6
++                                }
++                            }
++                        ]
++
++                        transitions: [
++                            Transition {
++                                from: ""
++                                to: "selected"
++                                NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.FastDuration }
++                            },
++                            Transition {
++                                from: "*"
++                                to: "expanded"
++                                NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.FastDuration }
++                                UbuntuNumberAnimation { properties: "angle,offset" }
++                            },
++                            Transition {
++                                from: "expanded"
++                                to: ""
++                                NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.BriskDuration }
++                                UbuntuNumberAnimation { properties: "angle,offset" }
++                            },
++                            Transition {
++                                from: "selected"
++                                to: "dragging"
++                                UbuntuNumberAnimation { properties: "height" }
++                                NumberAnimation { target: dropIndicator; properties: "opacity"; duration: UbuntuAnimation.FastDuration }
++                            },
++                            Transition {
++                                from: "dragging"
++                                to: "*"
++                                NumberAnimation { target: dropIndicator; properties: "opacity"; duration: UbuntuAnimation.FastDuration }
++                                NumberAnimation { properties: "itemOpacity"; duration: UbuntuAnimation.BriskDuration }
++                                SequentialAnimation {
++                                    UbuntuNumberAnimation { properties: "height" }
++                                    PropertyAction { target: dndArea; property: "postDragging"; value: false }
++                                    PropertyAction { target: dndArea; property: "draggedIndex"; value: -1 }
++                                }
++                            }
++                        ]
++                    }
++
++                    MouseArea {
++                        id: dndArea
++                        anchors {
++                            fill: parent
++                            topMargin: launcherListView.topMargin
++                            bottomMargin: launcherListView.bottomMargin
++                        }
++                        drag.minimumY: -launcherListView.topMargin
++                        drag.maximumY: height + launcherListView.bottomMargin
++
++                        property int draggedIndex: -1
++                        property var selectedItem
++                        property bool preDragging: false
++                        property bool dragging: selectedItem !== undefined && selectedItem.dragging
++                        property bool postDragging: false
++                        property int startX
++                        property int startY
++
++                        onPressed: {
++                            selectedItem = launcherListView.itemAt(mouseX, mouseY + launcherListView.realContentY)
++                            selectedItem.highlighted = true
++                        }
++
++                        onClicked: {
++                            var index = Math.floor((mouseY + launcherListView.realContentY) / launcherListView.realItemHeight);
++                            var clickedItem = launcherListView.itemAt(mouseX, mouseY + launcherListView.realContentY)
++
++                            // First/last item do the scrolling at more than 12 degrees
++                            if (index == 0 || index == launcherListView.count - 1) {
++                                if (clickedItem.angle > 12) {
++                                    launcherListView.flick(0, -launcherListView.clickFlickSpeed);
++                                } else if (clickedItem.angle < -12) {
++                                    launcherListView.flick(0, launcherListView.clickFlickSpeed);
++                                } else {
++                                    root.applicationSelected(LauncherModel.get(index).desktopFile);
++                                }
++                                return;
++                            }
++
++                            // the rest launches apps up to an angle of 30 degrees
++                            if (clickedItem.angle > 30) {
                                  launcherListView.flick(0, -launcherListView.clickFlickSpeed);
--                            } else if (angle < -12) {
++                            } else if (clickedItem.angle < -30) {
                                  launcherListView.flick(0, launcherListView.clickFlickSpeed);
                              } else {
                                  root.applicationSelected(LauncherModel.get(index).desktopFile);
+                             }
--                            return;
--                        }
--
--                        // the rest launches apps up to an angle of 30 degrees
--                        if (angle > 30) {
--                            launcherListView.flick(0, -launcherListView.clickFlickSpeed);
--                        } else if (angle < -30) {
--                            launcherListView.flick(0, launcherListView.clickFlickSpeed);
--                        } else {
--                            root.applicationSelected(LauncherModel.get(index).desktopFile);
--                        }
--                    }
--                }
--
--                MouseArea {
--                    id: topFoldingArea
--                    anchors {
--                        left: parent.left
--                        right: parent.right
--                        top: parent.top
--                        topMargin: launcherListView.topMargin
--                    }
--                    height: launcherListView.itemSize / 2
--                    enabled: launcherListView.contentY > -launcherListView.topMargin
--                    onClicked: launcherListView.flick(0, launcherListView.clickFlickSpeed)
--                }
--
--                MouseArea {
--                    id: bottomFoldingArea
--                    anchors {
--                        left: parent.left
--                        right: parent.right
--                        bottom: parent.bottom
--                        bottomMargin: launcherListView.bottomMargin
--                    }
--                    height: launcherListView.itemSize / 2
--                    enabled: launcherListView.contentHeight - launcherListView.height - launcherListView.contentY > -launcherListView.bottomMargin
--                    onClicked: launcherListView.flick(0, -launcherListView.clickFlickSpeed)
++                        }
++
++                        onCanceled: {
++                            selectedItem.highlighted = false
++                            selectedItem = undefined;
++                            preDragging = false;
++                            postDragging = false;
++                        }
++
++                        onReleased: {
++                            var droppedIndex = draggedIndex;
++                            if (dragging) {
++                                postDragging = true;
++                            } else {
++                                draggedIndex = -1;
++                            }
++
++                            selectedItem.highlighted = false
++                            selectedItem.dragging = false;
++                            selectedItem = undefined;
++                            preDragging = false;
++
++                            drag.target = undefined
++
++                            progressiveScrollingTimer.stop();
++                            launcherListView.interactive = true;
++                            if (droppedIndex >= launcherListView.count - 2 && postDragging) {
++                                launcherListView.flick(0, -launcherListView.clickFlickSpeed);
++                            }
++                        }
++
++                        onPressAndHold: {
++                            if (Math.abs(selectedItem.angle) > 30) {
++                                return;
++                            }
++
++                            draggedIndex = Math.floor((mouseY + launcherListView.realContentY) / launcherListView.realItemHeight);
++
++                            launcherListView.interactive = false
++
++                            var yOffset = draggedIndex > 0 ? (mouseY + launcherListView.realContentY) % (draggedIndex * launcherListView.realItemHeight) : mouseY + launcherListView.realContentY
++
++                            fakeDragItem.iconName = launcherListView.model.get(draggedIndex).icon
++                            fakeDragItem.x = 0
++                            fakeDragItem.y = mouseY - yOffset + launcherListView.anchors.topMargin + launcherListView.topMargin
++                            fakeDragItem.angle = selectedItem.angle * (root.inverted ? -1 : 1)
++                            fakeDragItem.offset = selectedItem.offset * (root.inverted ? -1 : 1)
++                            fakeDragItem.flatten()
++                            drag.target = fakeDragItem
++
++                            startX = mouseX
++                            startY = mouseY
++                        }
++
++                        onPositionChanged: {
++                            if (draggedIndex >= 0) {
++                                if (!selectedItem.dragging) {
++                                    var distance = Math.max(Math.abs(mouseX - startX), Math.abs(mouseY - startY))
++                                    if (!preDragging && distance > units.gu(1.5)) {
++                                        preDragging = true;
++                                    }
++                                    if (distance > launcherListView.itemHeight) {
++                                        selectedItem.dragging = true
++                                        preDragging = false;
++                                    }
++                                }
++                                if (!selectedItem.dragging) {
++                                    return
++                                }
++
++                                var itemCenterY = fakeDragItem.y + fakeDragItem.height / 2
++
++                                // Move it down by the the missing size to compensate index calculation with only expanded items
++                                itemCenterY += (launcherListView.itemHeight - selectedItem.height) / 2
++
++                                if (mouseY > launcherListView.height - launcherListView.topMargin - launcherListView.bottomMargin - launcherListView.realItemHeight) {
++                                    progressiveScrollingTimer.downwards = false
++                                    progressiveScrollingTimer.start()
++                                } else if (mouseY < launcherListView.realItemHeight) {
++                                    progressiveScrollingTimer.downwards = true
++                                    progressiveScrollingTimer.start()
++                                } else {
++                                    progressiveScrollingTimer.stop()
++                                }
++
++                                var newIndex = (itemCenterY + launcherListView.realContentY) / launcherListView.realItemHeight
++
++                                if (newIndex > draggedIndex + 1) {
++                                    newIndex = draggedIndex + 1
++                                } else if (newIndex < draggedIndex) {
++                                    newIndex = draggedIndex -1
++                                } else {
++                                    return
++                                }
++
++                                if (newIndex >= 0 && newIndex < launcherListView.count) {
++                                    launcherListView.model.move(draggedIndex, newIndex)
++                                    draggedIndex = newIndex
++                                }
++                            }
++                        }
++                    }
++                    Timer {
++                        id: progressiveScrollingTimer
++                        interval: 2
++                        repeat: true
++                        running: false
++                        property bool downwards: true
++                        onTriggered: {
++                            if (downwards) {
++                                var minY =  -launcherListView.topMargin
++                                if (launcherListView.contentY > minY) {
++                                    launcherListView.contentY = Math.max(launcherListView.contentY - units.dp(2), minY)
++                                }
++                            } else {
++                                var maxY = launcherListView.contentHeight - launcherListView.height + launcherListView.topMargin + launcherListView.originY
++                                if (launcherListView.contentY < maxY) {
++                                    launcherListView.contentY = Math.min(launcherListView.contentY + units.dp(2), maxY)
++                                }
++                            }
++                        }
++                    }
++                }
++            }
++
++            LauncherDelegate {
++                id: fakeDragItem
++                objectName: "fakeDragItem"
++                visible: dndArea.draggedIndex >= 0 && !dndArea.postDragging
++                itemWidth: launcherListView.itemWidth
++                itemHeight: launcherListView.itemHeight
++                height: itemHeight
++                width: itemWidth
++                rotation: root.rotation
++                highlighted: true
++                itemOpacity: 0.8
++
++                function flatten() {
++                    fakeDragItemAnimation.start();
++                }
++
++                UbuntuNumberAnimation {
++                    id: fakeDragItemAnimation
++                    target: fakeDragItem;
++                    properties: "angle,offset";
++                    to: 0
+                 }
+             }
+         }
 === removed file 'Launcher/graphics/launcher_bg@18.png'
 Binary files Launcher/graphics/launcher_bg@18.png	2013-06-05 22:03:08 +0000 and Launcher/graphics/launcher_bg@18.png	1970-01-01 00:00:00 +0000 differ
 === removed file 'Launcher/graphics/launcher_bg@18.sci'
 --- Launcher/graphics/launcher_bg@18.sci	2013-06-05 22:03:08 +0000
 +++ Launcher/graphics/launcher_bg@18.sci	1970-01-01 00:00:00 +0000
@@ -1,5 +0,0 @@
--border.left: 0
--border.top: 0
--border.bottom: 0
--border.right: 24
--source: launcher_bg@18.png
 === added file 'Launcher/graphics/launcher_bg@30.png'
 Binary files Launcher/graphics/launcher_bg@30.png	1970-01-01 00:00:00 +0000 and Launcher/graphics/launcher_bg@30.png	2013-08-19 11:48:45 +0000 differ
 === added file 'Launcher/graphics/launcher_bg@30.sci'
 --- Launcher/graphics/launcher_bg@30.sci	1970-01-01 00:00:00 +0000
 +++ Launcher/graphics/launcher_bg@30.sci	2013-08-19 11:48:45 +0000
@@ -0,0 +1,5 @@
++border.left: 4
++border.top: 4
++border.bottom: 4
++border.right: 66
++source: launcher_bg@30.png
 === modified file 'plugins/Unity/Launcher/backend/launcherbackend.cpp'
 --- plugins/Unity/Launcher/backend/launcherbackend.cpp	2013-07-16 20:45:13 +0000
 +++ plugins/Unity/Launcher/backend/launcherbackend.cpp	2013-08-19 11:48:45 +0000
@@ -101,7 +101,7 @@
+ {
      // TODO: return app's pinned state from settings
      Q_UNUSED(appId)
--    return true;
++    return false;
+ }
  void LauncherBackend::setPinned(const QString &appId, bool pinned)
 === modified file 'plugins/Unity/Launcher/launcheritem.cpp'
 --- plugins/Unity/Launcher/launcheritem.cpp	2013-07-08 13:55:07 +0000
 +++ plugins/Unity/Launcher/launcheritem.cpp	2013-08-19 11:48:45 +0000
@@ -33,7 +33,10 @@
      m_count(0),
      m_quickList(new QuickListModel(this))
+ {
--
++    QuickListEntry pinningAction;
++    pinningAction.setActionId("pin_item");
++    pinningAction.setText("Pin to Launcher");
++    m_quickList->appendAction(pinningAction);
+ }
  QString LauncherItem::appId() const
@@ -65,6 +68,10 @@
+ {
      if (m_pinned != pinned) {
          m_pinned = pinned;
++        QuickListEntry entry;
++        entry.setActionId("pin_item");
++        entry.setText(pinned ? "Remove from Launcher": "Pin to Launcher");
++        m_quickList->updateAction(entry);
          Q_EMIT pinnedChanged(pinned);
+     }
+ }
 === modified file 'plugins/Unity/Launcher/launchermodel.cpp'
 --- plugins/Unity/Launcher/launchermodel.cpp	2013-07-08 17:01:49 +0000
 +++ plugins/Unity/Launcher/launchermodel.cpp	2013-08-19 11:48:45 +0000
@@ -82,8 +82,25 @@
  void LauncherModel::move(int oldIndex, int newIndex)
+ {
--    // Perform the move in our list
--    beginMoveRows(QModelIndex(), oldIndex, oldIndex, QModelIndex(), newIndex);
++    // Make sure its not moved outside the lists
++    if (newIndex < 0) {
++        newIndex = 0;
++    }
++    if (newIndex >= m_list.count()) {
++        newIndex = m_list.count()-1;
++    }
++
++    // Nothing to do?
++    if (oldIndex == newIndex) {
++        return;
++    }
++
++    // QList's and QAbstractItemModel's move implementation differ when moving an item up the list :/
++    // While QList needs the index in the resulting list, beginMoveRows expects it to be in the current list
++    // adjust the model's index by +1 in case we're moving upwards
++    int newModelIndex = newIndex > oldIndex ? newIndex+1 : newIndex;
++
++    beginMoveRows(QModelIndex(), oldIndex, oldIndex, QModelIndex(), newModelIndex);
      m_list.move(oldIndex, newIndex);
      endMoveRows();
@@ -140,10 +157,23 @@
          return;
+     }
--    QuickListModel *model = qobject_cast<QuickListModel*>(m_list.at(index)->quickList());
++    LauncherItem *item = m_list.at(index);
++    QuickListModel *model = qobject_cast<QuickListModel*>(item->quickList());
      if (model) {
          QString actionId = model->get(actionIndex).actionId();
--        m_backend->triggerQuickListAction(appId, actionId);
++
++        // Check if this is one of the launcher actions we handle ourselves
++        if (actionId == "pin_item") {
++            if (item->pinned()) {
++                requestRemove(appId);
++            } else {
++                pin(appId);
++            }
++
++        // Nope, we don't know this action, let the backend forward it to the application
++        } else {
++            m_backend->triggerQuickListAction(appId, actionId);
++        }
+     }
+ }
 === modified file 'plugins/Unity/Launcher/plugin.cpp'
 --- plugins/Unity/Launcher/plugin.cpp	2013-07-08 17:00:27 +0000
 +++ plugins/Unity/Launcher/plugin.cpp	2013-08-19 11:48:45 +0000
@@ -41,7 +41,9 @@
      qmlRegisterUncreatableType<LauncherModelInterface>(uri, 0, 1, "LauncherModelInterface", "Abstract Interface. Cannot be instantiated.");
      qmlRegisterUncreatableType<LauncherItemInterface>(uri, 0, 1, "LauncherItemInterface", "Abstract Interface. Cannot be instantiated.");
++    qmlRegisterUncreatableType<QuickListModelInterface>(uri, 0, 1, "QuickListInterface", "Abstract Interface. Cannot be instantiated.");
      qmlRegisterSingletonType<LauncherModel>(uri, 0, 1, "LauncherModel", modelProvider);
      qmlRegisterUncreatableType<LauncherItem>(uri, 0, 1, "LauncherItem", "Can't create new Launcher Items in QML. Get them from the LauncherModel.");
++    qmlRegisterUncreatableType<QuickListModel>(uri, 0, 1, "QuickListModel", "Can't create a QuickListModel in QML. Get them from the LauncherItems.");
+ }
 === modified file 'plugins/Unity/Launcher/quicklistmodel.cpp'
 --- plugins/Unity/Launcher/quicklistmodel.cpp	2013-07-08 13:55:07 +0000
 +++ plugins/Unity/Launcher/quicklistmodel.cpp	2013-08-19 11:48:45 +0000
@@ -37,6 +37,17 @@
      endInsertRows();
+ }
++void QuickListModel::updateAction(const QuickListEntry &entry)
++{
++    for (int i = 0; i < m_list.count(); ++i) {
++        if (m_list.at(i).actionId() == entry.actionId()) {
++            m_list.replace(i, entry);
++            Q_EMIT dataChanged(index(i), index(i));
++            return;
++        }
++    }
++}
++
  QuickListEntry QuickListModel::get(int index) const
+ {
      return m_list.at(index);
 === modified file 'plugins/Unity/Launcher/quicklistmodel.h'
 --- plugins/Unity/Launcher/quicklistmodel.h	2013-07-08 13:55:07 +0000
 +++ plugins/Unity/Launcher/quicklistmodel.h	2013-08-19 11:48:45 +0000
@@ -36,6 +36,16 @@
      ~QuickListModel();
      void appendAction(const QuickListEntry &entry);
++
++    /**
++     * @brief Update an existing action
++     * @param entry The new, updated entry
++     *
++     * This will only do something if entry.actionId is found in the model.
++     * To add a new entry, use appendAction().
++     */
++    void updateAction(const QuickListEntry &entry);
++
      QuickListEntry get(int index) const;
      int rowCount(const QModelIndex &parent = QModelIndex()) const;
 === modified file 'tests/qmltests/Launcher/tst_Launcher.qml'
 --- tests/qmltests/Launcher/tst_Launcher.qml	2013-07-05 09:02:07 +0000
 +++ tests/qmltests/Launcher/tst_Launcher.qml	2013-08-19 11:48:45 +0000
@@ -19,6 +19,7 @@
  import Unity.Test 0.1 as UT
  import ".."
  import "../../../Launcher"
++import Unity.Launcher 0.1
  /* Nothing is shown at first. If you drag from left edge you will bring up the
     launcher. */
@@ -247,4 +248,63 @@
+         }
          */
+     }
++
++    UT.UnityTestCase {
++        id: dndTestCase
++        name: "Drag and Drop"
++        when: windowShown && initTestCase.completed
++
++        function test_dragndrop_data() {
++            return [
++                {tag: "startDrag", fullDrag: false},
++                {tag: "fullDrag", fullDrag: true},
++            ];
++        }
++
++        function test_dragndrop(data) {
++            revealer.dragLauncherIntoView();
++            var draggedItem = findChild(launcher, "launcherDelegate5")
++            var item0 = findChild(launcher, "launcherDelegate0")
++            var fakeDragItem = findChild(launcher, "fakeDragItem")
++            var initialItemHeight = draggedItem.height
++            var item5Name = LauncherModel.get(5).iconName
++            var item4Name = LauncherModel.get(4).iconName
++
++            // Initial state
++            compare(draggedItem.itemOpacity, 1, "Item's opacity is not 1 at beginning")
++            compare(fakeDragItem.visible, false, "FakeDragItem isn't invisible at the beginning")
++            tryCompare(findChild(draggedItem, "dropIndicator"), "opacity", 0)
++
++            // Doing longpress
++            mousePress(draggedItem, draggedItem.width / 2, draggedItem.height / 2)
++            // DraggedItem needs to hide and fakeDragItem become visible
++            tryCompare(draggedItem, "itemOpacity", 0)
++            tryCompare(fakeDragItem, "visible", true)
++
++            // Dragging a bit (> 1.5 gu)
++            mouseMove(draggedItem, -units.gu(2), draggedItem.height / 2)
++            // Other items need to expand and become 0.6 opaque
++            tryCompare(item0, "angle", 0)
++            tryCompare(item0, "itemOpacity", 0.6)
++
++            if (data.fullDrag) {
++                // Dragging a bit more
++                mouseMove(draggedItem, -units.gu(15), draggedItem.height / 2, 100)
++                tryCompare(findChild(draggedItem, "dropIndicator"), "opacity", 1)
++                tryCompare(draggedItem, "height", units.gu(1))
++
++                // Dragging downwards. Item needs to move in the model
++                mouseMove(draggedItem, -units.gu(15), -initialItemHeight)
++                waitForRendering(draggedItem)
++                compare(LauncherModel.get(5).iconName, item4Name)
++                compare(LauncherModel.get(5).iconName, item5Name)
++            }
++
++            // Releasing and checking if initial values are restored
++            mouseRelease(draggedItem)
++            tryCompare(findChild(draggedItem, "dropIndicator"), "opacity", 0)
++            tryCompare(draggedItem, "itemOpacity", 1)
++            tryCompare(fakeDragItem, "visible", false)
++        }
++    }
+ }