Merge lp:~verzegnassi-stefano/quick-memo/fix-bottom-edge into lp:quick-memo/trunk

[Stefano Verzegnassi]

=== modified file 'app/components/PageWithBottomEdge.qml'
--- app/components/PageWithBottomEdge.qml	2014-10-01 18:00:58 +0000
+++ app/components/PageWithBottomEdge.qml	2014-10-20 14:09:21 +0000
@@ -62,7 +62,7 @@
 
 */
 
-import QtQuick 2.0
+import QtQuick 2.2
 import Ubuntu.Components 1.1
 
 Page {
@@ -71,15 +71,15 @@
     property alias bottomEdgePageComponent: edgeLoader.sourceComponent
     property alias bottomEdgePageSource: edgeLoader.source
     property alias bottomEdgeTitle: tipLabel.text
-    property alias bottomEdgeEnabled: bottomEdge.visible
+    property bool bottomEdgeEnabled: true
     property int bottomEdgeExpandThreshold: page.height * 0.2
     property int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdge.tipHeight) : _areaWhenExpanded
     property bool reloadBottomEdgePage: true
     property alias bottomEdgePageStartY: bottomEdge.pageStartY
 
     readonly property alias bottomEdgePage: edgeLoader.item
-    readonly property bool isReady: (tip.opacity === 0.0)
-    readonly property bool isCollapsed: (tip.opacity === 1.0)
+    readonly property bool isReady: ((bottomEdge.y === 0) && bottomEdgePageLoaded && edgeLoader.item.active)
+    readonly property bool isCollapsed: (bottomEdge.y === page.height)
     readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
 
     property bool _showEdgePageWhenReady: false
@@ -143,13 +143,123 @@
         z: 1
     }
 
