CURA-4870 Modify the dropdown look and feel

resources/qml/Menus/ConfigurationItem.qml

@@ -1,88 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-
-Rectangle
-{
-    id: configurationItem
-
-    property var printer: null
-    signal configurationSelected()
-
-    anchors.leftMargin: 25
-    border.width: UM.Theme.getSize("default_lining").width
-    border.color: "black"
-
-    Rectangle
-    {
-        id: printerInformation
-
-        Label
-        {
-            text: printer.name
-        }
-    }
-
-    Rectangle
-    {
-        id: extruderInformation
-
-        Row
-        {
-            id: extrudersRow
-
-            Repeater
-            {
-                model: printer.extruders
-                delegate: Item
-                {
-                    id: extruderInfo
-
-                    width: Math.round(parent.width / 2)
-                    height: childrenRect.height
-                    Label
-                    {
-                        id: materialLabel
-                        text: modelData.activeMaterial != null ? modelData.activeMaterial.name : ""
-                        elide: Text.ElideRight
-                        width: parent.width
-                        font: UM.Theme.getFont("very_small")
-                    }
-                    Label
-                    {
-                        id: printCoreLabel
-                        text: modelData.hotendID
-                        anchors.top: materialLabel.bottom
-                        elide: Text.ElideRight
-                        width: parent.width
-                        font: UM.Theme.getFont("very_small")
-                        opacity: 0.5
-                    }
-                }
-            }
-        }
-    }
-
-//    Rectangle
-//    {
-//        id: buildplateInformation
-//
-//        Label
-//        {
-//            text: printer.name + "-" + printer.type
-//        }
-//    }
-
-    MouseArea
-    {
-        id: mouse
-        anchors.fill: parent
-        onClicked: configurationSelected()
-        hoverEnabled: true
-    }
-}

resources/qml/Menus/ConfigurationListView.qml

@@ -1,57 +0,0 @@
-// Copyright (c) 2018 Ultimaker B.V.
-// Cura is released under the terms of the LGPLv3 or higher.
-
-import QtQuick 2.7
-import QtQuick.Controls 2.0
-
-import UM 1.2 as UM
-import Cura 1.0 as Cura
-
-Column
-{
-    id: base
-    property var outputDevice: Cura.MachineManager.printerOutputDevices[0]
-
-    Rectangle
-    {
-        id: header
-        color: "red"
-        height: 25
-        width: parent.width
-    }
-
-    Repeater {
-        height: childrenRect.height
-        model: outputDevice != null ? outputDevice.connectedPrintersTypeCount : null
-        delegate: Rectangle
-        {
-            height: childrenRect.height
-            Label
-            {
-                id: printerTypeHeader
-                text: modelData.machine_type
-            }
-
-            GridView
-            {
-                id: grid
-                anchors.top: printerTypeHeader.bottom
-                anchors.topMargin: UM.Theme.getSize("sidebar_margin").height
-                width: base.width
-                cellWidth: Math.round(base.width / 2)
-                cellHeight: 100 * screenScaleFactor
-                model: outputDevice.printers
-                delegate: ConfigurationItem
-                {
-                    height: grid.cellHeight
-                    width: grid.cellWidth
-                    printer: modelData
-                    onConfigurationSelected:
-                    {
-                        outputDevice.setActivePrinter(printer)
-                    }
-                }
-            }
-        }
-    }
-}

resources/qml/Menus/ConfigurationMenu/ConfigurationItem.qml

