Merge pull request #9377 from fayeli/tablet-menu-qml

Rework Context Menu QML to Be Suitable for Tablet
This commit is contained in:
Seth Alves 2017-01-13 09:59:57 -08:00 committed by GitHub
commit bbff372097
4 changed files with 88 additions and 9 deletions

View file

@ -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()

View file

@ -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
}

View file

@ -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();

View file

@ -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: