From b0cf1cc508e82763046f46134347e8a37d7dddd6 Mon Sep 17 00:00:00 2001 From: David Llewellyn-Jones Date: Sun, 15 Jul 2018 23:10:46 +0100 Subject: [PATCH] Fill main screen with buttons --- harbour-pedalo.pro | 3 +- qml/components/BarButton.qml | 73 +++++++++++++++++++++++++++++++ qml/pages/JourneyList.qml | 1 + qml/pages/MainPage.qml | 62 +++++++++++--------------- translations/harbour-pedalo-de.ts | 36 +-------------- translations/harbour-pedalo.ts | 36 +-------------- 6 files changed, 106 insertions(+), 105 deletions(-) create mode 100644 qml/components/BarButton.qml diff --git a/harbour-pedalo.pro b/harbour-pedalo.pro index b237acb..0b88acc 100644 --- a/harbour-pedalo.pro +++ b/harbour-pedalo.pro @@ -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 index 0000000..052f2e2 --- /dev/null +++ b/qml/components/BarButton.qml @@ -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 + } +} diff --git a/qml/pages/JourneyList.qml b/qml/pages/JourneyList.qml index 2b722be..1bcf401 100644 --- a/qml/pages/JourneyList.qml +++ b/qml/pages/JourneyList.qml @@ -18,6 +18,7 @@ Page { height: implicitHeight + Theme.paddingLarge PageHeader { + id: headerItem title: qsTr("Journey list") } diff --git a/qml/pages/MainPage.qml b/qml/pages/MainPage.qml index 5c0c16b..4e7293c 100644 --- a/qml/pages/MainPage.qml +++ b/qml/pages/MainPage.qml @@ -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")) } - } } } diff --git a/translations/harbour-pedalo-de.ts b/translations/harbour-pedalo-de.ts index ec359d7..18ba179 100644 --- a/translations/harbour-pedalo-de.ts +++ b/translations/harbour-pedalo-de.ts @@ -128,48 +128,16 @@ MainPage - - Pedalo - - - - Cycle! - - Start a journey - Add a journey - - - - Enter journey - - - - Latest stats - - - - View stats - - - - Previous journeys - - - - View journeys - - - - Finish + About - About + Finish your journey diff --git a/translations/harbour-pedalo.ts b/translations/harbour-pedalo.ts index 8a00fee..27f1377 100644 --- a/translations/harbour-pedalo.ts +++ b/translations/harbour-pedalo.ts @@ -128,48 +128,16 @@ MainPage - - Pedalo - - - - Cycle! - - Start a journey - Add a journey - - - - Enter journey - - - - Latest stats - - - - View stats - - - - Previous journeys - - - - View journeys - - - - Finish + About - About + Finish your journey -- 2.25.1