qcookieclicker/qml/ShopPopup.qml

import QtQuick 2.9
import QtQuick.Controls 2.4
import QtGraphicalEffects 1.0

Popup {
    id: control

    modal: true
    dim: false

    scale: 0

    height: 300

    Rectangle {
        id: contentRect

        height: parent.height

        width: topImg.width * 0.836
        anchors.horizontalCenter: parent.horizontalCenter

        color: "white"

        Item {
            id: contentItm

            anchors {
                fill: parent
                topMargin: -topImg.anchors.bottomMargin
            }

            Column {
                anchors.fill: parent

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

                    Item {
                        id: leftSectionItm

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

                        Rectangle {
                            id: iconRect

                            anchors {
                                fill: parent
                            }

                            width: height

                             color: "red"
                        }

                    }

                    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
                                left: iconRect.right
                            }

                            font.bold: true

                            text: "title"

                        }

                        Item {
                            id: costItm

                            anchors {
                                top: titleLab.bottom
                                bottom: parent.bottom
                                left: iconRect.right
                            }

                            Image {
                                id: costCookieImg
                                source: "qrc:/icons/cookie.png"
                                mipmap: true
                                height: parent.height
                                width: height
                            }

                            Label {
                                id: costLa

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

                                text: "10"
                            }

                        }

                    }

                    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: "Level:"
                        }

                        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: "10"

                        }

                        Label {
                            id: useLableLa

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

                            font.pixelSize: parent.height * 0.45

                            text: "Click:"
                        }

                        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: "10"

                        }

                    }

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

                }
            }
        }
    }

    Image {
        id: topImg

        anchors {
            bottom: contentRect.top
            bottomMargin: -height * 0.22
        }

        source: "qrc:/graphics/shopTop.png"
        fillMode: Image.PreserveAspectFit
        mipmap: true
        width: parent.width
    }

    Image {
        id: bottomImg

        anchors {
            top: contentRect.bottom
            topMargin: -height * 0.33
        }

        source: "qrc:/graphics/shopBottom.png"
        fillMode: Image.PreserveAspectFit
        mipmap: true
        width: parent.width
    }

    background: Rectangle {
        color: "transparent"
    }

    enter: Transition {
        NumberAnimation { properties: "scale"; to: 1; duration: 300; easing.type: Easing.Linear }
    }

    exit: Transition {
        NumberAnimation { properties: "scale"; to: 0; duration: 300; easing.type: Easing.Linear }
    }
}