Review LongTermPage to improve performance on mobile devices

The Separator has its implicitWidth and implicitHeight
changing when the screen rotates. This causes the layout
to be redrawn. Its implicitWidth is only used as margin, thus
rewriting the LongTermPage to use left/right margins instead of
left/right Separator as part of the layout.

The ApplicationInfo.isMobile property was not defined, which caused
an additional and unnecessary binding on page width/height changes.
When the screen rotates the width and height change, thus the
physicalSizeChanged signal is emitted twice. Use primaryOrientationChanged
instead now.

Those changes improve the performance when redrawing the screen while
rotating a device.

Change-Id: I09d3b370d45e7bb62ba20dd1fc7182747c468225
Reviewed-by: J-P Nurmi <jpnurmi@digia.com>

4 files changed, 37 insertions, 21 deletions

diff --git a/qml/pages/LongTermDayItem.qml b/qml/pages/LongTermDayItem.qml
index 931bfb5..61a13ac 100644
--- a/qml/pages/LongTermDayItem.qml
+++ b/qml/pages/LongTermDayItem.qml
@@ -45,7 +45,6 @@ import org.qtproject.demo.weather 1.0
 import QtQml.Models 2.1
 
 ObjectModel {
-    Separator {}
     TouchLabel {
         id: shortDay
         property bool useShortFormat: true
@@ -61,6 +60,8 @@ ObjectModel {
         Layout.alignment: Qt.AlignBaseline
     }
     Separator {
+        implicitWidth: 30
+        implicitHeight: rowHeight
         Layout.preferredHeight: rowHeight // sets the row height
         Layout.fillWidth: true
         Layout.minimumHeight: 5
@@ -74,6 +75,8 @@ ObjectModel {
         onStatusChanged: if (status === Image.Error) updateStatusBar(ApplicationInfo.constants.errorLoadingImage + ": " + source)
     }
     Separator {
+        implicitWidth: 30
+        implicitHeight: 30
         Layout.fillHeight: true
         Layout.fillWidth: true
         Layout.minimumHeight: 5
@@ -99,6 +102,8 @@ ObjectModel {
         Layout.alignment: Qt.AlignBaseline
     }
     Separator {
+        implicitWidth: 30
+        implicitHeight: 30
         Layout.fillHeight: true
         Layout.fillWidth: true
         Layout.minimumHeight: 5
@@ -121,13 +126,4 @@ ObjectModel {
         pixelSize: 18
         Layout.alignment: Qt.AlignBaseline
     }
-    Separator {}
-    Rectangle {
-        width:1
-        Layout.fillWidth: true
-        Layout.preferredHeight: 1
-        visible: !last
-        color: ApplicationInfo.colors.paleGray
-        Layout.columnSpan: 14
-    }
 }
diff --git a/qml/pages/LongTermPage.qml b/qml/pages/LongTermPage.qml
index 5354e64..67fbc91 100644
--- a/qml/pages/LongTermPage.qml
+++ b/qml/pages/LongTermPage.qml
@@ -64,9 +64,10 @@ BasicPage {
             Item {
                 id: item
                 width: scrollview.width
-                height: grid.implicitHeight
-                property int rowHeight: 118 * ApplicationInfo.ratio
+                implicitHeight: grid.implicitHeight
+                property int rowHeight: 118 * ApplicationInfo.ratio + 1
                 Repeater {
+                    id: repeater
                     model: cityLoaded ? ApplicationInfo.currentCityModel.daysCount() : null
                     Rectangle {
                         color: mouse.pressed ? ApplicationInfo.colors.smokeGray : ApplicationInfo.colors.white
@@ -81,15 +82,25 @@ BasicPage {
                                 nextPage()
                             }
                         }
+                        Rectangle {
+                            width: parent.width
+                            height: 1
+                            anchors.bottom: parent.bottom
+                            visible: index != (repeater.count - 1)
+                            color: ApplicationInfo.colors.paleGray
+                        }
                     }
                 }
                 GridLayout {
                     id: grid
-                    width: scrollview.width
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.leftMargin: ApplicationInfo.hMargin
+                    anchors.rightMargin: ApplicationInfo.hMargin
                     flow: GridLayout.LeftToRight
                     rowSpacing: 0
-                    columnSpacing: 5 * ApplicationInfo.ratio
-                    columns: r1.count && !!r1.itemAt(0) ? r1.itemAt(0).count - 1 : 0
+                    columnSpacing: 6 * ApplicationInfo.ratio
+                    columns: r1.count && !!r1.itemAt(0) ? r1.itemAt(0).count : 0
                     Repeater {
                         id: r1
                         model: cityLoaded ? ApplicationInfo.currentCityModel.daysCount() : null
diff --git a/src/applicationinfo.cpp b/src/applicationinfo.cpp
index f70f35a..901f80e 100644
--- a/src/applicationinfo.cpp
+++ b/src/applicationinfo.cpp
@@ -92,7 +92,7 @@ ApplicationInfo::ApplicationInfo(WeatherImageProvider *provider)
     m_currentIndexDay = -1;
 
     if (m_isMobile)
-        connect(qApp->primaryScreen(), SIGNAL(physicalSizeChanged(QSizeF)), this, SLOT(notifyPortraitMode()));
+        connect(qApp->primaryScreen(), SIGNAL(primaryOrientationChanged(Qt::ScreenOrientation)), this, SLOT(notifyPortraitMode(Qt::ScreenOrientation)));
 
     // Search in English
     // In order to use yr.no weather data service, refer to their terms
@@ -135,11 +135,18 @@ QString ApplicationInfo::getImagePath(const QString image)
     return QString("qrc:/weatherapp/qml/touch/images/%1").arg(image);
 }
 
-void ApplicationInfo::notifyPortraitMode()
+void ApplicationInfo::notifyPortraitMode(Qt::ScreenOrientation orientation)
 {
-    int width = qApp->primaryScreen()->geometry().width();
-    int height = qApp->primaryScreen()->geometry().height();
-    setIsPortraitMode(height > width);
+    switch (orientation) {
+    case Qt::LandscapeOrientation:
+    case Qt::InvertedLandscapeOrientation:
+        setIsPortraitMode(false);
+        break;
+    case Qt::PortraitOrientation:
+    case Qt::InvertedPortraitOrientation:
+        setIsPortraitMode(true);
+        break;
+    }
 }
 
 void ApplicationInfo::setIsPortraitMode(const bool newMode)
diff --git a/src/applicationinfo.h b/src/applicationinfo.h
index 0774af9..f8924b8 100644
--- a/src/applicationinfo.h
+++ b/src/applicationinfo.h
@@ -57,6 +57,7 @@ class ApplicationInfo : public QObject
 {
     Q_OBJECT
     Q_PROPERTY(int applicationWidth READ applicationWidth WRITE setApplicationWidth NOTIFY applicationWidthChanged)
+    Q_PROPERTY(bool isMobile READ isMobile CONSTANT)
     Q_PROPERTY(QObject *colors READ colors CONSTANT)
     Q_PROPERTY(QObject *constants READ constants CONSTANT)
     Q_PROPERTY(bool isPortraitMode READ isPortraitMode WRITE setIsPortraitMode NOTIFY portraitModeChanged)
@@ -72,6 +73,7 @@ class ApplicationInfo : public QObject
 public:
     ApplicationInfo(WeatherImageProvider *provider);
 
+    bool isMobile() const { return m_isMobile; }
     QQmlPropertyMap *colors() const { return m_colors; }
     QQmlPropertyMap *constants() const { return m_constants; }
 
@@ -99,7 +101,7 @@ public:
     Q_INVOKABLE void queryCities(const QString input);
 
 protected slots:
-    void notifyPortraitMode();
+    void notifyPortraitMode(Qt::ScreenOrientation);
 
 private slots:
     void replyFinished(QNetworkReply *reply);