CURA-4870 Frontend formatting to show the configurations

resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml

@@ -16,48 +16,77 @@ Rectangle
 
     height: childrenRect.height
     border.width: UM.Theme.getSize("default_lining").width
-    border.color: "black"
+    border.color: UM.Theme.getColor("sidebar_lining_thin")
 
     Column
     {
         id: contentColumn
+        width: parent.width
         padding: UM.Theme.getSize("default_margin").width
-        spacing: UM.Theme.getSize("default_margin").height
+        spacing: Math.round(UM.Theme.getSize("default_margin").height / 2)
-
-        Label
-        {
-            text: configuration.printerType
-        }
 
         Row
         {
             id: extruderRow
 
-            width: parent.width
+            width: parent.width - 2 * parent.padding
             height: childrenRect.height
 
             spacing: UM.Theme.getSize("default_margin").width
 
             Repeater
             {
+                id: repeater
                 height: childrenRect.height
                 model: configuration.extruderConfigurations
                 delegate: PrintCoreConfiguration
                 {
+                    width: Math.round(parent.width / 2)
                     printCoreConfiguration: modelData
                 }
+                Component.onCompleted: {print("ELEMENTOS:", repeater.model.count)}
             }
         }
 
-//        Rectangle
+        //Buildplate row separator
-//        {
+        Rectangle {
-//            id: buildplateInformation
+            id: separator
-//
+
-//            Label
+            visible: buildplateInformation.visible
-//            {
+            width: parent.width - 2 * parent.padding
-//                text: configuration.buildplateConfiguration
+            height: visible ? Math.round(UM.Theme.getSize("sidebar_lining_thin").height / 2) : 0
-//            }
+            color: UM.Theme.getColor("sidebar_lining_thin")
-//        }
+        }
+
+        Item
+        {
+            id: buildplateInformation
+            width: parent.width - 2 * parent.padding
+            height: childrenRect.height
+            visible: configuration.buildplateConfiguration != ""
+
+            UM.RecolorImage {
+                id: buildplateIcon
+                anchors.left: parent.left
+                anchors.verticalCenter: parent.verticalCenter
+                width: UM.Theme.getSize("standard_arrow").width
+                height: UM.Theme.getSize("standard_arrow").height
+                sourceSize.width: width
+                sourceSize.height: height
+                source: UM.Theme.getIcon("extruder_button")
+
+                color: "black"
+            }
+
+            Label
+            {
+                id: buildplateLabel
+                anchors.left: buildplateIcon.right
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").height / 2)
+                text: configuration.buildplateConfiguration
+            }
+        }
     }
 
     MouseArea

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -14,7 +14,7 @@ Column
     property var outputDevice: Cura.MachineManager.printerOutputDevices[0]
     height: childrenRect.height + 2 * padding
     padding: UM.Theme.getSize("default_margin").width
-    spacing: UM.Theme.getSize("default_margin").height
+    spacing: Math.round(UM.Theme.getSize("default_margin").height / 2)
 
     Label {
         text: catalog.i18nc("@label:header configurations", "Available configurations")
@@ -25,7 +25,7 @@ Column
     ScrollView {
         id: container
         width: parent.width - 2 * parent.padding
-        height: childrenRect.height
+        height: 500 //childrenRect.height
 
         style: UM.Theme.styles.scrollview
 
@@ -52,16 +52,13 @@ Column
                     model: outputDevice.uniqueConfigurations
                     delegate: ConfigurationItem
                     {
-                        height: parent.height
                         width: parent.width
                         configuration: modelData
                         onConfigurationSelected:
                         {
                             print("SELECCIONANDO CONFIGURACION", JSON.stringify(configuration))
                         }
-                        Component.onCompleted: {print("$$$$$$$$$$$$$$$$$$ Configuracion", JSON.stringify(configuration))}
                     }
-                    Component.onCompleted: {print("$$$$$$$$$$$$$$$$$$ Elementos del modelo", JSON.stringify(outputDevice.uniqueConfigurations))}
                 }
             }
         }

resources/qml/Menus/ConfigurationMenu/PrintCoreConfiguration.qml

@@ -7,29 +7,76 @@ import QtQuick.Controls 2.0
 import UM 1.2 as UM
 
 
-Item
+Column
 {
     id: extruderInfo
     property var printCoreConfiguration
+    spacing: Math.round(UM.Theme.getSize("default_margin").height / 2)
 
     height: childrenRect.height
 
+    Item
+    {
+        id: extruder
+        width: parent.width
+        height: childrenRect.height
+
+        Label
+        {
+            id: extruderLabel
+            text: catalog.i18nc("@label:extruder label", "Extruder")
+            elide: Text.ElideRight
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: parent.left
+            font: UM.Theme.getFont("small")
+        }
+
+        // Rounded item to show the extruder number
+        Item
+        {
+            id: extruderIconItem
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.left: extruderLabel.right
+            anchors.leftMargin: Math.round(UM.Theme.getSize("default_margin").width / 2)
+
+            width: UM.Theme.getSize("section_icon").width
+            height: UM.Theme.getSize("section_icon").height
+
+            UM.RecolorImage {
+                id: mainCircle
+                anchors.fill: parent
+
+                sourceSize.width: parent.width
+                sourceSize.height: parent.height
+                source: UM.Theme.getIcon("extruder_button")
+
+                color: extruderNumberText.color
+            }
+
+            Label
+            {
+                id: extruderNumberText
+                anchors.centerIn: parent
+                text: printCoreConfiguration.position + 1
+                font: UM.Theme.getFont("small")
+            }
+        }
+    }
+
     Label
     {
         id: materialLabel
         text: printCoreConfiguration.material
         elide: Text.ElideRight
         width: parent.width
-        font: UM.Theme.getFont("very_small")
+        font: UM.Theme.getFont("small")
     }
     Label
     {
-        id: printCoreLabel
+        id: printCoreTypeLabel
         text: printCoreConfiguration.hotendID
-        anchors.top: materialLabel.bottom
         elide: Text.ElideRight
         width: parent.width
         font: UM.Theme.getFont("very_small")
-        opacity: 0.5
     }
 }

resources/qml/Menus/ConfigurationMenu/SyncButton.qml

@@ -43,7 +43,7 @@ Button
                 width: UM.Theme.getSize("standard_arrow").width
                 height: UM.Theme.getSize("standard_arrow").height
                 sourceSize.width: width
-                sourceSize.height: width
+                sourceSize.height: height
                 color: UM.Theme.getColor("text_emphasis")
                 source: UM.Theme.getIcon("arrow_bottom")
             }