Cura/plugins/UM3NetworkPrinting/resources/qml/GenericPopUp.qml

// Copyright (c) 2018 Ultimaker B.V.
// Cura is released under the terms of the LGPLv3 or higher.

import QtQuick 2.2
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.1
import QtGraphicalEffects 1.0
import UM 1.3 as UM

/**
 * This is a generic pop-up element which can be supplied with a target and a content
 * item. The content item will appear to the left, right, above, or below the target
 * depending on the value of the direction property
 */
Popup
{
    id: base

    /**
     * The target item is what the pop-up is "tied" to, usually a button
     */
    property var target

    /**
     * Which side of the target should the contentItem appear on?
     * Possible values include:
     *   - "top"
     *   - "bottom"
     *   - "left"
     *   - "right"
     */
    property string direction: "bottom"

    /**
     * Should the popup close when you click outside it? For example, this is
     * disabled by the InfoBlurb component since it's opened and closed using mouse
     * hovers, not clicks.
     */
    property bool closeOnClick: true

    /**
     * Use white for context menus, dark grey for info blurbs!
     */
    property var color: "#ffffff" // TODO: Theme!

    background: Item
    {
        anchors.fill: parent

        DropShadow
        {
            anchors.fill: pointedRectangle
            color: UM.Theme.getColor("monitor_shadow")
            radius: UM.Theme.getSize("monitor_shadow_radius").width
            source: pointedRectangle
            transparentBorder: true
            verticalOffset: 2 * screenScaleFactor
        }

        Item
        {
            id: pointedRectangle
            anchors
            {
                horizontalCenter: parent.horizontalCenter
                verticalCenter: parent.verticalCenter
            }
            height: parent.height - 10 * screenScaleFactor // Because of the shadow
            width: parent.width - 10 * screenScaleFactor // Because of the shadow

            Rectangle
            {
                id: point
                anchors
                {
                    horizontalCenter:
                    {
                        switch(direction)
                        {
                            case "left":
                                return bloop.left
                            case "right":
                                return bloop.right
                            default:
                                return bloop.horizontalCenter
                        }
                    }
                    verticalCenter:
                    {
                        switch(direction)
                        {
                            case "top":
                                return bloop.top
                            case "bottom":
                                return bloop.bottom
                            default:
                                return bloop.verticalCenter
                        }
                    }
                }
                color: base.color
                height: 12 * screenScaleFactor
                transform: Rotation
                {
                    angle: 45
                    origin.x: point.width / 2
                    origin.y: point.height / 2
                }
                width: height
            }

            Rectangle
            {
                id: bloop
                anchors
                {
                    fill: parent
                    leftMargin:   direction == "left"   ? 8 * screenScaleFactor : 0
                    rightMargin:  direction == "right"  ? 8 * screenScaleFactor : 0
                    topMargin:    direction == "top"    ? 8 * screenScaleFactor : 0
                    bottomMargin: direction == "bottom" ? 8 * screenScaleFactor : 0
                }
                color: base.color
                width: parent.width
            }
        }
    }

    onClosed: visible = false
    onOpened: visible = true
    closePolicy: closeOnClick ? Popup.CloseOnPressOutside : Popup.NoAutoClose
    enter: Transition
    {
        NumberAnimation
        {
            duration: 75
            property: "visible"
        }
    }
    exit: Transition
    {
        NumberAnimation
        {
            duration: 75
            property: "visible"
        }
    }

    clip: true

    padding: UM.Theme.getSize("monitor_shadow_radius").width
    topPadding:    direction == "top"    ? padding + 8 * screenScaleFactor : padding
    bottomPadding: direction == "bottom" ? padding + 8 * screenScaleFactor : padding
    leftPadding:   direction == "left"   ? padding + 8 * screenScaleFactor : padding
    rightPadding:  direction == "right"  ? padding + 8 * screenScaleFactor : padding

    transformOrigin:
    {
        switch(direction)
        {
            case "top":
                return Popup.Top
            case "bottom":
                return Popup.Bottom
            case "right":
                return Popup.Right
            case "left":
                return Popup.Left
            default:
                direction = "bottom"
                return Popup.Bottom
        }
    }

    visible: false;

    x:
    {
        switch(direction)
        {
            case "left":
                return target.x + target.width + 4 * screenScaleFactor
            case "right":
                return target.x - base.width - 4 * screenScaleFactor
            default:
                return target.x + target.width / 2 - base.width / 2
        }
    }
    y:
    {
        switch(direction)
        {
            case "top":
                return target.y + target.height + 4 * screenScaleFactor
            case "bottom":
                return target.y - base.height - 4 * screenScaleFactor
            default:
                return target.y + target.height / 2 - base.height / 2
        }
    }
}