-    Timer {
-        id: hideIndicator
-
-        interval: 3000
-        running: true
-        repeat: false
-        onTriggered: tipContainer.y = -units.gu(1)
+    UbuntuShape {
+        id: tip
+        objectName: "bottomEdgeTip"
+
+        property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
+
+        enabled: mouseArea.enabled
+        visible: page.bottomEdgeEnabled
+        anchors {
+            bottom: parent.bottom
+            horizontalCenter: bottomEdge.horizontalCenter
+            bottomMargin: hidden ? - height + units.gu(1) : -units.gu(1)
+            Behavior on bottomMargin {
+                SequentialAnimation {
+                    // wait some msecs in case of the focus change again, to avoid flickering
+                    PauseAnimation {
+                        duration: 300
+                    }
+                    UbuntuNumberAnimation {
+                        duration: UbuntuAnimation.SnapDuration
+                    }
+                }
+            }
+        }
+
+        z: 1
+        width: tipLabel.paintedWidth + units.gu(6)
+        height: bottomEdge.tipHeight + units.gu(1)
+        color: Theme.palette.normal.overlay
+        Label {
+            id: tipLabel
+
+            anchors {
+                top: parent.top
+                left: parent.left
+                right: parent.right
+            }
+            height: bottomEdge.tipHeight
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
+            opacity: tip.hidden ? 0.0 : 1.0
+            Behavior on opacity {
+                UbuntuNumberAnimation {
+                    duration: UbuntuAnimation.SnapDuration
+                }
+            }
+        }
+    }
+
+    Rectangle {
+        id: shadow
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+        }
+        height: units.gu(1)
+        z: 1
+        opacity: 0.0
+        gradient: Gradient {
+            GradientStop { position: 0.0; color: "transparent" }
+            GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
+        }
+    }
+
+    MouseArea {
+        id: mouseArea
+
+        property real previousY: -1
+        property string dragDirection: "None"
+
+        preventStealing: true
+        drag {
+            axis: Drag.YAxis
+            target: bottomEdge
+            minimumY: bottomEdge.pageStartY
+            maximumY: page.height
+        }
+        enabled: edgeLoader.status == Loader.Ready
+        visible: page.bottomEdgeEnabled
+
+        anchors {
+            left: parent.left
+            right: parent.right
+            bottom: parent.bottom
+
+        }
+        height: bottomEdge.tipHeight
+        z: 1
+
+        onReleased: {
+            page.bottomEdgeReleased()
+            if ((dragDirection === "BottomToTop") &&
+                bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
+                bottomEdge.state = "expanded"
+            } else {
+                bottomEdge.state = "collapsed"
+            }
+            previousY = -1
+            dragDirection = "None"
+        }
+
+        onPressed: {
+            previousY = mouse.y
+            tip.forceActiveFocus()
+        }
+
+        onMouseYChanged: {
+            var yOffset = previousY - mouseY
+            // skip if was a small move
+            if (Math.abs(yOffset) <= units.gu(2)) {
+                return
+            }
+            previousY = mouseY
+            dragDirection = yOffset > 0 ? "BottomToTop" : "TopToBottom"
+        }
     }
 
     Rectangle {
@@ -162,97 +272,14 @@
 
         z: 1
         color: Theme.palette.normal.background
-        parent: page
+        clip: true
         anchors {
             left: parent.left
             right: parent.right
         }
         height: page.height
         y: height
-
-        Rectangle {
-            id: shadow
-
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-            height: units.gu(1)
-            y: -height
-            opacity: 0.0
-            gradient: Gradient {
-                GradientStop { position: 0.0; color: "transparent" }
-                GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.2) }
-            }
-        }
-
-        Item {
-            id: tipContainer
-            objectName: "bottomEdgeTip"
-
-            width: childrenRect.width
-            height: bottomEdge.tipHeight
-            clip: true
-            y: -bottomEdge.tipHeight
-            anchors.horizontalCenter: parent.horizontalCenter
-            Behavior on y {
-                UbuntuNumberAnimation {}
-            }
-
-            UbuntuShape {
-                id: tip
-
-                width: tipLabel.paintedWidth + units.gu(6)
-                height: bottomEdge.tipHeight + units.gu(1)
-                color: Theme.palette.normal.overlay
-                Label {
-                    id: tipLabel
-
-                    anchors {
-                        top: parent.top
-                        left: parent.left
-                        right: parent.right
-                    }
-
-                    fontSize: "xx-small"
-                    height: bottomEdge.tipHeight
-                    verticalAlignment: Text.AlignVCenter
-                    horizontalAlignment: Text.AlignHCenter
-                }
-            }
-        }
-
-        MouseArea {
-            preventStealing: true
-            drag.axis: Drag.YAxis
-            drag.target: bottomEdge
-            drag.minimumY: bottomEdge.pageStartY
-            drag.maximumY: page.height
-
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-            height: bottomEdge.tipHeight
-            y: -height
-
-            onReleased: {
-                page.bottomEdgeReleased()
-                if (bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
-                    bottomEdge.state = "expanded"
-                } else {
-                    bottomEdge.state = "collapsed"
-                    bottomEdge.y = bottomEdge.height
-                }
-            }
-
-            onPressed: bottomEdge.state = "floating"
-        }
-
-        Behavior on y {
-            UbuntuNumberAnimation {}
-        }
-
+        visible: !page.isCollapsed
         state: "collapsed"
         states: [
             State {
@@ -261,18 +288,6 @@
                     target: bottomEdge
                     y: bottomEdge.height
                 }
-                PropertyChanges {
-                    target: tip
-                    opacity: 1.0
-                }
-                PropertyChanges {
-                    target: tipContainer
-                    y: -bottomEdge.tipHeight
-                }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: true
-                }
             },
             State {
                 name: "expanded"
@@ -280,33 +295,14 @@
                     target: bottomEdge
                     y: bottomEdge.pageStartY
                 }
