Merge lp:~martin-borho/ubuntu-weather-app/conditional-weather into lp:ubuntu-weather-app/obsolete.trunk

[David Planella]

Initial tablet design of the Weather app.

Initial tablet design of the Weather app.

I'm proposing the branch on behalf of Martin (the original author) to advance work in terms of landing this for the MWC release today.

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

FAILED: Continuous integration, rev:203
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~martin-borho/ubuntu-weather-app/conditional-weather/+merge/207152/+edit-commit-message

http://91.189.93.70:8080/job/ubuntu-weather-app-ci/143/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-raring-amd64-ci/141
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-saucy-amd64-ci/141
    SUCCESS: http://91.189.93.70:8080/job/ubuntu-weather-app-trusty-amd64-ci/55

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

review: Needs Fixing (continuous-integration)

[David Planella (dpm)]

Looks awesome to me!

review: Approve

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

review: Approve (continuous-integration)

=== modified file 'components/AddLocationSheet.qml'
--- components/AddLocationSheet.qml	2014-02-08 13:25:26 +0000
+++ components/AddLocationSheet.qml	2014-02-19 12:16:52 +0000
@@ -37,7 +37,6 @@
             Cities.preList.forEach(function(loc) {
                 citiesModel.append(loc)
             })
-            Theme.palette.normal.backgroundText = "#656565" //color: Theme.palette.normal.baseText
         }
 
         Connections {
 
=== modified file 'components/CurrentWeather.qml'
--- components/CurrentWeather.qml	2014-02-15 14:31:10 +0000
+++ components/CurrentWeather.qml	2014-02-19 12:16:52 +0000
@@ -18,6 +18,7 @@
  */
 import QtQuick 2.0
 import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
 import "./" as Components
 
 Rectangle {
@@ -43,7 +44,7 @@
     property string speedScale: (mainView.settings["wind_units"] === "mph") ? "mph" : "km/h"
     property string precipScale: (mainView.settings["precip_units"] === "in") ? "in" : "mm"
 
-    property NumberAnimation appearAnimation: currentConditionIcon.appearAnimation
+    property NumberAnimation appearAnimation: frontrect.conditionIcon.appearAnimation
 
     width: parent.width
     anchors.fill: parent
@@ -77,7 +78,42 @@
         onToggle: {flipable.flipped = !flipable.flipped}
     }
 
-    Flipable {
+    Layouts {
+        objectName: "WeatherLayout"
+        id: layoutsCurrent
+        anchors.fill: parent
+        layouts: [
+            ConditionalLayout {
+                name: "WeatherItem"
+                when: layouts.width > units.gu(80)
+                Rectangle {
+                    color: "transparent"
+                    anchors.fill: parent
+                    CurrentWeatherFront {
+                         id: frontrect
+                         shapeSize: units.gu(18)
+                         anchors {
+                             horizontalCenter: parent.horizontalCenter
+                             verticalCenter: parent.verticalCenter
+                             verticalCenterOffset: -(parent.height*0.1);
+                         }
+                     }
+                     CurrentWeatherDetail {
+                         id: backrect
+                         height: parent.height/2
+                         shapeSize: units.gu(14)
+                         gridColumns: 4
+                         anchors {
+                             horizontalCenter: parent.horizontalCenter
+                             verticalCenter: parent.verticalCenter
+                             verticalCenterOffset: (parent.height*0.2);
+                         }
+                     }                     
+                     Components.ScrollingArea {}
+                }
+            }
+        ]
+        Flipable {
             id: flipable
             height: parent.height
             width:parent.width
@@ -85,231 +121,28 @@
             anchors.verticalCenterOffset: -units.gu(3)
             property bool flipped: false
 
-            MouseArea {
-                id: flippedarea
-                property bool wasHourlyScrolled: false
-                property int startY: 0
-                property double startTime: 0
-                property int sectionHeight: flippedarea.height/hourly.count
-                property int lastIndex: -1
-                anchors.fill: parent
-                anchors.top: parent.top
-                anchors.topMargin: units.gu(3.5)
-                onClicked: {
-                    mouse.accepted = true;
-                    if(!wasHourlyScrolled) {
-                        var movement = Math.round(startY-mouse.y);
-                        if(movement < 10 && movement > -10) {
-                            // flip to detail data
-                            flipable.flipped = !flipable.flipped;
-                        } else {
-                            // switch to next/prevoius day
-                            if(movement >= 10) {
-                                dailyForecastList.incrementCurrentIndex();
-                            } else if(movement <= -10) {
-                                dailyForecastList.decrementCurrentIndex();
-                            }
-                            dailyForecastList.positionViewAtIndex(dailyForecastList.currentIndex,ListView.SnapPosition);
-                            flipable.flipped = false;
-                        }
-                    }
-                }
-                onPressed: {
-                    wasHourlyScrolled = false;
-                    startY = mouse.y;
-                    startTime = new Date().getTime()
-                }
-                onPositionChanged: {
-                    mouse.accepted = true;
-                    var distance = (parent.height - mouse.y),
-                        now = new Date().getTime(),
-                        speed = distance/(now-startTime);
-                    if(speed < 2.3 && !flipable.flipped) {
-                        // slow scrolling detected
-                        var movement = Math.round(distance/sectionHeight);
-                        if(movement > 0) {
-                            var hourIndex = movement-1,
-                                currentHour = currentWeather.hourly.get(hourIndex);
-                            if( currentHour !== undefined && (lastIndex < 0 || lastIndex !== hourIndex)) {
-                                wasHourlyScrolled = true;
-                                currentConditionIcon.condition = currentWeather.hourly.get(hourIndex).icon;
-                                var temp = currentWeather.hourly.get(hourIndex)[mainView.settings["units"]].temp;
-                                currentConditionTempContent.currentTemp = temp;
-                                adjustBackground(Math.round(temp));
-                                var dateData =  currentWeather.hourly.get(hourIndex).date;
-                                var dateTime = new Date(dateData.year, dateData.month, dateData.date, dateData.hours, dateData.minutes)
-                                // TRANSLATORS: this is a date to which a time of the day will be appended
-                                var dateTimeString = Qt.formatDateTime(dateTime, i18n.tr('dddd, dd MMMM')) + ' - ' + Qt.formatTime(dateTime);
-                                dateComponent.dateString = dateTimeString;
-                                dateComponent.renderText();                                
-                                hourlyScrollEffect.start();
-                                lastIndex = hourIndex;
-                            }
-                        }
-                    }
-                }
-                onReleased: {
-                    if(wasHourlyScrolled) {
-                        // reset temp and date to current day
-                        var currentDayData = dayForecastModel.get(dailyForecastList.currentIndex);
-                        currentConditionIcon.condition = currentDayData.condIcon;
-                        currentConditionIcon.appearAnimation.start();
-                        currentConditionTempContent.currentTemp = currentDayData.temp;
-                        adjustBackground(Math.round(currentDayData.temp));
-                        dateComponent.dateString = currentDayData.date;
-                        dateComponent.renderText();
-                        lastIndex = -1;
-                    }
-                }
-            }
-
-            back:
-                Rectangle {
-                    id: backrect
-                    anchors.fill: parent
-                    color: "transparent"
-
-                    Column {
-                        id: leftColumn
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            horizontalCenterOffset: units.gu(-8)
-                            verticalCenter: parent.verticalCenter
-                        }
-                        spacing: units.gu(1)
-
-                        UbuntuShape {
-                            color: "#10000000"
-                            radius: "medium"
-
-                            width: units.gu(15)
-                            height: units.gu(15)
-
-                            Components.WeatherDetailComponent {
-                                value: currentWeather.humidity
-                                measure: i18n.tr("Humidity")
-                                unit: i18n.tr('%')
-                                anchors.fill: parent
-                            }
-                        }
-
-                        UbuntuShape {
-                            color: "#10000000"
-                            radius: "medium"
-
-                            width: units.gu(15)
-                            height: units.gu(15)
-
-                            Components.WeatherDetailComponent {
-                                objectName: "WindSpeedValue"
-                                value: currentWeather.windSpeed
-                                measure: i18n.tr("Wind speed")
-                                unit: currentWeather.speedScale + " " + currentWeather.windDir
-                                anchors.fill: parent
-                            }
-                        }
-                    }
-
-                    Column {
-                        id: rightColumn
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            horizontalCenterOffset: units.gu(8)
-                            verticalCenter: parent.verticalCenter
-                        }
-                        spacing: units.gu(1)
-
-                        UbuntuShape {
-                            color: "#10000000"
-                            radius: "medium"
-
-                            width: units.gu(15)
-                            height: units.gu(15)
-
-                            Components.WeatherDetailComponent {
-                                value: (currentWeather.propPrecip !== "") ? currentWeather.propPrecip: currentWeather.pressure
-                                measure: (currentWeather.propPrecip !== "") ?  getProcipLabel(): i18n.tr("Pressure")
-                                unit: (currentWeather.propPrecip !== "") ? i18n.tr("Percent") : i18n.tr("mbar")
-                                anchors.fill: parent
-                            }
-                        }
-
-                        UbuntuShape {
-                            color: "#10000000"
-                            radius: "medium"
-
-                            width: units.gu(15)
-                            height: units.gu(15)
-
-                            Components.WeatherDetailComponent {
-                                objectName: "PrecipitationValue"
-                                value: (currentWeather.uvIndex !== "") ? currentWeather.uvIndex : currentWeather.precipitation
-                                measure: (currentWeather.uvIndex !== "") ? i18n.tr("UV index"): i18n.tr("Precipitation")
-                                unit: (currentWeather.uvIndex !== "") ? getUvLabel() : i18n.tr("Percent");
-                                anchors.fill: parent
-                            }
-                        }
-                    }
-                }
-
-            front:
-                Rectangle {
-                    id: frontrect
-                    color: "transparent"
-                    anchors.fill: parent
-
-                    UbuntuShape {
-                        id: currentCondition
-                        color: "#10000000"
-                        radius: "medium"
-
-                        width: units.gu(15)
-                        height: units.gu(15)
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            horizontalCenterOffset: units.gu(-8)
-                            verticalCenter: parent.verticalCenter
-                        }
-
-                        Components.WeatherConditionIconComponent {
-                            id: currentConditionIcon
-                            anchors.centerIn: parent
-                            anchors.margins: units.gu(1)
-                            condition: currentWeather.icon
-                        }
-                    }
-
-                    UbuntuShape {
-                        id: currentConditionTemp
-                        color: "#10000000"
-                        radius: "medium"
-                        width: units.gu(15)
-                        height: units.gu(15)
-                        anchors {
-                            horizontalCenter: parent.horizontalCenter
-                            horizontalCenterOffset: units.gu(8)
-                            verticalCenter: parent.verticalCenter
-                        }
-
-                        Components.WeatherTemperatureComponent {
-                            id: currentConditionTempContent
-                            currentTemp: currentWeather.currentTemp
-                            tempScale: currentWeather.tempScale
-                            minTemp: currentWeather.minTemp
-                            maxTemp: currentWeather.maxTemp
-                            anchors.fill: parent
-                        }
-                    }
-                }
+            Components.ScrollingArea {}
+
+            back: CurrentWeatherDetail {
+                id: backrect
+                Layouts.item: "back"
+                anchors.fill: parent
+            }
+
+            front: CurrentWeatherFront {
+                id: frontrect
+                anchors.fill: parent
+                Layouts.item: "front"
+            }
 
             states:[
                 State {
                     name: "back"
-                    when: flipable.flipped
+                    when: flipable.flipped && layouts.width < units.gu(80)
                 },
                 State {
                     name: "front"
-                    when: !flipable.flipped
+                    when: !flipable.flipped && layouts.width < units.gu(80)
                 }
             ]
 
@@ -318,10 +151,10 @@
                     to:"back"
                     SequentialAnimation{
                         ParallelAnimation {
-                            NumberAnimation { target: currentCondition; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: units.gu(8); easing: UbuntuAnimation.StandardEasing }
-                            NumberAnimation { target: currentConditionTemp; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: units.gu(-8); easing: UbuntuAnimation.StandardEasing }
-                            NumberAnimation {target: currentConditionIcon; property: "opacity"; to:0; duration: UbuntuAnimation.SlowDuration}
-                            NumberAnimation {target: currentConditionTempContent; property: "opacity"; to:0; duration: UbuntuAnimation.SlowDuration}
+                            NumberAnimation { target: frontrect.condition; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: units.gu(8); easing: UbuntuAnimation.StandardEasing }
+                            NumberAnimation { target: frontrect.conditionTemp; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: units.gu(-8); easing: UbuntuAnimation.StandardEasing }
+                            NumberAnimation {target: frontrect.conditionIcon; property: "opacity"; to:0; duration: UbuntuAnimation.SlowDuration}
+                            NumberAnimation {target: frontrect.conditionTempContent; property: "opacity"; to:0; duration: UbuntuAnimation.SlowDuration}
                         }
                         ParallelAnimation {
                             NumberAnimation {target: backrect; property: "opacity"; to:1; duration: UbuntuAnimation.SlowDuration}
@@ -339,10 +172,10 @@
                             }else{
                                 backrect.opacity = 0;
                                 frontrect.opacity = 1;
-                                currentConditionIcon.opacity = 1;
-                                currentConditionTempContent.opacity = 1;
-                                currentCondition.anchors.verticalCenterOffset = 0;
-                                currentConditionTemp.anchors.verticalCenterOffset = 0;
+                                frontrect.conditionIcon.opacity = 1;
+                                frontrect.conditionTempContent.opacity = 1;
+                                frontrect.condition.anchors.verticalCenterOffset = 0;
+                                frontrect.conditionTemp.anchors.verticalCenterOffset = 0;
                             }
                         }
                     }
