Fill main screen with buttons
authorDavid Llewellyn-Jones <david@flypig.co.uk>
Sun, 15 Jul 2018 22:10:46 +0000 (23:10 +0100)
committerDavid Llewellyn-Jones <david@flypig.co.uk>
Sun, 15 Jul 2018 22:10:46 +0000 (23:10 +0100)
harbour-pedalo.pro
qml/components/BarButton.qml [new file with mode: 0644]
qml/pages/JourneyList.qml
qml/pages/MainPage.qml
translations/harbour-pedalo-de.ts
translations/harbour-pedalo.ts

index b237acb..0b88acc 100644 (file)
@@ -49,7 +49,8 @@ DISTFILES += qml/harbour-pedalo.qml \
     qml/pages/DurationEditDialog.qml \
     qml/components/InfoRow.qml \
     qml/pages/JourneyEdit.qml \
-    qml/pages/JourneyInfo.qml
+    qml/pages/JourneyInfo.qml \
+    qml/components/BarButton.qml
 
 SAILFISHAPP_ICONS = 86x86 108x108 128x128 172x172 256x256
 
diff --git a/qml/components/BarButton.qml b/qml/components/BarButton.qml
new file mode 100644 (file)
index 0000000..052f2e2
--- /dev/null
@@ -0,0 +1,73 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+MouseArea {
+    id: cycleButton
+    property alias source: image.source
+    property alias text: label.text
+
+    width: parent.width
+    height: parent.height / 2
+
+    Rectangle {
+        id: verticalback
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
+        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
+    }
+
+    Rectangle {
+        id: horizontalback
+        anchors.centerIn: parent
+        width: parent.width
+        height: parent.height
+        color: cycleButton.pressed ? Theme.highlightColor : Theme.secondaryHighlightColor
+    }
+
+    Label {
+        id: label
+        text: ""
+        font.pixelSize: Theme.fontSizeLarge
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.topMargin: Theme.paddingMedium
+        anchors.rightMargin: Theme.horizontalPageMargin
+        width: parent.width - image.width
+        horizontalAlignment: Text.AlignRight
+        wrapMode: Text.WrapAtWordBoundaryOrAnywhere
+    }
+
+    Image {
+        id: image
+        source: ""
+        anchors.left: parent.left
+        fillMode: Image.PreserveAspectFit
+        width: parent.height
+        height: parent.height
+    }
+
+    OpacityRampEffect {
+        id: verticalBackgroundEffect
+        slope: 0.5
+        offset: -1.0
+        direction: OpacityRamp.TopToBottom
+        sourceItem: verticalback
+    }
+
+    OpacityRampEffect {
+        id: horizontalBackgroundEffect
+        slope: 1.2
+        offset: -0.7
+        direction: OpacityRamp.LeftToRight
+        sourceItem: horizontalback
+    }
+
+    OpacityRampEffect {
+        id: imageeffect
+        slope: 1.0
+        offset: 0.0
+        direction: OpacityRamp.TopToBottom
+        sourceItem: image
+    }
+}
index 2b722be..1bcf401 100644 (file)
@@ -18,6 +18,7 @@ Page {
             height: implicitHeight + Theme.paddingLarge
 
             PageHeader {
+                id: headerItem
                 title: qsTr("Journey list")
             }
 
index 5c0c16b..4e7293c 100644 (file)
@@ -1,5 +1,6 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
+import "../components"
 
 Page {
     id: page
@@ -22,26 +23,18 @@ Page {
         }
 
         // Tell SilicaFlickable the height of its content.
-        contentHeight: column.implicitHeight + Theme.paddingLarge
+        contentHeight: column.implicitHeight
 
-        // Place our content in a Column.  The PageHeader is always placed at the top
-        // of the page, followed by our content.
         Column {
             id: column
 
-            width: page.width
-            spacing: Theme.paddingLarge
-            PageHeader {
-                title: qsTr("Pedalo")
-            }
-
-            SectionHeader {
-                text: qsTr("Cycle!")
-            }
+            width: isPortrait ? parent.width : parent.width / 2.0
+            height: isPortrait ? page.height / 2.0 : page.height
+            spacing: 0
 
-            Button {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: currentStatus.cycling ? qsTr("Finish") : qsTr("Start a journey")
+            BarButton {
+                source: "image://theme/icon-launcher-component-gallery"
+                text: currentStatus.cycling ? qsTr("Finish your journey") : qsTr("Start a journey")
                 onClicked: {
                     if (currentStatus.cycling) {
                         var dialog = pageStack.push(Qt.resolvedUrl("JourneyEdit.qml"), {title: "Finish journey", start: journeymodel.epochToDateTime(currentStatus.startTime), duration: currentStatus.getDuration()})
@@ -56,36 +49,33 @@ Page {
                 }
             }
 
-            SectionHeader {
-                text: qsTr("Add a journey")
-            }
-
-            Button {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: qsTr("Enter journey")
+            BarButton {
+                source: "image://theme/icon-launcher-component-gallery"
+                text: "Add a journey"
                 onClicked: pageStack.push(Qt.resolvedUrl("JourneyEdit.qml"))
             }
+        }
 
-            SectionHeader {
-                text: qsTr("Latest stats")
-            }
+        Column {
+            id: column2
 
-            Button {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: qsTr("View stats")
-                onClicked: pageStack.push(Qt.resolvedUrl("Stats.qml"))
-            }
+            width: isPortrait ? parent.width : parent.width / 2.0
+            height: isPortrait ? page.height / 2.0 : page.height
+            spacing: 0
+            y: isPortrait ? page.height / 2: 0
+            x: isPortrait ? 0 : page.width / 2.0
 
-            SectionHeader {
-                text: qsTr("Previous journeys")
+            BarButton {
+                source: "image://theme/icon-launcher-component-gallery"
+                text: "View latest stats"
+                onClicked: pageStack.push(Qt.resolvedUrl("Stats.qml"))
             }
 
-            Button {
-                anchors.horizontalCenter: parent.horizontalCenter
-                text: qsTr("View journeys")
+            BarButton {
+                source: "image://theme/icon-launcher-component-gallery"
+                text: "Previous journeys"
                 onClicked: pageStack.push(Qt.resolvedUrl("JourneyList.qml"))
             }
-
         }
     }
 }
index ec359d7..18ba179 100644 (file)
 <context>
     <name>MainPage</name>
     <message>
-        <source>Pedalo</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Cycle!</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
         <source>Start a journey</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Add a journey</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Enter journey</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Latest stats</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>View stats</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Previous journeys</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>View journeys</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Finish</source>
+        <source>About</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>About</source>
+        <source>Finish your journey</source>
         <translation type="unfinished"></translation>
     </message>
 </context>
index 8a00fee..27f1377 100644 (file)
 <context>
     <name>MainPage</name>
     <message>
-        <source>Pedalo</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Cycle!</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
         <source>Start a journey</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>Add a journey</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Enter journey</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Latest stats</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>View stats</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Previous journeys</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>View journeys</source>
-        <translation type="unfinished"></translation>
-    </message>
-    <message>
-        <source>Finish</source>
+        <source>About</source>
         <translation type="unfinished"></translation>
     </message>
     <message>
-        <source>About</source>
+        <source>Finish your journey</source>
         <translation type="unfinished"></translation>
     </message>
 </context>