CURA-4870 Create a customized popup for the sync dropdown and fill it out with the information about the printers in the group

resources/qml/Menus/ConfigurationItem.qml

@@ -7,39 +7,82 @@ import QtQuick.Controls 2.0
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-ItemDelegate
+Rectangle
 {
-    contentItem: Label
+    id: configurationItem
+
+    property var printer: null
+    signal configurationSelected()
+
+    anchors.leftMargin: 25
+    border.width: UM.Theme.getSize("default_lining").width
+    border.color: "black"
+
+    Rectangle
     {
-        text: model.name
+        id: printerInformation
-        renderType: Text.NativeRendering
-        color: UM.Theme.getColor("setting_control_text")
-        font: UM.Theme.getFont("default")
-        elide: Text.ElideRight
-        verticalAlignment: Text.AlignVCenter
-        rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
 
-        background: Rectangle
+        Label
         {
-            id: swatch
+            text: printer.name
-            height: Math.round(UM.Theme.getSize("setting_control").height / 2)
-            width: height
-
-            anchors.right: parent.right
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.margins: Math.round(UM.Theme.getSize("default_margin").width / 4)
-
-            border.width: UM.Theme.getSize("default_lining").width
-            border.color: enabled ? UM.Theme.getColor("setting_control_border") : UM.Theme.getColor("setting_control_disabled_border")
-            radius: Math.round(width / 2)
-
-            color: model.color
         }
     }
 
-    background: Rectangle
+    Rectangle
     {
-        color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+        id: extruderInformation
-        border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
+
+        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

@@ -0,0 +1,57 @@
+// 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/ConfigurationSelection.qml

@@ -2,114 +2,94 @@
 // Cura is released under the terms of the LGPLv3 or higher.
 
 import QtQuick 2.7
-import QtQuick.Controls 2.0
+import QtQuick.Controls 1.4
+import QtQuick.Controls 2.3 as QQC2
+import QtQuick.Layouts 1.1
+import QtQuick.Controls.Styles 1.4
 
 import UM 1.2 as UM
 import Cura 1.0 as Cura
 
-ComboBox
+Item
 {
-    id: control
+    id: configurationSelector
-
     property var panelWidth: control.width
-
+    property var panelVisible: false
-    model: ListModel {
+    Button
-
-        ListElement {
-            name: "Configuration 1"
-            color: "yellow"
-        }
-        ListElement {
-            name: "Configuration 2"
-            color: "black"
-        }
-        ListElement {
-            name: "Configuration 3"
-            color: "green"
-        }
-        ListElement {
-            name: "Configuration 4"
-            color: "red"
-        }
-    }
-
-    textRole: "name"
-
-    indicator: UM.RecolorImage
     {
-        id: downArrow
+        text: "SYNC"
-        x: control.width - width - control.rightPadding
+        width: parent.width
-        y: control.topPadding + Math.round((control.availableHeight - height) / 2)
+        height: parent.height
 
-        source: UM.Theme.getIcon("arrow_bottom")
+        style: ButtonStyle
-        width: UM.Theme.getSize("standard_arrow").width
-        height: UM.Theme.getSize("standard_arrow").height
-        sourceSize.width: width + 5 * screenScaleFactor
-        sourceSize.height: width + 5 * screenScaleFactor
-
-        color: UM.Theme.getColor("setting_control_text");
-    }
-
-    background: Rectangle
-    {
-        color:
         {
-            if (!enabled)
+            background: Rectangle
             {
-                return UM.Theme.getColor("setting_control_disabled");
+                color:
+                {
+                    if(control.pressed)
+                    {
+                        return UM.Theme.getColor("sidebar_header_active");
+                    }
+                    else if(control.hovered)
+                    {
+                        return UM.Theme.getColor("sidebar_header_hover");
+                    }
+                    else
+                    {
+                        return UM.Theme.getColor("sidebar_header_bar");
+                    }
+                }
+                Behavior on color { ColorAnimation { duration: 50; } }
+
+                UM.RecolorImage
+                {
+                    id: downArrow
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.right: parent.right
+                    anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                    width: UM.Theme.getSize("standard_arrow").width
+                    height: UM.Theme.getSize("standard_arrow").height
+                    sourceSize.width: width
+                    sourceSize.height: width
+                    color: UM.Theme.getColor("text_emphasis")
+                    source: UM.Theme.getIcon("arrow_bottom")
+                }
+                Label
+                {
+                    id: sidebarComboBoxLabel
+                    color: UM.Theme.getColor("sidebar_header_text_active")
+                    text: control.text
+                    elide: Text.ElideRight
+                    anchors.left: parent.left
+                    anchors.leftMargin: UM.Theme.getSize("default_margin").width * 2
+                    anchors.right: downArrow.left
+                    anchors.rightMargin: control.rightMargin
+                    anchors.verticalCenter: parent.verticalCenter;
+                    font: UM.Theme.getFont("large")
+                }
             }
-            if (control.hovered || control.activeFocus)
+            label: Label {}
-            {
-                return UM.Theme.getColor("setting_control_highlight");
-            }
-            return UM.Theme.getColor("setting_control");
         }
-        border.width: UM.Theme.getSize("default_lining").width
+
-        border.color:
+        onClicked:
         {
-            if (!enabled)
+            panelVisible = !panelVisible
-            {
-                return UM.Theme.getColor("setting_control_disabled_border")
-            }
-            if (control.hovered || control.activeFocus)
-            {
-                return UM.Theme.getColor("setting_control_border_highlight")
-            }
-            return UM.Theme.getColor("setting_control_border")
         }
     }
 
-    contentItem: Label
+    QQC2.Popup
     {
-        anchors.verticalCenter: parent.verticalCenter
+        id: popup
-        anchors.left: parent.left
+        y: configurationSelector.height - UM.Theme.getSize("default_lining").height
-        anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").width
+        x: configurationSelector.width - width
-        anchors.right: downArrow.left
-        rightPadding: swatch.width + UM.Theme.getSize("setting_unit_margin").width
-
-        text: "HOLA"
-        renderType: Text.NativeRendering
-        font: UM.Theme.getFont("default")
-        color: enabled ? UM.Theme.getColor("setting_control_text") : UM.Theme.getColor("setting_control_disabled_text")
-
-        elide: Text.ElideRight
-        verticalAlignment: Text.AlignVCenter
-    }
-
-    popup: Popup {
-        y: control.height - UM.Theme.getSize("default_lining").height
-        x: control.width - width
         width: panelWidth
-        implicitHeight: contentItem.implicitHeight
+        height: 300 //contentItem.height
+        visible: panelVisible
         padding: UM.Theme.getSize("default_lining").width
 
-        contentItem: ListView {
+        contentItem: ConfigurationListView {
-            clip: true
+            width: panelWidth - 2 * UM.Theme.getSize("default_lining").width
-            implicitHeight: contentHeight
-            model: control.popup.visible ? control.delegateModel : null
-            currentIndex: control.highlightedIndex
-
-            ScrollIndicator.vertical: ScrollIndicator { }
         }
 
         background: Rectangle {
@@ -117,11 +97,4 @@ ComboBox
             border.color: UM.Theme.getColor("setting_control_border")
         }
     }
-
-    delegate: ConfigurationItem
-    {
-        width: panelWidth - 2 * UM.Theme.getSize("default_lining").width
-        height: control.height - 2 * UM.Theme.getSize("default_lining").height
-        highlighted: control.highlightedIndex == index
-    }
 }