Merge remote-tracking branch 'origin/WIP_onboarding' into WIP_onboarding_by_ip

resources/qml/Preferences/MachinesPage.qml

@@ -14,7 +14,7 @@ UM.ManagementPage
     id: base;
 
     title: catalog.i18nc("@title:tab", "Printers");
-    model: Cura.MachineManagementModel { }
+    model: Cura.GlobalStacksModel { }
 
     activeId: Cura.MachineManager.activeMachineId
     activeIndex: activeMachineIndex()

resources/qml/PrinterSelector/MachineSelectorButton.qml

@@ -19,12 +19,19 @@ Button
     checkable: true
     hoverEnabled: true
 
+    property bool selected: checked
+    property bool printerTypeLabelAutoFit: false
+
     property var outputDevice: null
     property var printerTypesList: []
 
+    property var updatePrinterTypesFunction: updatePrinterTypesList
+    // This function converts the printer type string to another string.
+    property var printerTypeLabelConversionFunction: Cura.MachineManager.getAbbreviatedMachineName
+
     function updatePrinterTypesList()
     {
-        printerTypesList = (checked && (outputDevice != null)) ? outputDevice.uniquePrinterTypes : []
+        printerTypesList = (outputDevice != null) ? outputDevice.uniquePrinterTypes : []
     }
 
     contentItem: Item
@@ -67,7 +74,8 @@ Button
                 model: printerTypesList
                 delegate: Cura.PrinterTypeLabel
                 {
-                    text: Cura.MachineManager.getAbbreviatedMachineName(modelData)
+                    autoFit: printerTypeLabelAutoFit
+                    text: printerTypeLabelConversionFunction(modelData)
                 }
             }
         }
@@ -76,29 +84,30 @@ Button
     background: Rectangle
     {
         id: backgroundRect
-        color: machineSelectorButton.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent"
+        color:
+        {
+            if (!machineSelectorButton.enabled)
+            {
+                return UM.Theme.getColor("action_button_disabled")
+            }
+            return machineSelectorButton.hovered ? UM.Theme.getColor("action_button_hovered") : "transparent"
+        }
         radius: UM.Theme.getSize("action_button_radius").width
         border.width: UM.Theme.getSize("default_lining").width
-        border.color: machineSelectorButton.checked ? UM.Theme.getColor("primary") : "transparent"
-    }
-
-    onClicked:
-    {
-        toggleContent()
-        Cura.MachineManager.setActiveMachine(model.id)
+        border.color: machineSelectorButton.selected ? UM.Theme.getColor("primary") : "transparent"
     }
 
     Connections
     {
         target: outputDevice
-        onUniqueConfigurationsChanged: updatePrinterTypesList()
+        onUniqueConfigurationsChanged: updatePrinterTypesFunction()
     }
 
     Connections
     {
         target: Cura.MachineManager
-        onOutputDevicesChanged: updatePrinterTypesList()
+        onOutputDevicesChanged: updatePrinterTypesFunction()
     }
 
-    Component.onCompleted: updatePrinterTypesList()
+    Component.onCompleted: updatePrinterTypesFunction()
 }

resources/qml/PrinterSelector/MachineSelectorList.qml

@@ -42,5 +42,11 @@ ListView
             }
             return result
         }
+
+        onClicked:
+        {
+            toggleContent()
+            Cura.MachineManager.setActiveMachine(model.id)
+        }
     }
 }

resources/qml/PrinterTypeLabel.qml

