where to apply MouseArea

[mzimmers]

Hi all -

I'm trying to implement a seemingly simple Popup that will look like this:

The outline of the component is as follows:

Popup {
    id: popup
    background: Pane {
        Rectangle {}
        Rectangle {}
        Rectangle {}
        Rectangle {}
    }
    contentItem: Pane {
        ColumnLayout {
            RowLayout {
                Image {}
                Label {}
            }
            RowLayout {
                Image {}
                Label {}
            }
        }
    }
}

I need to set a MouseArea on this, but can't figure out where/how to do it. Any suggestions?

Thanks...

[mzimmers]

I don't know if this is the best solution, but it works for me (outline only):

Popup {
    ColumnLayout {
        Rectangle {
            RowLayout {}
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("clicked")
            }
        }
    }
}

[Marko Stanke]

The example you posted looks like a lot like a Menu ( Which is a subclass of Popup ). So I would recommend to check out the implementation of Menu.qml inside Qt.

But to answer your question: You would need to define a parent Item. Something like this:

contentItem: Pane {
            Item {
                height: 50
                width: 100
                RowLayout {
                    anchors.fill: parent
                    Image {}
                    Label {}
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onClicked: {}
                 }
            }
        }
    }

[mzimmers]

@Marko-Stanke I tried that:

Popup {
    id: popup
    implicitHeight: 96
    implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                            implicitContentWidth + leftPadding + rightPadding)
    padding: 0

    contentItem: Pane {
        verticalPadding: 0
        anchors.fill: parent
        anchors.centerIn: parent
        implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
                                implicitContentWidth + leftPadding + rightPadding)
        Item {
            anchors.fill: parent
            width: popup.width
            ColumnLayout {
                anchors.fill: parent
                spacing: 0
                RowLayout {
                    Image {}
                    MultiEffect {}
                    Label {}
                }

                RowLayout {
                    Image {}
                    MultiEffect {}
                    Label {}
                }
            }
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("clicked")
            }
        }
    }
}

But the addition of the MouseArea shrinks my background for some reason:

(I put the black outline in around the background to make it easier to see what's happening.)
I don't know why it would be doing this...

[mzimmers]

I don't know if this is the best solution, but it works for me (outline only):

Popup {
    ColumnLayout {
        Rectangle {
            RowLayout {}
            MouseArea {
                anchors.fill: parent
                onClicked: console.log("clicked")
            }
        }
    }
}