[Interest] Need "best practice" recommendation on MouseArea

[Helbrass]

Hi All!

Impressed with QML power I've been experimenting with some ideas I have
that I would not dare to do with any other toolkit, and got some
behavioural problems with MouseArea that I cannot resolve in a clean way.
I can do it with some boolean flags and setting them with some complicated
logic, but it feels like I missed something important and there is obvious
and clean way to solve it.

So, there is an application with auto-hidden toolbar, it appears when
mouse is in the top part of application and disappear when mouse leaves
it. But when mouse enters MouseArea inside the button - MouseArea in the
toolbar triggers onExited() and toolbar disappears with all buttons.

In case if mailing list will block the attachment or you'd like to see
code in the body of email:

========================== main.qml ====================================
import QtQuick 1.1

Rectangle {
         id: topComponent
         width: 600
         height: 600
         state: "Invisible"

         Rectangle {
             id: mainAreaRectangle
             color: "grey"
             anchors.fill: parent
             anchors.margins: 15

             Text {
                 text: "some kind of working area"
             }

         }

         MouseArea {
             hoverEnabled: true
             anchors.top: parent.top
             height: 15
             width: parent.width
             onClicked: console.debug("top mouse area clicked")
             onEntered: {
                 if (topComponent.state != "Visible")
                     topComponent.state = "Visible";
             }
         }

         Rectangle {
             id: visibleBar
             width: parent.width
             anchors.top: parent.top
             height: 30
             color: "#708090"

             MouseArea {
                 anchors.fill: parent
                 hoverEnabled: true
                 onExited: {
                     console.debug("exited toolbar");
                     if (topComponent.state != "Invisible") {
                         topComponent.state = "Invisible"
                     }
                 }
                 onEntered: console.debug("entered toolbar")
                 onClicked: console.debug("clicked toolbar")
             }

             Row {
                 anchors.fill: parent

                 Rectangle {
                     id: button
                     color: "blue"
                     radius: 4
                     height: 24
                     width: 24
                     anchors.verticalCenter: parent.verticalCenter

                     MouseArea {
                         anchors.fill: parent
                         hoverEnabled: true
                         onExited: console.debug("exited button")
                         onEntered: console.debug("entered button")
                         onClicked: console.debug("clicked button")
                     }

                 }

             }

         }
         states: [
             State {
                 name: "Invisible"
                 PropertyChanges {
                     target: visibleBar
                     opacity: 0
                     z: -1
                 }
             },
             State {
                 name: "Visible"
                 PropertyChanges {
                     target: visibleBar
                     opacity: 0.9
                     z: 1
                 }
             }
         ]

         transitions: [
             Transition {
                 from: "Visible"
                 to: "Invisible"
                 SequentialAnimation {
                     NumberAnimation {
                         properties: "opacity"
                         duration: 400
                     }
                     NumberAnimation {
                         properties: "z"
                         from: 1
                         to: -1
                     }
                 }
             },
             Transition {
                 from: "Invisible"
                 to: "Visible"
                 SequentialAnimation {
                     NumberAnimation {
                         properties: "z"
                         from: -1
                         to: 1
                     }
                     NumberAnimation {
                         properties: "opacity"
                         duration: 400
                     }
                 }
             }
         ]
}

==============================================================================

-- 
Using Opera's revolutionary email client: http://www.opera.com/mail/
-------------- next part --------------
A non-text attachment was scrubbed...
Name: main.qml
Type: application/octet-stream
Size: 3041 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20120511/85c42db5/attachment.obj>