Cura/resources/qml/WelcomePages/AddPrinterScrollView.qml

// 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
            }
        }
    }
}