mirror of
https://github.com/overte-org/overte.git
synced 2025-04-21 09:44:21 +02:00
Merge pull request #9377 from fayeli/tablet-menu-qml
Rework Context Menu QML to Be Suitable for Tablet
This commit is contained in:
commit
bbff372097
4 changed files with 88 additions and 9 deletions
|
@ -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()
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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:
|
||||
|
|
Loading…
Reference in a new issue