@@ -357,12 +190,12 @@
                     NumberAnimation {target: backrect; property: "opacity"; to:0; duration: UbuntuAnimation.SlowDuration}
                 }
                 ParallelAnimation{
-                    NumberAnimation {target: currentConditionIcon; property: "opacity"; to:1; duration: UbuntuAnimation.SlowDuration}
-                    NumberAnimation {target: currentConditionTempContent; property: "opacity"; to:1; duration: UbuntuAnimation.SlowDuration}
-                    NumberAnimation { target: currentCondition; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: 0; easing: UbuntuAnimation.StandardEasingReverse }
-                    NumberAnimation { target: currentConditionTemp; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: 0; easing: UbuntuAnimation.StandardEasingReverse }
+                    NumberAnimation {target: frontrect.conditionIcon; property: "opacity"; to:1; duration: UbuntuAnimation.SlowDuration}
+                    NumberAnimation {target: frontrect.conditionTempContent; property: "opacity"; to:1; duration: UbuntuAnimation.SlowDuration}
+                    NumberAnimation { target: frontrect.condition; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: 0; easing: UbuntuAnimation.StandardEasingReverse }
+                    NumberAnimation { target: frontrect.conditionTemp; property: "anchors.verticalCenterOffset"; duration: UbuntuAnimation.SlowDuration; to: 0; easing: UbuntuAnimation.StandardEasingReverse }
                 }
             }
         }
     }
