meegim/qml/DialogLiquid.qml

import QtQuick 1.1
import InvMA 1.0


Rectangle {
    id: dlgLiquid

    function dlgShowHide() {
        if( state == "hidden" ) {
            state = "visible"
        } else {
            state = "hidden"
        }
    }

    property string hideToLeft: "toLeft"
    property string hideToCenter: "toCenter"
    property string hideToRight: "toRight"
    property alias inverseMouseArea: inverseMA.enabled

    property string hideTo: hideToCenter

    BorderImage {
        z: -1
        anchors.fill: parent
        anchors { rightMargin: -12; bottomMargin: -12 }
        border { left: 10; top: 10; right: 10; bottom: 10 }
        source: "qrc:/qml/images/shadow.png";
        smooth: true
    }

    InverseMouseArea {
        id: inverseMA
        anchors.fill: parent
        onClickedOutside: {
            dlgLiquid.state = "hidden"
        }
    }

    width: parent.width*0.9
    height: parent.height*0.6

    radius: 3
    color: "white"
    border.color: "gray"
    border.width: 3

    state: "hidden"

    property int howLong: 400
    states: [
        State {
            name: "visible"
            AnchorChanges { target: dlgLiquid; anchors.verticalCenter: parent.verticalCenter }
            AnchorChanges { target: dlgLiquid; anchors.horizontalCenter: parent.horizontalCenter }
            PropertyChanges { target: dlgLiquid; scale: 1 }
            PropertyChanges { target: dlgLiquid; z: 10 }
            PropertyChanges { target: dlgLiquid; opacity: 1 }
        },
        State {
            name: "hidden"
            AnchorChanges { target: dlgLiquid; anchors.top: parent.bottom }
            AnchorChanges {
                target: dlgLiquid;
                anchors.left: hideTo == hideToRight ? parent.right : undefined
                anchors.right: hideTo == hideToLeft ? parent.left : undefined
            }
            PropertyChanges { target: dlgLiquid; anchors.leftMargin: - 100 }
            PropertyChanges { target: dlgLiquid; scale: 0.1 }
            PropertyChanges { target: dlgLiquid; z: 0 }
            PropertyChanges { target: dlgLiquid; opacity: 0.3 }
        }
    ]
    transitions: [
        Transition {
            from: "hidden"; to: "visible"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == true ) { dlgLiquid.visible = true }
                }
                NumberAnimation { duration: howLong; property: "opacity"; }
            }
        },
        Transition {
            from: "visible"; to: "hidden"
            ParallelAnimation {
                NumberAnimation { duration: howLong; property: "scale"; easing.type: Easing.InOutQuad }
                AnchorAnimation { duration: howLong; easing.type: Easing.InOutQuad }
                onRunningChanged: {
                    if( running == false ) { dlgLiquid.visible = false }
                }
                NumberAnimation { duration: howLong; property: "opacity"; }
            }
        }
    ]
}