ubuntu-touch-coreapps-reviewers team mailing list archive
-
ubuntu-touch-coreapps-reviewers team
-
Mailing list archive
-
Message #05300
[Merge] lp:~vthompson/ubuntu-weather-app/add-fake-header into lp:ubuntu-weather-app/reboot
Victor Thompson has proposed merging lp:~vthompson/ubuntu-weather-app/add-fake-header into lp:ubuntu-weather-app/reboot.
Commit message:
* Add FakeHeader component to ease the bottom edge transition.
Requested reviews:
Ubuntu Weather Developers (ubuntu-weather-dev)
For more details, see:
https://code.launchpad.net/~vthompson/ubuntu-weather-app/add-fake-header/+merge/274827
* Add FakeHeader component to ease the bottom edge transition.
--
Your team Ubuntu Weather Developers is requested to review the proposed merge of lp:~vthompson/ubuntu-weather-app/add-fake-header into lp:ubuntu-weather-app/reboot.
=== 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
Follow ups