-
+}
 
=== added file 'components/CurrentWeatherDetail.qml'
--- components/CurrentWeatherDetail.qml	1970-01-01 00:00:00 +0000
+++ components/CurrentWeatherDetail.qml	2014-02-19 12:16:52 +0000
@@ -0,0 +1,122 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program 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.
+ *
+ * This program 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/>.
+ *
+ * Authored by: Raúl Yeguas <[e-mail]>
+ *              Martin Borho <[e-mail]>
+ */
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
+import "./" as Components
+
+Rectangle {
+    id: backrect
+    color: "transparent"
+    property int shapeSize: units.gu(15)
+    property int gridColumns: 2
+
+    function getProcipLabel() {
+        // show the right Label, depending on precipitation type
+        return (currentWeather.precipType === "snow") ? i18n.tr("Chance of Snow") : i18n.tr("Chance of Rain")
+    }
+
+    function getUvLabel() {
+        var label = "",
+            uvInt = parseInt(currentWeather.uvIndex);
+        if(uvInt <= 2) {
+            label = i18n.tr("Low");
+        } else if(uvInt <= 5) {
+            label = i18n.tr("Moderate");
+        } else if(uvInt <= 8) {
+            label = i18n.tr("High");
+        } else if(uvInt <= 10) {
+            label = i18n.tr("Very high");
+        } else {
+            label = i18n.tr("Extreme");
+        }
+        return label;
+    }
+
+    Grid {
+        columns: gridColumns
+        spacing: units.gu(1)
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            verticalCenter: parent.verticalCenter
+        }
+
+        UbuntuShape {
+            color: "#10000000"
+            radius: "medium"
+
+            width: shapeSize
+            height: shapeSize
+
+            Components.WeatherDetailComponent {
+                value: currentWeather.humidity
+                measure: i18n.tr("Humidity")
+                unit: i18n.tr('%')
+                anchors.fill: parent
+            }
+        }
+
+        UbuntuShape {
+            color: "#10000000"
+            radius: "medium"
+
+            width: shapeSize
+            height: shapeSize
+
+            Components.WeatherDetailComponent {
+                objectName: "WindSpeedValue"
+                value: currentWeather.windSpeed
+                measure: i18n.tr("Wind speed")
+                unit: currentWeather.speedScale + " " + currentWeather.windDir
+                anchors.fill: parent
+            }
+        }
+
+        UbuntuShape {
+            color: "#10000000"
+            radius: "medium"
+
+            width: shapeSize
+            height: shapeSize
+
+            Components.WeatherDetailComponent {
+                value: (currentWeather.propPrecip !== "") ? currentWeather.propPrecip: currentWeather.pressure
+                measure: (currentWeather.propPrecip !== "") ?  getProcipLabel(): i18n.tr("Pressure")
+                unit: (currentWeather.propPrecip !== "") ? i18n.tr("Percent") : i18n.tr("mbar")
+                anchors.fill: parent
+            }
+        }
+
+        UbuntuShape {
+            color: "#10000000"
+            radius: "medium"
+
+            width: shapeSize
+            height: shapeSize
+
+            Components.WeatherDetailComponent {
+                objectName: "PrecipitationValue"
+                value: (currentWeather.uvIndex !== "") ? currentWeather.uvIndex : currentWeather.precipitation
+                measure: (currentWeather.uvIndex !== "") ? i18n.tr("UV index"): i18n.tr("Precipitation")
+                unit: (currentWeather.uvIndex !== "") ? getUvLabel() : currentWeather.precipScale;
+                anchors.fill: parent
+            }
+        }
+    }
+}
 
