Merge pull request #7321 from ctrlaltdavid/20829

Restyle HMD menus

interface/resources/qml/menus/MenuMouseHandler.qml

@@ -1,3 +1,13 @@
+//
+//  MessageDialog.qml
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
 import QtQuick 2.5
 import QtQuick.Controls 1.4
 
@@ -94,8 +104,8 @@ Item {
 
         function buildMenu(items, targetPosition) {
             var model = toModel(items);
-            // Menu's must be childed to desktop for Z-ordering
+            // Menus must be childed to desktop for Z-ordering
-            var newMenu = menuViewMaker.createObject(desktop, { model: model, z: topMenu ? topMenu.z + 1 : desktop.zLevels.menu });
+            var newMenu = menuViewMaker.createObject(desktop, { model: model, z: topMenu ? topMenu.z + 1 : desktop.zLevels.menu, isSubMenu: topMenu !== null });
             if (targetPosition) {
                 newMenu.x = targetPosition.x
                 newMenu.y = targetPosition.y - newMenu.height / 3 * 1

interface/resources/qml/menus/VrMenuItem.qml

@@ -1,9 +1,19 @@
-import QtQuick 2.4
+//
-import QtQuick.Controls 1.3
+//  VrMenuItem.qml
-import QtQuick.Controls.Styles 1.3
+//
+//  Created by Bradley Austin Davis on 29 Apr 2015
+//  Copyright 2015 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
 
-import "../controls"
+import QtQuick 2.5
-import "../styles"
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
+
+import "../controls-uit"
+import "../styles-uit"
 
 Item {
     id: root
@@ -11,54 +21,93 @@ Item {
     property alias text: label.text
     property var source
 
-    implicitHeight: source.visible ? label.implicitHeight * 1.5 : 0
+    implicitHeight: source.visible ? 2 * label.implicitHeight : 0
-    implicitWidth: label.width + label.height * 2.5
+    implicitWidth: 2 * hifi.dimensions.menuPadding.x + check.width + label.width + tail.width
     visible: source.visible
     width: parent.width
 
-    FontAwesome {
+    CheckBox {
-        clip: true
         id: check
-        verticalAlignment:  Text.AlignVCenter
+        // FIXME: Should use radio buttons if source.exclusiveGroup.
-        horizontalAlignment: Text.AlignHCenter
+        anchors {
-        anchors.verticalCenter: parent.verticalCenter
+            left: parent.left
-        color: label.color
+            leftMargin: hifi.dimensions.menuPadding.x
-        text: checkText()
+            top: label.top
-        size: label.height
+            topMargin: 0
-        visible: source.visible
+        }
-        font.pixelSize: size
+        width: 20
-        function checkText() {
+        visible: source.visible && source.type === 1 && source.checkable
-            if (!source || source.type != 1 || !source.checkable) {
+        checked: setChecked()
-                return ""
+        function setChecked() {
+            if (!source || source.type !== 1 || !source.checkable) {
+                return false;
             }
             // FIXME this works for native QML menus but I don't think it will
             // for proxied QML menus
-            if (source.exclusiveGroup) {
+            return source.checked;
-                return source.checked ? "\uF05D" : "\uF10C"
-            }
-            return source.checked ? "\uF046" : "\uF096"
         }
     }
 
-    Text {
+    RalewaySemiBold {
         id: label
+        size: hifi.fontSizes.rootMenu
+        font.capitalization: isSubMenu ? Font.MixedCase : 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 {
+    Item {
-        id: tag
+        id: separator
-        x: root.parent.width - width
+        anchors {
-        size: label.height
+            fill: parent
-        width: implicitWidth
+            leftMargin: hifi.dimensions.menuPadding.x + check.width
-        visible: source.visible && (source.type == 2)
+            rightMargin: hifi.dimensions.menuPadding.x + tail.width
-        text: "\uF0DA"
+        }
-        anchors.verticalCenter: parent.verticalCenter
+        visible: source.type === MenuItemType.Separator
-        color: label.color
+
+        Rectangle {
+            anchors {
+                left: parent.left
+                right: parent.right
+                verticalCenter: parent.verticalCenter
+            }
+            height: 1
+            color: hifi.colors.lightGray50
+        }
+    }
+
+    Item {
+        id: tail
+        width: 48 + (shortcut.visible ? shortcut.width : 0)
+        anchors {
+            verticalCenter: parent.verticalCenter
+            right: parent.right
+            rightMargin: hifi.dimensions.menuPadding.x
+        }
+
+        RalewayLight {
+            id: shortcut
+            text: source.shortcut ? source.shortcut : ""
+            size: hifi.fontSizes.shortcutText
+            color: hifi.colors.baseGrayShadow
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 15
+            visible: source.visible && text != ""
+        }
+
+        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)
+        }
     }
 }

interface/resources/qml/menus/VrMenuView.qml

@@ -1,44 +1,59 @@
-import QtQuick 2.4
+//
-import QtQuick.Controls 1.3
+//  VrMenuView.qml
-import QtQuick.Controls.Styles 1.3
+//
+//  Created by Bradley Austin Davis on 18 Jan 2016
+//  Copyright 2016 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
 
-import "../styles"
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 
+import "../styles-uit"
 
 FocusScope {
     id: root
-    implicitHeight: border.height
+    implicitHeight: background.height
-    implicitWidth: border.width
+    implicitWidth: background.width
 
     property alias currentItem: listView.currentItem
     property alias model: listView.model
+    property bool isSubMenu: false
     signal selected(var item)
 
+    HifiConstants { id: hifi }
 
-    Border {
+    Rectangle {
-        id: border
+        id: background
         anchors.fill: listView
-        anchors.margins: -8
+        radius: hifi.dimensions.borderRadius
-        border.color: hifi.colors.hifiBlue
+        border.width: hifi.dimensions.borderWidth
-        color: hifi.colors.window
+        border.color: hifi.colors.lightGrayText80
-        // color: "#7f7f7f7f"
+        color: isSubMenu ? hifi.colors.faintGray : hifi.colors.faintGray80
     }
 
     ListView {
         id: listView
         x: 8; y: 8
-        HifiConstants { id: hifi }
         width: 128
         height: count * 32
+        topMargin: hifi.dimensions.menuPadding.y
         onEnabledChanged: recalcSize();
         onVisibleChanged: recalcSize();
         onCountChanged: recalcSize();
         focus: true
 
         highlight: Rectangle {
-            width: listView.currentItem ? listView.currentItem.width : 0
+            anchors {
-            height: listView.currentItem ? listView.currentItem.height : 0
+                left: parent ? parent.left : undefined
-            color: "lightsteelblue"; radius: 3
+                right: parent ? parent.right : undefined
+                leftMargin: hifi.dimensions.borderWidth
+                rightMargin: hifi.dimensions.borderWidth
+            }
+            color: hifi.colors.white
         }
 
         delegate: VrMenuItem {
@@ -75,6 +90,7 @@ FocusScope {
                     newHeight += currentItem.implicitHeight
                 }
             }
+            newHeight += 2 * hifi.dimensions.menuPadding.y;  // White space at top and bottom.
             if (maxWidth > width) {
                 width = maxWidth;
             }

interface/resources/qml/styles-uit/FontAwesome.qml

@@ -1,26 +0,0 @@
-//
-//  FontAwesome.qml
-//
-//  Created by Bradley Austin Davis on 24 Apr 2015
-//  Copyright 2015 High Fidelity, Inc.
-//
-//  Distributed under the Apache License, Version 2.0.
-//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
-//
-
-import QtQuick 2.5
-import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.4
-
-Text {
-    id: root
-    FontLoader { id: iconFont; source: "../../fonts/fontawesome-webfont.ttf"; }
-    property int size: 32
-    width: size
-    height: size
-    font.pixelSize: size
-    verticalAlignment: Text.AlignVCenter
-    horizontalAlignment: Text.AlignLeft
-    font.family: iconFont.name
-}
-

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -67,9 +67,13 @@ 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 lightGray50: "#806a6a6a"
         readonly property color lightGrayText80: "#ccafafaf"
+        readonly property color faintGray80: "#cce3e3e3"
         readonly property color faintGray50: "#80e3e3e3"
 
         // Other colors
@@ -135,6 +139,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 vector2d menuPadding: Qt.vector2d(14, 12)
     }
 
     Item {
@@ -152,6 +157,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

libraries/ui/src/VrMenu.cpp

@@ -104,6 +104,7 @@ void updateQmlItemFromAction(QObject* target, QAction* source) {
     target->setProperty("checkable", source->isCheckable());
     target->setProperty("enabled", source->isEnabled());
     target->setProperty("text", source->text());
+    target->setProperty("shortcut", source->shortcut().toString());
     target->setProperty("checked", source->isChecked());
     target->setProperty("visible", source->isVisible());
 }
@@ -190,6 +191,20 @@ void VrMenu::addAction(QMenu* menu, QAction* action) {
     bindActionToQmlAction(result, action);
 }
 
+void VrMenu::addSeparator(QMenu* menu) {
+    Q_ASSERT(MenuUserData::forObject(menu));
+    MenuUserData* userData = MenuUserData::forObject(menu);
+    if (!userData) {
+        return;
+    }
+    QObject* menuQml = findMenuObject(userData->uuid.toString());
+    Q_ASSERT(menuQml);
+
+    bool invokeResult = QMetaObject::invokeMethod(menuQml, "addSeparator", Qt::DirectConnection);
+    Q_ASSERT(invokeResult);
+    Q_UNUSED(invokeResult); // FIXME - apparently we haven't upgraded the Qt on our unix Jenkins environments to 5.5.x
+}
+
 void VrMenu::insertAction(QAction* before, QAction* action) {
     QObject* beforeQml{ nullptr };
     {

libraries/ui/src/VrMenu.h

@@ -28,6 +28,7 @@ public:
     VrMenu(QObject* parent = nullptr);
     void addMenu(QMenu* menu);
     void addAction(QMenu* parent, QAction* action);
+    void addSeparator(QMenu* parent);
     void insertAction(QAction* before, QAction* action);
     void removeAction(QAction* action);
 

libraries/ui/src/ui/Menu.cpp

@@ -511,7 +511,11 @@ void MenuWrapper::setEnabled(bool enabled) {
 }
 
 QAction* MenuWrapper::addSeparator() {
-    return _realMenu->addSeparator();
+    QAction* action = _realMenu->addSeparator();
+    VrMenu::executeOrQueue([=](VrMenu* vrMenu) {
+        vrMenu->addSeparator(_realMenu);
+    });
+    return action;
 }
 
 void MenuWrapper::addAction(QAction* action) {