Mouse Area question

[vuletic]

Hello, I want to "hide" control area when mouse is not there, but if I do it this way:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtMultimedia 5.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4
 
Window {
    id: mainArea
    visible: true
    minimumWidth: 1200
    minimumHeight: 720
    color: "white"
 
    Rectangle {
        id: controlArea
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 0
        width: 400
        height: 50
        opacity: 0.40
        color: "lightgray"
        radius: 10
 
        RowLayout {
            anchors.centerIn: parent
            ToolButton {
                text: "test"
            }
 
        }
        MouseArea {
            z: 100
            anchors.fill: parent
            hoverEnabled:true
            onEntered: {
                console.log("ENTERED toolbar mousearea");
                controlArea.opacity = 0.40
            }
            onExited: {
                console.log("EXITED toolbar mousearea");
                controlArea.opacity = 0.0
            }
 
        }
 
    }
 
}

import QtQuick 2.3
import QtQuick.Window 2.2
import QtMultimedia 5.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4

Window {
    id: mainArea
    visible: true
    minimumWidth: 1200
    minimumHeight: 720
    color: "white"

    Rectangle {
        id: controlArea
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 0
        width: 400
        height: 50
        opacity: 0.40
        color: "lightgray"
        radius: 10

        RowLayout {
            anchors.centerIn: parent
            ToolButton {
                text: "test"
            }

        }
        MouseArea {
            z: 100
            anchors.fill: parent
            hoverEnabled:true
            onEntered: {
                console.log("ENTERED toolbar mousearea");
                controlArea.opacity = 0.40
            }
            onExited: {
                console.log("EXITED toolbar mousearea");
                controlArea.opacity = 0.0
            }

        }

    }

}

To copy to clipboard, switch view to plain text mode 

button doesn't work, so I tried adjusting it with this:

import QtQuick 2.3
import QtQuick.Window 2.2
import QtMultimedia 5.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4
 
Window {
    id: mainArea
    visible: true
    minimumWidth: 1200
    minimumHeight: 720
    color: "white"
 
    Rectangle {
        id: controlArea
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 0
        width: 400
        height: 50
        opacity: 0.40
        color: "lightgray"
        radius: 10
 
 
        RowLayout {
            anchors.centerIn: parent
            ToolButton {
                text: "test"
            }
            z: 99
            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                onClicked: {
                    console.log("right button was clicked");
                }
            }
        }
        MouseArea {
            z: 100
            anchors.fill: parent
            hoverEnabled:true
            onEntered: {
                console.log("ENTERED toolbar mousearea");
                controlArea.opacity = 0.40
            }
            onExited: {
                console.log("EXITED toolbar mousearea");
                controlArea.opacity = 0.0
            }
 
        }
 
    }
 
}

import QtQuick 2.3
import QtQuick.Window 2.2
import QtMultimedia 5.0
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
import QtQuick.Dialogs 1.2
import QtQuick.Extras 1.4

Window {
    id: mainArea
    visible: true
    minimumWidth: 1200
    minimumHeight: 720
    color: "white"

    Rectangle {
        id: controlArea
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottomMargin: 0
        width: 400
        height: 50
        opacity: 0.40
        color: "lightgray"
        radius: 10


        RowLayout {
            anchors.centerIn: parent
            ToolButton {
                text: "test"
            }
            z: 99
            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                onClicked: {
                    console.log("right button was clicked");
                }
            }
        }
        MouseArea {
            z: 100
            anchors.fill: parent
            hoverEnabled:true
            onEntered: {
                console.log("ENTERED toolbar mousearea");
                controlArea.opacity = 0.40
            }
            onExited: {
                console.log("EXITED toolbar mousearea");
                controlArea.opacity = 0.0
            }

        }

    }

}

To copy to clipboard, switch view to plain text mode 

now button works but I'm not sure this is correct way of doing what I wanted, and this "controlArea.opacity" is not supported by Qt Quick designer.

[anda_skoa]

button doesn't work, so I tried adjusting it with this:

Two suggestions:
- put the mouse area "under" the RowLayout, e.g. by making it the first child of controlArea
- bind the opacity to the mouse area's containsMouse property instead of signal handling

Cheers,
_

[vuletic]

That's all I needed, thanks