Add a rectangle surrounding the settings listview

Contributes to CURA-5941.

resources/qml/PrintSetupSelector/Custom/CustomPrintSetup.qml

@@ -91,17 +91,36 @@ Item
         }
     }
 
-    Cura.SettingView
+    Rectangle
     {
         anchors
         {
             top: tabBar.visible ? tabBar.bottom : globalProfileRow.bottom
-            topMargin: UM.Theme.getSize("default_margin").height
             left: parent.left
             leftMargin: parent.padding
             right: parent.right
             rightMargin: parent.padding
             bottom: parent.bottom
+            topMargin: -UM.Theme.getSize("default_lining").width
+            bottomMargin: -UM.Theme.getSize("default_lining").width
+        }
+        z: tabBar.z - 1
+        // Don't show the border when only one extruder
+        border.color: tabBar.visible ? UM.Theme.getColor("lining") : "transparent"
+        border.width: UM.Theme.getSize("default_lining").width
+
+        Cura.SettingView
+        {
+            anchors
+            {
+                fill: parent
+                topMargin: UM.Theme.getSize("default_margin").height
+                leftMargin: UM.Theme.getSize("default_margin").width
+                // Small space for the scrollbar
+                rightMargin: UM.Theme.getSize("narrow_margin").width
+                // Compensate for the negative margin in the parent
+                bottomMargin: UM.Theme.getSize("default_lining").width
+            }
         }
     }
 }

resources/qml/Settings/SettingCategory.qml

@@ -12,8 +12,8 @@ Button
     id: base
     anchors.left: parent.left
     anchors.right: parent.right
-    anchors.leftMargin: UM.Theme.getSize("default_margin").width
+    // To avoid overlaping with the scrollBars
-    anchors.rightMargin: UM.Theme.getSize("default_margin").width * 3
+    anchors.rightMargin: 2 * UM.Theme.getSize("thin_margin").width
     hoverEnabled: true
 
     background: Rectangle
@@ -25,22 +25,24 @@ Button
             if (base.color)
             {
                 return base.color
-            } else if (!base.enabled)
+            }
+            else if (!base.enabled)
             {
                 return UM.Theme.getColor("setting_category_disabled")
-            } else if (base.hovered && base.checkable && base.checked)
+            }
+            else if (base.hovered && base.checkable && base.checked)
             {
                 return UM.Theme.getColor("setting_category_active_hover")
-            } else if (base.pressed || (base.checkable && base.checked))
+            }
+            else if (base.pressed || (base.checkable && base.checked))
             {
                 return UM.Theme.getColor("setting_category_active")
-            } else if (base.hovered)
+            }
+            else if (base.hovered)
             {
                 return UM.Theme.getColor("setting_category_hover")
-            } else
-            {
-                return UM.Theme.getColor("setting_category")
             }
+            return UM.Theme.getColor("setting_category")
         }
         Behavior on color { ColorAnimation { duration: 50; } }
         Rectangle

resources/qml/Settings/SettingItem.qml

@@ -10,8 +10,9 @@ import Cura 1.0 as Cura
 
 import "."
 
-Item {
+Item
-    id: base;
+{
+    id: base
 
     height: UM.Theme.getSize("section").height
 
@@ -105,11 +106,11 @@ Item {
 
         Label
         {
-            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.right: settingControls.left;
+            anchors.right: settingControls.left
             anchors.verticalCenter: parent.verticalCenter
 
             text: definition.label

resources/qml/Settings/SettingView.qml

@@ -163,6 +163,7 @@ Item
             top: filterContainer.top
             bottom: filterContainer.bottom
             right: parent.right
+            rightMargin: UM.Theme.getSize("wide_margin").width
         }
 
         style: ButtonStyle
@@ -210,7 +211,7 @@ Item
         ListView
         {
             id: contents
-            spacing: Math.round(UM.Theme.getSize("default_lining").height)
+            spacing: UM.Theme.getSize("default_lining").height
             cacheBuffer: 1000000   // Set a large cache to effectively just cache every list item.
 
             model: UM.SettingDefinitionsModel

resources/themes/cura-light/styles.qml

@@ -384,13 +384,13 @@ QtObject
             {
                 implicitWidth: Theme.getSize("scrollbar").width
                 radius: Math.round(implicitWidth / 2)
-                color: Theme.getColor("scrollbar_background");
+                color: Theme.getColor("scrollbar_background")
             }
 
             handle: Rectangle
             {
                 id: scrollViewHandle
-                implicitWidth: Theme.getSize("scrollbar").width;
+                implicitWidth: Theme.getSize("scrollbar").width
                 radius: Math.round(implicitWidth / 2)
 
                 color: styleData.pressed ? Theme.getColor("scrollbar_handle_down") : styleData.hovered ? Theme.getColor("scrollbar_handle_hover") : Theme.getColor("scrollbar_handle");

resources/themes/cura-light/theme.json

@@ -411,7 +411,7 @@
 
         "extruder_icon": [2.33, 2.33],
 
-        "section": [0.0, 2.2],
+        "section": [0.0, 2],
         "section_icon": [1.6, 1.6],
         "section_icon_column": [2.8, 0.0],