CURA-4870 Add mock-up for the printer type dropdown selector.

Add mock-up for the configuration selection.

resources/qml/Menus/ConfigurationItem.qml

@@ -0,0 +1,45 @@
+// 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
+
+ItemDelegate
+{
+    contentItem: Label
+    {
+        text: model.name
+        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
+        {
+            id: swatch
+            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: control.model.getItem(index).color
+        }
+    }
+
+    background: Rectangle
+    {
+        color: parent.highlighted ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+        border.color: parent.highlighted ? UM.Theme.getColor("setting_control_border_highlight") : "transparent"
+    }
+}

resources/qml/Menus/ConfigurationSelection.qml

@@ -0,0 +1,109 @@
+// 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
+
+ComboBox
+{
+    id: control
+
+    property var panelWidth: control.width
+
+    model: Cura.ExtrudersModel { }
+
+    textRole: "name"
+
+    indicator: UM.RecolorImage
+    {
+        id: downArrow
+        x: control.width - width - control.rightPadding
+        y: control.topPadding + Math.round((control.availableHeight - height) / 2)
+
+        source: UM.Theme.getIcon("arrow_bottom")
+        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)
+            {
+                return UM.Theme.getColor("setting_control_disabled");
+            }
+            if (control.hovered || control.activeFocus)
+            {
+                return UM.Theme.getColor("setting_control_highlight");
+            }
+            return UM.Theme.getColor("setting_control");
+        }
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color:
+        {
+            if (!enabled)
+            {
+                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
+    {
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: UM.Theme.getSize("setting_unit_margin").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
+        padding: UM.Theme.getSize("default_lining").width
+
+        contentItem: GridView {
+            clip: true
+            implicitHeight: contentHeight
+            model: control.popup.visible ? control.delegateModel : null
+            currentIndex: control.highlightedIndex
+
+            ScrollIndicator.vertical: ScrollIndicator { }
+        }
+
+        background: Rectangle {
+            color: UM.Theme.getColor("setting_control")
+            border.color: UM.Theme.getColor("setting_control_border")
+        }
+    }
+
+    delegate: ConfigurationItem
+    {
+        width: panelWidth - 2 * UM.Theme.getSize("default_lining").width
+        height: control.height
+        highlighted: control.highlightedIndex == index
+    }
+}

resources/qml/Sidebar.qml

@@ -87,10 +87,20 @@ Rectangle
 
     MachineSelection {
         id: machineSelection
-        width: base.width
+        width: base.width - configSelection.width
+        height: UM.Theme.getSize("sidebar_header").height
+        anchors.top: base.top
+        anchors.left: parent.left
+    }
+
+    ConfigurationSelection {
+        id: configSelection
+        visible: printerConnected && !sidebar.monitoringPrint && !sidebar.hideSettings
+        width: visible ? Math.round(base.width * 0.25) : 0
         height: UM.Theme.getSize("sidebar_header").height
         anchors.top: base.top
         anchors.right: parent.right
+        panelWidth: base.width
     }
 
     SidebarHeader {

resources/qml/SidebarHeader.qml

@@ -16,6 +16,7 @@ Column
 
     property int currentExtruderIndex: Cura.ExtruderManager.activeExtruderIndex;
     property bool currentExtruderVisible: extrudersList.visible;
+    property bool printerConnected: Cura.MachineManager.printerOutputDevices.length != 0
 
     spacing: Math.round(UM.Theme.getSize("sidebar_margin").width * 0.9)
 
@@ -34,6 +35,55 @@ Column
         width: height
     }
 
+    // Printer Type Row
+    Item
+    {
+        id: printerTypeSelectionRow
+        height: UM.Theme.getSize("sidebar_setup").height
+        visible: printerConnected && !sidebar.monitoringPrint && !sidebar.hideSettings
+
+        anchors
+        {
+            left: parent.left
+            leftMargin: UM.Theme.getSize("sidebar_margin").width
+            right: parent.right
+            rightMargin: UM.Theme.getSize("sidebar_margin").width
+        }
+
+        Label
+        {
+            id: configurationLabel
+            text: catalog.i18nc("@label", "Printer type");
+            width: Math.round(parent.width * 0.4 - UM.Theme.getSize("default_margin").width)
+            height: parent.height
+            verticalAlignment: Text.AlignVCenter
+            font: UM.Theme.getFont("default");
+            color: UM.Theme.getColor("text");
+        }
+
+        ToolButton
+        {
+            id: configurationSelection
+
+            text: catalog.i18nc("@label", "Printer type");
+            height: UM.Theme.getSize("setting_control").height
+            width: Math.round(parent.width * 0.7) + UM.Theme.getSize("sidebar_margin").width
+            anchors.right: parent.right
+            style: UM.Theme.styles.sidebar_header_button
+            activeFocusOnPress: true;
+            menu: Menu {
+                MenuItem
+                {
+                    text: "Printer type 1"
+                }
+                MenuItem
+                {
+                    text: "Printer type 2"
+                }
+            }
+        }
+    }
+
     // Extruder Row
     Item
     {
@@ -244,6 +294,8 @@ Column
             id: materialLabel
             text: catalog.i18nc("@label", "Material");
             width: Math.round(parent.width * 0.45 - UM.Theme.getSize("default_margin").width)
+            height: parent.height
+            verticalAlignment: Text.AlignVCenter
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
         }
@@ -294,6 +346,8 @@ Column
             id: variantLabel
             text: Cura.MachineManager.activeDefinitionVariantsName;
             width: Math.round(parent.width * 0.45 - UM.Theme.getSize("default_margin").width)
+            height: parent.height
+            verticalAlignment: Text.AlignVCenter
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
         }
@@ -347,6 +401,8 @@ Column
             id: bulidplateLabel
             text: catalog.i18nc("@label", "Build plate");
             width: Math.floor(parent.width * 0.45 - UM.Theme.getSize("default_margin").width)
+            height: parent.height
+            verticalAlignment: Text.AlignVCenter
             font: UM.Theme.getFont("default");
             color: UM.Theme.getColor("text");
         }