=== added file 'components/CurrentWeatherFront.qml'
--- components/CurrentWeatherFront.qml	1970-01-01 00:00:00 +0000
+++ components/CurrentWeatherFront.qml	2014-02-19 12:16:52 +0000
@@ -0,0 +1,76 @@
+/*
+ * Copyright (C) 2013 Canonical Ltd
+ *
+ * This program 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.
+ *
+ * This program 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/>.
+ *
+ * Authored by: Raúl Yeguas <[e-mail]>
+ *              Martin Borho <[e-mail]>
+ */
+import QtQuick 2.0
+import Ubuntu.Components 0.1
+import Ubuntu.Layouts 0.1
+import "./" as Components
+
+Rectangle {
+    id: frontrect
+    color: "transparent"
+
+    property alias condition: currentCondition
+    property alias conditionIcon: currentConditionIcon
+    property alias conditionTempContent: currentConditionTempContent
+    property alias conditionTemp: currentConditionTemp
+    property int shapeSize: units.gu(15)
+
+    UbuntuShape {
+        id: currentCondition
+        color: "#10000000"
+        radius: "medium"
+
+        width: shapeSize
+        height: shapeSize
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            horizontalCenterOffset: -(shapeSize*0.53)//units.gu(-8)
+            verticalCenter: parent.verticalCenter
+        }
+
+        Components.WeatherConditionIconComponent {
+            id: currentConditionIcon
+            anchors.centerIn: parent
+            anchors.margins: units.gu(1)
+            condition: currentWeather.icon
+        }
+    }
+
+    UbuntuShape {
+        id: currentConditionTemp
+        color: "#10000000"
+        radius: "medium"
+        width: shapeSize
+        height: shapeSize
+        anchors {
+            horizontalCenter: parent.horizontalCenter
+            horizontalCenterOffset: shapeSize*0.53//units.gu(8)
+            verticalCenter: parent.verticalCenter
+        }
+
+        Components.WeatherTemperatureComponent {
+            id: currentConditionTempContent
+            currentTemp: Math.round(currentWeather.currentTemp)
+            tempScale: currentWeather.tempScale
+            minTemp: Math.round(currentWeather.minTemp)
+            maxTemp: Math.round(currentWeather.maxTemp)
+            anchors.fill: parent
+        }
+    }
+}
 
