otplist.qml

import QtQuick 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3

Item {
    ToolBar {
        id: otpTimeout
            anchors.right: parent.right
            anchors.left: parent.left
            ColumnLayout {
                anchors.fill: parent
                RowLayout {
                    id: actionTools
                    Layout.alignment: Qt.AlignRight
                    ToolButton {
                        id: addItem
                        icon.name: "list-add"
                        ToolTip.text: qsTr("Add Item")
                        ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
                        ToolTip.visible: down
                    }
                    ToolButton {
                        id: addQRItem
                        icon.name: "insert-image"
                        ToolTip.text: qsTr("Add Item by QR")
                        ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
                        ToolTip.visible: down
                    }
                }
                ProgressBar {
                    id: timeout
                    Layout.fillWidth: true
                    visible: true
                }
            }
    }
    ListView {
        id: otpList
        anchors.top: otpTimeout.bottom
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        Component {
            id: otpDelegate
            Rectangle {
                id: rect
                width: parent.parent.width
                height: 50
                radius: 4
                antialiasing: true
                border {
                    width: 2
                    color: "grey"
                }
                RowLayout {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    Text {
                        id: otpName
                        text: display.name
                    }
                    Text {
                        id: otpCode
                        Layout.alignment: Qt.AlignRight
                    }
                }
            }
        }
        model: otpListModel
        delegate: otpDelegate
    }
}