[Solved] Question regarding making a custom Pop Up window

mozeni

Hello,

As the title points out, I'm trying to make a pop up window such that originally the mousearea is a small square rectangle object and when it is clicked upon, the rectangle object will resize to fit a list of 'settings'.
This is what I have so far:
@//HomeScreen.qml
import QtQuick 2.0

Rectangle {
id: settingsButton
height: parent.height0.05; width: parent.height0.05
x: parent.height0.01; y: bar.height1.2
radius: 10
gradient: Gradient {
GradientStop {position: 0.5; color: "black"}
GradientStop {position: 1.0; color: "gray" }
}
Image {
id: svg
x: bgImage.width0.0001; y: bgImage.height0.001
width: bar.height1.7; height: bar.height1.7
source: "../../layout/buttons/settings.svg"
}
MouseArea {
anchors.fill: parent
onClicked: {
settingsButton.width = bar.width0.2
settingsButton.height = bar.width0.2
}
}
}@

I have also created a seperate QML file for the menu list:

@//SettingsMenu.qml
import QtQuick 2.0

Column {
anchors.centerIn: parent
spacing: 2
Rectangle {
Text {
text: "Reset";font.pointSize:10; anchors.centerIn: parent;
MouseArea {anchors.fill: parent; onClicked: console.log("Resetting")}
}
}
Rectangle {
Text { text: "Hi";font.pointSize:10; anchors.centerIn: parent }
}
}
@

The problem I'm having is how to make the MouseArea within my Rectangle in HomeScreen.qml create the QML file SettingsMenu.qml and resize the Rectangle to fit the contents of SettingsMenu.qml

shav

[quote author="mozeni" date="1394910894"]
The problem I'm having is how to make the MouseArea within my Rectangle in HomeScreen.qml create the QML file SettingsMenu.qml and resize the Rectangle to fit the contents of SettingsMenu.qml
[/quote]

Hi,

As I understand you want to load SettingsMenu.qml in HomeScreen.qml and resize it, right? If so, you can use "Loader":http://qt-project.org/doc/qt-5/qml-qtquick-loader.html to do this.

In you case MouseArea in HomeScreen.qml can looks like:
@
import QtQuick 2.0

Rectangle {
id: settingsButton
height: parent.height0.05; width: parent.height0.05
x: parent.height0.01; y: bar.height1.2
radius: 10
gradient: Gradient {
GradientStop {position: 0.5; color: "black"}
GradientStop {position: 1.0; color: "gray" }
}
Image {
id: svg
x: bgImage.width0.0001; y: bgImage.height0.001
width: bar.height1.7; height: bar.height1.7
source: "../../layout/buttons/settings.svg"
}
MouseArea {
anchors.fill: parent
onClicked: {
settingsButton.width = bar.width0.2
settingsButton.height = bar.width0.2
loadSettings.setSource("SettingsMenu.qml");
}
}

    Loader {
            id: loadSettings
            anchors.fill: parent
    }
}

@

The loader create and load SettingsMenu.qml as part of HomeScreen.qml.

mozeni

Not exactly but, I have figured it out xD

Thanks for trying to help out :)