@@ -12,7 +12,9 @@ Item
 {
     property alias text: printerTypeLabel.text
 
-    width: UM.Theme.getSize("printer_type_label").width
+    property bool autoFit: false
+
+    width: autoFit ? (printerTypeLabel.width + UM.Theme.getSize("default_margin").width) : UM.Theme.getSize("printer_type_label").width
     height: UM.Theme.getSize("printer_type_label").height
 
     Rectangle

resources/qml/ViewsSelector.qml

@@ -47,7 +47,7 @@ Cura.ExpandablePopup
         Label
         {
             id: title
-            text: catalog.i18nc("@label", "View types")
+            text: catalog.i18nc("@label", "View type")
             verticalAlignment: Text.AlignVCenter
             height: parent.height
             elide: Text.ElideRight

resources/qml/WelcomePages/AddLocalPrinterScrollView.qml

@@ -0,0 +1,190 @@
+// 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
+
+
+//
+// This is the scroll view widget for adding a (local) printer. This scroll view shows a list view with printers
+// categorized into 3 categories: "Ultimaker", "Custom", and "Other".
+//
+ScrollView
+{
+    id: base
+
+    property var currentItem: (machineList.currentIndex >= 0)
+                              ? machineList.model.getItem(machineList.currentIndex)
+                              : null
+    property string currentSection: preferredCategory
+    property string preferredCategory: "Ultimaker"
+
+    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
+
+    function updateCurrentItemUponSectionChange()
+    {
+        // Find the first machine from this section
+        for (var i = 0; i < machineList.count; i++)
+        {
+            var item = machineList.model.getItem(i)
+            if (item.section == base.currentSection)
+            {
+                machineList.currentIndex = i
+                break
+            }
+        }
+    }
+
+    Component.onCompleted:
+    {
+        updateCurrentItemUponSectionChange()
+    }
+
+    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:
+            {
+                base.currentSection = section
+                base.updateCurrentItemUponSectionChange()
+            }
+        }
+    }
+
+    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/AddNetworkPrinterScrollView.qml

@@ -0,0 +1,217 @@
+// 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.1 as Cura
+
+import "../PrinterSelector"
+
+
+//
+// This is the widget for adding a network printer. There are 2 parts in this widget. One is a scroll view of a list
+// of discovered network printers. Beneath the scroll view is a container with 3 buttons: "Refresh", "Add by IP", and
+// "Troubleshooting".
+//
+Item
+{
+    id: base
+    height: networkPrinterInfo.height + controlsRectangle.height
+
+    property alias maxItemCountAtOnce: networkPrinterScrollView.maxItemCountAtOnce
+    property var currentItem: (networkPrinterListView.currentIndex >= 0)
+                              ? networkPrinterListView.model[networkPrinterListView.currentIndex]
+                              : null
+
+    signal refreshButtonClicked()
+    signal addByIpButtonClicked()
+
+    Item
+    {
+        id: networkPrinterInfo
+        height: networkPrinterScrollView.visible ? networkPrinterScrollView.height : noPrinterLabel.height
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+
+        Label
+        {
+            id: noPrinterLabel
+            height: UM.Theme.getSize("setting_control").height + UM.Theme.getSize("default_margin").height
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            text: catalog.i18nc("@label", "There is no printer found over your network.")
+            renderType: Text.NativeRendering
+            verticalAlignment: Text.AlignVCenter
+            visible: !networkPrinterScrollView.visible
+        }
+
+        ScrollView
+        {
+            id: networkPrinterScrollView
+            anchors.top: parent.top
+            anchors.left: parent.left
+            anchors.right: parent.right
+
+            ScrollBar.horizontal.policy: ScrollBar.AsNeeded
+            ScrollBar.vertical.policy: ScrollBar.AlwaysOn
+
+            property int maxItemCountAtOnce: 8  // show at max 8 items at once, otherwise you need to scroll.
+            height: maxItemCountAtOnce * UM.Theme.getSize("action_button").height
+
+            visible: networkPrinterListView.model.length > 0
+
+            clip: true
+
+            ListView
+            {
+                id: networkPrinterListView
+                anchors.fill: parent
+                model: CuraApplication.getDiscoveredPrintersModel().discovered_printers
+
+                Component.onCompleted:
+                {
+                    // select the first one that's not "unknown" by default.
+                    for (var i = 0; i < count; i++)
+                    {
+
+                        if (!model[i].is_unknown_machine_type)
+                        {
+                            currentIndex = i
+                            break
+                        }
+                    }
+                }
+
+                delegate: MachineSelectorButton
+                {
+                    text: modelData.device.name
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.rightMargin: 10
+                    outputDevice: modelData.device
+
+                    enabled: !modelData.is_unknown_machine_type
+
+                    printerTypeLabelAutoFit: true
+
+                    updatePrinterTypesFunction: updateMachineTypes
+                    // show printer type as it is
+                    printerTypeLabelConversionFunction: function(value) { return value }
+
+                    function updateMachineTypes()
+                    {
+                        printerTypesList = [ modelData.readable_machine_type ]
+                    }
+
+                    checkable: false
+                    selected: ListView.view.currentIndex == model.index
+                    onClicked:
+                    {
+                        ListView.view.currentIndex = index
+                    }
+                }
+            }
+        }
+    }
+
+    Cura.RoundedRectangle
+    {
+        id: controlsRectangle
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: networkPrinterInfo.bottom
+        // Make sure that the left, right, and bottom borders do not show up, otherwise you see double
+        // borders.
+        anchors.bottomMargin: -border.width
+        anchors.leftMargin: -border.width
+        anchors.rightMargin: -border.width
+
+        height: UM.Theme.getSize("message_action_button").height + UM.Theme.getSize("default_margin").height
+        border.width: UM.Theme.getSize("default_lining").width
+        border.color: UM.Theme.getColor("lining")
+        color: "white"
+        cornerSide: Cura.RoundedRectangle.Direction.Down
+
+        Cura.SecondaryButton
+        {
+            id: refreshButton
+            anchors.left: parent.left
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            anchors.verticalCenter: parent.verticalCenter
+            text: catalog.i18nc("@label", "Refresh")
+            height: UM.Theme.getSize("message_action_button").height
+            onClicked: base.refreshButtonClicked()
+        }
+
+        Cura.SecondaryButton
+        {
+            id: addPrinterByIpButton
+            anchors.left: refreshButton.right
+            anchors.leftMargin: UM.Theme.getSize("default_margin").width
+            anchors.verticalCenter: parent.verticalCenter
+            text: catalog.i18nc("@label", "Add printer by IP")
+            height: UM.Theme.getSize("message_action_button").height
+            onClicked: base.addByIpButtonClicked()
+        }
+
+        Item
+        {
+            id: troubleshootingButton
+
+            anchors.right: parent.right
+            anchors.rightMargin: UM.Theme.getSize("default_margin").width
+            anchors.verticalCenter: parent.verticalCenter
+            height: troubleshoortingLinkIcon.height
+            width: troubleshoortingLinkIcon.width + troubleshoortingLabel.width + UM.Theme.getSize("default_margin").width
+
+            UM.RecolorImage
+            {
+                id: troubleshoortingLinkIcon
+                anchors.right: troubleshoortingLabel.left
+                anchors.rightMargin: UM.Theme.getSize("default_margin").width
+                anchors.verticalCenter: parent.verticalCenter
+                height: troubleshoortingLabel.height
+                width: height
+                sourceSize.height: width
+                color: UM.Theme.getColor("text_link")
+                source: UM.Theme.getIcon("external_link")
+            }
+
+            Label
+            {
+                id: troubleshoortingLabel
+                anchors.right: parent.right
+                anchors.verticalCenter: parent.verticalCenter
+                text: catalog.i18nc("@label", "Troubleshooting")
+                font: UM.Theme.getFont("default")
+                color: UM.Theme.getColor("text_link")
+                linkColor: UM.Theme.getColor("text_link")
+                renderType: Text.NativeRendering
+            }
+
+            MouseArea
+            {
+                anchors.fill: parent
+                hoverEnabled: true
+                onClicked:
+                {
+                    // open the throubleshooting URL with web browser
+                    var url = "https://ultimaker.com/incoming-links/cura/material-compatibilty" // TODO
+                    Qt.openUrlExternally(url)
+                }
+                onEntered:
+                {
+                    troubleshoortingLabel.font.underline = true
+                }
+                onExited:
+                {
+                    troubleshoortingLabel.font.underline = false
+                }
+            }
+        }
+    }
+}

resources/qml/WelcomePages/AddPrinterByIpContent.qml

@@ -201,7 +201,7 @@ Item
         text: catalog.i18nc("@button", "Cancel")
         width: 140
         fixedWidthMode: true
-        onClicked: base.showPreviousPage()
+        onClicked: base.gotoPage("add_printer_by_selection")
 
         enabled: true
     }

