move to the right plasmoid when asked

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

@@ -33,6 +33,7 @@ NanoShell.FullScreenOverlay {
     readonly property bool wideScreen: width > units.gridUnit * 45
     readonly property int drawerWidth: wideScreen ? units.gridUnit * 25 : width
     property int drawerX: 0
+    property Item footer
 
     color: "transparent"//Qt.rgba(0, 0, 0, 0.6 * Math.min(1, offset/contentArea.height))
     property alias contentItem: contentArea.contentItem
@@ -61,6 +62,10 @@ NanoShell.FullScreenOverlay {
         interval: 0
         onTriggered: updateState()
     }
+    onFooterChanged: {
+        footer.parent = mainScope
+        footer.anchors.bottom = mainScope.bottom
+    }
     onActiveChanged: {
         if (!active) {
             close();
@@ -142,6 +147,7 @@ NanoShell.FullScreenOverlay {
         }
     }
     PlasmaCore.ColorScope {
+        id: mainScope
         anchors.fill: parent
 
         Flickable {

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

@@ -25,7 +25,7 @@ Item {
     width: parent.height
     height: width
     //hide application status icons
-    opacity: (Category != "ApplicationStatus" && (main.state == "active" || Status != "Passive")) ? 1 : 0
+    opacity: (Category != "ApplicationStatus" && Status != "Passive") ? 1 : 0
     onOpacityChanged: visible = opacity
 
     Behavior on opacity {

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

@@ -18,10 +18,11 @@
 
 import QtQuick 2.1
 import QtQuick.Layouts 1.3
+import QtQml.Models 2.12
 
 import org.kde.plasma.plasmoid 2.0
 import org.kde.plasma.core 2.0 as PlasmaCore
-import org.kde.plasma.components 2.0 as PlasmaComponents
+import org.kde.plasma.components 3.0 as PlasmaComponents
 
 import org.kde.plasma.workspace.components 2.0 as PlasmaWorkspace
 import org.kde.taskmanager 0.1 as TaskManager
@@ -66,8 +67,7 @@ PlasmaCore.ColorScope {
         applet.expanded = true
         applet.expanded = false
 
-        var fullContainer = fullContainerComponent.createObject(fullRepresentationsLayout);
+        var fullContainer = fullContainerComponent.createObject(fullRepresentationView.contentItem);
-        fullContainer.parent = fullRepresentationsLayout;
         applet.fullRepresentationItem.parent = fullContainer;
         fullContainer.applet = applet;
         applet.fullRepresentationItem.anchors.fill = fullContainer;
@@ -118,17 +118,40 @@ PlasmaCore.ColorScope {
             Layout.maximumWidth: Layout.minimumWidth
         }
     }
+
     Component {
         id: fullContainerComponent
         Item {
+            id: fullContainer
             property Item applet
             visible: applet && (applet.status != PlasmaCore.Types.HiddenStatus && applet.status != PlasmaCore.Types.PassiveStatus)
-            Layout.fillHeight: true
+            height: parent.height
-            Layout.minimumWidth: fullRepresentationsView.width
+            width: visible ? fullRepresentationView.width : 0
             Layout.minimumHeight: applet && applet.switchHeight
             onVisibleChanged: {
                 if (visible) {
-                    fullRepresentationsView.setCurrentItem(this);
+                    for (var i = 0; i < fullRepresentationModel.count; ++i) {
+                        if (fullRepresentationModel.get(i) === this) {
+                            return;
+                        }
+                    }
+                    fullRepresentationModel.append(this);
+                    fullRepresentationView.forceLayout();
+
+                    fullRepresentationView.currentIndex = ObjectModel.index;
+                    fullRepresentationView.positionViewAtIndex(ObjectModel.index, ListView.SnapPosition)
+                } else if (ObjectModel.index >= 0) {
+                    fullRepresentationModel.remove(ObjectModel.index);
+                    fullRepresentationView.forceLayout();
+                }
+            }
+            Connections {
+                target: fullContainer.applet
+                onActivated: {
+                    if (!visible) {
+                        return;
+                    }
+                    fullRepresentationView.currentIndex = ObjectModel.index;
                 }
             }
         }
@@ -260,6 +283,7 @@ PlasmaCore.ColorScope {
             }
 
             DrawerBackground {
+                id: fullRepresentationDrawer
                 anchors {
                     left: parent.left
                     right: parent.right
@@ -267,38 +291,61 @@ PlasmaCore.ColorScope {
                 y: quickSettingsParent.height - height * (1-opacity)
                 opacity: slidingPanel.offset/panelContents.height
                 height: Math.min(plasmoid.screenGeometry.height - quickSettingsParent.y - quickSettingsParent.height, implicitHeight)
-                contentItem: Flickable {
+                contentItem: ListView {
-                    id: fullRepresentationsView
+                    id: fullRepresentationView
 
-                    property Item currentItem
+                    implicitHeight: 300
-                    onCurrentItemChanged: {
+                    cacheBuffer: width * 100
-                        if (currentItem) {
+                    highlightFollowsCurrentItem: true
-                            contentX = currentItem.x
+                    highlightRangeMode: ListView.StrictlyEnforceRange
-                        } else {
+                    highlightMoveDuration: units.longDuration
-                            currentItem = children[0];
+                    snapMode: ListView.SnapOneItem
-                        }
+                    model: ObjectModel {
+                        id: fullRepresentationModel
                     }
+                    orientation: ListView.Horizontal
 
-                    function setCurrentItem(item) {
+
-                        currentItem = item;
+                    //implicitHeight: fullRepresentationLayout.implicitHeight
-                        currentItemChanged();
-                    }
-                    onMovementEnded: setCurrentItem(fullRepresentationsLayout.childAt(contentX + width/2, 1))
-                    contentWidth: fullRepresentationsLayout.width
-                    contentHeight: height
-                    implicitHeight: fullRepresentationsLayout.implicitHeight
                     clip: true
-                    Behavior on contentX {
+
-                        NumberAnimation {
-                            duration: units.longDuration
-                            easing: easing.InOutQuad
                 }
             }
             
-                    RowLayout {
-                        id: fullRepresentationsLayout
-                        spacing: 0
         }
+        footer: DrawerBackground {
+            id: bottomBar
+            anchors {
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
+            opacity: fullRepresentationDrawer.opacity
+            visible: fullRepresentationModel.count > 1
+            //height: 40
+            z: 100
+            contentItem: RowLayout {
+                PlasmaComponents.TabBar {
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    position: PlasmaComponents.TabBar.Footer
+                    
+                    Repeater {
+                        model: fullRepresentationView.count
+                        delegate: PlasmaComponents.TabButton {
+                            implicitHeight: parent.height
+                            text: fullRepresentationModel.get(index).applet.title
+                            checked: fullRepresentationView.currentIndex === index
+                        
+                            onClicked: fullRepresentationView.currentIndex = index
+                        }
+                    }
+                }
+                PlasmaComponents.ToolButton {
+                    Layout.fillHeight: true
+                    Layout.preferredWidth: height
+                    icon.name: "paint-none"
+                    onClicked: slidingPanel.close();
                 }
             }
         }