diff --git a/interface/resources/qml/hifi/tablet/TabletMenu.qml b/interface/resources/qml/hifi/tablet/TabletMenu.qml index 36de421a78..87daceea3b 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenu.qml +++ b/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 - height: parent.height + width: 480 + 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() diff --git a/interface/resources/qml/hifi/tablet/TabletMenuItem.qml b/interface/resources/qml/hifi/tablet/TabletMenuItem.qml index ce45ca7065..ae6a56e9df 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuItem.qml +++ b/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 } diff --git a/interface/resources/qml/hifi/tablet/TabletMenuView.qml b/interface/resources/qml/hifi/tablet/TabletMenuView.qml index b3a6bcf811..4038ba060a 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuView.qml +++ b/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 - width: parent.width - height: parent.height - topMargin: hifi.dimensions.menuPadding.y + x: 0 + y: 0 + width: 480 + height: 720 + + topMargin: hifi.dimensions.menuPadding.y + 90 onEnabledChanged: recalcSize(); onVisibleChanged: recalcSize(); onCountChanged: recalcSize(); diff --git a/interface/resources/qml/hifi/tablet/TabletMouseHandler.qml b/interface/resources/qml/hifi/tablet/TabletMouseHandler.qml index db74de82fb..ab02f42a86 100644 --- a/interface/resources/qml/hifi/tablet/TabletMouseHandler.qml +++ b/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: