shell: Load applet configuration dynamically, and add animation

shell/contents/configuration/AppletConfiguration.qml

@@ -21,7 +21,10 @@ Rectangle {
 //BEGIN properties
     
     property bool isContainment: false
-    property alias appComponent: app
+    property alias app: appLoader.item
+    property bool loadApp: true
+    
+    signal appLoaded()
     
 //END properties
 
@@ -119,16 +122,6 @@ Rectangle {
             }
         }
     }
-
-    Component.onCompleted: {
-        // if we are a containment then the first item will be ConfigurationContainmentAppearance
-        // if the applet does not have own configs then the first item will be Shortcuts
-        if (isContainment || !configDialog.configModel || configDialog.configModel.count === 0) {
-            open(root.globalConfigModel.get(0))
-        } else {
-            open(configDialog.configModel.get(0))
-        }
-    }
     
 //END connections
 
@@ -138,82 +131,108 @@ Rectangle {
         id: configurationKcmPageComponent
         ConfigurationKcmPage {}
     }
-
+    
-    Component {
+    Loader {
-        id: configCategoryDelegate
+        id: appLoader
-        Kirigami.NavigationTabButton {
+        anchors.fill: parent
-            icon.name: model.icon
+        asynchronous: true
-            text: model.name
+        active: root.loadApp
-//             recolorIcon: false
+        onLoaded: {
-            QQC2.ButtonGroup.group: footerBar.tabGroup
+            // if we are a containment then the first item will be ConfigurationContainmentAppearance
+            // if the applet does not have own configs then the first item will be Shortcuts
+            if (isContainment || !configDialog.configModel || configDialog.configModel.count === 0) {
+                root.open(root.globalConfigModel.get(0))
+            } else {
+                root.open(configDialog.configModel.get(0))
+            }
             
-            onClicked: {
+            root.appLoaded();
-                if (checked) {
+        }
-                    root.open(model);
+        
+        sourceComponent: Kirigami.ApplicationItem {
+            id: app
+            
+            // animation on show
+            opacity: 0
+            NumberAnimation on opacity {
+                to: 1
+                running: true
+                duration: Kirigami.Units.longDuration
+                easing.type: Easing.InOutQuad
+            }
+            
+            pageStack.globalToolBar.canContainHandles: true
+            pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
+            pageStack.globalToolBar.showNavigationButtons: Kirigami.ApplicationHeaderStyle.ShowBackButton;
+            
+            property var currentConfigPage: null
+            property bool isAboutPage: false
+            
+            // pop pages when not in use
+            Connections {
+                target: app.pageStack
+                function onCurrentIndexChanged() {
+                    // wait for animation to finish before popping pages
+                    timer.restart();
                 }
             }
             
-            checked: {
+            Timer {
-                if (app.pageStack.currentItem) {
+                id: timer
-                    if (model.kcm && app.pageStack.currentItem.kcm) {
+                interval: 300
-                        return model.kcm == app.pageStack.currentItem.kcm;
+                onTriggered: {
-                    } else if (app.pageStack.currentItem.configItem) {
+                    let currentIndex = app.pageStack.currentIndex;
-                        return model.source == app.pageStack.currentItem.configItem.source;
+                    while (app.pageStack.depth > (currentIndex + 1) && currentIndex >= 0) {
-                    } else {
+                        app.pageStack.pop();
-                        return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source);
                     }
                 }
-                return false;
             }
-        }
+
-    }
+            footer: Kirigami.NavigationTabBar {
-    
+                id: footerBar
-    Kirigami.ApplicationItem {
+                visible: count > 1
-        id: app
+                height: visible ? implicitHeight : 0
-        anchors.fill: parent
+                Repeater {
-        
+                    model: root.isContainment ? globalConfigModel : undefined
-        pageStack.globalToolBar.canContainHandles: true
+                    delegate: configCategoryDelegate
-        pageStack.globalToolBar.style: Kirigami.ApplicationHeaderStyle.ToolBar
+                }
-        pageStack.globalToolBar.showNavigationButtons: Kirigami.ApplicationHeaderStyle.ShowBackButton;
+                Repeater {
-        
+                    model: configDialogFilterModel
-        property var currentConfigPage: null
+                    delegate: configCategoryDelegate
-        property bool isAboutPage: false
+                }
-        
+                Repeater {
-        // pop pages when not in use
+                    model: !root.isContainment ? globalConfigModel : undefined
-        Connections {
+                    delegate: configCategoryDelegate
-            target: app.pageStack
-            function onCurrentIndexChanged() {
-                // wait for animation to finish before popping pages
-                timer.restart();
-            }
-        }
-        
-        Timer {
-            id: timer
-            interval: 300
-            onTriggered: {
-                let currentIndex = app.pageStack.currentIndex;
-                while (app.pageStack.depth > (currentIndex + 1) && currentIndex >= 0) {
-                    app.pageStack.pop();
                 }
             }
-        }
+            
-
+            Component {
-        footer: Kirigami.NavigationTabBar {
+                id: configCategoryDelegate
-            id: footerBar
+                Kirigami.NavigationTabButton {
-            visible: count > 1
+                    icon.name: model.icon
-            height: visible ? implicitHeight : 0
+                    text: model.name
-            Repeater {
+        //             recolorIcon: false
-                model: root.isContainment ? globalConfigModel : undefined
+                    QQC2.ButtonGroup.group: footerBar.tabGroup
-                delegate: configCategoryDelegate
+                    
-            }
+                    onClicked: {
-            Repeater {
+                        if (checked) {
-                model: configDialogFilterModel
+                            root.open(model);
-                delegate: configCategoryDelegate
+                        }
-            }
+                    }
-            Repeater {
+                    
-                model: !root.isContainment ? globalConfigModel : undefined
+                    checked: {
-                delegate: configCategoryDelegate
+                        if (app.pageStack.currentItem) {
+                            if (model.kcm && app.pageStack.currentItem.kcm) {
+                                return model.kcm == app.pageStack.currentItem.kcm;
+                            } else if (app.pageStack.currentItem.configItem) {
+                                return model.source == app.pageStack.currentItem.configItem.source;
+                            } else {
+                                return app.pageStack.currentItem.source == Qt.resolvedUrl(model.source);
+                            }
+                        }
+                        return false;
+                    }
+                }
             }
         }
     }

shell/contents/configuration/ContainmentConfiguration.qml

@@ -14,13 +14,15 @@ import org.kde.plasma.configuration 2.0
 AppletConfiguration {
     id: root
     isContainment: true
-
+    loadApp: false
-    appComponent.visible: false
-    appComponent.width: root.width < root.height ? root.width : Math.min(root.width, Math.max(appComponent.implicitWidth, PlasmaCore.Units.gridUnit * 45))
-    appComponent.height: Math.min(root.height, Math.max(appComponent.implicitHeight, PlasmaCore.Units.gridUnit * 29))
 
     readonly property bool horizontal: root.width > root.height
 
+    onAppLoaded: {
+        app.width = root.width < root.height ? root.width : Math.min(root.width, Math.max(app.implicitWidth, PlasmaCore.Units.gridUnit * 45));
+        app.height = Math.min(root.height, Math.max(app.implicitHeight, PlasmaCore.Units.gridUnit * 29));
+    }
+    
 //BEGIN model
     globalConfigModel: globalContainmentConfigModel
 
@@ -108,7 +110,7 @@ AppletConfiguration {
                     icon.height: PlasmaCore.Units.iconSizes.medium
                     text: i18n("Configure")
                     onClicked: {
-                        appComponent.visible = true;
+                        root.loadApp = true;
                     }
                 }
             }