=== modified file 'components/LocationTab.qml'
--- components/LocationTab.qml	2014-02-15 14:31:10 +0000
+++ components/LocationTab.qml	2014-02-19 12:16:52 +0000
@@ -19,6 +19,8 @@
 import QtQuick 2.0
 import Ubuntu.Components.Popups 0.1
 import Ubuntu.Components 0.1
+import Ubuntu.Components.ListItems 0.1 as ListItem
+import Ubuntu.Layouts 0.1
 import QtFeedback 5.0
 
 Tab {
@@ -128,13 +130,103 @@
             id: dayForecastModel
         }
 
+        Layouts {
+            objectName: "WeatherLayout"
+            id: layouts
+            anchors.fill: parent
+            layouts: [
+                ConditionalLayout {
+                    name: "WeatherData"
+                    when: layouts.width > units.gu(80)
+                    Rectangle {
+                        anchors.fill: parent
+                        color: "transparent"
+                    ItemLayout {
+                        item: "ForecastList"
+                        width: parent.width*0.625
+                        height:parent.height
+                    }
+                    ItemLayout {
+                        item: "TabFooter"
+                        width: mainView.width*0.625
+                        height: units.gu(8)
+                        anchors.bottom: parent.bottom
+                        clip: true
+                    }
+                    Rectangle {
+                        width: parent.width*0.375
+                        height:parent.height
+                        anchors.right: parent.right
+                        anchors.top: parent.top
+                        color: "black"
+                        opacity: 0.3
+                    }
+                    Rectangle {
+                        id: sideLabel
+                        anchors.top: parent.top
+                        anchors.right: parent.right
+                        width: parent.width*0.375
+                        height: units.gu(6)
+                        color: "transparent"
+                        Label {
+                            text: i18n.tr("Forecast")
+                            fontSize: "large"
+                            anchors.left:parent.left
+                            anchors.leftMargin: units.gu(3)
+                            anchors.verticalCenter: parent.verticalCenter
+                        }
+                    }
+                    ListView {
+                        id: locationDailySide
+                        width: (parent.width*0.375)-units.gu(1)
+                        height: parent.height-sideLabel.height-units.gu(9)
+                        anchors.right: parent.right
+                        anchors.top: sideLabel.bottom
+                        model:dayForecastModel
+                        clip: true
+                        // TODO doubled code, to refactor
+                        property var conditionIcon: {
+                            "clear_day": "02",
+                            "clear_night": "12",
+                            "few_clouds_day": "05",
+                            "few_clouds_night": "04",
+                            "scattered_clouds_day": "05",
+                            "scattered_clouds_night": "04",
+                            "broken_clouds_day": "03",
+                            "broken_clouds_night": "03",
+                            "mostly_cloudy": "03",
+                            "shower_rain_day": "09",
+                            "shower_rain_night": "09",
+                            "rain_day": "09",
+                            "rain_night": "09",
+                            "thunderstorm_day": "13",
+                            "thunderstorm_night": "13",
+                            "snow_day": "14",
+                            "snow_night": "14",
+                            "chance_snow_day": "11",
+                            "chances_now_night": "11",
+                            "snow_shower": "11",
+                            "mist_day": "06",
+                            "mist_night": "06"
+                        }
+                        delegate: ListItem.Subtitled {
+                            subText:  "H:"+Math.round(temp)+"  L:"+Math.round(tempMin)
+                            text: date
+                            //selected: (dailyForecastList.currentIndex == index)
+                            iconSource: "../resources/images/"+locationDailySide.conditionIcon[dayForecastModel.get(index).condIcon]+".png"
+                            onClicked: { dailyForecastList.currentIndex = index }
+                        }
+                    }
+                }
+            }
+        ]
         ListView {
             id: dailyForecastList
             objectName: "DailyForecastList"
             width: parent.width
             height:parent.height
             model:dayForecastModel
-
+            Layouts.item: "ForecastList"
             onCurrentIndexChanged: {
                 if(visible) {
                     var data = dayForecastModel.get(currentIndex)
@@ -195,11 +287,13 @@
             }
             LastUpdatedComponent{
                 id: lastUpdatedComponent
-                anchors.bottom: (tabFooter.visible) ? tabFooter.top : parent.bottom
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: (tabFooter.visible) ? units.gu(8) : 0
             }
             TabFooter {
                 id:tabFooter
                 objectName: "TabFooter"
+                Layouts.item: "TabFooter"
                 visible: !dataProviderLogo.visible
             }
             Image {
@@ -236,7 +330,7 @@
                 }
             }            
         }
-
+        }
 
         tools: ToolbarItems {
             id: pageTools
 
=== added file 'components/ScrollingArea.qml'
--- components/ScrollingArea.qml	1970-01-01 00:00:00 +0000
+++ components/ScrollingArea.qml	2014-02-19 12:16:52 +0000
@@ -0,0 +1,112 @@
+import QtQuick 2.0
+
+MouseArea {
+    id: flippedarea
+    property bool wasHourlyScrolled: false
+    property int startY: 0
+    property double startTime: 0
+    property int sectionHeight: flippedarea.height/hourly.count
+    property int lastIndex: -1
+    anchors.fill: parent
+    anchors.top: parent.top
+    anchors.topMargin: units.gu(3.5)
+    onClicked: {
+        mouse.accepted = true;
+        if(!wasHourlyScrolled) {
+            var movement = Math.round(startY-mouse.y);
+            if(movement < 10 && movement > -10) {
+                // flip to detail data
+                flipable.flipped = !flipable.flipped;
+            } else {
+                // switch to next/prevoius day
+                if(movement >= 10) {
+                    dailyForecastList.incrementCurrentIndex();
+                } else if(movement <= -10) {
+                    dailyForecastList.decrementCurrentIndex();
+                }
+                dailyForecastList.positionViewAtIndex(dailyForecastList.currentIndex,ListView.SnapPosition);
+                flipable.flipped = false;
+            }
+        }
+    }
+    onPressed: {
+        wasHourlyScrolled = false;
+        startY = mouse.y;
+        startTime = new Date().getTime()
+    }
+    onPositionChanged: {
+        mouse.accepted = true;
+        var distance = (parent.height - mouse.y),
+            now = new Date().getTime(),
+            speed = distance/(now-startTime);
+        if(speed < 2.3 && !flipable.flipped) {
+            // slow scrolling detected
+            var movement = Math.round(distance/sectionHeight);
+            if(movement > 0) {
+                var hourIndex = movement-1,
+                    currentHour = currentWeather.hourly.get(hourIndex);
+                if( currentHour !== undefined && (lastIndex < 0 || lastIndex !== hourIndex)) {
+                    wasHourlyScrolled = true;
+                    frontrect.conditionIcon.condition = currentHour.icon;
+                    var temp = currentHour[mainView.settings["units"]].temp;
+                    frontrect.conditionTempContent.currentTemp = temp;
+                    adjustBackground(Math.round(temp));
+                    // adjust detail data
+                    currentWeather.humidity = currentHour.humidity
+                    currentWeather.windSpeed = currentHour[mainView.settings["units"]].windSpeed
+                    currentWeather.windDir = currentHour.windDir
+                    if(currentHour.propPrecip !== undefined && currentHour.propPrecip !== "") {
+                        currentWeather.propPrecip = currentHour.propPrecip;
+                    } else {
+                        currentWeather.pressure = currentHour.pressure
+                    }
+                    if(currentHour.uvIndex !== undefined && currentHour.uvIndex !== "") {
+                        currentWeather.uvIndex = currentHour.uvIndex;
+                    } else {
+                        var precip_units = (mainView.settings.precip_units === 'in') ? 'imperial' : 'metric';
+                        currentWeather.precipitation = +(currentHour[precip_units].rain || currentHour[precip_units].snow || 0).toFixed(2)
+                    }
+                    // adjust date data
+                    var dateData =  currentHour.date;
+                    var dateTime = new Date(dateData.year, dateData.month, dateData.date, dateData.hours, dateData.minutes)
+                    // TRANSLATORS: this is a date to which a time of the day will be appended
+                    var dateTimeString = Qt.formatDateTime(dateTime, i18n.tr('dddd, dd MMMM')) + ' - ' + Qt.formatTime(dateTime);
+                    dateComponent.dateString = dateTimeString;
+                    dateComponent.renderText();
+                    //
+                    hourlyScrollEffect.start();
+                    lastIndex = hourIndex;
+                }
+            }
+        }
+    }
+    onReleased: {
+        if(wasHourlyScrolled) {
+            // reset temp and date to current day
+            var currentDayData = dayForecastModel.get(dailyForecastList.currentIndex);
+            frontrect.conditionIcon.condition = currentDayData.condIcon;
+            frontrect.conditionIcon.appearAnimation.start();
+            frontrect.conditionTempContent.currentTemp = currentDayData.temp;
+            // set back detail data
+            currentWeather.humidity = currentDayData.humid
+            currentWeather.windSpeed = currentDayData.wind_speed
+            currentWeather.windDir = currentDayData.wind_dir
+            if(currentDayData.prop_precip !== undefined && currentDayData.prop_precip !== "") {
+                currentWeather.propPrecip = currentDayData.prop_precip;
+            } else {
+                currentWeather.pressure = currentDayData.press
+            }
+            if(currentDayData.uv !== undefined && currentDayData.uv !== "") {
+                currentWeather.uvIndex = currentDayData.uv;
+            } else {
+                var precip_units = (mainView.settings.precip_units === 'in') ? 'imperial' : 'metric';
+                currentWeather.precipitation = currentDayData.precip
+            }
+            // set back date data
+            adjustBackground(Math.round(currentDayData.temp));
+            dateComponent.dateString = currentDayData.date;
+            dateComponent.renderText();
+            lastIndex = -1;
+        }
+    }
+}
 
=== modified file 'components/WeatherApi.js'
--- components/WeatherApi.js	2014-02-11 18:00:07 +0000
+++ components/WeatherApi.js	2014-02-19 12:16:52 +0000
@@ -214,20 +214,20 @@
             date: date,
             metric: {
                 temp:data.main.temp,
-                windSpeed: calcKmh(data.main.speed),
-                rain: data.main.rain || 0,
-                snow: data.main.snow || 0
+                windSpeed: calcKmh(data.wind.speed),
+                rain: data.main.rain || ((data.rain) ? data.rain["3h"] : false ) || 0,
+                snow: data.main.snow || ((data.snow) ? data.snow["3h"] : false ) || 0
             },
             imperial: {
                 temp: calcFahrenheit(data.main.temp),
-                windSpeed: calcMph(data.main.speed),
-                rain: calcInch(data.main.rain || 0),
-                snow: calcInch(data.main.snow || 0)
+                windSpeed: calcMph(data.wind.speed),
+                rain: calcInch(data.main.rain || ((data.rain) ? data.rain["3h"] : false ) || 0),
+                snow: calcInch(data.main.snow || ((data.snow) ? data.snow["3h"] : false ) ||0)
             },
             humidity: data.main.humidity,
             pressure: data.main.pressure,
-            windDeg: data.main.deg,
-            windDir: calcWindDir(data.main.deg),
+            windDeg: data.wind.deg,
+            windDir: calcWindDir(data.wind.deg),
             icon: _icon_map[data.weather[0].icon],
             condition: data.weather[0]
         };
 
