Permalink
Browse files

Create a menu solution for both v-play and SFOS

This commit provides the BVApp concept of a NavigationMenu,
which can be assigned to an ApplicationWindow.

It includes the notion of an initialMenuItem, which is ignored
on Sailfish, as this item corresponds to the initialPage, which
we do not want to have in the pulley menu again as an item.
The initialPage in turn is ignored on v-play.

Currently you have to set both values (initialMenuItem, initialPage)
manually unfortunately. It should be possible to even generalize this.
But it is unclear how far we actually want to take the menu abstraction
anyway (or in which direction we want it to move, just consider toggleable
menu items for list view and map view, for example).
So we leave it like this atm.

Even v-play went with a "hacked" (i.e. non declarative, but imperative)
solution for the menu of their QtWorldSummit2016 app, when they
wanted to do something more sophisticated then the standard
NavigationMenu behavior:

    https://github.com/V-Play/QtWorldSummit2016-V-Play/blob/master/qml/QtWSMainItem.qml#L402

>   if(Theme.isAndroid) {
>     navigation.addNavigationItem(tracksNavItemComponent)
>     navigation.addNavigationItem(venueNavItemComponent)
> ...

This commit also turns every menuItem on v-play automatically
into an NavigationStack (for consitency with the typical stack based
navigation common on Sailfish).

BTW: The About page is still in rough state on we-pay ;)

// Github issue #67
  • Loading branch information...
