Handle menu navigation from a custom popup instead of a menu

Change-Id: I9082832b09652d5f3a5268822080b554a83c8acc
Reviewed-by: Niels Weber <niels.weber@digia.com>

4 files changed, 152 insertions, 83 deletions

diff --git a/qml/components/ConferenceHeader.qml b/qml/components/ConferenceHeader.qml
index 914ee04..cb94432 100644
--- a/qml/components/ConferenceHeader.qml
+++ b/qml/components/ConferenceHeader.qml
@@ -47,6 +47,7 @@ import TalkSchedule 1.0
 
 Item {
     id: conferenceHeader
+    signal showMenu
     property var event
     Rectangle {
         id: topicRect
@@ -65,7 +66,7 @@ Item {
                 MouseArea {
                     id: mouseAreaBack
                     anchors.fill: parent
-                    enabled: stack.depth > 1
+                    enabled: !!stack.currentItem && stack.currentItem.objectName === "event"
                     onClicked: stack.pop()
                     Rectangle {
                         anchors.fill: parent
@@ -79,7 +80,7 @@ Item {
                         anchors.left: parent.left
                         anchors.verticalCenter: parent.verticalCenter
                         anchors.leftMargin: Theme.margins.twenty
-                        opacity: stack.depth > 1 ? 1 : 0
+                        opacity: (stack.depth > 1 && (!!stack.currentItem && stack.currentItem.objectName === "event")) ? 1 : 0
                         Behavior on opacity { PropertyAnimation{} }
                         height: Theme.sizes.backHeight
                         width: Theme.sizes.backWidth
@@ -89,43 +90,15 @@ Item {
                     }
                 }
 
-                MouseArea {
-                    id: locationMenuMouseArea
+                Item {
+                    id: locationArea
                     anchors.fill: parent
-                    enabled: stack.depth == 1
-                    onClicked: locationMenu.popup()
-
-                    Rectangle {
-                        anchors.fill: parent
-                        anchors.margins: Theme.margins.five
-                        color: locationMenuMouseArea.pressed ? Theme.colors.smokewhite : Theme.colors.white
-                        visible: stack.depth == 1
-                        radius: 5
-                    }
-
-                    Menu {
-                        id: locationMenu
-                        Instantiator {
-                            id: menuConferenceRepeater
-                            model: applicationClient.conferencesModel.rowCount()
-                            MenuItem {
-                                text: applicationClient.conferencesModel.data(index, "title")
-                                onTriggered: applicationClient.setCurrentConferenceIndex(index)
-                            }
-                            onObjectAdded: locationMenu.insertItem(locationMenu.items.length, object)
-                        }
-
-                        Connections {
-                            target: applicationClient.conferencesModel
-                            onDataReady: menuConferenceRepeater.model = applicationClient.conferencesModel.rowCount()
-                        }
-                    }
 
                     Item {
                         id: locationButton
                         anchors.left: parent.left
                         anchors.verticalCenter: parent.verticalCenter
-                        opacity: stack.depth == 1 ? 1 : 0
+                        opacity: (!!stack.currentItem && stack.currentItem.objectName !== "event" && Theme.currentConference !== "") ? 1 : 0
                         Behavior on opacity { PropertyAnimation{} }
 
                         Image {
@@ -170,7 +143,7 @@ Item {
                 Layout.alignment: Qt.AlignRight
                 Layout.preferredWidth: topicRect.height
                 Layout.preferredHeight: topicRect.height
-                onClicked: menu.popup()
+                onClicked: showMenu()
                 enabled: ModelsSingleton.conferenceId !== ""
                 Rectangle {
                     anchors.fill: parent
@@ -178,55 +151,9 @@ Item {
                     color: mouseAreaMenu.pressed ? Theme.colors.smokewhite : Theme.colors.white
                     radius: 5
                 }
-                Menu {
-                    id: menu
-                    MenuItem {
-                        text: Theme.text.home
-                        onTriggered: {
-                            var item = Qt.resolvedUrl("HomeScreen.qml")
-                            stack.pop(stack.find(function(item){ return item.objectName === "homeScreen" }))
-                        }
-                    }
-                    MenuItem {
-                        text: Theme.text.schedule
-                        onTriggered: {
-                            var itemT = Qt.resolvedUrl("TrackSwitcher.qml")
-                            var loadedTr = stack.find(function(itemT){ return itemT.objectName === "trackSwitcher" })
-                            if (loadedTr !== null)
-                                stack.pop(loadedTr)
-                            else
-                                stack.push(itemT)
-                        }
-                    }
-                    MenuItem {
-                        text: Theme.text.talks
-                        onTriggered: {
-                            var itemE = Qt.resolvedUrl("EventsList.qml")
-                            var loadedEv = stack.find(function(itemE){ return (itemE.isFavoriteView === false)})
-                            if (loadedEv !== null)
-                                stack.pop(loadedEv)
-                            else
-                                stack.push(itemE)
-                        }
-                    }
-                    MenuItem {
-                        text: Theme.text.favorites
-                        onTriggered: {
-                            var itemFa = Qt.resolvedUrl("EventsList.qml")
-                            var loadedFav = stack.find(function(itemFa){ return (itemFa.isFavoriteView === true)})
-                            if (loadedFav !== null) {
-                                stack.pop(loadedFav)
-                            } else {
-                                stack.push({
-                                               "item" : itemFa,
-                                               "properties" : { "isFavoriteView" : true }
-                                           })
-                            }
-                        }
-                    }
-                }
                 Image {
                     id: dropMenu
+                    visible: mouseAreaMenu.enabled
                     anchors.centerIn: parent
                     Layout.alignment: Qt.AlignRight
                     height: Theme.sizes.menuHeight
diff --git a/qml/components/Event.qml b/qml/components/Event.qml
index bf6d80d..a813044 100644
--- a/qml/components/Event.qml
+++ b/qml/components/Event.qml
@@ -48,6 +48,7 @@ Rectangle {
     id: eventView
     property string eventId
     signal selectFavorite(bool favorite)
+    objectName: "event"
 
     property var indexCurrentEvent: ModelsSingleton.eventModel.indexOf("id", eventId)
     property var model: ModelsSingleton.eventModel
diff --git a/qml/main.qml b/qml/main.qml
index b2245e6..6eb3cb9 100644
--- a/qml/main.qml
+++ b/qml/main.qml
@@ -59,18 +59,155 @@ ApplicationWindow {
         onError: ModelsSingleton.errorMessage = errorMessage
     }
 
+    Item {
+        id: menuPicker
+        anchors.fill: parent
+        z: 2
+        visible: false
+        MouseArea {
+            anchors.fill: parent
+            onClicked: menuPicker.visible = false
+        }
+        Rectangle {
+            anchors.fill: parent
+            color: Theme.colors.black
+            opacity: 0.65
+        }
+
+        Rectangle {
+            id: menuRectangle
+            color: Theme.colors.white_menu
+            anchors.centerIn: parent
+            width: Theme.sizes.menuPopupWidth
+            z: 3
+            radius: Theme.margins.twenty
+            ListModel {
+                id: menuModel
+                Component.onCompleted: {
+                    append({name: Theme.text.home, id: "home" })
+                    append({name: Theme.text.schedule, id: "schedule"  })
+                    append({name: Theme.text.talks, id: "talks"  })
+                    append({name: Theme.text.favorites, id: "favorites"  })
+                    menuRectangle.height = Theme.sizes.buttonHeight * menuModel.count
+                }
+            }
+            Repeater {
+                id: listMenu
+                anchors.fill: parent
+                model: menuModel
+                function firstOrLast(index)
+                {
+                    if (index === 0)
+                        return 1
+                    else if (index === (menuModel.count - 1))
+                        return 2
+                    else
+                        return 0
+                }
+
+                Rectangle {
+                    z: 2
+                    height: Theme.sizes.buttonHeight
+                    width: parent.width
+                    color: !mouseArea.pressed ? Theme.colors.white_menu : Theme.colors.blue_menu
+                    y: Theme.sizes.buttonHeight * index
+                    radius: Theme.margins.twenty
+                    Rectangle {
+                        width: parent.width
+                        property int posStatus: listMenu.firstOrLast(index)
+                        height:  Theme.sizes.buttonHeight - (posStatus !== 0 ? Theme.margins.twenty : 0)
+                        y: posStatus === 1 ? Theme.margins.twenty : 0
+                        color: !mouseArea.pressed ? Theme.colors.white_menu : Theme.colors.blue_menu
+                    }
+
+                    Text {
+                        z: 2
+                        anchors.left: parent.left
+                        anchors.leftMargin: Theme.margins.ten
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.verticalCenterOffset: -separator.height
+                        width: parent.width
+                        text: name
+                        color: mouseArea.pressed ? Theme.colors.white : Theme.colors.blue_menu
+                        font.pointSize: Theme.fonts.eight_pt
+                        verticalAlignment: Text.AlignVCenter
+                        horizontalAlignment: Text.AlignHCenter
+                    }
+                    Rectangle {
+                        id: separator
+                        visible: index < menuModel.count - 1
+                        anchors.bottom: parent.bottom
+                        height: Theme.applyRatio(1)
+                        width: parent.width
+                        color: Theme.colors.gray_menu
+                    }
+                    MouseArea {
+                        id: mouseArea
+                        anchors.fill: parent
+                        onClicked: listMenu.pushView(id)
+                    }
+                }
+
+                function pushView(id)
+                {
+                    switch (id) {
+                    case "home":
+                        var item = Qt.resolvedUrl("components/HomeScreen.qml")
+                        stack.pop(stack.find(function(item){ return item.objectName === "homeScreen" }))
+                        break
+                    case "schedule":
+                        var itemT = Qt.resolvedUrl("components/TrackSwitcher.qml")
+                        var loadedTr = stack.find(function(itemT){ return itemT.objectName === "trackSwitcher" })
+                        if (loadedTr !== null)
+                            stack.pop(loadedTr)
+                        else
+                            stack.push(itemT)
+                        break
+                    case "talks":
+                        var itemE = Qt.resolvedUrl("components/EventsList.qml")
+                        var loadedEv = stack.find(function(itemE){ return (itemE.isFavoriteView === false)})
+                        if (loadedEv !== null)
+                            stack.pop(loadedEv)
+                        else
+                            stack.push(itemE)
+                        break
+                    case "favorites":
+                        var itemFa = Qt.resolvedUrl("components/EventsList.qml")
+                        var loadedFav = stack.find(function(itemFa){ return (itemFa.isFavoriteView === true)})
+                        if (loadedFav !== null) {
+                            stack.pop(loadedFav)
+                        } else {
+                            stack.push({
+                                           "item" : itemFa,
+                                           "properties" : { "isFavoriteView" : true }
+                                       })
+                        }
+                        break
+                    default:
+                        break
+                    }
+                    menuPicker.visible = false
+                }
+            }
+        }
+    }
+
     ConferenceHeader {
         id: header
+        anchors.top: parent.top
         height: Theme.sizes.conferenceHeaderHeight
         width: parent.width
         opacity: stack.opacity
         Behavior on opacity { PropertyAnimation{} }
+        onShowMenu: menuPicker.visible = !menuPicker.visible
     }
 
     StackView {
         id: stack
         focus: true
-        anchors.fill: parent
+        width: parent.width
+        anchors.top: header.bottom
+        anchors.bottom: parent.bottom
         opacity: 1 - splashscreen.opacity
         Behavior on opacity { PropertyAnimation{} }
         // capture Android back key
@@ -100,7 +237,6 @@ ApplicationWindow {
                 PropertyAnimation {target: splashlogo; properties: "height"; from: 0; to: Theme.sizes.logoHeight * 2; duration: 1500}
                 onRunningChanged: if (!running) {
                                       splashscreen.opacity = 0
-                                      toolBar = header
                                       stack.push(Qt.resolvedUrl("components/HomeScreen.qml"))
                                   }
             }
diff --git a/src/theme.cpp b/src/theme.cpp
index feaa503..2732032 100644
--- a/src/theme.cpp
+++ b/src/theme.cpp
@@ -95,6 +95,9 @@ Theme::Theme(QObject *parent)
     m_colors->insert(QLatin1String("green"), QVariant("#328930"));
     m_colors->insert(QLatin1String("qtgreen"), QVariant("#5caa15"));
     m_colors->insert(QLatin1String("black"), QVariant("#000000"));
+    m_colors->insert(QLatin1String("blue_menu"), QVariant("#2087fc"));
+    m_colors->insert(QLatin1String("white_menu"), QVariant("#eeeeee"));
+    m_colors->insert(QLatin1String("gray_menu"), QVariant("#999999"));
 
     m_sizes = new QQmlPropertyMap(this);
     m_sizes->insert(QLatin1String("trackHeaderHeight"), QVariant(applyRatio(270)));
@@ -123,6 +126,7 @@ Theme::Theme(QObject *parent)
     m_sizes->insert(QLatin1String("infoButtonSize"), QVariant(applyRatio(160)));
     m_sizes->insert(QLatin1String("reloadButtonSize"), QVariant(applyRatio(50)));
     m_sizes->insert(QLatin1String("twitterAvatarSize"), QVariant(applyRatio(80)));
+    m_sizes->insert(QLatin1String("menuPopupWidth"), QVariant(applyRatio(550)));
 
     m_images = new QQmlPropertyMap(this);
     m_images->insert(QLatin1String("back"), QVariant("qrc:/images/BackArrow.svg"));
@@ -148,6 +152,7 @@ Theme::Theme(QObject *parent)
 
     m_margins = new QQmlPropertyMap(this);
     m_margins->insert(QLatin1String("five"), QVariant(applyRatio(5)));
+    m_margins->insert(QLatin1String("seven"), QVariant(applyRatio(7)));
     m_margins->insert(QLatin1String("ten"), QVariant(applyRatio(10)));
     m_margins->insert(QLatin1String("fifteen"), QVariant(applyRatio(15)));
     m_margins->insert(QLatin1String("twenty"), QVariant(applyRatio(20)));