resources/qml/WelcomePages/AddPrinterBySelectionContent.qml

@@ -0,0 +1,154 @@
+// 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.1 as Cura
+
+
+//
+// This component contains the content for the "Add a printer" (network) page of the welcome on-boarding process.
+//
+Item
+{
+    UM.I18nCatalog { id: catalog; name: "cura" }
+
+    Label
+    {
+        id: titleLabel
+        anchors.top: parent.top
+        anchors.topMargin: 40
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        text: catalog.i18nc("@label", "Add a printer")
+        color: UM.Theme.getColor("primary_button")
+        font: UM.Theme.getFont("large_bold")
+        renderType: Text.NativeRendering
+    }
+
+    DropDownWidget
+    {
+        id: addNetworkPrinterDropDown
+
+        anchors.top: titleLabel.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 20
+
+        title: catalog.i18nc("@label", "Add a networked printer")
+        contentShown: true  // by default expand the network printer list
+
+        onClicked:
+        {
+            if (contentShown)
+            {
+                addLocalPrinterDropDown.contentShown = false
+            }
+        }
+
+        contentComponent: networkPrinterListComponent
+
+        Component
+        {
+            id: networkPrinterListComponent
+
+            AddNetworkPrinterScrollView
+            {
+                id: networkPrinterScrollView
+
+                maxItemCountAtOnce: 6  // show at max 6 items at once, otherwise you need to scroll.
+
+                onRefreshButtonClicked:
+                {
+                    UM.OutputDeviceManager.startDiscovery()
+                }
+
+                onAddByIpButtonClicked:
+                {
+                    base.gotoPage("add_printer_by_ip")
+                }
+            }
+        }
+    }
+
+    DropDownWidget
+    {
+        id: addLocalPrinterDropDown
+
+        anchors.top: addNetworkPrinterDropDown.bottom
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.margins: 20
+
+        title: catalog.i18nc("@label", "Add a non-networked printer")
+
+        onClicked:
+        {
+            if (contentShown)
+            {
+                addNetworkPrinterDropDown.contentShown = false
+            }
+        }
+
+        contentComponent: localPrinterListComponent
+
+        Component
+        {
+            id: localPrinterListComponent
+
+            AddLocalPrinterScrollView
+            {
+                id: localPrinterView
+
+                maxItemCountAtOnce: 10  // show at max 10 items at once, otherwise you need to scroll.
+            }
+        }
+    }
+
+    Cura.PrimaryButton
+    {
+        id: nextButton
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.margins: 40
+        enabled:
+        {
+            // If the network printer dropdown is expanded, make sure that there is a selected item
+            if (addNetworkPrinterDropDown.contentShown)
+            {
+                return addNetworkPrinterDropDown.contentItem.currentItem != null
+            }
+            else
+            {
+                return addLocalPrinterDropDown.contentItem.currentItem != null
+            }
+        }
+
+        text: catalog.i18nc("@button", "Next")
+        width: 140
+        fixedWidthMode: true
+        onClicked:
+        {
+            // Create a network printer or a local printer according to the selection
+            if (addNetworkPrinterDropDown.contentShown)
+            {
+                // Create a network printer
+                const networkPrinterItem = addNetworkPrinterDropDown.contentItem.currentItem
+                CuraApplication.getDiscoveredPrintersModel().createMachineFromDiscoveredPrinter(networkPrinterItem)
+            }
+            else
+            {
+                // Create a local printer
+                const localPrinterItem = addLocalPrinterDropDown.contentItem.currentItem
+                Cura.MachineManager.addMachine(localPrinterItem.id)
+            }
+
+            // TODO: implement machine actions
+
+            // If we have created a machine, go to the last page, which is the "cloud" page.
+            base.gotoPage("cloud")
+        }
+    }
+}

