Dynamically create components instead of just hiding them

3 files changed, 20 insertions, 22 deletions

diff --git a/components/mail/contents/ui/main.qml b/components/mail/contents/ui/main.qml
index d864f2fc..83bd85b2 100644
--- a/components/mail/contents/ui/main.qml
+++ b/components/mail/contents/ui/main.qml
@@ -74,7 +74,14 @@ ApplicationWindow {
                 height: parent.height
                 text: "Settings"
                 onClicked: {
-                    settings.visible = true
+                    settingsComponent.createObject(app)
+                }
+                Component {
+                    id: settingsComponent
+                    KubeComponents.Settings {
+                        id: settings
+                        anchors.fill: parent
+                    }
                 }
             }
 
@@ -83,7 +90,7 @@ ApplicationWindow {
                 iconName: "mail-message-new"
                 text: "Compose"
                 onClicked: {
-                    composer.visible = true
+                    composerComponent.createObject(app)
                 }
             }
 
@@ -92,8 +99,15 @@ ApplicationWindow {
                 iconName: "mail-message-reply"
                 text: "Reply"
                 onClicked: {
+                    composerComponent.createObject(app)
                     composer.originalMessage = mailListView.currentMail
-                    composer.visible = true
+                }
+            }
+            Component {
+                id: composerComponent
+                KubeComponents.FocusComposer {
+                    id: composer
+                    anchors.fill: parent
                 }
             }
 
@@ -177,16 +191,5 @@ ApplicationWindow {
 
     }
 
-    KubeComponents.Settings {
-        id: settings
-
-        anchors.fill: parent
-    }
-
-    KubeComponents.FocusComposer {
-        id: composer
-
-        anchors.fill: parent
-    }
 }
 
diff --git a/components/package/contents/ui/FocusComposer.qml b/components/package/contents/ui/FocusComposer.qml
index ab04dbed..1cd3cb32 100644
--- a/components/package/contents/ui/FocusComposer.qml
+++ b/components/package/contents/ui/FocusComposer.qml
@@ -25,8 +25,6 @@ Rectangle {
     id: root
     property variant originalMessage
 
-    visible: false
-
     color: ColorPalette.border
 
     opacity: 0.9
@@ -35,7 +33,7 @@ Rectangle {
         anchors.fill: parent
 
         onClicked: {
-            root.visible = false
+            root.destroy()
         }
     }
 
@@ -74,7 +72,7 @@ Rectangle {
 
                     onClicked: {
                         composer.send()
-                        root.visible = false
+                        root.destroy()
                     }
                 }
             }
diff --git a/components/package/contents/ui/Settings.qml b/components/package/contents/ui/Settings.qml
index acdc42d7..e0d993ad 100644
--- a/components/package/contents/ui/Settings.qml
+++ b/components/package/contents/ui/Settings.qml
@@ -29,17 +29,14 @@ import org.kube.framework.theme 1.0
 Rectangle {
     id: root
 
-    visible: false
-
     color: ColorPalette.border
 
     opacity: 0.9
 
     MouseArea {
         anchors.fill: parent
-
         onClicked: {
-            root.visible = false
+            root.destroy()
         }
     }