← Back to team overview

ubuntu-touch-coreapps-reviewers team mailing list archive

[Merge] lp:~vthompson/ubuntu-weather-app/reboot-loading-animation into lp:ubuntu-weather-app/reboot

 

Victor Thompson has proposed merging lp:~vthompson/ubuntu-weather-app/reboot-loading-animation into lp:ubuntu-weather-app/reboot.

Commit message:
* Add loading indicator

Requested reviews:
  Ubuntu Weather Developers (ubuntu-weather-dev)

For more details, see:
https://code.launchpad.net/~vthompson/ubuntu-weather-app/reboot-loading-animation/+merge/257487

* Add loading indicator

This indicator is from the Dash [1].

1 - http://bazaar.launchpad.net/~unity-team/unity8/trunk/view/head:/qml/Dash/Dash.qml#L248
-- 
Your team Ubuntu Weather Developers is requested to review the proposed merge of lp:~vthompson/ubuntu-weather-app/reboot-loading-animation into lp:ubuntu-weather-app/reboot.
=== added file 'app/components/LoadingIndicator.qml'
--- app/components/LoadingIndicator.qml	1970-01-01 00:00:00 +0000
+++ app/components/LoadingIndicator.qml	2015-04-26 23:50:02 +0000
@@ -0,0 +1,87 @@
+/*
+ * Copyright (C) 2015 Canonical Ltd
+ *  
+ * This file is part of Ubuntu Weather App
+ *
+ * Ubuntu Weather 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 Weather 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.3
+import Ubuntu.Components 1.1
+
+Rectangle {
+    id: indicator
+    objectName: "processingIndicator"
+    anchors {
+        left: parent.left
+        right: parent.right
+        bottom: parent.bottom
+        bottomMargin: Qt.inputMethod.keyboardRectangle.height
+    }
+    height: units.dp(3)
+    color: "#50000000"
+    opacity: 0
+    visible: opacity > 0
+
+    readonly property bool processing: loading
+
+    Behavior on opacity {
+        UbuntuNumberAnimation { duration: UbuntuAnimation.FastDuration }
+    }
+
+    onProcessingChanged: {
+        if (processing) delay.start();
+        else if (!persist.running) indicator.opacity = 0;
+    }
+
+    Timer {
+        id: delay
+        interval: 200
+        onTriggered: if (indicator.processing) {
+            persist.restart();
+            indicator.opacity = 1;
+        }
+    }
+
+    Timer {
+        id: persist
+        interval: 2 * UbuntuAnimation.SleepyDuration - UbuntuAnimation.FastDuration
+        onTriggered: if (!indicator.processing) indicator.opacity = 0
+    }
+
+    Rectangle {
+        id: orange
+        anchors { top: parent.top;  bottom: parent.bottom }
+        width: parent.width / 4
+        color: UbuntuColors.orange
+
+        SequentialAnimation {
+            running: indicator.visible
+            loops: Animation.Infinite
+            XAnimator {
+                from: -orange.width / 2
+                to: indicator.width - orange.width / 2
+                duration: UbuntuAnimation.SleepyDuration
+                easing.type: Easing.InOutSine
+                target: orange
+            }
+            XAnimator {
+                from: indicator.width - orange.width / 2
+                to: -orange.width / 2
+                duration: UbuntuAnimation.SleepyDuration
+                easing.type: Easing.InOutSine
+                target: orange
+            }
+        }
+    }
+}

=== modified file 'app/ubuntu-weather-app.qml'
--- app/ubuntu-weather-app.qml	2015-03-16 13:43:00 +0000
+++ app/ubuntu-weather-app.qml	2015-04-26 23:50:02 +0000
@@ -55,6 +55,11 @@
     property int indexAtRefresh: -1
 
     /*
+      Is the app loading?
+    */
+    property bool loading: false
+
+    /*
       (re)load the pages on completion
     */
     Component.onCompleted: {
@@ -97,6 +102,7 @@
     function refreshData(from_storage, force_refresh) {
         from_storage = from_storage || false
         force_refresh = force_refresh || false
+        loading = true
         if(from_storage === true && force_refresh !== true) {
             storage.getLocations(fillPages);
         } else {

=== modified file 'app/ui/HomePage.qml'
--- app/ui/HomePage.qml	2015-04-19 21:10:44 +0000
+++ app/ui/HomePage.qml	2015-04-26 23:50:02 +0000
@@ -133,6 +133,7 @@
 
                 if (model > 0) {
                     pullToRefresh.refreshing = false
+                    loading = false
                     loaded = true
                 }
             }
@@ -154,4 +155,8 @@
             }
         }
     }
+
+    LoadingIndicator {
+        id: loadingIndicator
+    }
 }


Follow ups