resources/qml/WelcomePages/AddPrinterNetwork.qml

@@ -1,106 +0,0 @@
-// 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.1 as Cura
-
-import "../PrinterSelector"
-
-//
-// This component contains the content for the "Add a printer" (network) page of the welcome on-boarding process.
-//
-Item
-{
-    UM.I18nCatalog { id: catalog; name: "cura" }
-
-    Label
-    {
-        id: titleLabel
-        anchors.top: parent.top
-        anchors.topMargin: 40
-        anchors.horizontalCenter: parent.horizontalCenter
-        horizontalAlignment: Text.AlignHCenter
-        text: catalog.i18nc("@label", "Add a printer")
-        color: UM.Theme.getColor("primary_button")
-        font: UM.Theme.getFont("large_bold")
-        renderType: Text.NativeRendering
-    }
-
-    DropDownWidget
-    {
-        id: addNetworkPrinterDropDown
-
-        anchors.top: titleLabel.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: 20
-
-        title: catalog.i18nc("@label", "Add a network printer")
-
-        contentComponent: networkPrinterListComponent
-
-        Component
-        {
-            id: networkPrinterListComponent
-
-            ScrollView
-            {
-                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.
-                height: maxItemCountAtOnce * (UM.Theme.getSize("action_button").height)
-
-                clip: true
-
-                ListView
-                {
-                    id: listView
-                    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
-                        outputDevice: Cura.MachineManager.printerOutputDevices.length >= 1 ? Cura.MachineManager.printerOutputDevices[0] : null
-
-                        checked: ListView.view.currentIndex == index
-                        onClicked:
-                        {
-                            ListView.view.currentIndex = index
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    DropDownWidget
-    {
-        id: addLocalPrinterDropDown
-
-        anchors.top: addNetworkPrinterDropDown.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.margins: 20
-
-        title: catalog.i18nc("@label", "Add a non-network printer")
-    }
-
-    Cura.PrimaryButton
-    {
-        id: nextButton
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        anchors.margins: 40
-        enabled: true  // TODO
-        text: catalog.i18nc("@button", "Next")
-        width: 140
-        fixedWidthMode: true
-        onClicked: base.showNextPage()
-    }
-}

resources/qml/WelcomePages/CloudContent.qml

@@ -99,14 +99,13 @@ Item
         text: catalog.i18nc("@button", "Create an account")
         width: 140
         fixedWidthMode: true
-        onClicked: base.showNextPage() // TODO: create account
+        onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
     }
 
     Cura.SecondaryButton
     {
         id: signInButton
         anchors.left: createAccountButton.right
-        //anchors.leftMargin: 10
         anchors.verticalCenter: finishButton.verticalCenter
         text: catalog.i18nc("@button", "Sign in")
         width: 80
@@ -115,6 +114,6 @@ Item
         hoverColor: "transparent"
         textHoverColor: UM.Theme.getColor("text_light_blue")
         fixedWidthMode: true
-        onClicked: base.showNextPage() // TODO: sign in
+        onClicked: Cura.API.account.login()
     }
 }

resources/qml/WelcomePages/DropDownHeader.qml

@@ -11,7 +11,7 @@ import ".."
 
 
 //
-// This is DropDown Header bar of the expandable drop down list.
+// This is DropDown Header bar of the expandable drop down list. See comments in DropDownWidget for details.
 //
 Cura.RoundedRectangle
 {
@@ -34,6 +34,8 @@ Cura.RoundedRectangle
     // If the content is shown
     property bool contentShown: false
 
+    signal clicked()
+
     MouseArea
     {
         anchors.fill: parent
@@ -41,7 +43,7 @@ Cura.RoundedRectangle
         onEntered: base.hovered = true
         onExited: base.hovered = false
 
-        onClicked: base.contentShown = !base.contentShown
+        onClicked: base.clicked()
     }
 
     Label

resources/qml/WelcomePages/DropDownWidget.qml

@@ -8,6 +8,13 @@ import UM 1.3 as UM
 import Cura 1.1 as Cura
 
 
+//
+// This is the dropdown list widget in the welcome wizard. The dropdown list has a header bar which is always present,
+// and its content whose visibility can be toggled by clicking on the header bar. The content is displayed as an
+// expandable dropdown box that will appear below the header bar.
+//
+// The content is configurable via the property "contentComponent", which will be loaded by a Loader when set.
+//
 Item
 {
     UM.I18nCatalog { id: catalog; name: "cura" }
@@ -15,12 +22,25 @@ Item
     id: base
 
     implicitWidth: 200
-    height: header.contentShown ? childrenRect.height : header.height
+    height: header.contentShown ? (header.height + contentRectangle.height + 30) : header.height
 
     property var contentComponent: null
+    property alias contentItem: contentLoader.item
 
     property alias title: header.title
-    property alias contentShown: header.contentShown
+    property bool contentShown: false
+
+    signal clicked()
+
+    Connections
+    {
+        target: header
+        onClicked:
+        {
+            base.contentShown = !base.contentShown
+            clicked()
+        }
+    }
 
     DropDownHeader
     {
@@ -30,15 +50,16 @@ 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")
+        contentShown: base.contentShown
     }
 
     Cura.RoundedRectangle
     {
         id: contentRectangle
         anchors.top: header.bottom
-        anchors.horizontalCenter: header.horizontalCenter
-        width: header.width
-        height: childrenRect.height
+        anchors.left: header.left
+        anchors.right: header.right
+        height: contentLoader.height + 2
 
         border.width: UM.Theme.getSize("default_lining").width
         border.color: UM.Theme.getColor("lining")
@@ -53,7 +74,6 @@ Item
             anchors.top: parent.top
             anchors.left: parent.left
             anchors.right: parent.right
-            height: childrenRect.height
             anchors.margins: 1
             sourceComponent: base.contentComponent != null ? base.contentComponent : emptyComponent
         }

resources/qml/WelcomePages/StepPanel.qml

@@ -33,6 +33,7 @@ Item
     signal showNextPage()
     signal showPreviousPage()
     signal passLastPage()  // Emitted when there is no more page to show
+    signal gotoPage(string page_id)  // Go to a specific page by the given page_id.
 
     onShowNextPage:
     {
@@ -53,6 +54,29 @@ Item
         }
     }
 
+    onGotoPage:
+    {
+        // find the page index
+        var page_index = -1
+        for (var i = 0; i < base.model.count; i++)
+        {
+            const item = base.model.getItem(i)
+            if (item.id == page_id)
+            {
+                page_index = i
+                break
+            }
+        }
+        if (page_index > 0)
+        {
+            currentStep = page_index
+        }
+        else
+        {
+            console.log("Error: cannot find page with page_id = [", page_id, "]")
+        }
+    }
+
     onVisibleChanged:
     {
         if (visible)