Restyle the settings list

Be sure that the alignments and the margins are corrects according to the designs.

Contributes to CURA-5941.
This commit is contained in:
Diego Prado Gesto 2018-12-03 15:34:33 +01:00
parent ce6a0676dd
commit 4e9c595bdd
3 changed files with 104 additions and 81 deletions

View File

@ -138,19 +138,20 @@ Button
if (!base.enabled) if (!base.enabled)
{ {
return UM.Theme.getColor("setting_category_disabled_text") 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") 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") 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") 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") source: base.checked ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_left")
} }
@ -161,25 +162,26 @@ Button
id: icon id: icon
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: UM.Theme.getSize("default_margin").width anchors.leftMargin: UM.Theme.getSize("thin_margin").width
color: color:
{ {
if (!base.enabled) if (!base.enabled)
{ {
return UM.Theme.getColor("setting_category_disabled_text") 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") 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") 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") 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) source: UM.Theme.getIcon(definition.icon)
width: UM.Theme.getSize("section_icon").width width: UM.Theme.getSize("section_icon").width
@ -196,7 +198,9 @@ Button
if (definition.expanded) if (definition.expanded)
{ {
settingDefinitionsModel.collapse(definition.key) settingDefinitionsModel.collapse(definition.key)
} else { }
else
{
settingDefinitionsModel.expandRecursive(definition.key) settingDefinitionsModel.expandRecursive(definition.key)
} }
//Set focus so that tab navigation continues from this point on. //Set focus so that tab navigation continues from this point on.
@ -205,7 +209,7 @@ Button
} }
onActiveFocusChanged: onActiveFocusChanged:
{ {
if(activeFocus) if (activeFocus)
{ {
base.focusReceived() base.focusReceived()
} }

View File

@ -15,6 +15,10 @@ Item
id: base id: base
height: UM.Theme.getSize("section").height 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 contents: controlContainer.children
property alias hovered: mouse.containsMouse property alias hovered: mouse.containsMouse
@ -44,25 +48,25 @@ Item
var affected_by = settingDefinitionsModel.getRequires(definition.key, "value") var affected_by = settingDefinitionsModel.getRequires(definition.key, "value")
var affected_by_list = "" var affected_by_list = ""
for(var i in affected_by) for (var i in affected_by)
{ {
affected_by_list += "<li>%1</li>\n".arg(affected_by[i].label) affected_by_list += "<li>%1</li>\n".arg(affected_by[i].label)
} }
var affects_list = "" var affects_list = ""
for(var i in affects) for (var i in affects)
{ {
affects_list += "<li>%1</li>\n".arg(affects[i].label) affects_list += "<li>%1</li>\n".arg(affects[i].label)
} }
var tooltip = "<b>%1</b>\n<p>%2</p>".arg(definition.label).arg(definition.description) var tooltip = "<b>%1</b>\n<p>%2</p>".arg(definition.label).arg(definition.description)
if(affects_list != "") if (affects_list != "")
{ {
tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affects")).arg(affects_list) tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affects")).arg(affects_list)
} }
if(affected_by_list != "") if (affected_by_list != "")
{ {
tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affected By")).arg(affected_by_list) tooltip += "<br/><b>%1</b>\n<ul>\n%2</ul>".arg(catalog.i18nc("@label Header for list of settings.", "Affected By")).arg(affected_by_list)
} }
@ -72,35 +76,39 @@ Item
MouseArea MouseArea
{ {
id: mouse; id: mouse
anchors.fill: parent; anchors.fill: parent
acceptedButtons: Qt.RightButton; acceptedButtons: Qt.RightButton
hoverEnabled: true; hoverEnabled: true;
onClicked: base.contextMenuRequested(); onClicked: base.contextMenuRequested()
onEntered: { onEntered:
hoverTimer.start(); {
hoverTimer.start()
} }
onExited: { onExited:
if(controlContainer.item && controlContainer.item.hovered) { {
return; if (controlContainer.item && controlContainer.item.hovered)
{
return
} }
hoverTimer.stop(); hoverTimer.stop()
base.hideTooltip(); base.hideTooltip()
} }
Timer { Timer
id: hoverTimer; {
interval: 500; id: hoverTimer
repeat: false; interval: 500
repeat: false
onTriggered: onTriggered:
{ {
base.showTooltip(base.tooltipText); base.showTooltip(base.tooltipText)
} }
} }
@ -109,16 +117,16 @@ Item
id: label id: label
anchors.left: parent.left 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.right: settingControls.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: definition.label text: definition.label
elide: Text.ElideMiddle; elide: Text.ElideMiddle
renderType: Text.NativeRendering renderType: Text.NativeRendering
textFormat: Text.PlainText textFormat: Text.PlainText
color: UM.Theme.getColor("setting_control_text"); color: UM.Theme.getColor("setting_control_text")
opacity: (definition.visible) ? 1 : 0.5 opacity: (definition.visible) ? 1 : 0.5
// emphasize the setting if it has a value in the user or quality profile // 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") 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) height: Math.round(parent.height / 2)
spacing: Math.round(UM.Theme.getSize("thick_margin").height / 2) spacing: Math.round(UM.Theme.getSize("thick_margin").height / 2)
anchors { anchors
{
right: controlContainer.left right: controlContainer.left
rightMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2) rightMargin: Math.round(UM.Theme.getSize("thick_margin").width / 2)
verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
@ -151,112 +160,123 @@ Item
iconSource: UM.Theme.getIcon("link") iconSource: UM.Theme.getIcon("link")
onEntered: { 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."); hoverTimer.stop()
if ((resolve != "None") && (stackLevel != 0)) { 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. // 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 UM.SimpleButton
{ {
id: revertButton; id: revertButton
visible: base.stackLevel == 0 && base.showRevertButton visible: base.stackLevel == 0 && base.showRevertButton
height: parent.height; height: parent.height
width: height; width: height
color: UM.Theme.getColor("setting_control_button") color: UM.Theme.getColor("setting_control_button")
hoverColor: UM.Theme.getColor("setting_control_button_hover") hoverColor: UM.Theme.getColor("setting_control_button_hover")
iconSource: UM.Theme.getIcon("reset") iconSource: UM.Theme.getIcon("reset")
onClicked: { onClicked:
{
revertButton.focus = true revertButton.focus = true
if (externalResetHandler) { if (externalResetHandler)
{
externalResetHandler(propertyProvider.key) externalResetHandler(propertyProvider.key)
} else { }
else
{
Cura.MachineManager.clearUserSettingAllCurrentStacks(propertyProvider.key) 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.")) } onEntered:
onExited: base.showTooltip(base.tooltipText); {
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 UM.SimpleButton
{ {
// This button shows when the setting has an inherited function, but is overriden by profile. // 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; // Inherit button needs to be visible if;
// - User made changes that override any loaded settings // - User made changes that override any loaded settings
// - This setting item uses inherit button at all // - This setting item uses inherit button at all
// - The type of the value of any deeper container is an "object" (eg; is a function) // - The type of the value of any deeper container is an "object" (eg; is a function)
visible: 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. // 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. // 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. // 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. // This setting has a resolve value, so an inheritance warning doesn't do anything.
if(resolve != "None") if (resolve != "None")
{ {
return false return false
} }
// If the setting does not have a limit_to_extruder property (or is -1), use the active stack. // 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. // Setting does have a limit_to_extruder property, so use that one instead.
if (definition.key === undefined) { if (definition.key === undefined) {
// Observed when loading workspace, probably when SettingItems are removed. // 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; height: parent.height
width: height; width: height
onClicked: { onClicked:
focus = true; {
focus = true
// Get the most shallow function value (eg not a number) that we can find. // Get the most shallow function value (eg not a number) that we can find.
var last_entry = propertyProvider.stackLevels[propertyProvider.stackLevels.length - 1] var last_entry = propertyProvider.stackLevels[propertyProvider.stackLevels.length - 1]
for (var i = 1; i < base.stackLevels.length; i++) 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) if(has_setting_function)
{ {
last_entry = propertyProvider.stackLevels[i] 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 // 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. // entry (user container) are set, we can simply remove the container.
@ -277,23 +297,22 @@ Item
color: UM.Theme.getColor("setting_control_button") color: UM.Theme.getColor("setting_control_button")
hoverColor: UM.Theme.getColor("setting_control_button_hover") 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.")) } 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 Item
{ {
id: controlContainer; id: controlContainer
enabled: propertyProvider.isValueUsed enabled: propertyProvider.isValueUsed
anchors.right: parent.right; anchors.right: parent.right
anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3 anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenter: parent.verticalCenter; width: UM.Theme.getSize("setting_control").width
width: UM.Theme.getSize("setting_control").width;
height: UM.Theme.getSize("setting_control").height height: UM.Theme.getSize("setting_control").height
} }
} }

View File

@ -416,7 +416,7 @@
"section_icon_column": [2.8, 0.0], "section_icon_column": [2.8, 0.0],
"setting": [25.0, 1.8], "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_radius": [0.15, 0.15],
"setting_control_depth_margin": [1.4, 0.0], "setting_control_depth_margin": [1.4, 0.0],
"setting_preferences_button_margin": [4, 0.0], "setting_preferences_button_margin": [4, 0.0],