From 6e803c41f408ab6dfee77454da61d59cc05ff401 Mon Sep 17 00:00:00 2001 From: fieldOfView Date: Thu, 20 May 2021 11:57:19 +0200 Subject: [PATCH] Add Cura-styled Menu, MenuItem and MenuSeparator controls --- .../Menus/SettingVisibilityPresetsMenu.qml | 12 ++-- resources/qml/Widgets/Menu.qml | 24 +++++++ resources/qml/Widgets/MenuItem.qml | 66 +++++++++++++++++++ resources/qml/Widgets/MenuSeparator.qml | 20 ++++++ resources/qml/qmldir | 3 + 5 files changed, 119 insertions(+), 6 deletions(-) create mode 100644 resources/qml/Widgets/Menu.qml create mode 100644 resources/qml/Widgets/MenuItem.qml create mode 100644 resources/qml/Widgets/MenuSeparator.qml diff --git a/resources/qml/Menus/SettingVisibilityPresetsMenu.qml b/resources/qml/Menus/SettingVisibilityPresetsMenu.qml index e2bb6b2a56..08d74a74ce 100644 --- a/resources/qml/Menus/SettingVisibilityPresetsMenu.qml +++ b/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 {} - MenuItem + Cura.MenuSeparator {} + Cura.MenuItem { text: catalog.i18nc("@action:inmenu", "Collapse All Categories") onTriggered: @@ -48,8 +48,8 @@ Menu collapseAllCategories(); } } - MenuSeparator {} - MenuItem + Cura.MenuSeparator {} + Cura.MenuItem { text: catalog.i18nc("@action:inmenu", "Manage Setting Visibility...") icon.name: "configure" diff --git a/resources/qml/Widgets/Menu.qml b/resources/qml/Widgets/Menu.qml new file mode 100644 index 0000000000..1c6a55c28a --- /dev/null +++ b/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") + } +} \ No newline at end of file diff --git a/resources/qml/Widgets/MenuItem.qml b/resources/qml/Widgets/MenuItem.qml new file mode 100644 index 0000000000..a930bfe901 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/resources/qml/Widgets/MenuSeparator.qml b/resources/qml/Widgets/MenuSeparator.qml new file mode 100644 index 0000000000..cfc696fbb3 --- /dev/null +++ b/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") + } +} \ No newline at end of file diff --git a/resources/qml/qmldir b/resources/qml/qmldir index ab61101778..df2518c988 100644 --- a/resources/qml/qmldir +++ b/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