Adjust the pages design dynamically for narrow screens

Change-Id: I64a46ef883cd4d12848ba66b34a45d0916ac4796
Reviewed-by: Andrew Knight <andrew.knight@digia.com>

9 files changed, 115 insertions, 67 deletions

diff --git a/qml/main.qml b/qml/main.qml
index ceb87ff..e9ac40e 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -147,9 +147,11 @@ ApplicationWindow {
     }
 
     statusBar: StatusBar {
+        id: statusbar
         width: parent.width
         opacity: label.text !== "" ? 1 : 0
-        height: label.text !== "" ? 65 * ApplicationInfo.ratio : 0
+        property real statusBarHeight: 65 * ApplicationInfo.ratio
+        height: label.text !== "" ? statusBarHeight : 0
 
         Behavior on height { NumberAnimation {easing.type: Easing.OutSine}}
         Behavior on opacity { NumberAnimation {}}
@@ -186,6 +188,17 @@ ApplicationWindow {
             color: ApplicationInfo.colors.mediumGray
             verticalAlignment: Text.AlignVCenter
             horizontalAlignment: Text.AlignHCenter
+            function decreaseFontSizeOnNarrowScreen() {
+                if (label.implicitHeight > statusbar.statusBarHeight)
+                    pixelSize = Math.floor(pixelSize * statusbar.statusBarHeight/label.implicitHeight)
+            }
+            onTextChanged: {
+                if (text === "")
+                    pixelSize = 18
+                else
+                    decreaseFontSizeOnNarrowScreen()
+            }
+            onWidthChanged: decreaseFontSizeOnNarrowScreen()
         }
     }
 }
