Merge lp:~vthompson/ubuntu-weather-app/add-fake-header into lp:ubuntu-weather-app

[Victor Thompson]

* Add FakeHeader component to ease the bottom edge transition.

* Add FakeHeader component to ease the bottom edge transition.

This was originally part of the transition to the new list items. Since that needs some more testing and updates, this has been pulled out to be reviewed separately.

[Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot)]

PASSED: Continuous integration, rev:144
http://91.189.93.70:8080/job/ubuntu-weather-app-reboot-ci/277/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-reboot-vivid-amd64-ci/277

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/ubuntu-weather-app-reboot-ci/277/rebuild

review: Approve (continuous-integration)

[Andrew Hayzen (ahayzen)]

LGTM :-)

review: Approve

=== added file 'app/components/FakeHeader.qml'
--- app/components/FakeHeader.qml	1970-01-01 00:00:00 +0000
+++ app/components/FakeHeader.qml	2015-10-18 15:52:39 +0000
@@ -0,0 +1,39 @@
+/*
+ * Copyright (C) 2014 Canonical Ltd
+ *
+ * This file is part of Ubuntu Clock App
+ *
+ * Ubuntu Clock App is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * Ubuntu Clock App 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.4
+import Ubuntu.Components 1.2
+
+Column {
+    id: fakeHeader
+
+    height: units.gu(9)
+
+    Rectangle {
+        height: units.gu(7)
+        width: parent.width
+        color: Theme.palette.normal.background
+    }
+
+    Rectangle {
+        color: "#C9C9C9"
+        height: units.gu(2)
+        anchors.left: parent.left
+        anchors.right: parent.right
+    }
+}

=== modified file 'app/components/PageWithBottomEdge.qml'
--- app/components/PageWithBottomEdge.qml	2015-09-29 16:18:17 +0000
+++ app/components/PageWithBottomEdge.qml	2015-10-18 15:52:39 +0000
@@ -77,7 +77,7 @@
     property bool reloadBottomEdgePage: true
 
     readonly property alias bottomEdgePage: edgeLoader.item
-    readonly property bool isReady: ((bottomEdge.y === 0) && bottomEdgePageLoaded && edgeLoader.item.active)
+    readonly property bool isReady: ((bottomEdge.y === fakeHeader.height) && bottomEdgePageLoaded && edgeLoader.item.active) // CUSTOM change to flag to allow for FakeHeader height
     readonly property bool isCollapsed: (bottomEdge.y === page.height)
     readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
 
@@ -91,7 +91,6 @@
     signal bottomEdgeReleased()
     signal bottomEdgeDismissed()
 
-
     function showBottomEdgePage(source, properties)
     {
         edgeLoader.setSource(source, properties)
@@ -152,6 +151,9 @@
 
         property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
 
+        // CUSTOM
+        property bool isAnimating: true
+
         enabled: mouseArea.enabled
         visible: page.bottomEdgeEnabled
         anchors {
@@ -167,6 +169,10 @@
                     UbuntuNumberAnimation {
                         duration: UbuntuAnimation.SnapDuration
                     }
+                    // CUSTOM
+                    ScriptAction {
+                        script: tip.isAnimating = false
+                    }
                 }
             }
         }
@@ -232,7 +238,6 @@
             left: parent.left
             right: parent.right
             bottom: parent.bottom
-
         }
         height: bottomEdge.tipHeight
         z: 1
@@ -265,15 +270,34 @@
         }
     }
 
+    // CUSTOM fake header to make the page with bottom edge transition smoother
+    FakeHeader {
+        id: fakeHeader
+
+        anchors {
+            left: parent.left
+            right: parent.right
+        }
+        y: -fakeHeader.height + (fakeHeader.height * (page.height - bottomEdge.y)) / (page.height - fakeHeader.height)
+        z: bgVisual.z + 1
+
+        Behavior on y {
+            UbuntuNumberAnimation {
+                duration: UbuntuAnimation.SnapDuration
+            }
+        }
+    }
+
     Rectangle {
         id: bottomEdge
         objectName: "bottomEdge"
 
         readonly property int tipHeight: units.gu(3)
-        readonly property int pageStartY: 0
+        // CUSTOM value
+        readonly property int pageStartY: fakeHeader.height
 
         z: 1
-        color: weatherApp.backgroundColor
+        color: Theme.palette.normal.background
         clip: true
         anchors {
             left: parent.left
@@ -281,6 +305,7 @@
         }
         height: page.height
         y: height
+
         visible: !page.isCollapsed
         state: "collapsed"
         states: [
@@ -290,6 +315,11 @@
                     target: bottomEdge
                     y: bottomEdge.height
                 }
+                // CUSTOM
+                PropertyChanges {
+                    target: fakeHeader
+                    y: -fakeHeader.height
+                }
             },
             State {
                 name: "expanded"
@@ -297,6 +327,11 @@
                     target: bottomEdge
                     y: bottomEdge.pageStartY
                 }
+                // CUSTOM
+                PropertyChanges {
+                    target: fakeHeader
+                    y: 0
+                }
             },
             State {
                 name: "floating"
@@ -313,12 +348,20 @@
                 to: "expanded"
                 SequentialAnimation {
                     alwaysRunToEnd: true
-
-                    SmoothedAnimation {
-                        target: bottomEdge
-                        property: "y"
-                        duration: UbuntuAnimation.FastDuration
-                        easing.type: Easing.Linear
+                    ParallelAnimation {
+                        SmoothedAnimation {
+                            target: bottomEdge
+                            property: "y"
+                            duration: UbuntuAnimation.FastDuration
+                            easing.type: Easing.Linear
+                        }
+                        // CUSTOM
+                        SmoothedAnimation {
+                            target: fakeHeader
+                            property: "y"
+                            duration: UbuntuAnimation.FastDuration
+                            easing.type: Easing.Linear
+                        }
                     }
                     SmoothedAnimation {
                         target: edgeLoader
@@ -353,17 +396,24 @@
                             edgeLoader.item.active = false
                         }
                     }
-                    SmoothedAnimation {
-                        target: bottomEdge
-                        property: "y"
-                        duration: UbuntuAnimation.SlowDuration
+                    ParallelAnimation {
+                        SmoothedAnimation {
+                            target: bottomEdge
+                            property: "y"
+                            duration: UbuntuAnimation.SlowDuration
+                        }
+                        // CUSTOM
+                        SmoothedAnimation {
+                            target: fakeHeader
+                            property: "y"
+                            duration: UbuntuAnimation.SlowDuration
+                        }
                     }
                     ScriptAction {
                         script: {
                             // destroy current bottom page
                             if (page.reloadBottomEdgePage) {
                                 edgeLoader.active = false
-                                // tip will receive focus on page active true
                             } else {
                                 tip.forceActiveFocus()
                             }
@@ -379,10 +429,10 @@
             Transition {
                 from: "floating"
                 to: "collapsed"
-                SmoothedAnimation {
+                // MODIFIED
+                UbuntuNumberAnimation {
                     target: bottomEdge
-                    property: "y"
-                    duration: UbuntuAnimation.FastDuration
+                    property: "opacity"
                 }
             }
         ]

=== modified file 'app/ui/LocationsPage.qml'
--- app/ui/LocationsPage.qml	2015-09-19 22:55:37 +0000
+++ app/ui/LocationsPage.qml	2015-10-18 15:52:39 +0000
@@ -32,6 +32,7 @@
     states: [
         PageHeadState {
             id: defaultState
+            head: locationsPage.head
             name: "default"
             actions: [
                 Action {
@@ -40,9 +41,11 @@
                     onTriggered: mainPageStack.push(Qt.resolvedUrl("AddLocationPage.qml"))
                 }
             ]
-            PropertyChanges {
-                target: locationsPage.head
-                actions: defaultState.actions
+            backAction: Action {
+                iconName: "down"
+                onTriggered: {
+                    pageStack.pop()
+                }
             }
         },
         MultiSelectHeadState {

=== modified file 'debian/changelog'
--- debian/changelog	2015-10-18 15:18:05 +0000
+++ debian/changelog	2015-10-18 15:52:39 +0000
@@ -29,6 +29,7 @@
   * Make the first column of the day delegate extra info wider to accommodate other
     languages.
   * Show the bottom loading animation (LoadingIndicator) on the LocationsPage. (LP: #1490040)
+  * Add FakeHeader component to ease the bottom edge transition.
 
   [ Andrew Hayzen ]
   * Add mocked locations for autopilot and add a test using the data