meegim/qml/ToolBar.qml

import QtQuick 1.1

Rectangle {
    id: toolBar
    height: 80
    width: parent.width
    anchors.left: parent.left

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

    gradient: Gradient {
        GradientStop { position: 0; color: "#a7a7a7" }
        GradientStop { position: 1; color: "#666666" }
    }

    property int pauseAnim: 0
    property int durationAnim: 10

    function show() {
        toolBar.state = "normal"
    }

    function hide() {
        toolBar.state = "hide"
    }

    states: [
        State {
            name: "normal"
            AnchorChanges {
                target: toolBar
                anchors.bottom: toolBar.parent.bottom
            }
        },
        State {
            name: "hide"
            AnchorChanges {
                target: toolBar
                anchors.top: toolBar.parent.bottom
            }
        }
    ]
    transitions: Transition {
        SequentialAnimation {
            PauseAnimation { duration: toolBar.pauseAnim }
            AnchorAnimation { duration: toolBar.durationAnim; easing.type: Easing.OutElastic }
        }
    }

    state: "hide"

    Component.onCompleted: toolBar.state = "normal"
}