Reworked interface to work with taller fonts in Harmattan 1.2

diff --git a/application/resources/harmattan/qml/DelayIndicator.qml b/application/resources/harmattan/qml/DelayIndicator.qml
index 6b8394d..363cffb 100644 (file)
--- a/application/resources/harmattan/qml/DelayIndicator.qml
+++ b/application/resources/harmattan/qml/DelayIndicator.qml
@@ -4,16 +4,18 @@ import "uiconstants.js" as UiConstants
 Item {
     id: indicator
     property int level: 0
-    width: UiConstants.DefaultMargin
-    anchors{
+    width: 10
+    height: parent.height
+    anchors {
         top: parent.top
         bottom: parent.bottom
+        rightMargin: UiConstants.SmallMargin
     }
     Rectangle {
         id: rect
         width: 10
-        height: parent.height
-        anchors.left: parent.left
+        height: UiConstants.ListItemHeightLarge - 10
+        anchors.centerIn: parent
         color: {
             switch (indicator.level) {
             case 0: return "#0b0"

diff --git a/application/resources/harmattan/qml/StationPage.qml b/application/resources/harmattan/qml/StationPage.qml
index 0ed556b..638c010 100644 (file)
--- a/application/resources/harmattan/qml/StationPage.qml
+++ b/application/resources/harmattan/qml/StationPage.qml
@@ -57,6 +57,7 @@ Page {
             }
             model: schedule
             delegate: StationScheduleDelegate {
+                width: stationScheduleView.width
                 type: schedule.type
                 arrivalTime: model.arrivalTime
                 departureTime: model.departureTime
@@ -78,16 +79,44 @@ Page {
                 size: "large"
             }
             anchors.centerIn: parent
-            visible: !stationScheduleView.visible
             running: visible
         }
+        Item {
+            id: errorDisplay
+            anchors.centerIn: parent
+            Column {
+                anchors.centerIn: parent
+                spacing: UiConstants.DefaultMargin
+                Text {
+                    text: qsTr("Error")
+                    font.pixelSize: UiConstants.HeaderFontPixelSize
+                    font.bold: UiConstants.HeaderFontBoldness
+                    horizontalAlignment: Text.AlignHCenter
+                }
+                Text {
+                    text: schedule.error
+                    font.pixelSize: UiConstants.DefaultFontBoldness
+                    font.bold: UiConstants.DefaultFontBoldness
+                    horizontalAlignment: Text.AlignHCenter
+                }
+            }
+        }
         states: [
             State {
                 name: "loading"
+                when: !completed
                 PropertyChanges {
                     target: stationScheduleView
                     visible: false
                 }
+                PropertyChanges {
+                    target: errorDisplay
+                    visible: false
+                }
+                PropertyChanges {
+                    target: busyIndicator
+                    visible: true
+                }
             },
             State {
                 name: "ready"
@@ -95,16 +124,42 @@ Page {
                     target: stationScheduleView
                     visible: true
                 }
+                PropertyChanges {
+                    target: errorDisplay
+                    visible: false
+                }
+                PropertyChanges {
+                    target: busyIndicator
+                    visible: false
+                }
+            },
+            State {
+                name: "error"
+                when: schedule.error
+                PropertyChanges {
+                    target: stationScheduleView
+                    visible: true
+                }
+                PropertyChanges {
+                    target: errorDisplay
+                    visible: false
+                }
+                PropertyChanges {
+                    target: busyIndicator
+                    visible: false
+                }
             }
         ]
     }
     StationScheduleModel {
         id: schedule
         onNameChanged: updateStation()
-        onLayoutChanged: view.state = "ready"
+        onLayoutChanged: if (error) view.state = "error"
+                         else view.state = "ready"
     }
     Component.onCompleted: {
         updateTimer.timeout.connect(updateStation)
+        view.state = "loading"
     }
     function updateStation() {
         console.log("Updating station with " + schedule.name + ", " + schedule.code)

diff --git a/application/resources/harmattan/qml/StationScheduleDelegate.qml b/application/resources/harmattan/qml/StationScheduleDelegate.qml
index 79b3981..1ffda9f 100644 (file)
--- a/application/resources/harmattan/qml/StationScheduleDelegate.qml
+++ b/application/resources/harmattan/qml/StationScheduleDelegate.qml
@@ -16,8 +16,8 @@ Item {
     property string actualPlatform
     property string expectedPlatfrom
 
-    height: UiConstants.ListItemHeightDefault
-    width: parent.width
+    implicitHeight: UiConstants.ListItemHeightLarge
+    height: UiConstants.ListItemHeightLarge
     BorderImage {
         id: background
         anchors.fill: parent
@@ -25,67 +25,97 @@ Item {
         visible: mouseArea.pressed
         source: "image://theme/meegotouch-list-background-pressed-center"
     }
-    Row {
+    Item {
         id: bodyRow
-        anchors.fill: parent
-        spacing: UiConstants.ButtonSpacing
+        anchors {
+            fill: parent
+            margins: UiConstants.ButtonSpacing
+        }
         DelayIndicator {
+            id: indicator
+            anchors {
+                top: parent.top
+                left: parent.left
+            }
             level: delayClass
         }
-        Column {
-            anchors.verticalCenter: parent.verticalCenter
+        Item {
+            anchors {
+                left: indicator.right
+                right: bodyRow.right
+                margins: UiConstants.ButtonSpacing
+            }
+            height: UiConstants.TitleFontPixelSize
             Row {
+                id: firstRow
+                anchors.top: parent.top
                 spacing: UiConstants.ButtonSpacing
                 Label {
                     id: arrivalTimeLabel
-                    font.bold: UiConstants.SpecialFontBoldness
-                    font.pixelSize: UiConstants.SpecialFontPixelSize
+                    font.bold: UiConstants.TitleFontBoldness
+                    font.pixelSize: UiConstants.TitleFontPixelSize
                     visible: type === StationScheduleModel.ArrivalSchedule
                 }
                 Label {
                     id: departureTimeLabel
-                    font.bold: UiConstants.SpecialFontBoldness
-                    font.pixelSize: UiConstants.SpecialFontPixelSize
+                    font.bold: UiConstants.TitleFontBoldness
+                    font.pixelSize: UiConstants.TitleFontPixelSize
                     visible: type === StationScheduleModel.DepartureSchedule
                 }
                 Label {
                     id: trainLabel
-                    font.bold: UiConstants.SpecialFontBoldness
-                    font.pixelSize: UiConstants.SpecialFontPixelSize
+                    font.bold: UiConstants.TitleFontBoldness
+                    font.pixelSize: UiConstants.TitleFontPixelSize
                     color: UiConstants.AccentColor
                 }
             }
-            Label {
-                text: qsTr("from %1").arg(root.arrivalStation)
-                font.bold: UiConstants.DefaultFontBoldness
-                font.pixelSize: UiConstants.DefaultFontPixelSize
-                visible: type === StationScheduleModel.ArrivalSchedule
-            }
-            Label {
-                text: qsTr("to %1").arg(root.departureStation)
-                font.bold: UiConstants.DefaultFontBoldness
-                font.pixelSize: UiConstants.DefaultFontPixelSize
-                visible: type === StationScheduleModel.DepartureSchedule
+            Item {
+                id: secondRow
+                height: UiConstants.DefaultFontPixelSize
+                anchors.top: firstRow.bottom
+                Label {
+                    text: qsTr("from %1").arg(root.arrivalStation)
+                    font.bold: UiConstants.DefaultFontBoldness
+                    font.pixelSize: UiConstants.DefaultFontPixelSize
+                    visible: type === StationScheduleModel.ArrivalSchedule
+                }
+                Label {
+                    text: qsTr("to %1").arg(root.departureStation)
+                    font.bold: UiConstants.DefaultFontBoldness
+                    font.pixelSize: UiConstants.DefaultFontPixelSize
+                    visible: type === StationScheduleModel.DepartureSchedule
+                }
             }
-            Label {
-                id: delayLabel
-                font.bold: UiConstants.SubtitleFontBoldness
-                font.pixelSize: UiConstants.SubtitleFontPixelSize
+            Item {
+                height: UiConstants.SubtitleFontPixelSize
+                anchors {
+                    top: secondRow.bottom
+                    left: parent.left
+                    right: parent.right
+                }
+                Label {
+                    id: delayLabel
+                    anchors.top: parent.top
+                    font.bold: UiConstants.SubtitleFontBoldness
+                    font.pixelSize: UiConstants.SubtitleFontPixelSize
+                }
+                Label {
+                    anchors {
+                        top: parent.top
+                        right: parent.right
+                        rightMargin: UiConstants.DefaultMargin
+                    }
+                    text: displayPlatform(root.expectedPlatfrom, root.actualPlatform)
+                    font.bold: UiConstants.SubtitleFontBoldness
+                    font.pixelSize: UiConstants.SubtitleFontPixelSize
+                }
             }
         }
     }
-    Label {
-        anchors {
-            bottom: bodyRow.bottom
-            right: bodyRow.right
-            rightMargin: UiConstants.DefaultMargin
-        }
-        text: displayPlatform(root.expectedPlatfrom, root.actualPlatform)
-        font.bold: UiConstants.SubtitleFontBoldness
-        font.pixelSize: UiConstants.SubtitleFontPixelSize
-    }
     Image {
         anchors {
+            leftMargin: UiConstants.DefaultMargin
+            rightMargin: UiConstants.DefaultMargin
             left: parent.left
             right: parent.right
         }

diff --git a/application/resources/harmattan/qml/uiconstants.js b/application/resources/harmattan/qml/uiconstants.js
index e6edc11..c6c4e11 100644 (file)
--- a/application/resources/harmattan/qml/uiconstants.js
+++ b/application/resources/harmattan/qml/uiconstants.js
@@ -1,6 +1,7 @@
 .pragma library
 
 const DefaultMargin = 16
+const SmallMargin = 8
 const ButtonSpacing = 6
 
 const HeaderDefaultHeightLandscape = 46
@@ -16,10 +17,14 @@ const SearchBarDefaultHeight = 80
 
 const ListItemHeightSmall = 64
 const ListItemHeightDefault = 80
+const ListItemHeightLarge = 96
 
 const HeaderFontPixelSize = 32
 const HeaderFontBoldness = false
 
+const TitleFontPixelSize = 26
+const TitleFontBoldness = true
+
 const SpecialFontPixelSize = 24
 const SpecialFontBoldness = true