Merge lp:~fboucault/component-store/use_bottom_edge_hint into lp:component-store

[Florian Boucault]

PageWithBottomEdge: make use of the newly introduced BottomEdgeHint component in the Ubuntu UI Toolkit.

[Nekhelesh Ramananthan (nik90)]

I have only one concern. Component store doesn't support versioning. So if this MP gets merged, if anybody grabs the code it will not work until they update to Ubuntu.Components 1.3 which will become stable only much later. Any idea when UC 1.3 become part of the stable phone images? Do we wait on this? Any other ideas?

Also added renato as the reviewer since he is the component author here.

review: Needs Information

[Renato Araujo Oliveira Filho (renatofilho)]

Looks good for me. And works nice with addressbook app.

review: Approve

[Roman Shchekin (mrqtros)]

Hmm, AFAIK 1.3 is already in store (OTA 4 bring it), so we shouldn't worry

[Zsombor Egri (zsombi)]

Ubuntu Components 1.3 will get stable once 15.10 is released.

Unmerged revisions

52. By Florian Boucault on 2015-07-22

PageWithBottomEdge: make use of the newly introduced BottomEdgeHint component in the Ubuntu UI Toolkit.

=== modified file 'curated-store/ComponentStore/PageWithBottomEdge/PageWithBottomEdge.qml'
--- curated-store/ComponentStore/PageWithBottomEdge/PageWithBottomEdge.qml	2014-11-08 16:20:37 +0000
+++ curated-store/ComponentStore/PageWithBottomEdge/PageWithBottomEdge.qml	2015-07-22 19:01:42 +0000
@@ -63,17 +63,17 @@
 */
 
 import QtQuick 2.2
-import Ubuntu.Components 1.1
+import Ubuntu.Components 1.3
 
 Page {
     id: page
 
     property alias bottomEdgePageComponent: edgeLoader.sourceComponent
     property alias bottomEdgePageSource: edgeLoader.source
-    property alias bottomEdgeTitle: tipLabel.text
+    property alias bottomEdgeTitle: bottomEdgeHint.text
     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 int bottomEdgeExposedArea: bottomEdge.state !== "expanded" ? (page.height - bottomEdge.y - bottomEdgeHint.height) : _areaWhenExpanded
     property bool reloadBottomEdgePage: true
 
     readonly property alias bottomEdgePage: edgeLoader.item
@@ -132,79 +132,12 @@
         }
     }
 
-    Rectangle {
-        id: bgVisual
-
-        color: "black"
-        anchors.fill: page
-        opacity: 0.7 * ((page.height - bottomEdge.y) / page.height)
-        z: 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) }
-        }
+    BottomEdgeHint {
+        id: bottomEdgeHint
+        z: 1
+        onClicked: bottomEdge.state = "expanded"
+        property bool hidden: activeFocus === false || bottomEdge.state == "expanded"
+        onHiddenChanged: hidden ? state = "Hidden" : state = "Visible"
     }
 
     MouseArea {
@@ -229,16 +162,18 @@
             bottom: parent.bottom
 
         }
-        height: bottomEdge.tipHeight
+        height: bottomEdgeHint.height
         z: 1
 
         onReleased: {
             page.bottomEdgeReleased()
             if ((dragDirection === "BottomToTop") &&
-                bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdge.tipHeight)) {
+                bottomEdge.y < (page.height - bottomEdgeExpandThreshold - bottomEdgeHint.height)) {
                 bottomEdge.state = "expanded"
+            } else if (dragDirection === "BottomToTop") {
+                bottomEdge.state = "collapsed"
             } else {
-                bottomEdge.state = "collapsed"
+                bottomEdge.state = "expanded"
             }
             previousY = -1
             dragDirection = "None"
@@ -246,7 +181,7 @@
 
         onPressed: {
             previousY = mouse.y
-            tip.forceActiveFocus()
+            bottomEdgeHint.forceActiveFocus()
         }
 
         onMouseYChanged: {
@@ -264,7 +199,6 @@
         id: bottomEdge
         objectName: "bottomEdge"
 
-        readonly property int tipHeight: units.gu(3)
         readonly property int pageStartY: 0
 
         z: 1
@@ -296,10 +230,6 @@
             State {
                 name: "floating"
                 when: mouseArea.drag.active
-                PropertyChanges {
-                    target: shadow
-                    opacity: 1.0
-                }
             }
         ]
 
@@ -360,7 +290,7 @@
                                 edgeLoader.active = false
                                 // tip will receive focus on page active true
                             } else {
-                                tip.forceActiveFocus()
+                                bottomEdgeHint.forceActiveFocus()
                             }
 
                             // notify
@@ -396,7 +326,7 @@
             }
 
             onLoaded: {
-                tip.forceActiveFocus()
+                bottomEdgeHint.forceActiveFocus()
                 if (page.isReady && edgeLoader.item.active !== true) {
                     page._pushPage()
                 }