@@ -0,0 +1,72 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Rectangle
+{
+    id: configurationItem
+
+    property var printer: null
+    signal configurationSelected()
+
+    height: childrenRect.height
+    border.width: UM.Theme.getSize("default_lining").width
+    border.color: "black"
+
+    Column
+    {
+        id: contentColumn
+        padding: UM.Theme.getSize("default_margin").width
+        spacing: UM.Theme.getSize("default_margin").height
+
+        Label
+        {
+            text: printer.name
+        }
+
+        Row
+        {
+            id: extruderRow
+
+            width: parent.width
+            height: childrenRect.height
+
+            spacing: UM.Theme.getSize("default_margin").width
+
+            Repeater
+            {
+                height: childrenRect.height
+                model: printer.extruders
+                delegate: PrintCoreConfiguration
+                {
+                    printCoreConfiguration: modelData
+                }
+            }
+        }
+
+//        Rectangle
+//        {
+//            id: buildplateInformation
+//
+//            Label
+//            {
+//                text: printer.name + "-" + printer.type
+//            }
+//        }
+    }
+
+    MouseArea
+    {
+        id: mouse
+        anchors.fill: parent
+        onClicked: configurationSelected()
+        hoverEnabled: true
+        onEntered: parent.border.color = UM.Theme.getColor("primary_hover")
+        onExited: parent.border.color = "black"
+    }
+}

resources/qml/Menus/ConfigurationMenu/ConfigurationListView.qml

@@ -0,0 +1,66 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import UM 1.2 as UM
+import Cura 1.0 as Cura
+
+Column
+{
+    id: base
+    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
+
+    Label {
+        text: catalog.i18nc("@label:header configurations", "Available configurations")
+        font: UM.Theme.getFont("large")
+        width: parent.width - 2 * parent.padding
+    }
+
+    Item
+    {
+        id: container
+        width: parent.width - 2 * parent.padding
+        height: childrenRect.height
+
+        Repeater {
+            height: childrenRect.height
+            model: outputDevice != null ? outputDevice.connectedPrintersTypeCount : null
+            delegate: Rectangle
+            {
+                height: childrenRect.height
+                Label
+                {
+                    id: printerTypeHeader
+                    text: modelData.machine_type
+                    font: UM.Theme.getFont("default_bold")
+                }
+
+                ListView
+                {
+                    id: grid
+                    anchors.top: printerTypeHeader.bottom
+                    anchors.topMargin: UM.Theme.getSize("default_margin").height
+                    width: container.width
+                    height: childrenRect.height
+                    model: outputDevice.printers
+                    delegate: ConfigurationItem
+                    {
+                        height: parent.height
+                        width: parent.width
+                        printer: modelData
+                        onConfigurationSelected:
+                        {
+                            print("SELECCIONANDO IMPRESORA", printer.name)
+                            outputDevice.setActivePrinter(printer)
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

resources/qml/Menus/ConfigurationMenu/ConfigurationSelection.qml

@@ -17,7 +17,7 @@ Item
     property var panelVisible: false
     Button
     {
-        text: "SYNC"
+        text: "Matched"
         width: parent.width
         height: parent.height
 
@@ -84,12 +84,11 @@ Item
         y: configurationSelector.height - UM.Theme.getSize("default_lining").height
         x: configurationSelector.width - width
         width: panelWidth
-        height: 300 //contentItem.height
         visible: panelVisible
         padding: UM.Theme.getSize("default_lining").width
 
         contentItem: ConfigurationListView {
-            width: panelWidth - 2 * UM.Theme.getSize("default_lining").width
+            width: panelWidth - 2 * popup.padding
         }
 
         background: Rectangle {

resources/qml/Menus/ConfigurationMenu/PrintCoreConfiguration.qml

@@ -0,0 +1,35 @@
+// Copyright (c) 2018 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+import UM 1.2 as UM
+
+
+Item
+{
+    id: extruderInfo
+    property var printCoreConfiguration
+
+    height: childrenRect.height
+
+    Label
+    {
+        id: materialLabel
+        text: printCoreConfiguration.activeMaterial != null ? printCoreConfiguration.activeMaterial.name : ""
+        elide: Text.ElideRight
+        width: parent.width
+        font: UM.Theme.getFont("very_small")
+    }
+    Label
+    {
+        id: printCoreLabel
+        text: printCoreConfiguration.hotendID
+        anchors.top: materialLabel.bottom
+        elide: Text.ElideRight
+        width: parent.width
+        font: UM.Theme.getFont("very_small")
+        opacity: 0.5
+    }
+}

resources/qml/Sidebar.qml

@@ -8,6 +8,7 @@ import QtQuick.Layouts 1.3
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 import "Menus"
+import "Menus/ConfigurationMenu"
 
 Rectangle
 {