-                PropertyChanges {
-                    target: tip
-                    opacity: 0.0
-                }
-                PropertyChanges {
-                    target: tipContainer
-                    y: -bottomEdge.tipHeight
-                }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: false
-                }
             },
             State {
                 name: "floating"
+                when: mouseArea.drag.active
                 PropertyChanges {
                     target: shadow
                     opacity: 1.0
                 }
-                PropertyChanges {
-                    target: hideIndicator
-                    running: false
-                }
-                PropertyChanges {
-                    target: tipContainer
-                    y: -bottomEdge.tipHeight
-                }
             }
         ]
 
@@ -314,10 +310,27 @@
             Transition {
                 to: "expanded"
                 SequentialAnimation {
-                    UbuntuNumberAnimation {
-                        targets: [bottomEdge,tip]
-                        properties: "y,opacity"
-                        duration: UbuntuAnimation.SlowDuration
+                    alwaysRunToEnd: true
+
+                    SmoothedAnimation {
+                        target: bottomEdge
+                        property: "y"
+                        duration: UbuntuAnimation.FastDuration
+                        easing.type: Easing.Linear
+                    }
+                    SmoothedAnimation {
+                        target: edgeLoader
+                        property: "anchors.topMargin"
+                        to: - units.gu(4)
+                        duration: UbuntuAnimation.FastDuration
+                        easing.type: Easing.Linear
+                    }
+                    SmoothedAnimation {
+                        target: edgeLoader
+                        property: "anchors.topMargin"
+                        to: 0
+                        duration: UbuntuAnimation.FastDuration
+                        easing: UbuntuAnimation.StandardEasing
                     }
                     ScriptAction {
                         script: page._pushPage()
@@ -328,16 +341,19 @@
                 from: "expanded"
                 to: "collapsed"
                 SequentialAnimation {
+                    alwaysRunToEnd: true
+
                     ScriptAction {
                         script: {
+                            Qt.inputMethod.hide()
                             edgeLoader.item.parent = edgeLoader
                             edgeLoader.item.anchors.fill = edgeLoader
                             edgeLoader.item.active = false
                         }
                     }
-                    UbuntuNumberAnimation {
-                        targets: [bottomEdge,tip]
-                        properties: "y,opacity"
+                    SmoothedAnimation {
+                        target: bottomEdge
+                        property: "y"
                         duration: UbuntuAnimation.SlowDuration
                     }
                     ScriptAction {
@@ -345,15 +361,15 @@
                             // destroy current bottom page
                             if (page.reloadBottomEdgePage) {
                                 edgeLoader.active = false
+                                // tip will receive focus on page active true
+                            } else {
+                                tip.forceActiveFocus()
                             }
 
                             // notify
                             page.bottomEdgeDismissed()
 
-                            // load a new bottom page in memory
                             edgeLoader.active = true
-
-                            hideIndicator.restart()
                         }
                     }
                 }
@@ -361,9 +377,10 @@
             Transition {
                 from: "floating"
                 to: "collapsed"
-                UbuntuNumberAnimation {
-                    targets: [bottomEdge,tip]
-                    properties: "y,opacity"
+                SmoothedAnimation {
+                    target: bottomEdge
+                    property: "y"
+                    duration: UbuntuAnimation.FastDuration
                 }
             }
         ]
@@ -371,21 +388,19 @@
         Loader {
             id: edgeLoader
 
-            z: 1
-            active: true
             asynchronous: true
             anchors.fill: parent
-
             //WORKAROUND: The SDK move the page contents down to allocate space for the header we need to avoid that during the page dragging
             Binding {
-                target: edgeLoader
+                target: edgeLoader.status === Loader.Ready ? edgeLoader : null
                 property: "anchors.topMargin"
-                value: edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
-                when: (edgeLoader.status === Loader.Ready && !page.isReady)
+                value:  edgeLoader.item && edgeLoader.item.flickable ? edgeLoader.item.flickable.contentY : 0
+                when: !page.isReady
             }
 
             onLoaded: {
-                if (page.isReady && edgeLoader.item.active != true) {
+                tip.forceActiveFocus()
+                if (page.isReady && edgeLoader.item.active !== true) {
                     page._pushPage()
                 }
             }