From f316505a05090653e1bee519a5f1c62137a8c178 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 13:11:08 -0800 Subject: [PATCH 1/7] context menu fill to fit tablet screen --- interface/resources/qml/hifi/tablet/TabletMenuView.qml | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenuView.qml b/interface/resources/qml/hifi/tablet/TabletMenuView.qml index b3a6bcf811..f6205561b3 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuView.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenuView.qml @@ -37,9 +37,10 @@ FocusScope { ListView { id: listView - x: 8; y: 8 - width: parent.width - height: parent.height + x: 0 + y: 0 + width: 480 + height: 720 topMargin: hifi.dimensions.menuPadding.y onEnabledChanged: recalcSize(); onVisibleChanged: recalcSize(); From 41356f8b1db06cc8a98e5f73e13a8a449c64db64 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 14:36:33 -0800 Subject: [PATCH 2/7] make space for menu navigation bar --- .../qml/hifi/tablet/TabletMenuView.qml | 29 +++++++++++++++++-- 1 file changed, 27 insertions(+), 2 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenuView.qml b/interface/resources/qml/hifi/tablet/TabletMenuView.qml index f6205561b3..b2d3641a14 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuView.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenuView.qml @@ -26,13 +26,37 @@ FocusScope { HifiConstants { id: hifi } + 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 + } + Rectangle { id: background anchors.fill: listView 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 { @@ -41,7 +65,8 @@ FocusScope { y: 0 width: 480 height: 720 - topMargin: hifi.dimensions.menuPadding.y + + topMargin: hifi.dimensions.menuPadding.y + 90 onEnabledChanged: recalcSize(); onVisibleChanged: recalcSize(); onCountChanged: recalcSize(); From 99b6c6f1fd4e19ed50bb733fbc525ab76218b8f5 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 15:47:02 -0800 Subject: [PATCH 3/7] menu icon and breadcrumb text --- .../qml/hifi/tablet/TabletMenuView.qml | 35 +++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/interface/resources/qml/hifi/tablet/TabletMenuView.qml b/interface/resources/qml/hifi/tablet/TabletMenuView.qml index b2d3641a14..0c183be3dc 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuView.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenuView.qml @@ -11,6 +11,7 @@ import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 +import QtGraphicalEffects 1.0 import "../../styles-uit" @@ -47,6 +48,40 @@ FocusScope { 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 + // TODO: navigate back to top level menu + onClicked: iconColorOverlay.color = "#1fc6a6" + } + } + + 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 + } + } Rectangle { From ef699db5be91664681ded0dc7cd4a58280ce731b Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 16:14:37 -0800 Subject: [PATCH 4/7] nav bar menu now bring you back to menu root --- .../resources/qml/hifi/tablet/TabletMenu.qml | 51 +++++++++++++++- .../qml/hifi/tablet/TabletMenuView.qml | 58 ------------------- 2 files changed, 48 insertions(+), 61 deletions(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenu.qml b/interface/resources/qml/hifi/tablet/TabletMenu.qml index 36de421a78..b4cfc65ccf 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenu.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenu.qml @@ -4,19 +4,64 @@ import QtQuick.Controls 1.4 import QtQml 2.2 import "." - 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 + // navigate back to top level menu + onClicked: buildMenu(); + } + } + + ColorOverlay { + id: iconColorOverlay + anchors.fill: menuRootIcon + source: menuRootIcon + color: "#ffffff" + } + } + function setRootMenu(menu) { tabletMenu.rootMenu = menu buildMenu() diff --git a/interface/resources/qml/hifi/tablet/TabletMenuView.qml b/interface/resources/qml/hifi/tablet/TabletMenuView.qml index 0c183be3dc..4038ba060a 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenuView.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenuView.qml @@ -11,7 +11,6 @@ import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 -import QtGraphicalEffects 1.0 import "../../styles-uit" @@ -27,63 +26,6 @@ FocusScope { HifiConstants { id: hifi } - 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 - // TODO: navigate back to top level menu - onClicked: iconColorOverlay.color = "#1fc6a6" - } - } - - 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 - } - - } - Rectangle { id: background anchors.fill: listView From 54eef26eaa46d207d3340f87755aaa09fca53070 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 16:33:33 -0800 Subject: [PATCH 5/7] click breadcrumb text to go back to parent menu --- .../resources/qml/hifi/tablet/TabletMenu.qml | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenu.qml b/interface/resources/qml/hifi/tablet/TabletMenu.qml index b4cfc65ccf..7a3ec46364 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenu.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenu.qml @@ -3,6 +3,7 @@ import QtGraphicalEffects 1.0 import QtQuick.Controls 1.4 import QtQml 2.2 import "." +import "../../styles-uit" Item { id: tabletMenu @@ -49,7 +50,7 @@ Item { MouseArea { anchors.fill: parent - // navigate back to top level menu + // navigate back to root level menu onClicked: buildMenu(); } } @@ -60,6 +61,21 @@ Item { 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 + // navigate back to parent level menu + onClicked: menuPopperUpper.closeLastMenu(); + } + } } function setRootMenu(menu) { From 10a82ac11f6dffb9a75844d8eb0e9d38dbd827d7 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 17:38:13 -0800 Subject: [PATCH 6/7] update breadcrumb text as you navigate menus --- interface/resources/qml/hifi/tablet/TabletMenu.qml | 2 +- .../resources/qml/hifi/tablet/TabletMouseHandler.qml | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenu.qml b/interface/resources/qml/hifi/tablet/TabletMenu.qml index 7a3ec46364..6412e564ef 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenu.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenu.qml @@ -64,7 +64,7 @@ Item { RalewayBold { id: breadcrumbText - text: "MENU" + text: "Menu" size: 18 color: "#ffffff" anchors.verticalCenter: parent.verticalCenter 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: From 834e3af879866a081d909ca1f017e39b7a527683 Mon Sep 17 00:00:00 2001 From: Faye Li Si Fi Date: Thu, 12 Jan 2017 18:12:13 -0800 Subject: [PATCH 7/7] checkbox margin and nav hover color --- interface/resources/qml/hifi/tablet/TabletMenu.qml | 6 ++++++ interface/resources/qml/hifi/tablet/TabletMenuItem.qml | 2 +- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/interface/resources/qml/hifi/tablet/TabletMenu.qml b/interface/resources/qml/hifi/tablet/TabletMenu.qml index 6412e564ef..87daceea3b 100644 --- a/interface/resources/qml/hifi/tablet/TabletMenu.qml +++ b/interface/resources/qml/hifi/tablet/TabletMenu.qml @@ -50,6 +50,9 @@ Item { MouseArea { anchors.fill: parent + hoverEnabled: true + onEntered: iconColorOverlay.color = "#1fc6a6"; + onExited: iconColorOverlay.color = "#ffffff"; // navigate back to root level menu onClicked: buildMenu(); } @@ -72,6 +75,9 @@ Item { 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(); } 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 }