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
micuintus · Feb 24, 2017 · ce3f8b3 · ce3f8b3
1 parent a515780
commit ce3f8b3
Show file tree

Hide file tree

Showing 25 changed files with 116 additions and 42 deletions.
diff --git a/qml/Silica4v-play/ApplicationWindow.qml b/qml/Silica4v-play/ApplicationWindow.qml
@@ -8,18 +8,11 @@ App {
 
     id: app
 
-    property var pageStack: navigationStack
-    property var initialPage
     property var cover
-
+    property var initialPage
-    NavigationStack {
-        id: navigationStack
-        initialPage: app.initialPage
-    }
 
     Component.onCompleted: {
         // We need to access the dp() function from the Theme component
         BVApp.Theme.myApp = app
     }
-
 }
diff --git a/qml/Silica4v-play/Button.qml b/qml/Silica4v-play/Button.qml
@@ -0,0 +1,6 @@
+import QtQuick 2.7
+import VPlayApps 1.0
+
+AppButton {
+
+}
diff --git a/qml/Silica4v-play/Page.qml b/qml/Silica4v-play/Page.qml
@@ -1,9 +1,8 @@
 import VPlayApps 1.0
 
 ListPage {
+    property var pageStack: navigationStack
 
                  //% "Berlin-Vegan"
     title: qsTrId("id-berlin-vegan")
-
 }
-
diff --git a/qml/Silica4v-play/Separator.qml b/qml/Silica4v-play/Separator.qml
@@ -2,6 +2,6 @@ import QtQuick 2.7
 
 Rectangle {
 
+    property color color
     property var horizontalAlignment
-
 }
diff --git a/qml/Silica4v-play/qmldir b/qml/Silica4v-play/qmldir
@@ -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

diff --git a/qml/Silica4v-play/resources-Silica4v-play.qrc b/qml/Silica4v-play/resources-Silica4v-play.qrc
@@ -21,5 +21,6 @@
         <file>SilicaListView.qml</file>
         <file>TruncationMode.qml</file>
         <file>VerticalScrollDecorator.qml</file>
+        <file>Button.qml</file>
     </qresource>
 </RCC>
diff --git a/qml/components-Sailfish/MenuItem.qml b/qml/components-Sailfish/MenuItem.qml
@@ -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)
+}
diff --git a/qml/components-Sailfish/NavigationMenu.qml b/qml/components-Sailfish/NavigationMenu.qml
@@ -0,0 +1,7 @@
+import Sailfish.Silica 1.0 as Silica
+import QtQuick 2.2
+
+Silica.PullDownMenu {
+    property var initialMenuItem
+}
+
diff --git a/qml/components-Sailfish/Theme.qml b/qml/components-Sailfish/Theme.qml
@@ -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

diff --git a/qml/components-Sailfish/qmldir b/qml/components-Sailfish/qmldir
@@ -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
diff --git a/qml/components-Sailfish/resources-components-Sailfish.qrc b/qml/components-Sailfish/resources-components-Sailfish.qrc
@@ -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>
diff --git a/qml/components-v-play/MenuItem.qml b/qml/components-v-play/MenuItem.qml
@@ -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
+    }
+}
diff --git a/qml/components-v-play/NavigationMenu.qml b/qml/components-v-play/NavigationMenu.qml
@@ -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
+    }
+}
diff --git a/qml/components-v-play/Theme.qml b/qml/components-v-play/Theme.qml
@@ -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)

diff --git a/qml/components-v-play/qmldir b/qml/components-v-play/qmldir
@@ -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
diff --git a/qml/components-v-play/resources-components-v-play.qrc b/qml/components-v-play/resources-components-v-play.qrc
@@ -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>
diff --git a/qml/harbour-berlin-vegan.qml b/qml/harbour-berlin-vegan.qml
@@ -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 {
+    initialPage: VenueList {
-        id: cover
         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")
+        }
+    }
 }
 
 
diff --git a/qml/pages/VenueList.qml b/qml/pages/VenueList.qml
@@ -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 {

diff --git a/qml/pages/about/LicenseViewer.qml b/qml/pages/about/LicenseViewer.qml
@@ -29,6 +29,7 @@
 
 import QtQuick 2.2
 import Sailfish.Silica 1.0
+import BerlinVegan.components 1.0 as BVApp
 
 Page {
     property string licenseFile: ""

diff --git a/translations/harbour-berlin-vegan-de.qm b/translations/harbour-berlin-vegan-de.qm
diff --git a/translations/harbour-berlin-vegan-de.ts b/translations/harbour-berlin-vegan-de.ts
@@ -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>

diff --git a/translations/harbour-berlin-vegan-en.qm b/translations/harbour-berlin-vegan-en.qm
diff --git a/translations/harbour-berlin-vegan-en.ts b/translations/harbour-berlin-vegan-en.ts
@@ -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>

diff --git a/translations/harbour-berlin-vegan.qm b/translations/harbour-berlin-vegan.qm
diff --git a/translations/harbour-berlin-vegan.ts b/translations/harbour-berlin-vegan.ts
@@ -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">
+    <message id="id-venue-list">
-        <location filename="../qml/pages/VenueList.qml" line="61"/>
+        <location filename="../qml/harbour-berlin-vegan.qml" line="129"/>
-        <source>About</source>
+        <source>List view</source>
-        <translation></translation>
-    </message>
-    <message id="id-disable-search">
-        <location filename="../qml/pages/VenueList.qml" line="67"/>
-        <source>Disable Search</source>
         <translation></translation>
     </message>
-    <message id="id-enable-search">
+    <message id="id-about-venue-list">
-        <location filename="../qml/pages/VenueList.qml" line="69"/>
+        <location filename="../qml/harbour-berlin-vegan.qml" line="136"/>
-        <source>Enable Search</source>
+        <source>About</source>
         <translation></translation>
     </message>
 </context>