diff --git a/plugins/PerObjectSettingsTool/PerObjectCategory.qml b/plugins/PerObjectSettingsTool/PerObjectCategory.qml index 3d0b1d826e..99f0000393 100644 --- a/plugins/PerObjectSettingsTool/PerObjectCategory.qml +++ b/plugins/PerObjectSettingsTool/PerObjectCategory.qml @@ -4,62 +4,20 @@ import QtQuick 2.2 import QtQuick.Controls 2.1 -import UM 1.5 as UM -import Cura 1.0 as Cura +import Cura 1.5 as Cura import ".." -Button { +Cura.CategoryButton +{ id: base; - background: Rectangle { - color: UM.Theme.getColor("category_background") - } - - contentItem: Row - { - spacing: UM.Theme.getSize("default_lining").width - - Item //Wrapper to give space before icon with fixed width. This allows aligning checkbox with category icon. - { - height: label.height - width: height - anchors.verticalCenter: parent.verticalCenter - - UM.RecolorImage - { - anchors.verticalCenter: parent.verticalCenter - height: (label.height / 2) | 0 - width: height - source: base.checked ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleRight") - color: base.hovered ? UM.Theme.getColor("primary_button_hover"): UM.Theme.getColor("text") - } - } - UM.RecolorImage - { - anchors.verticalCenter: parent.verticalCenter - height: label.height - width: height - source: UM.Theme.getIcon(definition.icon) - color: base.hovered ? UM.Theme.getColor("primary_button_hover") : UM.Theme.getColor("text") - } - UM.Label - { - id: label - anchors.verticalCenter: parent.verticalCenter - text: base.text - color: base.hovered ? UM.Theme.getColor("primary_button_hover") : UM.Theme.getColor("text") - font.bold: true - } - } + categoryIcon: definition ? UM.Theme.getIcon(definition.icon) : "" + labelText: definition ? definition.label : "" + expanded: definition ? definition.expanded : false signal showTooltip(string text) signal hideTooltip() signal contextMenuRequested() - text: definition.label - - checkable: true - checked: definition.expanded - - onClicked: definition.expanded ? settingDefinitionsModel.collapseRecursive(definition.key) : settingDefinitionsModel.expandRecursive(definition.key) + onClicked: expanded ? settingDefinitionsModel.collapseRecursive(definition.key) : settingDefinitionsModel.expandRecursive(definition.key) } diff --git a/plugins/PerObjectSettingsTool/PerObjectItem.qml b/plugins/PerObjectSettingsTool/PerObjectItem.qml index 0c8015541e..b6cf13943b 100644 --- a/plugins/PerObjectSettingsTool/PerObjectItem.qml +++ b/plugins/PerObjectSettingsTool/PerObjectItem.qml @@ -10,25 +10,15 @@ import Cura 1.0 as Cura UM.TooltipArea { - x: model.depth * UM.Theme.getSize("default_margin").width + x: model.depth * UM.Theme.getSize("narrow_margin").width text: model.description width: childrenRect.width height: childrenRect.height - Item - { - id: spacer - // Align checkbox with PerObjectCategory icon - width: UM.Theme.getSize("default_margin").width - } - UM.CheckBox { id: check - - anchors.left: spacer.right - text: definition.label checked: addedSettingsModel.getVisible(model.key) diff --git a/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml b/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml index 17bdee2618..a53f051db8 100644 --- a/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml +++ b/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml @@ -187,7 +187,7 @@ Item // It kinda looks ugly otherwise (big panel, no content on it) id: currentSettings property int maximumHeight: 200 * screenScaleFactor - height: Math.min(contents.count * (UM.Theme.getSize("section").height + UM.Theme.getSize("default_lining").height), maximumHeight) + height: Math.min(contents.count * (UM.Theme.getSize("section").height + UM.Theme.getSize("narrow_margin").height + UM.Theme.getSize("default_lining").height), maximumHeight) visible: currentMeshType != "anti_overhang_mesh" ListView @@ -245,7 +245,7 @@ Item { id: settingLoader width: UM.Theme.getSize("setting").width - height: UM.Theme.getSize("section").height + height: UM.Theme.getSize("section").height + UM.Theme.getSize("narrow_margin").height enabled: provider.properties.enabled === "True" property var definition: model property var settingDefinitionsModel: addedSettingsModel diff --git a/plugins/PerObjectSettingsTool/SettingPickDialog.qml b/plugins/PerObjectSettingsTool/SettingPickDialog.qml index d7d8091121..950c13809e 100644 --- a/plugins/PerObjectSettingsTool/SettingPickDialog.qml +++ b/plugins/PerObjectSettingsTool/SettingPickDialog.qml @@ -12,6 +12,8 @@ UM.Dialog { id: settingPickDialog + margin: UM.Theme.getSize("default_margin").width + title: catalog.i18nc("@title:window", "Select Settings to Customize for this model") width: UM.Theme.getSize("small_popup_dialog").width backgroundColor: UM.Theme.getColor("background_1") diff --git a/resources/qml/CategoryButton.qml b/resources/qml/CategoryButton.qml new file mode 100644 index 0000000000..dfd9625f6f --- /dev/null +++ b/resources/qml/CategoryButton.qml @@ -0,0 +1,121 @@ +// Copyright (c) 2022 Ultimaker B.V. +// Uranium is released under the terms of the LGPLv3 or higher. + +// Button used to collapse and de-collapse group, or a category, of settings +// the button contains +// - the title of the category, +// - an optional icon and +// - a chevron button to display the colapsetivity of the settings +// Mainly used for the collapsable categories in the settings pannel + +import QtQuick 2.2 +import QtQuick.Controls 2.1 + +import UM 1.5 as UM + +Button +{ + id: base + + height: enabled ? UM.Theme.getSize("section_header").height : 0 + + property var expanded: false + + property alias arrow: categoryArrow + property alias categoryIcon: icon.source + property alias labelText: categoryLabel.text + + states: + [ + State + { + name: "disabled" + when: !base.enabled + PropertyChanges { target: categoryLabel; color: UM.Theme.getColor("setting_category_disabled_text") } + PropertyChanges { target: icon; color: UM.Theme.getColor("setting_category_disabled_text") } + PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_disabled") } + }, + State + { + name: "hovered" + when: base.hovered + PropertyChanges { target: categoryLabel; color: UM.Theme.getColor("setting_category_active_text") } + PropertyChanges { target: icon; color: UM.Theme.getColor("setting_category_active_text") } + PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_hover") } + }, + State + { + name: "active" + when: base.pressed || base.activeFocus + PropertyChanges { target: categoryLabel; color: UM.Theme.getColor("setting_category_active_text") } + PropertyChanges { target: icon; color: UM.Theme.getColor("setting_category_active_text") } + PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category") } + } + ] + + background: Rectangle + { + id: backgroundRectangle + height: base.height + + color: UM.Theme.getColor("setting_category") + Behavior on color { ColorAnimation { duration: 50 } } + + Rectangle + { + //Lining on top + anchors.top: parent.top + color: UM.Theme.getColor("border_main") + height: UM.Theme.getSize("default_lining").height + width: parent.width + } + } + + contentItem: Item + { + anchors.fill: parent + + UM.Label + { + id: categoryLabel + anchors + { + left: parent.left + leftMargin: UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width + right: parent.right + verticalCenter: parent.verticalCenter + } + textFormat: Text.PlainText + font: UM.Theme.getFont("medium_bold") + color: UM.Theme.getColor("setting_category_text") + fontSizeMode: Text.HorizontalFit + minimumPointSize: 8 + } + + UM.RecolorImage + { + id: categoryArrow + anchors.verticalCenter: parent.verticalCenter + anchors.right: parent.right + anchors.rightMargin: UM.Theme.getSize("narrow_margin").width + width: UM.Theme.getSize("standard_arrow").width + height: UM.Theme.getSize("standard_arrow").height + sourceSize.height: width + color: UM.Theme.getColor("setting_control_button") + source: expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") + } + } + + UM.RecolorImage + { + id: icon + anchors.verticalCenter: parent.verticalCenter + anchors.left: parent.left + anchors.leftMargin: UM.Theme.getSize("narrow_margin").width + color: UM.Theme.getColor("setting_category_text") + width: UM.Theme.getSize("section_icon").width + height: UM.Theme.getSize("section_icon").height + sourceSize.width: width + sourceSize.height: width + } +} \ No newline at end of file diff --git a/resources/qml/Preferences/SettingVisibilityCategory.qml b/resources/qml/Preferences/SettingVisibilityCategory.qml new file mode 100644 index 0000000000..f9ed989076 --- /dev/null +++ b/resources/qml/Preferences/SettingVisibilityCategory.qml @@ -0,0 +1,23 @@ +// Copyright (c) 2022 Ultimaker B.V. +// Uranium is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.2 +import QtQuick.Controls 2.1 + +import UM 1.5 as UM +import Cura 1.5 as Cura + +Cura.CategoryButton +{ + id: base + + categoryIcon: definition ? UM.Theme.getIcon(definition.icon) : "" + labelText: definition ? definition.label : "" + expanded: definition ? definition.expanded : false + + signal showTooltip(string text) + signal hideTooltip() + signal contextMenuRequested() + + onClicked: expanded ? settingDefinitionsModel.collapseRecursive(definition.key) : settingDefinitionsModel.expandRecursive(definition.key) +} diff --git a/resources/qml/Preferences/SettingVisibilityItem.qml b/resources/qml/Preferences/SettingVisibilityItem.qml new file mode 100644 index 0000000000..b7edd54c35 --- /dev/null +++ b/resources/qml/Preferences/SettingVisibilityItem.qml @@ -0,0 +1,99 @@ +// Copyright (c) 2022 Ultimaker B.V. +// Uranium is released under the terms of the LGPLv3 or higher. + +import QtQuick 2.1 +import QtQuick.Controls 2.1 + +import UM 1.5 as UM + +Item +{ + // Use the depth of the model to move the item, but also leave space for the visibility / enabled exclamation mark. + + // Align checkbox with SettingVisibilityCategory icon with + 5 + x: definition ? definition.depth * UM.Theme.getSize("narrow_margin").width : UM.Theme.getSize("default_margin").width + + UM.TooltipArea + { + text: definition ? definition.description : "" + + width: childrenRect.width; + height: childrenRect.height; + id: checkboxTooltipArea + UM.CheckBox + { + id: check + + text: definition ? definition.label: "" + checked: definition ? definition.visible: false + enabled: definition ? !definition.prohibited: false + + MouseArea + { + anchors.fill: parent + onClicked: definitionsModel.setVisible(definition.key, !check.checked) + } + } + } + + UM.TooltipArea + { + width: height + height: check.height + anchors.left: checkboxTooltipArea.right + anchors.leftMargin: 2 * screenScaleFactor + + text: + { + if(provider.properties.enabled == "True") + { + return "" + } + var key = definition ? definition.key : "" + var requires = settingDefinitionsModel.getRequires(key, "enabled") + if (requires.length == 0) + { + return catalog.i18nc("@item:tooltip", "This setting has been hidden by the active machine and will not be visible."); + } + else + { + var requires_text = "" + for (var i in requires) + { + if (requires_text == "") + { + requires_text = requires[i].label + } + else + { + requires_text += ", " + requires[i].label + } + } + + return catalog.i18ncp("@item:tooltip %1 is list of setting names", "This setting has been hidden by the value of %1. Change the value of that setting to make this setting visible.", "This setting has been hidden by the values of %1. Change the values of those settings to make this setting visible.", requires.length) .arg(requires_text); + } + } + + UM.RecolorImage + { + anchors.centerIn: parent + width: Math.round(check.height * 0.75) | 0 + height: width + + source: UM.Theme.getIcon("Information") + + color: UM.Theme.getColor("primary_button_text") + } + + visible: provider.properties.enabled == "False" + } + + UM.SettingPropertyProvider + { + id: provider + + containerStackId: "global" + watchedProperties: [ "enabled" ] + key: definition ? definition.key : "" + } +} diff --git a/resources/qml/Preferences/SettingVisibilityPage.qml b/resources/qml/Preferences/SettingVisibilityPage.qml index a29818ad4e..035f121537 100644 --- a/resources/qml/Preferences/SettingVisibilityPage.qml +++ b/resources/qml/Preferences/SettingVisibilityPage.qml @@ -150,7 +150,7 @@ UM.PreferencesPage } clip: true - ScrollBar.vertical: UM.ScrollBar {} + ScrollBar.vertical: UM.ScrollBar { id: scrollBar } model: UM.SettingDefinitionsModel { @@ -163,11 +163,14 @@ UM.PreferencesPage visibilityHandler: UM.SettingPreferenceVisibilityHandler {} } + property Component settingVisibilityCategory: Cura.SettingVisibilityCategory {} + property Component settingVisibilityItem: Cura.SettingVisibilityItem {} + delegate: Loader { id: loader - width: settingsListView.width + width: settingsListView.width - scrollBar.width height: model.type != undefined ? UM.Theme.getSize("section").height : 0 property var definition: model @@ -177,31 +180,15 @@ UM.PreferencesPage active: model.type != undefined sourceComponent: { - switch(model.type) + switch (model.type) { case "category": - return settingVisibilityCategory + return settingsListView.settingVisibilityCategory default: - return settingVisibilityItem + return settingsListView.settingVisibilityItem } } } } - - UM.I18nCatalog { name: "cura" } - - Component - { - id: settingVisibilityCategory; - - UM.SettingVisibilityCategory { } - } - - Component - { - id: settingVisibilityItem; - - UM.SettingVisibilityItem { } - } } } diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index d8b9b2c83f..0619017b2d 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -1,42 +1,21 @@ -// Copyright (c) 2018 Ultimaker B.V. +// Copyright (c) 2022 Ultimaker B.V. // Cura is released under the terms of the LGPLv3 or higher. import QtQuick 2.7 import QtQuick.Controls 2.0 -import UM 1.1 as UM -import Cura 1.0 as Cura +import UM 1.5 as UM +import Cura 1.5 as Cura -Button +Cura.CategoryButton { id: base anchors.left: parent.left anchors.right: parent.right - // To avoid overlapping with the scrollBars - anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width - hoverEnabled: true - height: UM.Theme.getSize("section_icon_column").height - - background: Rectangle - { - id: backgroundRectangle - height: UM.Theme.getSize("section").height - anchors.verticalCenter: parent.verticalCenter - color: - { - if (!base.enabled) - { - return UM.Theme.getColor("setting_category_disabled") - } - else if (base.hovered) - { - return UM.Theme.getColor("setting_category_hover") - } - return UM.Theme.getColor("setting_category") - } - Behavior on color { ColorAnimation { duration: 50; } } - } + categoryIcon: UM.Theme.getIcon(definition.icon) + expanded: definition.expanded + labelText: definition.label signal showTooltip(string text) signal hideTooltip() @@ -46,73 +25,6 @@ Button signal setActiveFocusToNextSetting(bool forward) property var focusItem: base - property bool expanded: definition.expanded - - - property color text_color: - { - if (!base.enabled) - { - return UM.Theme.getColor("setting_category_disabled_text") - } else if (base.hovered || base.pressed || base.activeFocus) - { - return UM.Theme.getColor("setting_category_active_text") - } - - return UM.Theme.getColor("setting_category_text") - - } - - contentItem: Item - { - anchors.fill: parent - - Label - { - id: settingNameLabel - anchors - { - left: parent.left - leftMargin: 2 * UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width - right: parent.right - verticalCenter: parent.verticalCenter - } - text: definition.label - textFormat: Text.PlainText - renderType: Text.NativeRendering - font: UM.Theme.getFont("medium_bold") - color: base.text_color - fontSizeMode: Text.HorizontalFit - minimumPointSize: 8 - } - - UM.RecolorImage - { - id: category_arrow - anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.right - anchors.rightMargin: UM.Theme.getSize("default_margin").width - width: UM.Theme.getSize("standard_arrow").width - height: UM.Theme.getSize("standard_arrow").height - sourceSize.height: width - color: UM.Theme.getColor("setting_control_button") - source: definition.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") - } - } - - UM.RecolorImage - { - id: icon - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("thin_margin").width - color: base.text_color - source: UM.Theme.getIcon(definition.icon) - width: UM.Theme.getSize("section_icon").width - height: UM.Theme.getSize("section_icon").height - sourceSize.width: width - sourceSize.height: width - } onClicked: { @@ -151,7 +63,7 @@ Button { right: inheritButton.visible ? inheritButton.left : parent.right // Use 1.9 as the factor because there is a 0.1 difference between the settings and inheritance warning icons - rightMargin: inheritButton.visible ? Math.round(UM.Theme.getSize("default_margin").width / 2) : category_arrow.width + Math.round(UM.Theme.getSize("default_margin").width * 1.9) + rightMargin: inheritButton.visible ? Math.round(UM.Theme.getSize("default_margin").width / 2) : arrow.width + Math.round(UM.Theme.getSize("default_margin").width * 1.9) verticalCenter: parent.verticalCenter } @@ -168,7 +80,7 @@ Button anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: category_arrow.width + UM.Theme.getSize("default_margin").width * 2 + anchors.rightMargin: arrow.width + UM.Theme.getSize("default_margin").width * 2 visible: { diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 0470e91faa..fa1976757b 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -13,12 +13,9 @@ import "." Item { id: base - - height: UM.Theme.getSize("section").height + height: enabled ? UM.Theme.getSize("section").height + UM.Theme.getSize("narrow_margin").height : 0 anchors.left: parent.left anchors.right: parent.right - // To avoid overlapping with the scrollBars - anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width property alias contents: controlContainer.children property alias hovered: mouse.containsMouse @@ -137,7 +134,7 @@ Item id: label anchors.left: parent.left - anchors.leftMargin: doDepthIndentation ? Math.round(UM.Theme.getSize("thin_margin").width + ((definition.depth - 1) * UM.Theme.getSize("setting_control_depth_margin").width)) : 0 + anchors.leftMargin: doDepthIndentation ? Math.round(UM.Theme.getSize("thin_margin").width + ((definition.depth - 1) * UM.Theme.getSize("narrow_margin").width)) : 0 anchors.right: settingControls.left anchors.verticalCenter: parent.verticalCenter diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index a2a5e0c36b..ecafd25913 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -191,7 +191,7 @@ Item } clip: true cacheBuffer: 1000000 // Set a large cache to effectively just cache every list item. - ScrollBar.vertical: UM.ScrollBar {} + ScrollBar.vertical: UM.ScrollBar { id: scrollBar } model: UM.SettingDefinitionsModel { @@ -213,14 +213,12 @@ Item } property int indexWithFocus: -1 - property double delegateHeight: UM.Theme.getSize("section").height + 2 * UM.Theme.getSize("default_lining").height property string activeMachineId: Cura.MachineManager.activeMachine !== null ? Cura.MachineManager.activeMachine.id : "" delegate: Loader { id: delegate - width: contents.width - height: enabled ? contents.delegateHeight: 0 + width: contents.width - (scrollBar.width + UM.Theme.getSize("narrow_margin").width) Behavior on height { NumberAnimation { duration: 100 } } opacity: enabled ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 100 } } diff --git a/resources/themes/cura-dark/theme.json b/resources/themes/cura-dark/theme.json index afd36e8741..b7c1718c0d 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -134,12 +134,8 @@ "scrollbar_handle_hover": [255, 255, 255, 255], "scrollbar_handle_down": [255, 255, 255, 255], - "setting_category": "background_3", "setting_category_disabled": [75, 80, 83, 255], - "setting_category_hover": "background_3", - "setting_category_text": [255, 255, 255, 152], "setting_category_disabled_text": [255, 255, 255, 101], - "setting_category_active_text": [255, 255, 255, 204], "setting_control": "background_2", "setting_control_selected": [34, 39, 42, 38], diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 2f14a5be78..5583053ea2 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -299,12 +299,12 @@ "scrollbar_handle_hover": [50, 130, 255, 255], "scrollbar_handle_down": [50, 130, 255, 255], - "setting_category": [240, 240, 240, 255], + "setting_category": "background_1", "setting_category_disabled": [255, 255, 255, 255], - "setting_category_hover": [232, 242, 252, 255], - "setting_category_text": [35, 35, 35, 255], + "setting_category_hover": "background_2", + "setting_category_text": "text_default", "setting_category_disabled_text": [24, 41, 77, 101], - "setting_category_active_text": [35, 35, 35, 255], + "setting_category_active_text": "text_default", "setting_control": "background_2", "setting_control_highlight": "background_3", @@ -525,8 +525,10 @@ "extruder_icon": [2.5, 2.5], "section": [0.0, 2], + "section_header": [0.0, 2.5], + "section_control": [0, 1], - "section_icon": [2, 2], + "section_icon": [1.5, 1.5], "section_icon_column": [2.5, 2.5], "setting": [25.0, 1.8],