From: David Llewellyn-Jones <david@flypig.co.uk>
Date: Sat, 14 Jul 2018 19:53:18 +0000 (+0100)
Subject: Improve journey info page layout
X-Git-Url: https://www.flypig.org.uk/git/?p=harbour-pedalo.git;a=commitdiff_plain;h=baffcf729d26af75702d28861d1d4a69d0401db1

Improve journey info page layout
---

diff --git a/qml/components/InfoRow.qml b/qml/components/InfoRow.qml
index 4dce161..64a714e 100644
--- a/qml/components/InfoRow.qml
+++ b/qml/components/InfoRow.qml
@@ -45,7 +45,7 @@ Item {
             leftMargin: midLine + Theme.paddingSmall
             rightMargin: detailItem.rightMargin
         }
-        horizontalAlignment: Text.AlignLeft
+        horizontalAlignment: Text.AlignRight
         color: Theme.primaryColor
         font.pixelSize: pixelSize
         textFormat: Text.PlainText
diff --git a/qml/pages/JourneyInfo.qml b/qml/pages/JourneyInfo.qml
index 6b0377d..95e58ab 100644
--- a/qml/pages/JourneyInfo.qml
+++ b/qml/pages/JourneyInfo.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
+import "../components"
 
 Page {
     id: journeyInfoPage
@@ -10,6 +11,14 @@ Page {
     property int overtakenby: -1
     property int index: -1
 
+    property real shortlineRatio: 0.6
+    property real shortlineMin: Theme.fontSizeSmall * 10
+    property real shortlineMax: width
+
+    property real widelineRatio: 0.6
+    property real widelineMin: Theme.fontSizeSmall * 10
+    property real widelineMax: width
+
     onDurationChanged: {
         var structured = new Date(0, 0, 0, 0, parseInt(duration / 60))
         durationTime.value = Qt.formatTime(structured, 'hh:mm')
@@ -36,30 +45,36 @@ Page {
 
         Column {
             id: journeyEditColumn
-            spacing: Theme.paddingMedium
+            spacing: Theme.paddingLarge
             width: parent.width
 
             PageHeader {
                 title: journeyInfoPage.title
             }
 
-            ValueButton {
+            InfoRow {
                 id: startDate
                 label: "Date"
                 value: Qt.formatDate(start, 'd MMM yyyy')
                 width: parent.width
-                enabled: false
+                labelTextBold: true
+                midlineRatio: shortlineRatio
+                midlineMin: shortlineMin
+                midlineMax: shortlineMax
             }
 
-            ValueButton {
+            InfoRow {
                 id: startTime
                 label: qsTr("Start time")
                 value: Qt.formatTime(start, 'hh:mm')
                 width: parent.width
-                enabled: false
+                labelTextBold: true
+                midlineRatio: shortlineRatio
+                midlineMin: shortlineMin
+                midlineMax: shortlineMax
             }
 
-            ValueButton {
+            InfoRow {
                 id: endTime
                 property date time: new Date()
                 label: qsTr("End time")
@@ -69,38 +84,44 @@ Page {
                 onTimeChanged: {
                     value = Qt.formatTime(time, 'hh:mm')
                 }
+                labelTextBold: true
+                midlineRatio: shortlineRatio
+                midlineMin: shortlineMin
+                midlineMax: shortlineMax
             }
 
-            ValueButton {
+            InfoRow {
                 id: durationTime
                 label: qsTr("Duration")
                 value: Qt.formatTime(new Date(0, 0, 0, 0, parseInt(duration / 60)), 'hh:mm')
                 width: parent.width
                 enabled: false
+                labelTextBold: true
+                midlineRatio: shortlineRatio
+                midlineMin: shortlineMin
+                midlineMax: shortlineMax
             }
 
-            TextField {
+            InfoRow {
                 id: faster
                 width: parent.width
-                inputMethodHints: Qt.ImhDigitsOnly
                 label: qsTr("Cycles which you overtook")
-                placeholderText: label
-                text: overtook >= 0 ? "" + overtook : ""
-                horizontalAlignment: TextInput.AlignLeft
-                EnterKey.iconSource: "image://theme/icon-m-enter-next"
-                enabled: false
+                value: "" + overtook
+                labelTextBold: true
+                midlineRatio: widelineRatio
+                midlineMin: widelineMin
+                midlineMax: widelineMax
             }
 
-            TextField {
+            InfoRow {
                 id: slower
                 width: parent.width
-                inputMethodHints: Qt.ImhDigitsOnly
                 label: qsTr("Cycles which overtook you")
-                placeholderText: label
-                text: overtakenby >= 0 ? "" + overtakenby : ""
-                horizontalAlignment: TextInput.AlignLeft
-                EnterKey.iconSource: "image://theme/icon-m-enter-next"
-                enabled: false
+                value: "" + overtakenby
+                labelTextBold: true
+                midlineRatio: widelineRatio
+                midlineMin: widelineMin
+                midlineMax: widelineMax
             }
         }
     }