From 06a30a702c20f8d7599e51489086bf019ee4c3c6 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Fri, 4 Mar 2022 17:23:36 +0100 Subject: [PATCH 01/11] Update Settings view category items to new style Removed the fixed height from the SettingView list so that the SettingItems can have a larger height than the SettingCategory CURA-9005 --- resources/qml/Settings/SettingCategory.qml | 48 ++++++++++++++-------- resources/qml/Settings/SettingItem.qml | 3 +- resources/qml/Settings/SettingView.qml | 2 - resources/themes/cura-dark/theme.json | 4 -- resources/themes/cura-light/theme.json | 8 ++-- 5 files changed, 36 insertions(+), 29 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index d8b9b2c83f..1a0d1e1106 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -16,26 +16,41 @@ Button anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width hoverEnabled: true - height: UM.Theme.getSize("section_icon_column").height + height: enabled ? UM.Theme.getSize("section").height : 0 background: Rectangle { id: backgroundRectangle - height: UM.Theme.getSize("section").height + height: base.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") - } + + 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 + } + + states: + [ + State + { + name: "disabled" + when: !base.enabled + PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_disabled")} + }, + State + { + name: "hovered" + when: base.hovered + PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_hover")} + } + ] } signal showTooltip(string text) @@ -73,7 +88,7 @@ Button anchors { left: parent.left - leftMargin: 2 * UM.Theme.getSize("default_margin").width + UM.Theme.getSize("section_icon").width + leftMargin: (0.9 * UM.Theme.getSize("default_margin").width) + UM.Theme.getSize("section_icon").width right: parent.right verticalCenter: parent.verticalCenter } @@ -91,7 +106,7 @@ Button id: category_arrow anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: UM.Theme.getSize("default_margin").width + 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 @@ -105,7 +120,6 @@ Button 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 diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 0470e91faa..e1788c723e 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -13,8 +13,7 @@ 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 diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index 2ab98081e7..bf38fe783e 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -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 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 7b2c19ff01..11ddcf7041 100644 --- a/resources/themes/cura-dark/theme.json +++ b/resources/themes/cura-dark/theme.json @@ -121,12 +121,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 ba18e5d0d2..ae84eb7755 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -286,12 +286,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", From c2cb837f4eef06d0712003788e3901350241d7e8 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Mon, 7 Mar 2022 10:46:03 +0100 Subject: [PATCH 02/11] update indentation CURA-9005 --- resources/qml/Settings/SettingItem.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index e1788c723e..861e403df1 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -136,7 +136,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 From 798e86646c65d1f6e58cb89b2cf544ff520e08a1 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Mon, 7 Mar 2022 12:04:37 +0100 Subject: [PATCH 03/11] Make CategoryButton generic, it is used in SettingCategory.qml, PerObjectCategory.qml and SettingVisibilityCategory.qml. Remove left margin on categories CURA-9005 --- resources/qml/Settings/SettingCategory.qml | 116 ++------------------- 1 file changed, 7 insertions(+), 109 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index 1a0d1e1106..1c046232cb 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -4,54 +4,18 @@ import QtQuick 2.7 import QtQuick.Controls 2.0 -import UM 1.1 as UM +import UM 1.5 as UM import Cura 1.0 as Cura -Button +UM.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: enabled ? UM.Theme.getSize("section").height : 0 - - background: Rectangle - { - id: backgroundRectangle - height: base.height - anchors.verticalCenter: parent.verticalCenter - - 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 - } - - states: - [ - State - { - name: "disabled" - when: !base.enabled - PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_disabled")} - }, - State - { - name: "hovered" - when: base.hovered - PropertyChanges { target: backgroundRectangle; color: UM.Theme.getColor("setting_category_hover")} - } - ] - } + categoryIcon: UM.Theme.getIcon(definition.icon) + expanded: definition.expanded + labelText: definition.label signal showTooltip(string text) signal hideTooltip() @@ -61,72 +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: (0.9 * 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("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: definition.expanded ? UM.Theme.getIcon("ChevronSingleDown") : UM.Theme.getIcon("ChevronSingleLeft") - } - } - - UM.RecolorImage - { - id: icon - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.left - 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: { @@ -165,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 } @@ -182,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: { From 76d9cf6f4dd803bf9e99c4cbb88e2424a8adf958 Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Mon, 7 Mar 2022 13:20:05 +0100 Subject: [PATCH 04/11] Remove margins that keep listview items from being under the scrollbar. Instead set width of listView smaller so it doesn't overlap. Update per object setting visibility dialog to have same category design as SettingVisibilityCategory.qml and SettingCategory.qml CURA-9005 --- .../PerObjectCategory.qml | 52 ++----------------- .../PerObjectSettingsTool/PerObjectItem.qml | 9 +--- .../SettingPickDialog.qml | 2 + .../qml/Preferences/SettingVisibilityPage.qml | 4 +- resources/qml/Settings/SettingView.qml | 4 +- 5 files changed, 12 insertions(+), 59 deletions(-) diff --git a/plugins/PerObjectSettingsTool/PerObjectCategory.qml b/plugins/PerObjectSettingsTool/PerObjectCategory.qml index 3d0b1d826e..266e345309 100644 --- a/plugins/PerObjectSettingsTool/PerObjectCategory.qml +++ b/plugins/PerObjectSettingsTool/PerObjectCategory.qml @@ -8,58 +8,16 @@ import UM 1.5 as UM import Cura 1.0 as Cura import ".." -Button { +UM.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..cb361488b7 100644 --- a/plugins/PerObjectSettingsTool/PerObjectItem.qml +++ b/plugins/PerObjectSettingsTool/PerObjectItem.qml @@ -10,19 +10,12 @@ 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 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/Preferences/SettingVisibilityPage.qml b/resources/qml/Preferences/SettingVisibilityPage.qml index a29818ad4e..b82b95e946 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 { @@ -167,7 +167,7 @@ UM.PreferencesPage { id: loader - width: settingsListView.width + width: settingsListView.width - scrollBar.width height: model.type != undefined ? UM.Theme.getSize("section").height : 0 property var definition: model diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index bf38fe783e..b136b114fd 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 { @@ -218,7 +218,7 @@ Item { id: delegate - width: contents.width + width: contents.width - scrollBar.width Behavior on height { NumberAnimation { duration: 100 } } opacity: enabled ? 1 : 0 Behavior on opacity { NumberAnimation { duration: 100 } } From dc5a1ae120635b64b83512400b3661d24f316b6f Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Mon, 7 Mar 2022 13:26:50 +0100 Subject: [PATCH 05/11] Remove redundant reference to spacer CURA-9005 --- plugins/PerObjectSettingsTool/PerObjectItem.qml | 3 --- 1 file changed, 3 deletions(-) diff --git a/plugins/PerObjectSettingsTool/PerObjectItem.qml b/plugins/PerObjectSettingsTool/PerObjectItem.qml index cb361488b7..b6cf13943b 100644 --- a/plugins/PerObjectSettingsTool/PerObjectItem.qml +++ b/plugins/PerObjectSettingsTool/PerObjectItem.qml @@ -19,9 +19,6 @@ UM.TooltipArea UM.CheckBox { id: check - - anchors.left: spacer.right - text: definition.label checked: addedSettingsModel.getVisible(model.key) From eb88316eee4c9e6253283ae3c454d978629adaea Mon Sep 17 00:00:00 2001 From: "j.delarago" Date: Mon, 7 Mar 2022 13:36:11 +0100 Subject: [PATCH 06/11] Give PerObjectSettingsPanel.qml the same margin between settings as main settings CURA-9005 --- plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml b/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml index 03e1da7d35..6442cb7803 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 From 5499a4cc4c1fa52957bc25c45521fc48f902c52d Mon Sep 17 00:00:00 2001 From: 10r3n20 Date: Mon, 7 Mar 2022 16:11:33 +0100 Subject: [PATCH 07/11] tiny improvements --- resources/qml/Settings/SettingItem.qml | 5 +++-- resources/qml/Settings/SettingView.qml | 3 +-- resources/themes/cura-light/theme.json | 6 ++++-- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 861e403df1..559975a344 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -13,11 +13,12 @@ import "." Item { id: base - height: enabled ? UM.Theme.getSize("section").height + UM.Theme.getSize("narrow_margin").height: 0 + height: enabled ? UM.Theme.getSize("section").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 + //anchors.rightMargin: UM.Theme.getSize("thin_margin").width property alias contents: controlContainer.children property alias hovered: mouse.containsMouse diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index b136b114fd..12c9eee8a7 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -180,7 +180,6 @@ Item ListView { id: contents - anchors { top: filterContainer.bottom @@ -218,7 +217,7 @@ Item { id: delegate - width: contents.width - scrollBar.width + 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-light/theme.json b/resources/themes/cura-light/theme.json index fd915a53da..56b706517e 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -524,9 +524,11 @@ "extruder_icon": [2.5, 2.5], - "section": [0.0, 2], + "section": [0.0, 2.5], + "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], From 4f2e7116b7a8dbf73fbc2e8f6c44af7d4b419b63 Mon Sep 17 00:00:00 2001 From: 10r3n20 Date: Mon, 7 Mar 2022 16:25:14 +0100 Subject: [PATCH 08/11] minor fix to align setting visibility with settings --- resources/qml/Settings/SettingItem.qml | 2 +- resources/themes/cura-light/theme.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index 559975a344..d7bf44d2b9 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -13,7 +13,7 @@ import "." Item { id: base - height: enabled ? UM.Theme.getSize("section").height : 0 + height: enabled ? UM.Theme.getSize("section").height + UM.Theme.getSize("narrow_margin").height : 0 anchors.left: parent.left anchors.right: parent.right diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index 56b706517e..dc6e81c2b2 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -524,7 +524,7 @@ "extruder_icon": [2.5, 2.5], - "section": [0.0, 2.5], + "section": [0.0, 2], "section_header": [0.0, 2.5], "section_control": [0, 1], From addc5e36a7f17f317ede7d42b43d1f2c88572a87 Mon Sep 17 00:00:00 2001 From: Casper Lamboo Date: Fri, 11 Mar 2022 09:59:20 +0100 Subject: [PATCH 09/11] Apply suggestions from code review Co-authored-by: Jaime van Kessel --- plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml | 4 ++-- resources/qml/Settings/SettingItem.qml | 1 - resources/qml/Settings/SettingView.qml | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml b/plugins/PerObjectSettingsTool/PerObjectSettingsPanel.qml index f10cb5f22d..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("narrow_margin").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 + UM.Theme.getSize("narrow_margin").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/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index d7bf44d2b9..fa36192a42 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -18,7 +18,6 @@ Item anchors.right: parent.right // To avoid overlapping with the scrollBars - //anchors.rightMargin: UM.Theme.getSize("thin_margin").width property alias contents: controlContainer.children property alias hovered: mouse.containsMouse diff --git a/resources/qml/Settings/SettingView.qml b/resources/qml/Settings/SettingView.qml index 12c9eee8a7..4c1b6ff109 100644 --- a/resources/qml/Settings/SettingView.qml +++ b/resources/qml/Settings/SettingView.qml @@ -217,7 +217,7 @@ Item { id: delegate - width: contents.width - (scrollBar.width +UM.Theme.getSize("narrow_margin").width) + 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 } } From 5701f42d63f9637a56dc56ae9377102cd03c01ef Mon Sep 17 00:00:00 2001 From: casper Date: Fri, 11 Mar 2022 13:11:36 +0100 Subject: [PATCH 10/11] Move `CategoryButton` to cura repo CURA-9005 --- .../PerObjectCategory.qml | 6 +- resources/qml/CategoryButton.qml | 121 ++++++++++++++++++ .../Preferences/SettingVisibilityCategory.qml | 23 ++++ .../qml/Preferences/SettingVisibilityItem.qml | 99 ++++++++++++++ .../qml/Preferences/SettingVisibilityPage.qml | 25 +--- resources/qml/Settings/SettingCategory.qml | 6 +- 6 files changed, 255 insertions(+), 25 deletions(-) create mode 100644 resources/qml/CategoryButton.qml create mode 100644 resources/qml/Preferences/SettingVisibilityCategory.qml create mode 100644 resources/qml/Preferences/SettingVisibilityItem.qml diff --git a/plugins/PerObjectSettingsTool/PerObjectCategory.qml b/plugins/PerObjectSettingsTool/PerObjectCategory.qml index 266e345309..99f0000393 100644 --- a/plugins/PerObjectSettingsTool/PerObjectCategory.qml +++ b/plugins/PerObjectSettingsTool/PerObjectCategory.qml @@ -4,11 +4,11 @@ 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 ".." -UM.CategoryButton { +Cura.CategoryButton +{ id: base; categoryIcon: definition ? UM.Theme.getIcon(definition.icon) : "" 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 b82b95e946..035f121537 100644 --- a/resources/qml/Preferences/SettingVisibilityPage.qml +++ b/resources/qml/Preferences/SettingVisibilityPage.qml @@ -163,6 +163,9 @@ UM.PreferencesPage visibilityHandler: UM.SettingPreferenceVisibilityHandler {} } + property Component settingVisibilityCategory: Cura.SettingVisibilityCategory {} + property Component settingVisibilityItem: Cura.SettingVisibilityItem {} + delegate: Loader { id: loader @@ -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 1c046232cb..0619017b2d 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -1,13 +1,13 @@ -// 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.5 as UM -import Cura 1.0 as Cura +import Cura 1.5 as Cura -UM.CategoryButton +Cura.CategoryButton { id: base anchors.left: parent.left From 1b976693dc886aed1e49e7d73f7495c9c1ff0ebf Mon Sep 17 00:00:00 2001 From: casper Date: Fri, 11 Mar 2022 13:13:25 +0100 Subject: [PATCH 11/11] Remove dangling comment CURA-9005 --- resources/qml/Settings/SettingItem.qml | 2 -- 1 file changed, 2 deletions(-) diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index fa36192a42..fa1976757b 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -17,8 +17,6 @@ Item anchors.left: parent.left anchors.right: parent.right - // To avoid overlapping with the scrollBars - property alias contents: controlContainer.children property alias hovered: mouse.containsMouse