meegim/qml/DialogEdit.qml

import QtQuick 1.1

Rectangle {
    id: dlgEdit
    signal clickedOk
    signal clickedCancel

    property string title: ""
    property int fontTitleSize: 24

    property string text: ""
    property int fontTextSize: 22

    property alias textEdit: textEditWidget.text

    function show() {
        dlgEdit.state = "visible"
    }

    function hide() {
        dlgText.state = "hidden"
    }

    width: parent.width*0.9
    height: headerDlg.height +
            dlgText.height +
            rowButtons.height +
            dlgText.anchors.topMargin +
            textEditWidget.height + textEditWidget.anchors.topMargin +
            rowButtons.anchors.topMargin + 20

    state: "hidden"

    //radius: 10
    color: "white"
    border.color: "gray"
    border.width: 3
    smooth: true

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

    Rectangle {
        id: headerDlg
        anchors.top: parent.top
        anchors.left: parent.left
        width: parent.width
        height: 70
        gradient: Gradient {
            GradientStop { position: 0; color: "#919191" }
            GradientStop { position: 1; color: "#666666" }
        }
        Text {
            anchors.centerIn: parent
            font.pixelSize: dlgEdit.fontTitleSize
            color: "white"
            text: dlgEdit.title
        }
    }

    Text {
        id: dlgText
        anchors.top: headerDlg.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
        font.pixelSize: dlgEdit.fontTextSize
        width: parent.width - 10
        text: dlgEdit.text
        clip: true
        HorizontalGradient {
            anchors.left: parent.left
            anchors.top: parent.top
            height: parent.height
            width: parent.width
            gradient: Gradient {
                GradientStop { color: "transparent"; position: 0 }
                GradientStop { color: "transparent"; position: 0.8 }
                GradientStop { color: "white"; position: 0.95 }
                GradientStop { color: "white"; position: 1 }
            }
        }
    }

    MyTextInput {
        id: textEditWidget
        anchors.top: dlgText.bottom
        anchors.topMargin: 10
        anchors.left: parent.left; anchors.leftMargin: 10
        anchors.right: parent.right; anchors.rightMargin: 10
        height: 50
    }


    /****************************************************/
    Row {
        id: rowButtons
        anchors.top: textEditWidget.bottom; anchors.topMargin: 20
        anchors.left: parent.left; anchors.leftMargin: 10
        spacing: 20
        Button {
            id: buttonOk
            height: 70
            text: qsTr("Ok")
            width: dlgEdit.width/2 - 20
            onClicked: {
                dlgEdit.clickedOk()
                dlgEdit.state = "hidden"
            }
        }
        Button {
            id: buttonCancel
            height: 70
            text: qsTr( "Cancel" )
            width: dlgEdit.width/2 - 20
            onClicked: {
                dlgEdit.clickedCancel()
                dlgEdit.state = "hidden"
            }
        }
    }
    /****************************************************/

    property int howLong: 400
    states: [
        State {
            name: "visible"
            AnchorChanges { target: dlgEdit; anchors.verticalCenter: parent.verticalCenter }
            AnchorChanges { target: dlgEdit; anchors.horizontalCenter: parent.horizontalCenter }
            PropertyChanges { target: dlgEdit; scale: 1 }
            PropertyChanges { target: dlgEdit; z: 10 }
        },
        State {
            name: "hidden"
            AnchorChanges { target: dlgEdit; anchors.top: parent.bottom }
            AnchorChanges { target: dlgEdit; anchors.horizontalCenter: parent.horizontalCenter; }
            PropertyChanges { target: dlgEdit; anchors.leftMargin: -100 }
            PropertyChanges { target: dlgEdit; scale: 0.1 }
            PropertyChanges { target: dlgEdit; z: 0 }
        }
    ]
    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 ) { dlgAccountOptions.visible = true }
                }
            }
        },
        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 ) { dlgAccountOptions.visible = false }
                }
            }
        }
    ]

}