diff --git a/qml/pages/BasicPage.qml b/qml/pages/BasicPage.qml
index dc62239..81755d6 100644
--- a/qml/pages/BasicPage.qml
+++ b/qml/pages/BasicPage.qml
@@ -106,7 +106,10 @@ Item {
             anchors.right: parent.right
             spacing: 0
             anchors.verticalCenter: parent.verticalCenter
-            Separator {}
+            Separator {
+                Layout.fillWidth: false
+                Layout.preferredWidth: ApplicationInfo.hMargin
+            }
             Image {
                 source: ApplicationInfo.getImagePath("BackArrow.png")
                 Layout.preferredWidth: 22 * ApplicationInfo.ratio
@@ -151,7 +154,10 @@ Item {
                 letterSpacing: -0.15
                 Layout.alignment: Qt.AlignBaseline
             }
-            Separator {}
+            Separator {
+                Layout.fillWidth: false
+                Layout.preferredWidth: ApplicationInfo.hMargin
+            }
         }
         Rectangle {
             width: parent.width
diff --git a/qml/pages/LongTermDayItem.qml b/qml/pages/LongTermDayItem.qml
index 3317b83..ef30e0b 100644
--- a/qml/pages/LongTermDayItem.qml
+++ b/qml/pages/LongTermDayItem.qml
@@ -60,10 +60,10 @@ ObjectModel {
         Layout.alignment: Qt.AlignBaseline
     }
     Separator {
-        implicitWidth: 30
-        implicitHeight: rowHeight
+        implicitWidth: 5
+        implicitHeight: 5
         Layout.preferredHeight: rowHeight // sets the row height
-        Layout.fillWidth: true
+        Layout.fillHeight: false
         Layout.minimumHeight: 5
         Layout.minimumWidth: 5
     }
@@ -75,10 +75,9 @@ ObjectModel {
         onStatusChanged: if (status === Image.Error) updateStatusBar(ApplicationInfo.constants.errorLoadingImage + ": " + source)
     }
     Separator {
-        implicitWidth: 30
-        implicitHeight: 30
-        Layout.fillHeight: true
-        Layout.fillWidth: true
+        implicitWidth: 5
+        implicitHeight: 5
+        Layout.fillHeight: false
         Layout.minimumHeight: 5
         Layout.minimumWidth: 5
     }
@@ -102,12 +101,11 @@ ObjectModel {
         Layout.alignment: Qt.AlignBaseline
     }
     Separator {
-        implicitWidth: 30
-        implicitHeight: 30
-        Layout.fillHeight: true
-        Layout.fillWidth: true
+        implicitWidth: 5
+        implicitHeight: 5
         Layout.minimumHeight: 5
         Layout.minimumWidth: 5
+        visible: !isNarrow
     }
     Image {
         property int windIconSize: 32 * ApplicationInfo.ratio
@@ -115,16 +113,19 @@ ObjectModel {
         Layout.preferredHeight: windIconSize
         Layout.preferredWidth: windIconSize
         onStatusChanged: if (status === Image.Error) updateStatusBar(ApplicationInfo.constants.errorLoadingImage + ": " + source)
+        visible: !isNarrow
     }
     TouchLabel {
         text: Utils.getWindSpeed(dayModel.afternoonIndex, dayModel)
         pixelSize: 24
         Layout.alignment: Qt.AlignBaseline
+        visible: !isNarrow
     }
     TouchLabel {
         //: The wind speed unit, meters per second or miles per hour
         text: Utils.isMetricSystem() ? qsTr("m/s") : qsTr("mph")
         pixelSize: 18
         Layout.alignment: Qt.AlignBaseline
+        visible: !isNarrow
     }
 }
diff --git a/qml/pages/LongTermPage.qml b/qml/pages/LongTermPage.qml
index afd6339..fde1f5b 100644
--- a/qml/pages/LongTermPage.qml
+++ b/qml/pages/LongTermPage.qml
@@ -97,10 +97,35 @@ BasicPage {
                     anchors.right: parent.right
                     anchors.leftMargin: ApplicationInfo.hMargin
                     anchors.rightMargin: ApplicationInfo.hMargin
+                    property bool isNarrowScreen: false
+                    property int itemsInModelCount: r1.count && !!r1.itemAt(0) ? r1.itemAt(0).count : 0
+
+                    function checkIfNarrowScreen() {
+                        if (itemsInModelCount !== 0 && ApplicationInfo.isPortraitMode && !isNarrowScreen && grid.implicitWidth > grid.width) {
+                            isNarrowScreen = true
+                            columns = itemsInModelCount - 4
+                        }
+                    }
+
+                    onWidthChanged: checkIfNarrowScreen()
+                    onImplicitWidthChanged: checkIfNarrowScreen()
+                    Connections {
+                        target: ApplicationInfo
+                        onIsPortraitModeChanged: {
+                            if (grid.itemsInModelCount !== 0) {
+                                if (!ApplicationInfo.isPortraitMode) {
+                                    grid.isNarrowScreen = false
+                                    grid.columns = grid.itemsInModelCount
+                                }
+                            }
+                        }
+                    }
+
                     flow: GridLayout.LeftToRight
                     rowSpacing: 0
                     columnSpacing: 6 * ApplicationInfo.ratio
-                    columns: r1.count && !!r1.itemAt(0) ? r1.itemAt(0).count : 0
+
+                    columns: grid.itemsInModelCount
                     Repeater {
                         id: r1
                         model: cityLoaded ? ApplicationInfo.currentCityModel.daysCount() : null
@@ -110,6 +135,7 @@ BasicPage {
                             property int last: dayIndex === r1.count
                             property var dayModel: ApplicationInfo.currentCityModel.getDayModel(dayIndex)
                             property int rowHeight: item.rowHeight
+                            property bool isNarrow: grid.isNarrowScreen
                         }
                     }
                 }
diff --git a/qml/pages/OneDayPage.qml b/qml/pages/OneDayPage.qml
index ee19b12..d559198 100644
--- a/qml/pages/OneDayPage.qml
+++ b/qml/pages/OneDayPage.qml
@@ -64,10 +64,25 @@ BasicPage {
         id: splitview
         flow: !ApplicationInfo.isPortraitMode ? GridLayout.LeftToRight : GridLayout.TopToBottom
         property bool singleItem: sliderItem.slider.minimumValue === sliderItem.slider.maximumValue
-        Separator {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
+        property bool init: false
+
+        Connections {
+            target: page3
+            onHeightChanged: adjustHeight()
+        }
+
+        function adjustHeight() {
+            if (!init) {
+                var adjust = (splitview.implicitHeight > splitview.height) ? Math.floor(splitview.height*10/splitview.implicitHeight)/10 : 1
+                if (adjust < 1 && adjust > 0) {
+                    init = true
+                    zoom.adjustementNeeded = adjust
+                    sliderItem.adjustementNeeded = adjust
+                }
+            }
         }
+
+        Separator {}
         OneDayZoomItem {
             id: zoom
             slider: sliderItem.slider
@@ -75,22 +90,15 @@ BasicPage {
             singleItem: splitview.singleItem
         }
         Separator {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
             implicitHeight: 10 * ApplicationInfo.ratio
             implicitWidth: 10 * ApplicationInfo.ratio
-            Layout.minimumWidth: 0
-            Layout.minimumHeight: 0
-            visible: !singleItem
+            visible: !singleItem && !init
         }
         OneDaySliderItem {
             id: sliderItem
             visible: !singleItem
             model: page3.dayModel
         }
-        Separator {
-            Layout.fillHeight: true
-            Layout.fillWidth: true
-        }
+        Separator {}
     }
 }
diff --git a/qml/pages/OneDaySliderItem.qml b/qml/pages/OneDaySliderItem.qml
index 8aae832..a7aba48 100644
--- a/qml/pages/OneDaySliderItem.qml
+++ b/qml/pages/OneDaySliderItem.qml
@@ -49,24 +49,24 @@ GridLayout {
 
     property alias slider: touchSlider
     property QtObject model
+    property real adjustementNeeded: 1
+    property real sliderGapWidth: adjustementNeeded * ApplicationInfo.sliderGapWidth
+    property real sliderHandleWidth: adjustementNeeded * ApplicationInfo.sliderHandleWidth
+    property real sliderHandleHeight: adjustementNeeded * ApplicationInfo.sliderHandleHeight
 
-    Separator {
-        Layout.fillHeight: true
-        Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false
-        Layout.minimumHeight: 10
-        Layout.minimumWidth: 0
-    }
+    Separator {}
     Canvas {
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
         id: canvasSlider
-        property int sliderItemWidth : (model.periodCount() + 1) * ApplicationInfo.sliderGapWidth
+        property int sliderItemWidth : (model.periodCount() + 1) * sliderGapWidth
         property var rangeTemp: Utils.getMaxMinTemp(model)
 
         implicitWidth: sliderItemWidth
         implicitHeight: rowTemp.implicitHeight + column.implicitHeight
 
         property int marginsTemperaturesDrawing: calibrate(rangeTemp[1]) +  10 * ApplicationInfo.ratio
-        property real circleIconWidth: 20 * ApplicationInfo.ratio
-        property real weatherIconWidth: 80 * ApplicationInfo.ratio
+        property real circleIconWidth: adjustementNeeded * 20 * ApplicationInfo.ratio
+        property real weatherIconWidth: adjustementNeeded * 80 * ApplicationInfo.ratio
 
         function calibrate(temperature) {
             return 2 * ApplicationInfo.ratio * temperature
@@ -102,7 +102,7 @@ GridLayout {
         RowLayout {
             id: rowTemp
             spacing: 0
-            anchors { left: parent.left; right: parent.right; top: parent.top; leftMargin:  ApplicationInfo.sliderGapWidth/2; rightMargin: ApplicationInfo.sliderGapWidth/2}
+            anchors { left: parent.left; right: parent.right; top: parent.top; leftMargin:  sliderGapWidth/2; rightMargin: sliderGapWidth/2}
             Repeater {
                 id: repeater
                 model: root.model.periodCount()
@@ -149,7 +149,9 @@ GridLayout {
             anchors { bottom: parent.bottom; left: parent.left; right: parent.right }
             TouchSlider {
                 id: touchSlider
-                Layout.preferredWidth: (model.periodCount() - 1) * ApplicationInfo.sliderGapWidth + ApplicationInfo.sliderHandleWidth
+                sliderHandleWidth: root.sliderHandleWidth
+                sliderHandleHeight: root.sliderHandleHeight
+                Layout.preferredWidth: (model.periodCount() - 1) * sliderGapWidth + sliderHandleWidth
                 Layout.alignment: Qt.AlignHCenter
                 minimumValue: 0
                 maximumValue: model.periodCount() - 1
@@ -164,7 +166,7 @@ GridLayout {
                     TouchLabel {
                         pixelSize: 22
                         Layout.fillWidth: true
-                        Layout.preferredWidth: ApplicationInfo.sliderGapWidth
+                        Layout.preferredWidth: sliderGapWidth
                         horizontalAlignment: Text.AlignHCenter
                         Layout.alignment: Qt.AlignBaseline
                         text: (!!root.model && index !== root.model.periodCount()) ? Utils.getFromTime(index, root.model) : Utils.getToTime(index-1, root.model)
@@ -174,10 +176,5 @@ GridLayout {
         }
     }
 
-    Separator {
-        Layout.fillHeight: true
-        Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false
-        Layout.minimumHeight: 10
-        Layout.minimumWidth: 0
-    }
+    Separator {}
 }
diff --git a/qml/pages/OneDayZoomItem.qml b/qml/pages/OneDayZoomItem.qml
index 3c025ca..4a7638d 100644
--- a/qml/pages/OneDayZoomItem.qml
+++ b/qml/pages/OneDayZoomItem.qml
@@ -47,6 +47,7 @@ GridLayout {
     id: root
     flow: ApplicationInfo.isPortraitMode ? GridLayout.LeftToRight : GridLayout.TopToBottom
 
+    property real adjustementNeeded: 1
     property QtObject slider
     property QtObject model
     property bool singleItem
@@ -57,12 +58,9 @@ GridLayout {
 
     readonly property int sliderValue: Math.round(root.slider.value)
 
-    Separator {
-        Layout.fillHeight: true
-        Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false
-        Layout.minimumWidth: 0
-    }
+    Separator {}
     GridLayout {
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
         id: grid
         rowSpacing: 0
         columnSpacing: 15 * ApplicationInfo.ratio
@@ -121,8 +119,8 @@ GridLayout {
             }
 
             Layout.rowSpan: 1
-            Layout.preferredHeight: 160 * ApplicationInfo.ratio
-            Layout.preferredWidth: 160 * ApplicationInfo.ratio
+            Layout.preferredHeight: adjustementNeeded * 160 * ApplicationInfo.ratio
+            Layout.preferredWidth: adjustementNeeded * 160 * ApplicationInfo.ratio
             Layout.alignment: Qt.AlignCenter
         }
         TouchLabel {
@@ -130,7 +128,7 @@ GridLayout {
             property int temp: Utils.getTemperature(root.sliderValue, root.model)
             text : Utils.getTempFormat(temp)
             color: temp < 0 ? ApplicationInfo.colors.blue : ApplicationInfo.colors.doubleDarkGray
-            pixelSize: 72
+            pixelSize: adjustementNeeded * 72
             letterSpacing: -0.5
             Layout.alignment: Qt.AlignLeft
             function getLongestTempWidth() {
@@ -183,9 +181,5 @@ GridLayout {
             }
         }
     }
-    Separator {
-        Layout.fillHeight: true
-        Layout.fillWidth: ApplicationInfo.isPortraitMode ? true : false
-        Layout.minimumWidth: 0
-    }
+    Separator {}
 }
diff --git a/qml/pages/Separator.qml b/qml/pages/Separator.qml
index 74beb06..1034d57 100644
--- a/qml/pages/Separator.qml
+++ b/qml/pages/Separator.qml
@@ -42,10 +42,11 @@ import QtQuick 2.1
 import QtQuick.Layouts 1.0
 import org.qtproject.demo.weather 1.0
 
-Rectangle {
+Item {
     implicitHeight: ApplicationInfo.hMargin
     implicitWidth: ApplicationInfo.hMargin
-    Layout.minimumHeight: implicitHeight
-    Layout.minimumWidth: implicitWidth
-    opacity: 0
+    Layout.minimumHeight: 0
+    Layout.minimumWidth: 0
+    Layout.fillHeight: true
+    Layout.fillWidth: true
 }
diff --git a/qml/touch/TouchSlider.qml b/qml/touch/TouchSlider.qml
index 61e2594..cd156d1 100644
--- a/qml/touch/TouchSlider.qml
+++ b/qml/touch/TouchSlider.qml
@@ -45,7 +45,9 @@ import org.qtproject.demo.weather 1.0
 
 Slider {
     id: slider
-    implicitHeight: ApplicationInfo.sliderHandleHeight + ApplicationInfo.ratio * 25
+    property real sliderHandleHeight: 0.
+    property real sliderHandleWidth: 0.
+    implicitHeight: sliderHandleHeight + ApplicationInfo.ratio * 25
     style: SliderStyle {
         groove: Rectangle {
             Rectangle {
@@ -67,13 +69,13 @@ Slider {
             }
         }
         handle: Item {
-            width: ApplicationInfo.sliderHandleWidth
-            height: ApplicationInfo.sliderHandleHeight
+            width: sliderHandleWidth
+            height: sliderHandleHeight
             Image {
                 anchors.centerIn: parent
                 source: ApplicationInfo.getImagePath(control.pressed ? "Pointer_pressed.png" : "Pointer.png")
-                width: ApplicationInfo.sliderHandleWidth + 16 * ApplicationInfo.ratio
-                height: ApplicationInfo.sliderHandleHeight + 16 * ApplicationInfo.ratio
+                width: sliderHandleWidth + 16 * ApplicationInfo.ratio
+                height: sliderHandleHeight + 16 * ApplicationInfo.ratio
             }
         }
     }