Flesh out UI, provide journey data model

[harbour-pedalo.git] / qml / pages / JourneyList.qml

diff --git a/qml/pages/JourneyList.qml b/qml/pages/JourneyList.qml
new file mode 100644 (file)
index 0000000..9d84129
--- /dev/null
+++ b/qml/pages/JourneyList.qml
@@ -0,0 +1,45 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Page {
+    id: page
+
+    // The effective value will be restricted by ApplicationWindow.allowedOrientations
+    allowedOrientations: Orientation.All
+    property int columnwidth: page.width - 2 * Theme.horizontalPageMargin
+
+    SilicaListView {
+        id: listView
+        model: 20
+        anchors.fill: parent
+        header: PageHeader {
+            title: qsTr("Journey list")
+        }
+        delegate: BackgroundItem {
+            id: delegate
+
+            Row {
+                spacing: Theme.paddingLarge
+                x: Theme.horizontalPageMargin
+
+                Label {
+                    width: columnwidth / 3.0
+                    text: qsTr("Item") + " " + index
+                    color: delegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                }
+                Label {
+                    width: columnwidth / 3.0
+                    text: qsTr("1 May 2018")
+                    color: delegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                }
+                Label {
+                    width: columnwidth / 3.0
+                    text: qsTr("20 mins")
+                    color: delegate.highlighted ? Theme.highlightColor : Theme.primaryColor
+                }
+            }
+            onClicked: pageStack.push(Qt.resolvedUrl("AddJourney.qml"), {title: "Edit journey"})
+        }
+        VerticalScrollDecorator {}
+    }
+}