Add Cura-styled Menu, MenuItem and MenuSeparator controls

resources/qml/Menus/SettingVisibilityPresetsMenu.qml

@@ -8,7 +8,7 @@ import QtQml.Models 2.14 as Models
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-Menu
+Cura.Menu
 {
     ActionGroup { id: group }
 
@@ -23,7 +23,7 @@ Menu
     {
         model: settingVisibilityPresetsModel.items
 
-        MenuItem
+        Cura.MenuItem
         {
             text: modelData.name
             checkable: true
@@ -39,8 +39,8 @@ Menu
         onObjectRemoved: menu.removeItem(object)
     }
 
-    MenuSeparator {}
+    Cura.MenuSeparator {}
-    MenuItem
+    Cura.MenuItem
     {
         text: catalog.i18nc("@action:inmenu", "Collapse All Categories")
         onTriggered:
@@ -48,8 +48,8 @@ Menu
             collapseAllCategories();
         }
     }
-    MenuSeparator {}
+    Cura.MenuSeparator {}
-    MenuItem
+    Cura.MenuItem
     {
         text: catalog.i18nc("@action:inmenu", "Manage Setting Visibility...")
         icon.name: "configure"

resources/qml/Widgets/Menu.qml

@@ -0,0 +1,24 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.1 as UM
+
+//
+// Menu with Cura styling.
+//
+Menu
+{
+    id: menu
+    padding: 0
+
+    implicitWidth: UM.Theme.getSize("setting_control").width
+    width: Math.max.apply(Math, Object.values(contentChildren).map(function(c) { return c.width }))
+
+    background: Rectangle {
+        color: UM.Theme.getColor("setting_control")
+        border.color: UM.Theme.getColor("setting_control_border")
+    }
+}

resources/qml/Widgets/MenuItem.qml

@@ -0,0 +1,66 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.1 as UM
+
+//
+// MenuItem with Cura styling.
+//
+MenuItem
+{
+    id: menuItem
+
+    implicitHeight: UM.Theme.getSize("setting_control").height + UM.Theme.getSize("narrow_margin").height
+    opacity: enabled ? 1.0 : 0.5
+
+    arrow: UM.RecolorImage
+    {
+        visible: menuItem.subMenu
+        height: UM.Theme.getSize("default_arrow").height
+        width: height
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: UM.Theme.getSize("default_margin").width
+        source: UM.Theme.getIcon("arrow_right")
+        color: UM.Theme.getColor("setting_control_text")
+    }
+
+    indicator: UM.RecolorImage
+    {
+        id: check
+        visible: menuItem.checkable && menuItem.checked
+        height: UM.Theme.getSize("default_arrow").height
+        width: height
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        source: UM.Theme.getIcon("check")
+        color: UM.Theme.getColor("setting_control_text")
+    }
+
+    contentItem: Text {
+        leftPadding: menuItem.checkable ? menuItem.indicator.width + UM.Theme.getSize("default_margin").width : UM.Theme.getSize("thin_margin").width
+        rightPadding: menuItem.subMenu ? menuItem.arrow.width + UM.Theme.getSize("default_margin").width : UM.Theme.getSize("thin_margin").width
+        text: menuItem.text
+
+        textFormat: Text.PlainText
+        renderType: Text.NativeRendering
+        color: UM.Theme.getColor("setting_control_text")
+        font: UM.Theme.getFont("default")
+        elide: Text.ElideRight
+        verticalAlignment: Text.AlignVCenter
+    }
+
+    background: Rectangle {
+        x: UM.Theme.getSize("default_lining").width
+        y: UM.Theme.getSize("default_lining").width
+        width: menuItem.width - 2 * UM.Theme.getSize("default_lining").width
+        height: menuItem.height - 2 * UM.Theme.getSize("default_lining").height
+
+        color: menuItem.highlighted ?  UM.Theme.getColor("setting_control_highlight") : "transparent"
+        border.color: menuItem.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
+    }
+}

resources/qml/Widgets/MenuSeparator.qml

@@ -0,0 +1,20 @@
+// Copyright (c) 2021 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.3
+
+import UM 1.1 as UM
+
+//
+// MenuSeparator with Cura styling.
+//
+MenuSeparator
+{
+    padding: 0
+
+    contentItem: Rectangle {
+        implicitHeight: UM.Theme.getSize("default_lining").height
+        color: UM.Theme.getColor("setting_control_border")
+    }
+}

resources/qml/qmldir

@@ -36,6 +36,9 @@ Scrollable          1.0 Scrollable.qml
 TabButton           1.0 TabButton.qml
 TextField           1.0 TextField.qml
 ScrollView          1.0 ScrollView.qml
+Menu                1.0 Menu.qml
+MenuItem            1.0 MenuItem.qml
+MenuSeparator       1.0 MenuSeparator.qml
 
 
 # Cura/MachineSettings