micuintus committed Feb 24, 2017
1 parent a515780 commit ce3f8b339792d266f7a43cca08da2b51b4ad71fc
@@ -8,18 +8,11 @@ App {
id: app
property var pageStack: navigationStack
property var initialPage
property var cover
NavigationStack {
id: navigationStack
initialPage: app.initialPage
}
property var initialPage
Component.onCompleted: {
// We need to access the dp() function from the Theme component
BVApp.Theme.myApp = app
}
}
@@ -0,0 +1,6 @@
import QtQuick 2.7
import VPlayApps 1.0
AppButton {
}
@@ -1,9 +1,8 @@
import VPlayApps 1.0
ListPage {
property var pageStack: navigationStack
//% "Berlin-Vegan"
title: qsTrId("id-berlin-vegan")
}
@@ -2,6 +2,6 @@ import QtQuick 2.7
Rectangle {
property color color
property var horizontalAlignment
}
@@ -1,6 +1,7 @@
module Sailfish.Silica
ApplicationWindow 1.0 ApplicationWindow.qml
BusyIndicator 1.0 BusyIndicator.qml
Button 1.0 Button.qml
CoverAction 1.0 CoverAction.qml
CoverActionList 1.0 CoverActionList.qml
CoverBackground 1.0 CoverBackground.qml
@@ -21,5 +21,6 @@
<file>SilicaListView.qml</file>
<file>TruncationMode.qml</file>
<file>VerticalScrollDecorator.qml</file>
<file>Button.qml</file>
</qresource>
</RCC>
@@ -0,0 +1,9 @@
import Sailfish.Silica 1.0 as Silica
import QtQuick 2.0
Silica.MenuItem {
property var pageToVisit
property var icon
onClicked: pageStack.push(pageToVisit)
}
@@ -0,0 +1,7 @@
import Sailfish.Silica 1.0 as Silica
import QtQuick 2.2
Silica.PullDownMenu {
property var initialMenuItem
}
@@ -35,6 +35,7 @@ QtObject {
readonly property int fontSizeMedium: Silica.Theme.fontSizeMedium
readonly property int fontSizeExtraSmall: Silica.Theme.fontSizeExtraSmall
readonly property int fontSizeSmall: Silica.Theme.fontSizeSmall
readonly property int fontSizeLarge: Silica.Theme.fontSizeLarge
readonly property int iconSizeMedium : Silica.Theme.iconSizeMedium
readonly property int iconSizeLarge : Silica.Theme.iconSizeLarge
@@ -1,3 +1,5 @@
module BerlinVegan.components
IconButton 1.0 IconButton.qml
singleton Theme 1.0 Theme.qml
NavigationMenu 1.0 NavigationMenu.qml
MenuItem 1.0 MenuItem.qml
@@ -3,5 +3,7 @@
<file>IconButton.qml</file>
<file>Theme.qml</file>
<file>qmldir</file>
<file>NavigationMenu.qml</file>
<file>MenuItem.qml</file>
</qresource>
</RCC>
@@ -0,0 +1,11 @@
import QtQuick 2.7
import VPlayApps 1.0
NavigationItem {
id: item
property var pageToVisit
property alias text: item.title
NavigationStack {
initialPage: pageToVisit
}
}
@@ -0,0 +1,16 @@
import QtQuick 2.7
import VPlayApps 1.0
Navigation {
property var initialMenuItem
property var flickable
Component.onCompleted: {
var initObj =
insertNavigationItem(0, Qt.createComponent("MenuItem.qml"))
initObj.icon = initialMenuItem.icon
initObj.pageToVisit = initialMenuItem.pageToVisit
initObj.text = initialMenuItem.text
currentIndex = 0
}
}
@@ -15,6 +15,10 @@ QtObject {
return IconType.home
case "location":
return IconType.mapmarker
case "list":
return IconType.list
case "about":
return IconType.questioncircle
}
}
@@ -33,6 +37,7 @@ QtObject {
property int fontSizeMedium: dp(Theme.listItem.fontSizeText)
property int fontSizeSmall: dp(Theme.listItem.fontSizeText)
property int fontSizeExtraSmall: dp(Theme.listItem.fontSizeDetailText)
readonly property int fontSizeLarge: dp(Theme.listItem.fontSizeText)
readonly property int iconSizeMedium : dp(12)
readonly property int iconSizeLarge : dp(12)
@@ -1,3 +1,5 @@
module BerlinVegan.components
IconButton 1.0 IconButton.qml
singleton Theme 1.0 Theme.qml
NavigationMenu 1.0 NavigationMenu.qml
MenuItem 1.0 MenuItem.qml
@@ -3,5 +3,7 @@
<file>IconButton.qml</file>
<file>Theme.qml</file>
<file>qmldir</file>
<file>NavigationMenu.qml</file>
<file>MenuItem.qml</file>
</qresource>
</RCC>
@@ -30,6 +30,7 @@ import BerlinVegan.components 1.0 as BVApp
import "components-generic"
import "pages"
import "pages/about"
import "cover"
ApplicationWindow
@@ -104,17 +105,37 @@ ApplicationWindow
}
}
initialPage: Component { VenueList {
cover: Component { CoverPage {
id: cover
jsonModelCollection: gjsonModelCollection
positionSource: globalPositionSource
id: listPage
} }
cover: Component { CoverPage {
id: cover
initialPage: VenueList {
jsonModelCollection: gjsonModelCollection
positionSource: globalPositionSource
} }
id: listPage
}
BVApp.NavigationMenu {
id: myMenu
flickable: initialPage.flickable
initialMenuItem: BVApp.MenuItem {
pageToVisit: initialPage
icon: BVApp.Theme.iconBy("list")
//% "List view"
text: qsTrId("id-venue-list")
}
BVApp.MenuItem {
pageToVisit: AboutBerlinVegan { }
icon: BVApp.Theme.iconBy("about")
//% "About"
text: qsTrId("id-about-venue-list")
}
}
}
@@ -39,6 +39,7 @@ Page {
property var jsonModelCollection
property var positionSource
property alias flickable: listView
SilicaListView {
id: listView
@@ -52,15 +53,6 @@ Page {
size: BVApp.Theme.busyIndicatorSizeLarge
}
PullDownMenu {
MenuItem {
//% "About"
text: qsTrId("id-about-venue-list")
onClicked: pageStack.push(Qt.resolvedUrl("about/AboutBerlinVegan.qml"))
}
}
currentIndex: -1
header: SearchField {
@@ -29,6 +29,7 @@
import QtQuick 2.2
import Sailfish.Silica 1.0
import BerlinVegan.components 1.0 as BVApp
Page {
property string licenseFile: ""
Binary file not shown.
@@ -177,6 +177,10 @@
<source>View license</source>
<translation>Lizenz anzeigen</translation>
</message>
<message id="id-venue-list">
<source>List view</source>
<translation>Listenansicht</translation>
</message>
<message id="id-about-venue-list">
<source>About</source>
<translation>Über diese App</translation>
Binary file not shown.
@@ -174,9 +174,9 @@
<translation>About</translation>
</message>
<message id="id-berlin-vegan">
<location filename="../qml/Silica4v-play/Page.qml" line="7"/>
<location filename="../qml/cover/CoverPage.qml" line="70"/>
<location filename="../qml/pages/about/AboutBerlinVegan.qml" line="67"/>
<location filename="../qml/Silica4v-play/Page.qml" line="6"/>
<source>Berlin-Vegan</source>
<translation>Berlin-Vegan</translation>
</message>
@@ -219,7 +219,7 @@
<translation>Apart from Qt and other wonderful FOSS components of jolla&apos;s SailfishOS SDK, this application greatfully makes use of the following third party Free Software projects:</translation>
</message>
<message id="id-license">
<location filename="../qml/pages/about/LicenseViewer.qml" line="68"/>
<location filename="../qml/pages/about/LicenseViewer.qml" line="69"/>
<source>License:</source>
<translation>License:</translation>
</message>
@@ -228,8 +228,13 @@
<source>View license</source>
<translation>View license</translation>
</message>
<message id="id-venue-list">
<location filename="../qml/harbour-berlin-vegan.qml" line="129"/>
<source>List view</source>
<translation>List view</translation>
</message>
<message id="id-about-venue-list">
<location filename="../qml/pages/VenueList.qml" line="59"/>
<location filename="../qml/harbour-berlin-vegan.qml" line="136"/>
<source>About</source>
<translation>About</translation>
</message>
Binary file not shown.
@@ -174,10 +174,9 @@
<translation></translation>
</message>
<message id="id-berlin-vegan">
<location filename="../qml/Silica4v-play/Page.qml" line="7"/>
<location filename="../qml/cover/CoverPage.qml" line="70"/>
<location filename="../qml/pages/about/AboutBerlinVegan.qml" line="67"/>
<location filename="../qml/pages/VenueList.qml" line="92"/>
<location filename="../qml/Silica4v-play/Page.qml" line="6"/>
<source>Berlin-Vegan</source>
<translation></translation>
</message>
@@ -220,7 +219,7 @@
<translation></translation>
</message>
<message id="id-license">
<location filename="../qml/pages/about/LicenseViewer.qml" line="68"/>
<location filename="../qml/pages/about/LicenseViewer.qml" line="69"/>
<source>License:</source>
<translation></translation>
</message>
@@ -229,19 +228,14 @@
<source>View license</source>
<translation></translation>
</message>
<message id="id-about-venue-list">
<location filename="../qml/pages/VenueList.qml" line="61"/>
<source>About</source>
<translation></translation>
</message>
<message id="id-disable-search">
<location filename="../qml/pages/VenueList.qml" line="67"/>
<source>Disable Search</source>
<message id="id-venue-list">
<location filename="../qml/harbour-berlin-vegan.qml" line="129"/>
<source>List view</source>
<translation></translation>
</message>
<message id="id-enable-search">
<location filename="../qml/pages/VenueList.qml" line="69"/>
<source>Enable Search</source>
<message id="id-about-venue-list">
<location filename="../qml/harbour-berlin-vegan.qml" line="136"/>
<source>About</source>
<translation></translation>
</message>
</context>

0 comments on commit ce3f8b3

Please sign in to comment.