Ubuntu Weather App

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

  1. add-fake-header
  2. Merge into reboot
Proposed by Victor Thompson
Status: Merged
Approved by: Andrew Hayzen
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 Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
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.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

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)
Revision history for this message
Andrew Hayzen (ahayzen) wrote :

LGTM :-)

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== 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 @@
1/*
2 * Copyright (C) 2014 Canonical Ltd
3 *
4 * This file is part of Ubuntu Clock App
5 *
6 * Ubuntu Clock App is free software: you can redistribute it and/or modify
7 * it under the terms of the GNU General Public License version 3 as
8 * published by the Free Software Foundation.
9 *
10 * Ubuntu Clock App is distributed in the hope that it will be useful,
11 * but WITHOUT ANY WARRANTY; without even the implied warranty of
12 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 * GNU General Public License for more details.
14 *
15 * You should have received a copy of the GNU General Public License
16 * along with this program. If not, see <http://www.gnu.org/licenses/>.
17 */
18
19import QtQuick 2.4
20import Ubuntu.Components 1.2
21
22Column {
23 id: fakeHeader
24
25 height: units.gu(9)
26
27 Rectangle {
28 height: units.gu(7)
29 width: parent.width
30 color: Theme.palette.normal.background
31 }
32
33 Rectangle {
34 color: "#C9C9C9"
35 height: units.gu(2)
36 anchors.left: parent.left
37 anchors.right: parent.right
38 }
39}
040
=== 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 @@
77 property bool reloadBottomEdgePage: true77 property bool reloadBottomEdgePage: true
7878
79 readonly property alias bottomEdgePage: edgeLoader.item79 readonly property alias bottomEdgePage: edgeLoader.item
80 readonly property bool isReady: ((bottomEdge.y === 0) && bottomEdgePageLoaded && edgeLoader.item.active)80 readonly property bool isReady: ((bottomEdge.y === fakeHeader.height) && bottomEdgePageLoaded && edgeLoader.item.active) // CUSTOM change to flag to allow for FakeHeader height
81 readonly property bool isCollapsed: (bottomEdge.y === page.height)81 readonly property bool isCollapsed: (bottomEdge.y === page.height)
82 readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)82 readonly property bool bottomEdgePageLoaded: (edgeLoader.status == Loader.Ready)
8383
@@ -91,7 +91,6 @@
91 signal bottomEdgeReleased()91 signal bottomEdgeReleased()
92 signal bottomEdgeDismissed()92 signal bottomEdgeDismissed()
9393
94
95 function showBottomEdgePage(source, properties)94 function showBottomEdgePage(source, properties)
96 {95 {
97 edgeLoader.setSource(source, properties)96 edgeLoader.setSource(source, properties)
@@ -152,6 +151,9 @@
152151
153 property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)152 property bool hidden: (activeFocus === false) || ((bottomEdge.y - units.gu(1)) < tip.y)
154153
154 // CUSTOM
155 property bool isAnimating: true
156
155 enabled: mouseArea.enabled157 enabled: mouseArea.enabled
156 visible: page.bottomEdgeEnabled158 visible: page.bottomEdgeEnabled
157 anchors {159 anchors {
@@ -167,6 +169,10 @@
167 UbuntuNumberAnimation {169 UbuntuNumberAnimation {
168 duration: UbuntuAnimation.SnapDuration170 duration: UbuntuAnimation.SnapDuration
169 }171 }
172 // CUSTOM
173 ScriptAction {
174 script: tip.isAnimating = false
175 }
170 }176 }
171 }177 }
172 }178 }
@@ -232,7 +238,6 @@
232 left: parent.left238 left: parent.left
233 right: parent.right239 right: parent.right
234 bottom: parent.bottom240 bottom: parent.bottom
235
236 }241 }
237 height: bottomEdge.tipHeight242 height: bottomEdge.tipHeight
238 z: 1243 z: 1
@@ -265,15 +270,34 @@
265 }270 }
266 }271 }
267272
273 // CUSTOM fake header to make the page with bottom edge transition smoother
274 FakeHeader {
275 id: fakeHeader
276
277 anchors {
278 left: parent.left
279 right: parent.right
280 }
281 y: -fakeHeader.height + (fakeHeader.height * (page.height - bottomEdge.y)) / (page.height - fakeHeader.height)
282 z: bgVisual.z + 1
283
284 Behavior on y {
285 UbuntuNumberAnimation {
286 duration: UbuntuAnimation.SnapDuration
287 }
288 }
289 }
290
268 Rectangle {291 Rectangle {
269 id: bottomEdge292 id: bottomEdge
270 objectName: "bottomEdge"293 objectName: "bottomEdge"
271294
272 readonly property int tipHeight: units.gu(3)295 readonly property int tipHeight: units.gu(3)
273 readonly property int pageStartY: 0296 // CUSTOM value
297 readonly property int pageStartY: fakeHeader.height
274298
275 z: 1299 z: 1
276 color: weatherApp.backgroundColor300 color: Theme.palette.normal.background
277 clip: true301 clip: true
278 anchors {302 anchors {
279 left: parent.left303 left: parent.left
@@ -281,6 +305,7 @@
281 }305 }
282 height: page.height306 height: page.height
283 y: height307 y: height
308
284 visible: !page.isCollapsed309 visible: !page.isCollapsed
285 state: "collapsed"310 state: "collapsed"
286 states: [311 states: [
@@ -290,6 +315,11 @@
290 target: bottomEdge315 target: bottomEdge
291 y: bottomEdge.height316 y: bottomEdge.height
292 }317 }
318 // CUSTOM
319 PropertyChanges {
320 target: fakeHeader
321 y: -fakeHeader.height
322 }
293 },323 },
294 State {324 State {
295 name: "expanded"325 name: "expanded"
@@ -297,6 +327,11 @@
297 target: bottomEdge327 target: bottomEdge
298 y: bottomEdge.pageStartY328 y: bottomEdge.pageStartY
299 }329 }
330 // CUSTOM
331 PropertyChanges {
332 target: fakeHeader
333 y: 0
334 }
300 },335 },
301 State {336 State {
302 name: "floating"337 name: "floating"
@@ -313,12 +348,20 @@
313 to: "expanded"348 to: "expanded"
314 SequentialAnimation {349 SequentialAnimation {
315 alwaysRunToEnd: true350 alwaysRunToEnd: true
316351 ParallelAnimation {
317 SmoothedAnimation {352 SmoothedAnimation {
318 target: bottomEdge353 target: bottomEdge
319 property: "y"354 property: "y"
320 duration: UbuntuAnimation.FastDuration355 duration: UbuntuAnimation.FastDuration
321 easing.type: Easing.Linear356 easing.type: Easing.Linear
357 }
358 // CUSTOM
359 SmoothedAnimation {
360 target: fakeHeader
361 property: "y"
362 duration: UbuntuAnimation.FastDuration
363 easing.type: Easing.Linear
364 }
322 }365 }
323 SmoothedAnimation {366 SmoothedAnimation {
324 target: edgeLoader367 target: edgeLoader
@@ -353,17 +396,24 @@
353 edgeLoader.item.active = false396 edgeLoader.item.active = false
354 }397 }
355 }398 }
356 SmoothedAnimation {399 ParallelAnimation {
357 target: bottomEdge400 SmoothedAnimation {
358 property: "y"401 target: bottomEdge
359 duration: UbuntuAnimation.SlowDuration402 property: "y"
403 duration: UbuntuAnimation.SlowDuration
404 }
405 // CUSTOM
406 SmoothedAnimation {
407 target: fakeHeader
408 property: "y"
409 duration: UbuntuAnimation.SlowDuration
410 }
360 }411 }
361 ScriptAction {412 ScriptAction {
362 script: {413 script: {
363 // destroy current bottom page414 // destroy current bottom page
364 if (page.reloadBottomEdgePage) {415 if (page.reloadBottomEdgePage) {
365 edgeLoader.active = false416 edgeLoader.active = false
366 // tip will receive focus on page active true
367 } else {417 } else {
368 tip.forceActiveFocus()418 tip.forceActiveFocus()
369 }419 }
@@ -379,10 +429,10 @@
379 Transition {429 Transition {
380 from: "floating"430 from: "floating"
381 to: "collapsed"431 to: "collapsed"
382 SmoothedAnimation {432 // MODIFIED
433 UbuntuNumberAnimation {
383 target: bottomEdge434 target: bottomEdge
384 property: "y"435 property: "opacity"
385 duration: UbuntuAnimation.FastDuration
386 }436 }
387 }437 }
388 ]438 ]
389439
=== 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 @@
32 states: [32 states: [
33 PageHeadState {33 PageHeadState {
34 id: defaultState34 id: defaultState
35 head: locationsPage.head
35 name: "default"36 name: "default"
36 actions: [37 actions: [
37 Action {38 Action {
@@ -40,9 +41,11 @@
40 onTriggered: mainPageStack.push(Qt.resolvedUrl("AddLocationPage.qml"))41 onTriggered: mainPageStack.push(Qt.resolvedUrl("AddLocationPage.qml"))
41 }42 }
42 ]43 ]
43 PropertyChanges {44 backAction: Action {
44 target: locationsPage.head45 iconName: "down"
45 actions: defaultState.actions46 onTriggered: {
47 pageStack.pop()
48 }
46 }49 }
47 },50 },
48 MultiSelectHeadState {51 MultiSelectHeadState {
4952
=== 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 @@
29 * Make the first column of the day delegate extra info wider to accommodate other29 * Make the first column of the day delegate extra info wider to accommodate other
30 languages.30 languages.
31 * Show the bottom loading animation (LoadingIndicator) on the LocationsPage. (LP: #1490040)31 * Show the bottom loading animation (LoadingIndicator) on the LocationsPage. (LP: #1490040)
32 * Add FakeHeader component to ease the bottom edge transition.
3233
33 [ Andrew Hayzen ]34 [ Andrew Hayzen ]
34 * Add mocked locations for autopilot and add a test using the data35 * Add mocked locations for autopilot and add a test using the data

Subscribers

People subscribed via source and target branches

to all changes: