Improve journey info page layout

diff --git a/qml/components/InfoRow.qml b/qml/components/InfoRow.qml
index 4dce161..64a714e 100644 (file)
--- a/qml/components/InfoRow.qml
+++ b/qml/components/InfoRow.qml
@@ -45,7 +45,7 @@ Item {
             leftMargin: midLine + Theme.paddingSmall
             rightMargin: detailItem.rightMargin
         }
             leftMargin: midLine + Theme.paddingSmall
             rightMargin: detailItem.rightMargin
         }

-        horizontalAlignment: Text.AlignLeft
+        horizontalAlignment: Text.AlignRight

         color: Theme.primaryColor
         font.pixelSize: pixelSize
         textFormat: Text.PlainText
         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 (file)
--- a/qml/pages/JourneyInfo.qml
+++ b/qml/pages/JourneyInfo.qml
@@ -1,5 +1,6 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
 import QtQuick 2.0
 import Sailfish.Silica 1.0

+import "../components"

 
 Page {
     id: journeyInfoPage
 
 Page {
     id: journeyInfoPage

@@ -10,6 +11,14 @@ Page {
     property int overtakenby: -1
     property int index: -1
 
     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')
     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
 
         Column {
             id: journeyEditColumn

-            spacing: Theme.paddingMedium
+            spacing: Theme.paddingLarge

             width: parent.width
 
             PageHeader {
                 title: journeyInfoPage.title
             }
 
             width: parent.width
 
             PageHeader {
                 title: journeyInfoPage.title
             }
 

-            ValueButton {
+            InfoRow {

                 id: startDate
                 label: "Date"
                 value: Qt.formatDate(start, 'd MMM yyyy')
                 width: parent.width
                 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
                 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")
                 id: endTime
                 property date time: new Date()
                 label: qsTr("End time")

@@ -69,38 +84,44 @@ Page {
                 onTimeChanged: {
                     value = Qt.formatTime(time, 'hh:mm')
                 }
                 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
                 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
                 id: faster
                 width: parent.width

-                inputMethodHints: Qt.ImhDigitsOnly

                 label: qsTr("Cycles which you overtook")
                 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
                 id: slower
                 width: parent.width

-                inputMethodHints: Qt.ImhDigitsOnly

                 label: qsTr("Cycles which overtook you")
                 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

             }
         }
     }
             }
         }
     }