WIP: Make dropdown exclusive from each other

resources/qml/WelcomePages/AddPrinterNetwork.qml

@@ -9,6 +9,7 @@ import Cura 1.1 as Cura
 
 import "../PrinterSelector"
 
+
 //
 // This component contains the content for the "Add a printer" (network) page of the welcome on-boarding process.
 //
@@ -40,6 +41,14 @@ Item
 
         title: catalog.i18nc("@label", "Add a network printer")
 
+        onClicked:
+        {
+            if (contentShown)
+            {
+                addLocalPrinterDropDown.contentShown = false
+            }
+        }
+
         contentComponent: networkPrinterListComponent
 
         Component
@@ -51,21 +60,23 @@ Item
                 ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                 ScrollBar.vertical.policy: ScrollBar.AlwaysOn
 
-                property int maxItemCountAtOnce: 5  // show at max 10 items at once, otherwise you need to scroll.
+                property int maxItemCountAtOnce: 5  // show at max 5 items at once, otherwise you need to scroll.
                 height: maxItemCountAtOnce * (UM.Theme.getSize("action_button").height)
 
                 clip: true
 
                 ListView
                 {
-                    id: listView
+                    id: networkPrinterListView
                     anchors.fill: parent
                     model: Cura.GlobalStacksModel {} // TODO: change this to the network printers
 
                     delegate: MachineSelectorButton
                     {
                         text: model.name
-                        width: listView.width - UM.Theme.getSize("default_margin").width
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.rightMargin: 10
                         outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
 
                         checked: ListView.view.currentIndex == index
@@ -89,6 +100,34 @@ Item
         anchors.margins: 20
 
         title: catalog.i18nc("@label", "Add a non-network printer")
+
+        onClicked:
+        {
+            if (contentShown)
+            {
+                addNetworkPrinterDropDown.contentShown = false
+            }
+        }
+
+        contentComponent: localPrinterListComponent
+
+        Component
+        {
+            id: localPrinterListComponent
+
+            AddPrinterScrollView
+            {
+                id: localPrinterView
+
+                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+                property int maxItemCountAtOnce: 10  // show at max 10 items at once, otherwise you need to scroll.
+                height: maxItemCountAtOnce * (UM.Theme.getSize("action_button").height)
+
+                clip: true
+            }
+        }
     }
 
     Cura.PrimaryButton

resources/qml/WelcomePages/AddPrinterScrollView.qml

@@ -0,0 +1,170 @@
+// Copyright (c) 2019 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.10
+import QtQuick.Controls 2.3
+
+import UM 1.3 as UM
+import Cura 1.0 as Cura
+
+
+ScrollView
+{
+    id: base
+
+    property var currentItem: null
+    property string currentSection: preferredCategory
+    property string preferredCategory: "Ultimaker"
+
+    background: Rectangle
+    {
+        anchors.fill: parent
+        color: "white"
+    }
+
+    ListView
+    {
+        id: machineList
+
+        model: UM.DefinitionContainersModel
+        {
+            id: machineDefinitionsModel
+            filter: { "visible": true }
+            sectionProperty: "category"
+            preferredSectionValue: preferredCategory
+        }
+
+        section.property: "section"
+        section.delegate: sectionHeader
+        delegate: machineButton
+    }
+
+    Component
+    {
+        id: sectionHeader
+
+        Button
+        {
+            id: button
+            width: ListView.view.width
+            height: UM.Theme.getSize("action_button").height
+            text: section
+
+            property bool isActive: base.currentSection == section
+
+            background: Rectangle
+            {
+                anchors.fill: parent
+                color: isActive ? UM.Theme.getColor("setting_control_highlight") : "transparent"
+            }
+
+            contentItem: Item
+            {
+                width: childrenRect.width
+                height: UM.Theme.getSize("action_button").height
+
+                UM.RecolorImage
+                {
+                    id: arrow
+                    anchors.left: parent.left
+                    //anchors.verticalCenter: label.verticalCenter
+                    width: UM.Theme.getSize("standard_arrow").width
+                    height: UM.Theme.getSize("standard_arrow").height
+                    sourceSize.width: width
+                    sourceSize.height: height
+                    color: UM.Theme.getColor("text")
+                    source: base.currentSection == section ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_right")
+                }
+
+                Label
+                {
+                    id: label
+                    anchors.left: arrow.right
+                    anchors.leftMargin: UM.Theme.getSize("default_margin").width
+                    verticalAlignment: Text.AlignVCenter
+                    text: button.text
+                    font.bold: true
+                    renderType: Text.NativeRendering
+                }
+            }
+
+            onClicked:
+            {
+                if (base.currentSection != section)
+                {
+                    // Find the first machine from this section
+                    for (var i = 0; i < ListView.view.count; i++)
+                    {
+                        var item = ListView.view.model.getItem(i)
+                        if (item.section == section)
+                        {
+                            base.currentItem = item
+                            base.currentSection = item.section
+                            ListView.view.currentIndex = i
+                            break
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    Component
+    {
+        id: machineButton
+
+        RadioButton
+        {
+            id: radioButton
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("standard_list_lineheight").width
+            anchors.right: parent.right
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            height: visible ? UM.Theme.getSize("standard_list_lineheight").height : 0
+
+            checked: ListView.view.currentIndex == index
+            text: name
+            font: UM.Theme.getFont("default")
+            visible: base.currentSection == section
+
+            background: Rectangle
+            {
+                anchors.fill: parent
+                color: "transparent"
+            }
+
+            indicator: Rectangle
+            {
+                implicitWidth: 16
+                implicitHeight: 16
+                anchors.verticalCenter: parent.verticalCenter
+                radius: width / 2
+                border.width: UM.Theme.getSize("default_lining").width
+                border.color: radioButton.hovered ? UM.Theme.getColor("small_button_text") : UM.Theme.getColor("small_button_text_hover")
+
+                Rectangle {
+                    width: parent.width / 2
+                    height: width
+                    anchors.centerIn: parent
+                    radius: width / 2
+                    color: radioButton.hovered ? UM.Theme.getColor("primary_button_hover") : UM.Theme.getColor("primary_button")
+                    visible: radioButton.checked
+                }
+            }
+
+            contentItem: Label
+            {
+                verticalAlignment: Text.AlignVCenter
+                leftPadding: radioButton.indicator.width + radioButton.spacing
+                text: radioButton.text
+                font: radioButton.font
+                renderType: Text.NativeRendering
+            }
+
+            onClicked:
+            {
+                ListView.view.currentIndex = index
+            }
+        }
+    }
+}

resources/qml/WelcomePages/DropDownHeader.qml

@@ -34,6 +34,8 @@ Cura.RoundedRectangle
     // If the content is shown
     property bool contentShown: false
 
+    signal clicked()
+
     MouseArea
     {
         anchors.fill: parent
@@ -41,7 +43,10 @@ Cura.RoundedRectangle
         onEntered: base.hovered = true
         onExited: base.hovered = false
 
-        onClicked: base.contentShown = !base.contentShown
+        onClicked: {
+            base.contentShown = !base.contentShown
+            base.clicked()
+        }
     }
 
     Label

resources/qml/WelcomePages/DropDownWidget.qml

@@ -22,6 +22,14 @@ Item
     property alias title: header.title
     property alias contentShown: header.contentShown
 
+    signal clicked()
+
+    Connections
+    {
+        target: header
+        onClicked: base.clicked()
+    }
+
     DropDownHeader
     {
         id: header
@@ -30,14 +38,15 @@ Item
         anchors.right: parent.right
         height: UM.Theme.getSize("expandable_component_content_header").height
         rightIconSource: contentShown ? UM.Theme.getIcon("arrow_bottom") : UM.Theme.getIcon("arrow_right")
+
     }
 
     Cura.RoundedRectangle
     {
         id: contentRectangle
         anchors.top: header.bottom
-        anchors.horizontalCenter: header.horizontalCenter
+        anchors.left: header.left
-        width: header.width
+        anchors.right: header.right
         height: childrenRect.height
 
         border.width: UM.Theme.getSize("default_lining").width
@@ -53,7 +62,7 @@ Item
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
-            height: childrenRect.height
+            height: childrenRect.height + 2
             anchors.margins: 1
             sourceComponent: base.contentComponent != null ? base.contentComponent : emptyComponent
         }