qcookieclicker/qml/components/ShopDelegate.qml

import QtQuick 2.9
import QtQuick.Controls 2.4

ItemDelegate {
    id: control
    width: parent.width
    height: 40

    property string iconSource: "qrc:/icons/cookie.png"
    property string costIconSource: "qrc:/icons/cookie.png"
    property string title: "Title"
    property string cost: "10"
    property string levelLabel: "Level:"
    property string level: "10"
    property string useLabel: "Cps:"
    property string use: "+10"

    Item {
        id: leftSectionItm

        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            rightMargin: parent.width * 0.8
            margins: 5
        }

        Image {
            id: iconRect

            anchors {
                centerIn: parent
            }

            height: parent.height
            width: height

            source: control.iconSource
            mipmap: true
        }

    }

    Item {
        id: middleSectionItm

        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            leftMargin: parent.width * 0.2
            right: parent.right
            rightMargin: parent.width * 0.3
            margins: 5
        }

        Label {
            id: titleLab

            anchors {
                top: parent.top
            }

            font.bold: true

            text: control.title

        }

        Item {
            id: costItm

            anchors {
                top: titleLab.bottom
                bottom: parent.bottom
            }

            Image {
                id: costCookieImg
                source: control.costIconSource
                mipmap: true
                height: parent.height
                width: height
            }

            Label {
                id: costLa

                anchors  {
                    left: costCookieImg.right
                    verticalCenter: costCookieImg.verticalCenter
                }

                text: control.cost
            }

        }

    }

    Item {
        id: rightsectionItm

        anchors {
            top: parent.top
            bottom: parent.bottom
            left: parent.left
            leftMargin: parent.width * 0.75
            right: parent.right
            margins: 5
        }

        Label {
            id: levelLableLa

            anchors {
                top: parent.top
                left: parent.left
            }

            font.pixelSize: parent.height * 0.45

            text: control.levelLabel
        }

        Label {
            id: levelTextLa

            anchors {
                verticalCenter: parent.verticalCenter
                verticalCenterOffset: -parent.height * 0.24
                left: levelLableLa.right
                right: parent.right
            }

            font.pixelSize: parent.height * 0.45 * 1/text.length  * 5 > parent.height * 0.45 ? parent.height * 0.45:parent.height * 0.45 * 1/text.length  * 5

            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter

            text: control.level

        }

        Label {
            id: useLableLa

            anchors {
                bottom: parent.bottom
                left: parent.left
            }

            font.pixelSize: parent.height * 0.45

            text: control.useLabel
        }

        Label {
            id: useTextLa

            anchors {
                verticalCenter: parent.verticalCenter
                verticalCenterOffset: parent.height * 0.24
                left: useLableLa.right
                right: parent.right
            }

            font.pixelSize: parent.height * 0.45 * 1/text.length  * 5 > parent.height * 0.45 ? parent.height * 0.45:parent.height * 0.45 * 1/text.length  * 5

            horizontalAlignment: Text.AlignRight
            verticalAlignment: Text.AlignVCenter

            text: control.use

        }

    }

    background: Rectangle {
        color: parent.pressed ? "lightgrey":"white"
        border.color: "grey"
        border.width: 2
    }

}