Add identation for the materials preferences page

CURA-8979

4 files changed, 18 insertions, 11 deletions

diff --git a/resources/qml/CategoryButton.qml b/resources/qml/CategoryButton.qml
index 13e19fe5ab..b5d8bb2b2d 100644
--- a/resources/qml/CategoryButton.qml
+++ b/resources/qml/CategoryButton.qml
@@ -21,12 +21,13 @@ Button
     height: UM.Theme.getSize("section_header").height
 
     property var expanded: false
-
+    property bool indented: false
     property alias arrow: categoryArrow
     property alias categoryIcon: icon.source
     property alias labelText: categoryLabel.text
     property alias labelFont: categoryLabel.font
-
+    leftPadding: UM.Theme.getSize("narrow_margin").width
+    rightPadding: UM.Theme.getSize("narrow_margin").width
     states:
     [
         State
@@ -72,20 +73,21 @@ Button
         }
     }
 
-    contentItem: RowLayout
+    contentItem: Item
     {
         id: content
-        spacing: UM.Theme.getSize("narrow_margin").width
+        //spacing: UM.Theme.getSize("narrow_margin").width
 
         UM.RecolorImage
         {
             id: icon
             source: ""
             visible: icon.source != ""
-            Layout.alignment: Qt.AlignHCenter
+            anchors.verticalCenter: parent.verticalCenter
             color: UM.Theme.getColor("setting_category_text")
-            width: UM.Theme.getSize("section_icon").width
+            width: visible ? UM.Theme.getSize("section_icon").width: 0
             height: UM.Theme.getSize("section_icon").height
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width: 0
             sourceSize.width: width
             sourceSize.height: width
         }
@@ -94,7 +96,10 @@ Button
         {
             id: categoryLabel
             Layout.fillWidth: true
-            Layout.alignment: Qt.AlignHCenter
+            anchors.right: categoryArrow.left
+            anchors.left: icon.right
+            anchors.leftMargin: base.indented ? UM.Theme.getSize("default_margin").width + UM.Theme.getSize("narrow_margin").width: UM.Theme.getSize("narrow_margin").width
+            anchors.verticalCenter: parent.verticalCenter
             elide: Text.ElideRight
             wrapMode: Text.NoWrap
             font: UM.Theme.getFont("medium_bold")
@@ -104,9 +109,10 @@ Button
         UM.RecolorImage
         {
             id: categoryArrow
-            Layout.alignment: Qt.AlignHCenter
+            anchors.right: parent.right
             width: UM.Theme.getSize("standard_arrow").width
             height: UM.Theme.getSize("standard_arrow").height
+            anchors.verticalCenter: parent.verticalCenter
             sourceSize.width: width
             sourceSize.height: height
             color: UM.Theme.getColor("setting_control_button")
diff --git a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
index 65b8a7365a..d9b0a66f15 100644
--- a/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsBrandSection.qml
@@ -18,7 +18,6 @@ Column
     property var elementsModel   // This can be a MaterialTypesModel or GenericMaterialsModel or FavoriteMaterialsModel
     property bool hasMaterialTypes: true  // It indicates whether it has material types or not
     property bool expanded: materialList.expandedBrands.indexOf(sectionName) !== -1
-
     width: parent.width
 
     Cura.CategoryButton
@@ -68,6 +67,7 @@ Column
         MaterialsTypeSection
         {
             materialType: element
+            indented: true
         }
     }
 
diff --git a/resources/qml/Preferences/Materials/MaterialsSlot.qml b/resources/qml/Preferences/Materials/MaterialsSlot.qml
index f3416fc15e..232e8bbdf8 100644
--- a/resources/qml/Preferences/Materials/MaterialsSlot.qml
+++ b/resources/qml/Preferences/Materials/MaterialsSlot.qml
@@ -47,7 +47,7 @@ Rectangle
         radius: width / 2
         anchors.verticalCenter: materialSlot.verticalCenter
         anchors.left: materialSlot.left
-        anchors.leftMargin: UM.Theme.getSize("default_margin").width
+        anchors.leftMargin: 2 * UM.Theme.getSize("default_margin").width
     }
     UM.Label
     {
diff --git a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
index a9a050478e..fa3130b801 100644
--- a/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
+++ b/resources/qml/Preferences/Materials/MaterialsTypeSection.qml
@@ -16,11 +16,12 @@ Column
     property string materialName: materialType !== null ? materialType.name : ""
     property bool expanded: materialList.expandedTypes.indexOf(`${materialBrand}_${materialName}`) !== -1
     property var colorsModel: materialType !== null ? materialType.colors : null
-
+    property alias indented: categoryButton.indented
     width: parent.width
 
     Cura.CategoryButton
     {
+        id: categoryButton
         width: parent.width
         height: UM.Theme.getSize("favorites_row").height
         labelText: materialName