meegim/qml/HiddenBlock.qml

import QtQuick 1.1

Rectangle {
    id: hiddenBlock

    width: parent.width

    property alias title: txtTitle.text
    property alias titleHeght: itemTitle.height
    property variant contentBlock

    state: "close"
    color: "transparent"
    clip: true

    states: [
        State {
            name: "close"
            PropertyChanges { target: contentLoader; opacity: 0 }
            PropertyChanges { target: hiddenBlock; height: itemTitle.height + itemTitle.anchors.topMargin }
            PropertyChanges { target: imgState; rotation: 180 }
        },
        State {
            name: "open"
            PropertyChanges { target: contentLoader; opacity: 1 }
            PropertyChanges { target: hiddenBlock; height: itemTitle.height + itemTitle.anchors.topMargin +contentLoader.height + contentLoader.anchors.topMargin }
            PropertyChanges { target: imgState; rotation: -90 }
        }
    ]

    transitions: [
        Transition {
            from: "close"; to: "open"
            ParallelAnimation {
                RotationAnimation { target: imgState; duration: 400; direction: RotationAnimation.Clockwise }
                NumberAnimation { target: hiddenBlock; property: "height"; duration: 400; easing.type: Easing.InOutQuad }
                NumberAnimation { target: contentLoader; property: "opacity"; duration: 300; easing.type: Easing.InOutQuad }
            }
        },
        Transition {
            from: "open"; to: "close"
            ParallelAnimation {
                RotationAnimation { target: imgState; duration: 400; direction: RotationAnimation.Counterclockwise }
                NumberAnimation { target: hiddenBlock; property: "height"; duration: 400; easing.type: Easing.InOutQuad }
                NumberAnimation { target: contentLoader; property: "opacity"; duration: 300; easing.type: Easing.InOutQuad }
            }
        }
    ]

    Rectangle {
        id: itemTitle
        height: 70
        width: parent.width
        anchors.top: parent.top
        anchors.topMargin: 10
        anchors.left: parent.left
        radius: 8
        border.color: "gray"
        border.width: 1
        smooth: true
        gradient: gr_normal
        Gradient {
            id: gr_normal
            GradientStop { position: 0; color: "lightgray" }
            GradientStop { position: 1; color: "#a0a0a0" }
            //GradientStop { position: 0; color: "white" }
            //GradientStop { position: 0.5; color: "#ededed" }
            //GradientStop { position: 1; color: "#d7d7d7" }
        }
        Gradient {
            id: gr_press
            GradientStop { position: 0; color: "#a0a0a0" }
            GradientStop { position: 1; color: "lightgray" }
            //GradientStop { position: 0; color: "#d7d7d7" }
            //GradientStop { position: 1; color: "#d7d7d7" }
        }
        Image {
            id: imgState
            source: "qrc:/qml/images/small_arrow_black.png"
            rotation: hiddenBlock.state == "close" ? 180 : -90
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 15
            smooth: true
        }
        Text {
            id: txtTitle
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: imgState.right
            anchors.leftMargin: 20
            text: "Title"
            font.pixelSize: 26
        }
        MouseArea {
            id: maTitle
            anchors.fill: parent
            onClicked: {
                if( hiddenBlock.state == "close" ) {
                    hiddenBlock.state = "open"
                } else {
                    hiddenBlock.state = "close"
                }
            }
            onPressedChanged: {
                if(pressed) {
                    itemTitle.gradient = gr_press
                } else {
                    itemTitle.gradient = gr_normal
                }
            }
        }
    }

    Loader {
        id: contentLoader
        anchors.top: itemTitle.bottom
        anchors.topMargin: 40
        anchors.left: parent.left
        sourceComponent: contentBlock
    }
}