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

@@ -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()
         }

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 += "<li>%1</li>\n".arg(affected_by[i].label)
         }
 
         var affects_list = ""
-        for(var i in affects)
+        for (var i in affects)
         {
             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)
 
-        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)
         }
 
-        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)
         }
@@ -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
         }
     }

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],