From fb0f97264c29f5f9af8b96cb92e9abab1865430d Mon Sep 17 00:00:00 2001 From: David Rowe Date: Fri, 11 Mar 2016 15:24:35 +1300 Subject: [PATCH] Style HMD menu items --- interface/resources/qml/menus/VrMenuItem.qml | 55 ++++++++++++------- interface/resources/qml/menus/VrMenuView.qml | 14 +++-- .../qml/styles-uit/HifiConstants.qml | 5 +- 3 files changed, 48 insertions(+), 26 deletions(-) diff --git a/interface/resources/qml/menus/VrMenuItem.qml b/interface/resources/qml/menus/VrMenuItem.qml index 955ab86167..f2c077a59e 100644 --- a/interface/resources/qml/menus/VrMenuItem.qml +++ b/interface/resources/qml/menus/VrMenuItem.qml @@ -12,8 +12,8 @@ import QtQuick 2.5 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 -import "../controls" -import "../styles" +import "../controls-uit" +import "../styles-uit" Item { id: root @@ -21,24 +21,28 @@ Item { property alias text: label.text property var source - implicitHeight: source.visible ? label.implicitHeight * 1.5 : 0 - implicitWidth: label.width + label.height * 2.5 + implicitHeight: source.visible ? 2 * label.implicitHeight : 0 + implicitWidth: 2 * hifi.dimensions.menuPadding.x + check.width + label.width + tail.width visible: source.visible width: parent.width FontAwesome { clip: true id: check - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - anchors.verticalCenter: parent.verticalCenter + verticalAlignment: Text.AlignVCenter + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: hifi.dimensions.menuPadding.x + } + width: 1.5 * hifi.dimensions.menuPadding.x color: label.color text: checkText() size: label.height visible: source.visible font.pixelSize: size function checkText() { - if (!source || source.type != 1 || !source.checkable) { + if (!source || source.type !== 1 || !source.checkable) { return "" } // FIXME this works for native QML menus but I don't think it will @@ -50,25 +54,36 @@ Item { } } - Text { + RalewaySemiBold { id: label + size: hifi.fontSizes.rootMenu + font.capitalization: Font.AllUppercase anchors.left: check.right - anchors.leftMargin: 4 anchors.verticalCenter: parent.verticalCenter verticalAlignment: Text.AlignVCenter - color: source.enabled ? hifi.colors.text : hifi.colors.disabledText + color: source.enabled ? hifi.colors.baseGrayShadow : hifi.colors.baseGrayShadow50 enabled: source.visible && (source.type !== 0 ? source.enabled : false) visible: source.visible } - FontAwesome { - id: tag - x: root.parent.width - width - size: label.height - width: implicitWidth - visible: source.visible && (source.type == 2) - text: "\uF0DA" - anchors.verticalCenter: parent.verticalCenter - color: label.color + Item { + // Space for shortcut key or disclosure icon. + id: tail + width: 4 * hifi.dimensions.menuPadding.x + anchors { + verticalCenter: parent.verticalCenter + right: parent.right + rightMargin: hifi.dimensions.menuPadding.x + } + + HiFiGlyphs { + text: hifi.glyphs.disclosureExpand + color: source.enabled ? hifi.colors.baseGrayShadow : hifi.colors.baseGrayShadow25 + size: 2 * hifi.fontSizes.rootMenuDisclosure + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + horizontalAlignment: Text.AlignRight + visible: source.visible && (source.type === 2) + } } } diff --git a/interface/resources/qml/menus/VrMenuView.qml b/interface/resources/qml/menus/VrMenuView.qml index 8778bc4bd1..d8cc0e6667 100644 --- a/interface/resources/qml/menus/VrMenuView.qml +++ b/interface/resources/qml/menus/VrMenuView.qml @@ -40,16 +40,20 @@ FocusScope { x: 8; y: 8 width: 128 height: count * 32 - topMargin: hifi.dimensions.menuPadding + topMargin: hifi.dimensions.menuPadding.y onEnabledChanged: recalcSize(); onVisibleChanged: recalcSize(); onCountChanged: recalcSize(); focus: true highlight: Rectangle { - width: listView.currentItem ? listView.currentItem.width : 0 - height: listView.currentItem ? listView.currentItem.height : 0 - color: "lightsteelblue"; radius: 3 + anchors { + left: parent ? parent.left : undefined + right: parent ? parent.right : undefined + leftMargin: hifi.dimensions.borderWidth + rightMargin: hifi.dimensions.borderWidth + } + color: hifi.colors.white } delegate: VrMenuItem { @@ -86,7 +90,7 @@ FocusScope { newHeight += currentItem.implicitHeight } } - newHeight += 2 * hifi.dimensions.menuPadding; // White space at top and bottom. + newHeight += 2 * hifi.dimensions.menuPadding.y; // White space at top and bottom. if (maxWidth > width) { width = maxWidth; } diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml index 4f06b676e6..3b6eb2d9fc 100644 --- a/interface/resources/qml/styles-uit/HifiConstants.qml +++ b/interface/resources/qml/styles-uit/HifiConstants.qml @@ -67,6 +67,8 @@ Item { readonly property color darkGray30: "#4d121212" readonly property color darkGray0: "#00121212" readonly property color baseGrayShadow60: "#99252525" + readonly property color baseGrayShadow50: "#80252525" + readonly property color baseGrayShadow25: "#40252525" readonly property color baseGrayHighlight40: "#66575757" readonly property color baseGrayHighlight15: "#26575757" readonly property color lightGrayText80: "#ccafafaf" @@ -136,7 +138,7 @@ Item { readonly property real modalDialogTitleHeight: 40 readonly property real controlLineHeight: 29 // Height of spinbox control on 1920 x 1080 monitor readonly property real controlInterlineHeight: 22 // 75% of controlLineHeight - readonly property real menuPadding: 12 + readonly property vector2d menuPadding: Qt.vector2d(12, 12) } Item { @@ -154,6 +156,7 @@ Item { readonly property real logs: dimensions.largeScreen ? 16 : 12 readonly property real code: dimensions.largeScreen ? 16 : 12 readonly property real rootMenu: dimensions.largeScreen ? 15 : 11 + readonly property real rootMenuDisclosure: dimensions.largeScreen ? 20 : 16 readonly property real menuItem: dimensions.largeScreen ? 15 : 11 readonly property real shortcutText: dimensions.largeScreen ? 13 : 9 readonly property real carat: dimensions.largeScreen ? 38 : 30