meegim/qml/TopInfoPanel.qml

import QtQuick 1.1
import Qt.labs.particles 1.0

Rectangle {
    id: topInfoPanel

    anchors.horizontalCenter: parent.horizontalCenter
    width: parent.width - 14
    height: 80
    radius: 10
    border.color: "blue"
    z: 10


    property string icon: ""
    property color colorBorder: "lightblue"
    property string text: "Blah-blah-blah"
    property bool closeOnClicked: true
    signal clicked()
    signal opened()
    signal closed()
    property color colorMain: "white"
    property int __numScreen: 0

    function showPanel() {
        topInfoPanel.state = "visible"
    }

    function hidePanel() {
        topInfoPanel.state = "hidden"
    }

    function showPanelTime( time_ms ) {
        topInfoPanel.state = "visible"
        if( !timerHide.running ) {
            timerHide.interval = time_ms
            timerHide.start()
        }
    }

    function chShowPanel() {
        if( topInfoPanel.state == "hidden" ) {
            topInfoPanel.state = "visible"
        } else {
            topInfoPanel.state = "hidden"
        }
    }

    Timer {
        id: timerHide
        interval: 3000
        repeat: false
        onTriggered: {
            hidePanel()
        }
    }

    gradient: Gradient {
        GradientStop { position: 0; color: colorBorder }
        GradientStop { position: 0.15; color: colorMain }
        GradientStop { position: 0.85; color: colorMain }
        GradientStop { position: 1; color: colorBorder }
    }

    Rectangle {
        anchors.fill: parent
        anchors.margins: 1
        clip: true
        color: "transparent"
        radius: parent.radius
        Rectangle {
            width: parent.height
            height: parent.width
            anchors.centerIn: parent
            rotation: 270
            radius: parent.radius
            gradient: Gradient {
                GradientStop { position: 0; color: colorBorder }
                GradientStop { position: 0.05; color: "transparent" }
                GradientStop { position: 0.95; color: "transparent" }
                GradientStop { position: 1; color: colorBorder }
            }
        }
    }

    /*******************************************************/
    Image {
        id: imgFrame
        source: topInfoPanel.icon
        anchors.verticalCenter: parent.verticalCenter
        smooth: true
        anchors.left: parent.left
        anchors.leftMargin: 10
        height: parent.height - 16
        width: height
        visible: source != ""
    }
    Text {
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: imgFrame.source == "" ? parent.left : imgFrame.right
        anchors.leftMargin: 10
        font.pixelSize: 24
        text: topInfoPanel.text
    }

    /*Item {
        id: wrapperText
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: imgFrame.source == "" ? parent.left : imgFrame.right
        anchors.leftMargin: 10
        property string txt: topInfoPanel.text
        //Component.onCompleted: { console.debug("state:["+wrapperText.txt.length+"]") }
        Text {
            id: text
            text: wrapperText.txt
            anchors.fill: parent
            font.pixelSize: 26
            wrapMode: Text.WordWrap
        }
        Text {
            id: dummyText
            text: wrapperText.txt
            visible: false
        }
        states: [
            State {
                name: "wide text"
                when: wrapperText.txt.length > 20
                PropertyChanges {
                    target: wrapperText
                    width: topInfoPanel.width - 10
                    //height: topInfoPanel.height - 10
                    height: 75
                }
            },
            State {
                name: "not wide text"
                when: wrapperText.txt.length <= 20
                PropertyChanges {
                    target: wrapperText
                    width: dummyText.paintedWidth
                    height: dummyText.height
                }
            }
        ]
    }*/
    MouseArea {
        id: maPanel
        anchors.fill: parent
        onClicked: {
            topInfoPanel.clicked()
            if( topInfoPanel.closeOnClicked ) {
                topInfoPanel.state = "hidden"
                if( timerHide.running ) {
                    timerHide.stop()
                }
            }
        }
    }

    /*******************************************************/
    state: "hidden"
    states: [
        State {
            name: "visible"
            AnchorChanges { target: topInfoPanel; anchors.top: parent.top }
            PropertyChanges { target: topInfoPanel; scale: 1 }
            PropertyChanges { target: topInfoPanel; anchors.topMargin: 5 + (topInfoPanel.height+5)*__numScreen }
        },
        State {
            name: "hidden"
            AnchorChanges { target: topInfoPanel; anchors.bottom: parent.top }
            PropertyChanges { target: topInfoPanel; scale: 0 }
        }
    ]

    property int timeVtoH: 300
    property int timeHtoV: 300
    transitions: [
        Transition {
            from: "hidden"; to: "visible"
            SequentialAnimation {
                ScriptAction { script: { topInfoPanel.opened(); particles.burst( 20 ) } }
                ParallelAnimation {
                    NumberAnimation { duration: timeHtoV; property: "scale"; easing.type: Easing.InOutQuad }
                    AnchorAnimation { duration: timeHtoV; easing.type: Easing.InOutQuad }
                }
            }
        },
        Transition {
            from: "visible"; to: "hidden"
            SequentialAnimation {
                ScriptAction { script: { particles.burst( 20 ) } }
                ParallelAnimation {
                    NumberAnimation { duration: timeVtoH; property: "scale"; easing.type: Easing.InOutQuad }
                    AnchorAnimation { duration: timeVtoH; easing.type: Easing.InOutQuad }
                }
                ScriptAction { script: { topInfoPanel.closed(); } }
            }
        }
    ]


    Particles {
        id: particles
        x: parent.width/2
        y: parent.height/2
        source: "qrc:/qml/images/star.png"
        count: -1
        angle: 0
        angleDeviation: 360
        emissionRate: 0
        velocity: 300
        lifeSpan: 800
    }
}