=== added file 'key.js'
--- key.js	1970-01-01 00:00:00 +0000
+++ key.js	2014-02-19 12:16:52 +0000
@@ -0,0 +1,1 @@
+var twcKey = "";
 
=== removed file 'key.js'
--- key.js	2014-02-15 14:51:47 +0000
+++ key.js	1970-01-01 00:00:00 +0000
@@ -1,1 +0,0 @@
-var twcKey = "";
 
=== modified file 'tests/autopilot/ubuntu_weather_app/tests/test_settings.py'
--- tests/autopilot/ubuntu_weather_app/tests/test_settings.py	2014-01-24 13:58:48 +0000
+++ tests/autopilot/ubuntu_weather_app/tests/test_settings.py	2014-02-19 12:16:52 +0000
@@ -58,7 +58,7 @@
             'QQuickText', objectName='CurrentTempText')
         if units == "imperial":
             self.assertThat(today_temp_scale.text, Eventually(Equals(u'°F')))
-            self.assertThat(today_temp.text, Eventually(Equals(u'26')))
+            self.assertThat(today_temp.text, Eventually(Equals(u'27')))
             self.assertThat(tomorrow_temp.text, Eventually(Equals(u'23')))
         else:
             self.assertThat(today_temp_scale.text, Eventually(Equals(u'°C')))