From 4e9c595bdd3dec5ac4f3688a4a25554fcf6f980d Mon Sep 17 00:00:00 2001 From: Diego Prado Gesto Date: Mon, 3 Dec 2018 15:34:33 +0100 Subject: [PATCH] Restyle the settings list Be sure that the alignments and the margins are corrects according to the designs. Contributes to CURA-5941. --- resources/qml/Settings/SettingCategory.qml | 34 ++--- resources/qml/Settings/SettingItem.qml | 149 ++++++++++++--------- resources/themes/cura-light/theme.json | 2 +- 3 files changed, 104 insertions(+), 81 deletions(-) diff --git a/resources/qml/Settings/SettingCategory.qml b/resources/qml/Settings/SettingCategory.qml index 9a061304d4..9b78683e14 100644 --- a/resources/qml/Settings/SettingCategory.qml +++ b/resources/qml/Settings/SettingCategory.qml @@ -138,19 +138,20 @@ Button if (!base.enabled) { return UM.Theme.getColor("setting_category_disabled_text") - } else if ((base.hovered || base.activeFocus) && base.checkable && base.checked) + } + else if ((base.hovered || base.activeFocus) && base.checkable && base.checked) { return UM.Theme.getColor("setting_category_active_hover_text") - } else if (base.pressed || (base.checkable && base.checked)) + } + else if (base.pressed || (base.checkable && base.checked)) { return UM.Theme.getColor("setting_category_active_text") - } else if (base.hovered || base.activeFocus) + } + else if (base.hovered || base.activeFocus) { return UM.Theme.getColor("setting_category_hover_text") - } else - { - return UM.Theme.getColor("setting_category_text") } + return UM.Theme.getColor("setting_category_text") } source: base.checked ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left") } @@ -161,25 +162,26 @@ Button id: icon anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: UM.Theme.getSize("default_margin").width + anchors.leftMargin: UM.Theme.getSize("thin_margin").width color: { if (!base.enabled) { return UM.Theme.getColor("setting_category_disabled_text") - } else if((base.hovered || base.activeFocus) && base.checkable && base.checked) + } + else if((base.hovered || base.activeFocus) && base.checkable && base.checked) { return UM.Theme.getColor("setting_category_active_hover_text") - } else if(base.pressed || (base.checkable && base.checked)) + } + else if(base.pressed || (base.checkable && base.checked)) { return UM.Theme.getColor("setting_category_active_text") - } else if(base.hovered || base.activeFocus) + } + else if(base.hovered || base.activeFocus) { return UM.Theme.getColor("setting_category_hover_text") - } else - { - return UM.Theme.getColor("setting_category_text") } + return UM.Theme.getColor("setting_category_text") } source: UM.Theme.getIcon(definition.icon) width: UM.Theme.getSize("section_icon").width @@ -196,7 +198,9 @@ Button if (definition.expanded) { settingDefinitionsModel.collapse(definition.key) - } else { + } + else + { settingDefinitionsModel.expandRecursive(definition.key) } //Set focus so that tab navigation continues from this point on. @@ -205,7 +209,7 @@ Button } onActiveFocusChanged: { - if(activeFocus) + if (activeFocus) { base.focusReceived() } diff --git a/resources/qml/Settings/SettingItem.qml b/resources/qml/Settings/SettingItem.qml index df90cffdf3..4dd53f8663 100644 --- a/resources/qml/Settings/SettingItem.qml +++ b/resources/qml/Settings/SettingItem.qml @@ -15,6 +15,10 @@ Item id: base height: UM.Theme.getSize("section").height + anchors.left: parent.left + anchors.right: parent.right + // To avoid overlaping with the scrollBars + anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width property alias contents: controlContainer.children property alias hovered: mouse.containsMouse @@ -44,25 +48,25 @@ Item var affected_by = settingDefinitionsModel.getRequires(definition.key, "value") var affected_by_list = "" - for(var i in affected_by) + for (var i in affected_by) { affected_by_list += "
  • %1
    • \n".arg(affected_by[i].label) } var affects_list = "" - for(var i in affects) + for (var i in affects) { affects_list += "
  • %1
    • \n".arg(affects[i].label) } var tooltip = "%1\n

    %2

    ".arg(definition.label).arg(definition.description) - if(affects_list != "") + if (affects_list != "") { tooltip += "
    %1\n".arg(catalog.i18nc("@label Header for list of settings.", "Affects")).arg(affects_list) } - if(affected_by_list != "") + if (affected_by_list != "") { tooltip += "
    %1\n".arg(catalog.i18nc("@label Header for list of settings.", "Affected By")).arg(affected_by_list) } @@ -72,35 +76,39 @@ Item MouseArea { - id: mouse; + id: mouse - anchors.fill: parent; + anchors.fill: parent - acceptedButtons: Qt.RightButton; + acceptedButtons: Qt.RightButton hoverEnabled: true; - onClicked: base.contextMenuRequested(); + onClicked: base.contextMenuRequested() - onEntered: { - hoverTimer.start(); + onEntered: + { + hoverTimer.start() } - onExited: { - if(controlContainer.item && controlContainer.item.hovered) { - return; + onExited: + { + if (controlContainer.item && controlContainer.item.hovered) + { + return } - hoverTimer.stop(); - base.hideTooltip(); + hoverTimer.stop() + base.hideTooltip() } - Timer { - id: hoverTimer; - interval: 500; - repeat: false; + Timer + { + id: hoverTimer + interval: 500 + repeat: false onTriggered: { - base.showTooltip(base.tooltipText); + base.showTooltip(base.tooltipText) } } @@ -109,16 +117,16 @@ Item id: label anchors.left: parent.left - anchors.leftMargin: doDepthIndentation ? Math.round((UM.Theme.getSize("section_icon_column").width / 1.2) + ((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("setting_control_depth_margin").width)) : 0 anchors.right: settingControls.left anchors.verticalCenter: parent.verticalCenter text: definition.label - elide: Text.ElideMiddle; + elide: Text.ElideMiddle renderType: Text.NativeRendering textFormat: Text.PlainText - color: UM.Theme.getColor("setting_control_text"); + color: UM.Theme.getColor("setting_control_text") opacity: (definition.visible) ? 1 : 0.5 // emphasize the setting if it has a value in the user or quality profile font: base.doQualityUserSettingEmphasis && base.stackLevel != undefined && base.stackLevel <= 1 ? UM.Theme.getFont("default_italic") : UM.Theme.getFont("default") @@ -131,7 +139,8 @@ Item height: Math.round(parent.height / 2) spacing: Math.round(UM.Theme.getSize("thick_margin").height / 2) - anchors { + anchors + { right: controlContainer.left rightMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2) verticalCenter: parent.verticalCenter @@ -151,112 +160,123 @@ Item iconSource: UM.Theme.getIcon("link") - onEntered: { - hoverTimer.stop(); - var tooltipText = catalog.i18nc("@label", "This setting is always shared between all extruders. Changing it here will change the value for all extruders."); - if ((resolve != "None") && (stackLevel != 0)) { + onEntered: + { + hoverTimer.stop() + var tooltipText = catalog.i18nc("@label", "This setting is always shared between all extruders. Changing it here will change the value for all extruders.") + if ((resolve != "None") && (stackLevel != 0)) + { // We come here if a setting has a resolve and the setting is not manually edited. - tooltipText += " " + catalog.i18nc("@label", "The value is resolved from per-extruder values ") + "[" + Cura.ExtruderManager.getInstanceExtruderValues(definition.key) + "]."; + tooltipText += " " + catalog.i18nc("@label", "The value is resolved from per-extruder values ") + "[" + Cura.ExtruderManager.getInstanceExtruderValues(definition.key) + "]." } - base.showTooltip(tooltipText); + base.showTooltip(tooltipText) } - onExited: base.showTooltip(base.tooltipText); + onExited: base.showTooltip(base.tooltipText) } UM.SimpleButton { - id: revertButton; + id: revertButton visible: base.stackLevel == 0 && base.showRevertButton - height: parent.height; - width: height; + height: parent.height + width: height color: UM.Theme.getColor("setting_control_button") hoverColor: UM.Theme.getColor("setting_control_button_hover") iconSource: UM.Theme.getIcon("reset") - onClicked: { + onClicked: + { revertButton.focus = true - if (externalResetHandler) { + if (externalResetHandler) + { externalResetHandler(propertyProvider.key) - } else { + } + else + { Cura.MachineManager.clearUserSettingAllCurrentStacks(propertyProvider.key) } } - onEntered: { hoverTimer.stop(); base.showTooltip(catalog.i18nc("@label", "This setting has a value that is different from the profile.\n\nClick to restore the value of the profile.")) } - onExited: base.showTooltip(base.tooltipText); + onEntered: + { + hoverTimer.stop() + base.showTooltip(catalog.i18nc("@label", "This setting has a value that is different from the profile.\n\nClick to restore the value of the profile.")) + } + onExited: base.showTooltip(base.tooltipText) } UM.SimpleButton { // This button shows when the setting has an inherited function, but is overriden by profile. - id: inheritButton; + id: inheritButton // Inherit button needs to be visible if; // - User made changes that override any loaded settings // - This setting item uses inherit button at all // - The type of the value of any deeper container is an "object" (eg; is a function) visible: { - if(!base.showInheritButton) + if (!base.showInheritButton) { - return false; + return false } - if(!propertyProvider.properties.enabled) + if (!propertyProvider.properties.enabled) { // Note: This is not strictly necessary since a disabled setting is hidden anyway. // But this will cause the binding to be re-evaluated when the enabled property changes. - return false; + return false } // There are no settings with any warning. - if(Cura.SettingInheritanceManager.settingsWithInheritanceWarning.length == 0) + if (Cura.SettingInheritanceManager.settingsWithInheritanceWarning.length == 0) { - return false; + return false } // This setting has a resolve value, so an inheritance warning doesn't do anything. - if(resolve != "None") + if (resolve != "None") { return false } // If the setting does not have a limit_to_extruder property (or is -1), use the active stack. - if(globalPropertyProvider.properties.limit_to_extruder == null || String(globalPropertyProvider.properties.limit_to_extruder) == "-1") + if (globalPropertyProvider.properties.limit_to_extruder == null || String(globalPropertyProvider.properties.limit_to_extruder) == "-1") { - return Cura.SettingInheritanceManager.settingsWithInheritanceWarning.indexOf(definition.key) >= 0; + return Cura.SettingInheritanceManager.settingsWithInheritanceWarning.indexOf(definition.key) >= 0 } // Setting does have a limit_to_extruder property, so use that one instead. if (definition.key === undefined) { // Observed when loading workspace, probably when SettingItems are removed. - return false; + return false } - return Cura.SettingInheritanceManager.getOverridesForExtruder(definition.key, String(globalPropertyProvider.properties.limit_to_extruder)).indexOf(definition.key) >= 0; + return Cura.SettingInheritanceManager.getOverridesForExtruder(definition.key, String(globalPropertyProvider.properties.limit_to_extruder)).indexOf(definition.key) >= 0 } - height: parent.height; - width: height; + height: parent.height + width: height - onClicked: { - focus = true; + onClicked: + { + focus = true // Get the most shallow function value (eg not a number) that we can find. var last_entry = propertyProvider.stackLevels[propertyProvider.stackLevels.length - 1] for (var i = 1; i < base.stackLevels.length; i++) { - var has_setting_function = typeof(propertyProvider.getPropertyValue("value", base.stackLevels[i])) == "object"; + var has_setting_function = typeof(propertyProvider.getPropertyValue("value", base.stackLevels[i])) == "object" if(has_setting_function) { last_entry = propertyProvider.stackLevels[i] - break; + break } } - if((last_entry == 4 || last_entry == 11) && base.stackLevel == 0 && base.stackLevels.length == 2) + if ((last_entry == 4 || last_entry == 11) && base.stackLevel == 0 && base.stackLevels.length == 2) { // Special case of the inherit reset. If only the definition (4th or 11th) container) and the first // entry (user container) are set, we can simply remove the container. @@ -277,23 +297,22 @@ Item color: UM.Theme.getColor("setting_control_button") hoverColor: UM.Theme.getColor("setting_control_button_hover") - iconSource: UM.Theme.getIcon("formula"); + iconSource: UM.Theme.getIcon("formula") onEntered: { hoverTimer.stop(); base.showTooltip(catalog.i18nc("@label", "This setting is normally calculated, but it currently has an absolute value set.\n\nClick to restore the calculated value.")) } - onExited: base.showTooltip(base.tooltipText); + onExited: base.showTooltip(base.tooltipText) } } Item { - id: controlContainer; + id: controlContainer enabled: propertyProvider.isValueUsed - anchors.right: parent.right; - anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3 - anchors.verticalCenter: parent.verticalCenter; - width: UM.Theme.getSize("setting_control").width; + anchors.right: parent.right + anchors.verticalCenter: parent.verticalCenter + width: UM.Theme.getSize("setting_control").width height: UM.Theme.getSize("setting_control").height } } diff --git a/resources/themes/cura-light/theme.json b/resources/themes/cura-light/theme.json index dbe5e7196e..57532d91e5 100644 --- a/resources/themes/cura-light/theme.json +++ b/resources/themes/cura-light/theme.json @@ -416,7 +416,7 @@ "section_icon_column": [2.8, 0.0], "setting": [25.0, 1.8], - "setting_control": [10.0, 2.0], + "setting_control": [11.0, 2.0], "setting_control_radius": [0.15, 0.15], "setting_control_depth_margin": [1.4, 0.0], "setting_preferences_button_margin": [4, 0.0],