use plasmoid popups from plasma-minishell

simplify the sliding behavior of the top panel, simpler code, less bugs

containments/panel/package/contents/ui/main.qml

@@ -57,17 +57,14 @@ PlasmaCore.ColorScope {
         applet.visible = true;
         container.visible = true;
         if (applet.pluginName == "org.kde.phone.notifications") {
+            //FIXME: make a way to instantiate fullRepresentationItem without the open/close dance
             applet.expanded = true
+            applet.expanded = false
             applet.fullRepresentationItem.parent = notificationsParent;
             notificationsParent.applet = applet;
             applet.fullRepresentationItem.anchors.fill = notificationsParent;
         } else {
-            applet.expanded = true
+            quickSettings.addPlasmoid(applet);
-            applet.expanded = false
-            quickSettings.addPlasmoid(applet, fullRepsLayout.count);
-            applet.fullRepresentationItem.parent = fullRepsLayout;
-            fullRepsLayout.currentIndex = 0
-            applet.fullRepresentationItem.anchors.fill = fullRepsLayout;
         }
     }
 
@@ -223,17 +220,11 @@ PlasmaCore.ColorScope {
                 color: PlasmaCore.ColorScope.backgroundColor
                 z: 2
                 width: parent.width
-                x: -modeFlick.contentX
                 y: Math.min(0, slidingPanel.offset - height - root.height)
                 height: quickSettings.Layout.minimumHeight
                 QuickSettings {
                     id: quickSettings
                     anchors.fill: parent
-                    onPlasmoidTriggered: {
-                        applet.expanded = true;
-                        fullRepsLayout.currentIndex = id;
-                        slidingPanel.expanded = true;
-                    }
                 }
                 Rectangle {
                     anchors {
@@ -247,65 +238,17 @@ PlasmaCore.ColorScope {
                     visible: slidingPanel.offset + slidingPanel.headerHeight < panelContents.height
                 }
             }
-            PropertyAnimation {
+            Item {
-                id: modeSwitchAnim
+                id: notificationsParent
-                target: modeFlick
+                anchors {
-                duration: units.longDuration
+                    left: parent.left
-                easing.type: Easing.InOutQuad
+                    bottom: parent.bottom
-                properties: "contentX"
+                    right: parent.right
-                from: modeFlick.contentX
+                    bottomMargin: root.height
-                to: 0
-            }
-            Flickable {
-                id: modeFlick
-                anchors.fill: parent
-                contentWidth: width * 2
-                contentHeight: height
-                boundsBehavior: Flickable.StopAtBounds
-                interactive: slidingPanel.expanded
-                onFlickEnded: movementEnded()
-                onMovementEnded: {
-                    slidingPanel.expanded = (contentX > panelContents.width/2);
-                    modeSwitchAnim.running = false;
-                    modeSwitchAnim.to = slidingPanel.expanded ? width : 0
-                    modeSwitchAnim.running = true;
-                }
-                Item {
-                    width: modeFlick.width
-                    height: modeFlick.height
-                    Item {
-                        id: notificationsParent
-                        anchors {
-                            left: parent.left
-                            bottom: parent.bottom
-                            right: parent.right
-                            bottomMargin: root.height
-                        }
-                        property var applet
-                        height: applet ? applet.fullRepresentationItem.Layout.maximumHeight : 0
-                        property int minimumHeight: applet ? applet.fullRepresentationItem.Layout.minimumHeight : 0
-                    }
-                    StackLayout {
-                        id: fullRepsLayout
-                        anchors {
-                            left: notificationsParent.right
-                            bottom: parent.bottom
-                        }
-                        width: panelContents.width
-                        height: panelContents.height
-                    }
-                    PlasmaComponents.ToolButton {
-                        anchors {
-                            left: fullRepsLayout.left
-                            right: fullRepsLayout.right
-                            bottom: parent.bottom
-                            bottomMargin: root.height
-                        }
-                        text: i18n("Back")
-                        iconName: "go-previous"
-                        onClicked: slidingPanel.expanded = false;
-                    }
                 }
+                property var applet
+                height: applet ? applet.fullRepresentationItem.Layout.maximumHeight : 0
+                property int minimumHeight: applet ? applet.fullRepresentationItem.Layout.minimumHeight : 0
             }
         }
     }

containments/panel/package/contents/ui/quicksettings/Delegate.qml

@@ -45,8 +45,8 @@ RowLayout {
                 id: iconMouseArea
                 anchors.fill: parent
                 onClicked: {
-                    if (model.plasmoidId > -1) {
+                    if (model.applet) {
-                        root.plasmoidTriggered(model.applet, model.plasmoidId);
+                        model.applet.expanded = !model.applet.expanded;
                     } else if (delegateRoot.toggle) {
                         delegateRoot.toggle();
                     } else if (model.toggleFunction) {
@@ -74,8 +74,8 @@ RowLayout {
                 id: labelMouseArea
                 anchors.fill: parent
                 onClicked: {
-                    if (model.plasmoidId > -1) {
+                    if (model.applet) {
-                        root.plasmoidTriggered(model.applet, model.plasmoidId);
+                        model.applet.expanded = !model.applet.expanded;
                     } else if (model.settingsCommand) {
                         plasmoid.nativeInterface.executeCommand(model.settingsCommand);
                     } else if (model.toggleFunction) {

containments/panel/package/contents/ui/quicksettings/QuickSettings.qml

@@ -33,10 +33,9 @@ Item {
         plasmoid.nativeInterface.toggleTorch()
     }
 
-    function addPlasmoid(applet, id) {
+    function addPlasmoid(applet) {
         settingsModel.append({"icon": applet.icon,
                               "text": applet.title,
-                              "plasmoidId": id,
                               "enabled": false,
                               "applet": applet,
                               "settingsCommand": "",
@@ -89,7 +88,6 @@ Item {
             "settingsCommand": "plasma-settings",
             "toggleFunction": "",
             "delegate": "",
-            "plasmoidId": -1,
             "enabled": false,
             "applet": null
         });
@@ -100,7 +98,6 @@ Item {
             "enabled": false,
             "settingsCommand": "",
             "toggleFunction": "toggleTorch",
-            "plasmoidId": -1,
             "applet": null
         });
         settingsModel.append({
@@ -108,7 +105,6 @@ Item {
             "icon": "find-location-symbolic",
             "enabled": false,
             "settingsCommand": "",
-            "plasmoidId": -1,
             "applet": null
         });
         brightnessSlider.valueChanged.connect(function() {
@@ -131,7 +127,8 @@ Item {
         Repeater {
             model: settingsModel
             delegate: Loader {
-                width: item ? item.implicitWidth : 0
+                //FIXME: why this is needed?
+                width: flow.width / 2 - units.largeSpacing / 2//item ? item.implicitWidth : 0
                 height: item ? item.implicitHeight : 0
                 source: Qt.resolvedUrl((model.delegate ? model.delegate : "Delegate") + ".qml")
             }

shell/contents/applet/CompactApplet.qml

@@ -23,6 +23,8 @@ import org.kde.plasma.core 2.0 as PlasmaCore
 import org.kde.plasma.components 2.0 as PlasmaComponents
 import org.kde.kquickcontrolsaddons 2.0
 
+import org.kde.plasma.private.minishell 2.0 as MiniShell
+
 Item {
     id: root
     objectName: "org.kde.desktop-CompactApplet"
@@ -32,6 +34,13 @@ Item {
     property Item compactRepresentation
     property Item expandedFeedback: expandedItem
 
+    property Item rootItem: {
+        var item = root
+        while (item.parent) {
+            item = item.parent;
+        }
+        return item;
+    }
     onCompactRepresentationChanged: {
         if (compactRepresentation) {
             compactRepresentation.parent = root;
@@ -64,26 +73,37 @@ Item {
         visible: plasmoid.formFactor != PlasmaCore.Types.Planar && plasmoid.expanded
     }
 
-    PlasmaCore.FrameSvgItem {
+    Connections {
-        id: appletParent
+        target: plasmoid
-        imagePath: "widgets/background"
+        onExpandedChanged: {
-        //used only indesktop mode, not panel
+            if (plasmoid.expanded) {
-        visible: plasmoid.expanded && plasmoid.formFactor == PlasmaCore.Types.Planar
+                expandedOverlay.showFullScreen()
-        z: 99
+            } else {
-        anchors.top: parent.top
+                expandedOverlay.visible = false;
-        width: parent.width
-        height: units.gridUnit * 20 - units.iconSizes.medium
-
-        MouseArea {
-            visible: plasmoid.expanded
-            anchors {
-                fill: parent
-                topMargin: -appletParent.height
-                bottomMargin: -appletParent.height
             }
-            z: -1
-            onClicked: plasmoid.expanded = false;
         }
     }
 
+    MiniShell.FullScreenPanel {
+        id: expandedOverlay
+        color: Qt.rgba(0, 0, 0, 0.5)
+        visible: plasmoid.expanded
+        width: Screen.width
+        height: Screen.height
+        MouseArea {
+            anchors.fill: parent
+            onClicked: plasmoid.expanded = false
+        }
+
+        PlasmaCore.FrameSvgItem {
+            id: appletParent
+            imagePath: "widgets/background"
+            //used only indesktop mode, not panel
+
+            x: Math.min(parent.width - width - units.largeSpacing, Math.max(units.largeSpacing, root.mapToItem(root.rootItem, 0, 0).x + root.width / 2 - width / 2))
+            y: Math.min(parent.height - height - units.largeSpacing, Math.max(units.largeSpacing, root.mapToItem(root.rootItem, 0, 0).y + root.height / 2 - height / 2))
+            width: Math.max(Math.max(root.fullRepresentation.implicitWidth, units.gridUnit * 15), plasmoid.switchWidth) * 1.5
+            height: Math.max(Math.max(root.fullRepresentation.implicitHeight, units.gridUnit * 15), plasmoid.switchHeight) * 1.5
+        }
+    }
 }