Merge branch 'tablet-ui' of github.com:highfidelity/hifi into tablet-ui

interface/resources/qml/hifi/tablet/TabletMenu.qml

@@ -3,20 +3,87 @@ import QtGraphicalEffects 1.0
 import QtQuick.Controls 1.4
 import QtQml 2.2
 import "."
-
+import "../../styles-uit"
 
 Item {
     id: tabletMenu
     objectName: "tabletMenu"
 
-    width: parent.width
+    width: 480
-    height: parent.height
+    height: 720
 
     property var rootMenu: Menu { objectName:"rootMenu" }
     property var point: Qt.point(50, 50)
 
     TabletMouseHandler { id: menuPopperUpper }
 
+    Rectangle {
+        id: bgNavBar
+        height: 90
+        z: 1
+        gradient: Gradient {
+            GradientStop {
+                position: 0
+                color: "#2b2b2b"
+            }
+
+            GradientStop {
+                position: 1
+                color: "#1e1e1e"
+            }
+        }
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.topMargin: 0
+        anchors.top: parent.top
+
+        Image {
+            id: menuRootIcon
+            width: 40
+            height: 40
+            source: "../../../icons/tablet-icons/menu-i.svg"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            anchors.leftMargin: 15
+
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                onEntered: iconColorOverlay.color = "#1fc6a6";
+                onExited: iconColorOverlay.color = "#ffffff";
+                // navigate back to root level menu
+                onClicked: buildMenu();
+            }
+        }
+
+        ColorOverlay {
+            id: iconColorOverlay
+            anchors.fill: menuRootIcon
+            source: menuRootIcon
+            color: "#ffffff"
+        }
+
+        RalewayBold {
+            id: breadcrumbText
+            text: "Menu"
+            size: 18
+            color: "#ffffff"
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: menuRootIcon.right
+            anchors.leftMargin: 15
+            MouseArea {
+                anchors.fill: parent
+                hoverEnabled: true
+                onEntered: breadcrumbText.color = "#1fc6a6";
+                onExited: breadcrumbText.color = "#ffffff";
+                // navigate back to parent level menu
+                onClicked: menuPopperUpper.closeLastMenu();
+            }
+        }
+    }
+
     function setRootMenu(menu) {
         tabletMenu.rootMenu = menu
         buildMenu()

interface/resources/qml/hifi/tablet/TabletMenuItem.qml

@@ -31,7 +31,7 @@ Item {
         // FIXME: Should use radio buttons if source.exclusiveGroup.
         anchors {
             left: parent.left
-            leftMargin: hifi.dimensions.menuPadding.x
+            leftMargin: hifi.dimensions.menuPadding.x + 15
             top: label.top
             topMargin: 0
         }

interface/resources/qml/hifi/tablet/TabletMenuView.qml

@@ -32,15 +32,18 @@ FocusScope {
         radius: hifi.dimensions.borderRadius
         border.width: hifi.dimensions.borderWidth
         border.color: hifi.colors.lightGrayText80
-        color: isSubMenu ? hifi.colors.faintGray : hifi.colors.faintGray80
+        color: hifi.colors.faintGray
+        //color: isSubMenu ? hifi.colors.faintGray : hifi.colors.faintGray80
     }
 
     ListView {
         id: listView
-        x: 8; y: 8
+        x: 0
-        width: parent.width
+        y: 0
-        height: parent.height
+        width: 480
-        topMargin: hifi.dimensions.menuPadding.y
+        height: 720
+
+        topMargin: hifi.dimensions.menuPadding.y + 90
         onEnabledChanged: recalcSize();
         onVisibleChanged: recalcSize();
         onCountChanged: recalcSize();

interface/resources/qml/hifi/tablet/TabletMouseHandler.qml

@@ -81,7 +81,14 @@ Item {
             if (menuStack.length) {
                 topMenu = menuStack[menuStack.length - 1];
                 topMenu.focus = true;
+                // show current menu level on nav bar
+                if (topMenu.objectName === "") {
+                    breadcrumbText.text = "Menu";
+                } else {
+                    breadcrumbText.text = topMenu.objectName;
+                }
             } else {
+                breadcrumbText.text = "Menu";
                 topMenu = null;
                 //offscreenFlags.navigationFocused = false;
                 menuRoot.enabled = false;
@@ -133,6 +140,8 @@ Item {
                 case MenuItemType.Menu:
                     var target = Qt.vector2d(topMenu.x, topMenu.y).plus(Qt.vector2d(selectedItem.x + 96, selectedItem.y));
                     buildMenu(item.items, target).objectName = item.title;
+                    // show current menu level on nav bar
+                    breadcrumbText.text = item.title;
                     break;
 
                 case MenuItemType.Item: