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

Proposed by Victor Thompson on 2015-10-18
Status: Merged
Approved by: Andrew Hayzen on 2015-10-18
Approved revision: 144
Merged at revision: 143
Proposed branch: lp:~vthompson/ubuntu-weather-app/add-fake-header
Merge into: lp:ubuntu-weather-app
Diff against target: 272 lines (+115/-22)
4 files modified
app/components/FakeHeader.qml (+39/-0)
app/components/PageWithBottomEdge.qml (+69/-19)
app/ui/LocationsPage.qml (+6/-3)
debian/changelog (+1/-0)
To merge this branch: bzr merge lp:~vthompson/ubuntu-weather-app/add-fake-header
Reviewer Review Type Date Requested Status
Andrew Hayzen 2015-10-18 Approve on 2015-10-18
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve on 2015-10-18
Review via email: mp+274827@code.launchpad.net

Commit message

* Add FakeHeader component to ease the bottom edge transition.

Description of the change

* 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.

To post a comment you must log in.
review: Approve (continuous-integration)
Andrew Hayzen (ahayzen) wrote :

LGTM :-)

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== added file 'app/components/FakeHeader.qml'
2--- app/components/FakeHeader.qml 1970-01-01 00:00:00 +0000
3+++ app/components/FakeHeader.qml 2015-10-18 15:52:39 +0000
4@@ -0,0 +1,39 @@
5+/*
6+ * Copyright (C) 2014 Canonical Ltd
7+ *
8+ * This file is part of Ubuntu Clock App
9+ *
10+ * Ubuntu Clock App is free software: you can redistribute it and/or modify
11+ * it under the terms of the GNU General Public License version 3 as
12+ * published by the Free Software Foundation.
13+ *
14+ * Ubuntu Clock App is distributed in the hope that it will be useful,
15+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
16+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
17+ * GNU General Public License for more details.
18+ *
19+ * You should have received a copy of the GNU General Public License
20+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
21+ */
22+
23+import QtQuick 2.4
24+import Ubuntu.Components 1.2
25+
26+Column {
27+ id: fakeHeader
28+
29+ height: units.gu(9)
30+
31+ Rectangle {
32+ height: units.gu(7)
33+ width: parent.width
34+ color: Theme.palette.normal.background
35+ }
36+
37+ Rectangle {
38+ color: "#C9C9C9"
39+ height: units.gu(2)
40+ anchors.left: parent.left
41+ anchors.right: parent.right
42+ }
43+}
44
45=== modified file 'app/components/PageWithBottomEdge.qml'
46--- app/components/PageWithBottomEdge.qml 2015-09-29 16:18:17 +0000
47+++ app/components/PageWithBottomEdge.qml 2015-10-18 15:52:39 +0000
48@@ -77,7 +77,7 @@
49 property bool reloadBottomEdgePage: true
50
51 readonly property alias bottomEdgePage: edgeLoader.item
52- readonly property bool isReady: ((bottomEdge.y === 0) && bottomEdgePageLoaded && edgeLoader.item.active)
53+ readonly property bool isReady: ((bottomEdge.y === fakeHeader.height) && bottomEdgePageLoaded && edgeLoader.item.active) // CUSTOM change to flag to allow for FakeHeader height
54 readonly property bool isCollapsed: (bottomEdge.y === page.height)
55 readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
56
57@@ -91,7 +91,6 @@
58 signal bottomEdgeReleased()
59 signal bottomEdgeDismissed()
60
61-
62 function showBottomEdgePage(source, properties)
63 {
64 edgeLoader.setSource(source, properties)
65@@ -152,6 +151,9 @@
66
67 property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
68
69+ // CUSTOM
70+ property bool isAnimating: true
71+
72 enabled: mouseArea.enabled
73 visible: page.bottomEdgeEnabled
74 anchors {
75@@ -167,6 +169,10 @@
76 UbuntuNumberAnimation {
77 duration: UbuntuAnimation.SnapDuration
78 }
79+ // CUSTOM
80+ ScriptAction {
81+ script: tip.isAnimating = false
82+ }
83 }
84 }
85 }
86@@ -232,7 +238,6 @@
87 left: parent.left
88 right: parent.right
89 bottom: parent.bottom
90-
91 }
92 height: bottomEdge.tipHeight
93 z: 1
94@@ -265,15 +270,34 @@
95 }
96 }
97
98+ // CUSTOM fake header to make the page with bottom edge transition smoother
99+ FakeHeader {
100+ id: fakeHeader
101+
102+ anchors {
103+ left: parent.left
104+ right: parent.right
105+ }
106+ y: -fakeHeader.height + (fakeHeader.height * (page.height - bottomEdge.y)) / (page.height - fakeHeader.height)
107+ z: bgVisual.z + 1
108+
109+ Behavior on y {
110+ UbuntuNumberAnimation {
111+ duration: UbuntuAnimation.SnapDuration
112+ }
113+ }
114+ }
115+
116 Rectangle {
117 id: bottomEdge
118 objectName: "bottomEdge"
119
120 readonly property int tipHeight: units.gu(3)
121- readonly property int pageStartY: 0
122+ // CUSTOM value
123+ readonly property int pageStartY: fakeHeader.height
124
125 z: 1
126- color: weatherApp.backgroundColor
127+ color: Theme.palette.normal.background
128 clip: true
129 anchors {
130 left: parent.left
131@@ -281,6 +305,7 @@
132 }
133 height: page.height
134 y: height
135+
136 visible: !page.isCollapsed
137 state: "collapsed"
138 states: [
139@@ -290,6 +315,11 @@
140 target: bottomEdge
141 y: bottomEdge.height
142 }
143+ // CUSTOM
144+ PropertyChanges {
145+ target: fakeHeader
146+ y: -fakeHeader.height
147+ }
148 },
149 State {
150 name: "expanded"
151@@ -297,6 +327,11 @@
152 target: bottomEdge
153 y: bottomEdge.pageStartY
154 }
155+ // CUSTOM
156+ PropertyChanges {
157+ target: fakeHeader
158+ y: 0
159+ }
160 },
161 State {
162 name: "floating"
163@@ -313,12 +348,20 @@
164 to: "expanded"
165 SequentialAnimation {
166 alwaysRunToEnd: true
167-
168- SmoothedAnimation {
169- target: bottomEdge
170- property: "y"
171- duration: UbuntuAnimation.FastDuration
172- easing.type: Easing.Linear
173+ ParallelAnimation {
174+ SmoothedAnimation {
175+ target: bottomEdge
176+ property: "y"
177+ duration: UbuntuAnimation.FastDuration
178+ easing.type: Easing.Linear
179+ }
180+ // CUSTOM
181+ SmoothedAnimation {
182+ target: fakeHeader
183+ property: "y"
184+ duration: UbuntuAnimation.FastDuration
185+ easing.type: Easing.Linear
186+ }
187 }
188 SmoothedAnimation {
189 target: edgeLoader
190@@ -353,17 +396,24 @@
191 edgeLoader.item.active = false
192 }
193 }
194- SmoothedAnimation {
195- target: bottomEdge
196- property: "y"
197- duration: UbuntuAnimation.SlowDuration
198+ ParallelAnimation {
199+ SmoothedAnimation {
200+ target: bottomEdge
201+ property: "y"
202+ duration: UbuntuAnimation.SlowDuration
203+ }
204+ // CUSTOM
205+ SmoothedAnimation {
206+ target: fakeHeader
207+ property: "y"
208+ duration: UbuntuAnimation.SlowDuration
209+ }
210 }
211 ScriptAction {
212 script: {
213 // destroy current bottom page
214 if (page.reloadBottomEdgePage) {
215 edgeLoader.active = false
216- // tip will receive focus on page active true
217 } else {
218 tip.forceActiveFocus()
219 }
220@@ -379,10 +429,10 @@
221 Transition {
222 from: "floating"
223 to: "collapsed"
224- SmoothedAnimation {
225+ // MODIFIED
226+ UbuntuNumberAnimation {
227 target: bottomEdge
228- property: "y"
229- duration: UbuntuAnimation.FastDuration
230+ property: "opacity"
231 }
232 }
233 ]
234
235=== modified file 'app/ui/LocationsPage.qml'
236--- app/ui/LocationsPage.qml 2015-09-19 22:55:37 +0000
237+++ app/ui/LocationsPage.qml 2015-10-18 15:52:39 +0000
238@@ -32,6 +32,7 @@
239 states: [
240 PageHeadState {
241 id: defaultState
242+ head: locationsPage.head
243 name: "default"
244 actions: [
245 Action {
246@@ -40,9 +41,11 @@
247 onTriggered: mainPageStack.push(Qt.resolvedUrl("AddLocationPage.qml"))
248 }
249 ]
250- PropertyChanges {
251- target: locationsPage.head
252- actions: defaultState.actions
253+ backAction: Action {
254+ iconName: "down"
255+ onTriggered: {
256+ pageStack.pop()
257+ }
258 }
259 },
260 MultiSelectHeadState {
261
262=== modified file 'debian/changelog'
263--- debian/changelog 2015-10-18 15:18:05 +0000
264+++ debian/changelog 2015-10-18 15:52:39 +0000
265@@ -29,6 +29,7 @@
266 * Make the first column of the day delegate extra info wider to accommodate other
267 languages.
268 * Show the bottom loading animation (LoadingIndicator) on the LocationsPage. (LP: #1490040)
269+ * Add FakeHeader component to ease the bottom edge transition.
270
271 [ Andrew Hayzen ]
272 * Add mocked locations for autopilot and add a test using the data

Subscribers

People subscribed via source and target branches

to all changes: