Merge pull request #7321 from ctrlaltdavid/20829

Restyle HMD menus
2025-04-16 11:52:04 +02:00 · 2016-03-11 20:43:27 -08:00 · 2016-03-11 20:43:27 -08:00 · c93ed7c6f7
commit c93ed7c6f7
parent 001cdfad38 8b9319b29e
8 changed files with 156 additions and 81 deletions
--- a/interface/resources/qml/menus/MenuMouseHandler.qml
+++ b/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
-            var newMenu = menuViewMaker.createObject(desktop, { model: model, z: topMenu ? topMenu.z + 1 : desktop.zLevels.menu });
+            // Menus must be childed to desktop for Z-ordering
+            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
--- a/interface/resources/qml/menus/VrMenuItem.qml
+++ b/interface/resources/qml/menus/VrMenuItem.qml
@ -1,9 +1,19 @@
-import QtQuick 2.4
-import QtQuick.Controls 1.3
-import QtQuick.Controls.Styles 1.3
+//
+//  VrMenuItem.qml
+//
+//  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 "../styles"
+import QtQuick 2.5
+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
-    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
+    CheckBox {
        id: check
-        verticalAlignment:  Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-        anchors.verticalCenter: parent.verticalCenter
-        color: label.color
-        text: checkText()
-        size: label.height
-        visible: source.visible
-        font.pixelSize: size
-        function checkText() {
-            if (!source || source.type != 1 || !source.checkable) {
-                return ""
+        // FIXME: Should use radio buttons if source.exclusiveGroup.
+        anchors {
+            left: parent.left
+            leftMargin: hifi.dimensions.menuPadding.x
+            top: label.top
+            topMargin: 0
+        }
+        width: 20
+        visible: source.visible && source.type === 1 && source.checkable
+        checked: setChecked()
+        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 ? "\uF05D" : "\uF10C"
-            }
-            return source.checked ? "\uF046" : "\uF096"
+            return source.checked;
        }
    }

-    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 {
-        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 {
+        id: separator
+        anchors {
+            fill: parent
+            leftMargin: hifi.dimensions.menuPadding.x + check.width
+            rightMargin: hifi.dimensions.menuPadding.x + tail.width
+        }
+        visible: source.type === MenuItemType.Separator
+
+        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)
+        }
    }
 }
--- a/interface/resources/qml/menus/VrMenuView.qml
+++ b/interface/resources/qml/menus/VrMenuView.qml
@ -1,44 +1,59 @@
-import QtQuick 2.4
-import QtQuick.Controls 1.3
-import QtQuick.Controls.Styles 1.3
+//
+//  VrMenuView.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 "../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
-    implicitWidth: border.width
+    implicitHeight: background.height
+    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 {
-        id: border
+    Rectangle {
+        id: background
        anchors.fill: listView
-        anchors.margins: -8
-        border.color: hifi.colors.hifiBlue
-        color: hifi.colors.window
-        // color: "#7f7f7f7f"
+        radius: hifi.dimensions.borderRadius
+        border.width: hifi.dimensions.borderWidth
+        border.color: hifi.colors.lightGrayText80
+        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
-            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 {
@ -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;
            }
--- a/interface/resources/qml/styles-uit/FontAwesome.qml
+++ b/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
-}
-
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/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
--- a/libraries/ui/src/VrMenu.cpp
+++ b/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 };
    {
--- a/libraries/ui/src/VrMenu.h
+++ b/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);

--- a/libraries/ui/src/ui/Menu.cpp
+++ b/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) {