Major refactor and smoothen alignment

containments/taskpanel/package/contents/ui/NavigationPanel.qml

@@ -0,0 +1,249 @@
+/*
+ *  SPDX-FileCopyrightText: 2015 Marco Martin <mart@kde.org>
+ *  SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
+ *
+ *  SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.4
+import QtQuick.Layouts 1.1
+import QtQuick.Window 2.2
+import QtGraphicalEffects 1.12
+
+import org.kde.taskmanager 0.1 as TaskManager
+import org.kde.plasma.plasmoid 2.0
+import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.kquickcontrolsaddons 2.0
+
+import org.kde.plasma.private.nanoshell 2.0 as NanoShell
+import org.kde.plasma.private.mobileshell 1.0 as MobileShell
+import org.kde.plasma.phone.taskpanel 1.0 as TaskPanel
+
+Item {
+    id: root
+    
+    property color backgroundColor
+    property var foregroundColorGroup
+    
+    property bool dragGestureEnabled: false
+    property var taskSwitcher
+    
+    property NavigationPanelAction leftAction
+    property NavigationPanelAction middleAction
+    property NavigationPanelAction rightAction
+    
+    DropShadow {
+        anchors.fill: mouseArea
+        visible: !showingApp
+        cached: true
+        horizontalOffset: 0
+        verticalOffset: 1
+        radius: 4.0
+        samples: 17
+        color: Qt.rgba(0,0,0,0.8)
+        source: icons
+    }
+    
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        drag.filterChildren: true
+        
+        // drag gesture
+        property int oldMouseY: 0
+        property int startMouseY: 0
+        property int oldMouseX: 0
+        property int startMouseX: 0
+        property bool opening: false
+        
+        property NavigationPanelButton activeButton
+
+        onPressed: {
+            startMouseX = oldMouseX = mouse.y;
+            startMouseY = oldMouseY = mouse.y;
+            activeButton = icons.childAt(mouse.x, mouse.y);
+        }
+        
+        onPositionChanged: {
+            let newButton = icons.childAt(mouse.x, mouse.y);
+            if (newButton != activeButton) {
+                activeButton = null;
+            }
+            
+            if (root.dragGestureEnabled) {
+                if (!taskSwitcher.currentlyDragging && Math.abs(startMouseY - oldMouseY) < root.height) {
+                    oldMouseY = mouse.y;
+                    return;
+                } else if (mouseArea.pressed) {
+                    taskSwitcher.currentlyDragging = true;
+                }
+
+                // update offsets with drags
+                root.taskSwitcher.oldYOffset = root.taskSwitcher.yOffset;
+                root.taskSwitcher.yOffset = Math.max(0, root.taskSwitcher.yOffset - (mouse.y - oldMouseY));
+                
+                opening = oldMouseY > mouse.y;
+
+                if (root.taskSwitcher.visibility == Window.Hidden && Math.abs(startMouseY - mouse.y) > PlasmaCore.Units.gridUnit && root.taskSwitcher.tasksCount) {
+                    // start task switcher gesture
+                    activeButton = null;
+                    root.taskSwitcher.show(false);
+                } else if (taskSwitcher.tasksCount === 0) { // no tasks, let's scroll up the homescreen instead
+                    MobileShell.HomeScreenControls.requestRelativeScroll(Qt.point(mouse.x - oldMouseX, mouse.y - oldMouseY));
+                }
+                
+                oldMouseY = mouse.y;
+                oldMouseX = mouse.x;
+            }
+        }
+        
+        onReleased: {
+            if (activeButton) {
+                activeButton.clicked();
+            }
+
+            if (root.dragGestureEnabled && root.taskSwitcher.currentlyDragging) {
+                root.taskSwitcher.currentlyDragging = false;
+                root.taskSwitcher.snapOffset();
+            }
+        }
+        
+        Item {
+            id: icons
+            anchors.fill: parent
+
+            visible: plasmoid.configuration.PanelButtonsVisible
+            property real buttonLength: 0
+
+            // background colour
+            Rectangle {
+                anchors.fill: parent
+                color: root.backgroundColor
+            }
+
+            // button row (anchors provided by state)
+            NavigationPanelButton {
+                id: leftButton
+                mouseArea: mouseArea
+                colorGroup: root.foregroundColorGroup
+                enabled: root.leftAction.enabled
+                iconSizeFactor: root.leftAction.iconSizeFactor
+                iconSource: root.leftAction.iconSource
+                onClicked: {
+                    if (enabled) {
+                        root.leftAction.triggered();
+                    }
+                }
+            }
+
+            NavigationPanelButton {
+                id: middleButton
+                anchors.centerIn: parent
+                mouseArea: mouseArea
+                colorGroup: root.foregroundColorGroup
+                enabled: root.middleAction.enabled
+                iconSizeFactor: root.middleAction.iconSizeFactor
+                iconSource: root.middleAction.iconSource
+                onClicked: {
+                    if (enabled) {
+                        root.middleAction.triggered();
+                    }
+                }
+            }
+
+            NavigationPanelButton {
+                id: rightButton
+                mouseArea: mouseArea
+                colorGroup: root.foregroundColorGroup
+                enabled: root.rightAction.enabled
+                iconSizeFactor: root.rightAction.iconSizeFactor
+                iconSource: root.rightAction.iconSource
+                onClicked: {
+                    if (enabled) {
+                        root.rightAction.triggered();
+                    }
+                }
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "landscape"
+            when: Screen.width > Screen.height
+            PropertyChanges {
+                target: icons
+                buttonLength: icons.height * 0.8 / 3
+            }
+            AnchorChanges {
+                target: leftButton
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    top: parent.top
+                }
+            }
+            PropertyChanges {
+                target: leftButton
+                width: parent.width
+                height: icons.buttonLength
+                anchors.topMargin: parent.height * 0.1
+            }
+            PropertyChanges {
+                target: middleButton
+                width: parent.width
+                height: icons.buttonLength
+            }
+            AnchorChanges {
+                target: rightButton
+                anchors {
+                    horizontalCenter: parent.horizontalCenter
+                    bottom: parent.bottom
+                }
+            }
+            PropertyChanges {
+                target: rightButton
+                height: icons.buttonLength
+                width: icons.width
+                anchors.bottomMargin: parent.height * 0.1
+            }
+        }, State {
+            name: "portrait"
+            when: Screen.width <= Screen.height
+            PropertyChanges {
+                target: icons
+                buttonLength: icons.width * 0.8 / 3
+            }
+            AnchorChanges {
+                target: leftButton
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                }
+            }
+            PropertyChanges {
+                target: leftButton
+                height: parent.height
+                width: icons.buttonLength
+                anchors.leftMargin: parent.width * 0.1
+            }
+            PropertyChanges {
+                target: middleButton
+                height: parent.height
+                width: icons.buttonLength
+            }
+            AnchorChanges {
+                target: rightButton
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                }
+            }
+            PropertyChanges {
+                target: rightButton
+                height: parent.height
+                width: icons.buttonLength
+                anchors.rightMargin: parent.width * 0.1
+            }
+        }
+    ]
+}

containments/taskpanel/package/contents/ui/NavigationPanelAction.qml

@@ -0,0 +1,15 @@
+/*
+ *  SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
+ *
+ *  SPDX-License-Identifier: GPL-2.0-or-later
+ */
+
+import QtQuick 2.15
+
+QtObject {
+    property bool enabled
+    property string iconSource
+    property real iconSizeFactor
+    
+    signal triggered()
+}

containments/taskpanel/package/contents/ui/NavigationPanelButton.qml

@@ -1,5 +1,6 @@
 /*
  *  SPDX-FileCopyrightText: 2015 Marco Martin <mart@kde.org>
+ *  SPDX-FileCopyrightText: 2021 Devin Lin <devin@kde.org>
  *
  *  SPDX-License-Identifier: GPL-2.0-or-later
  */

containments/taskpanel/package/contents/ui/Task.qml

@@ -21,6 +21,7 @@ Item {
 
     readonly property point taskScreenPoint: Qt.point(model.ScreenGeometry.x, model.ScreenGeometry.y)
     readonly property real dragOffset: -control.y
+    readonly property real headerHeight: appHeader.height + PlasmaCore.Units.smallSpacing
     
     property bool active: model.IsActive
     
@@ -93,7 +94,6 @@ Item {
             RowLayout {
                 id: appHeader
                 Layout.fillWidth: true
-                Layout.alignment: Qt.AlignBottom
                 
                 PlasmaCore.IconItem {
                     Layout.preferredHeight: PlasmaCore.Units.iconSizes.smallMedium
@@ -163,7 +163,7 @@ Item {
                     Loader {
                         id: pipeWireLoader
                         anchors.fill: parent
-                        source: /*Qt.resolvedUrl("./TaskIcon.qml");*/ Qt.resolvedUrl("./Thumbnail.qml")
+                        source: Qt.resolvedUrl("./Thumbnail.qml")
                         onStatusChanged: {
                             if (status === Loader.Error) {
                                 source = Qt.resolvedUrl("./TaskIcon.qml");

containments/taskpanel/package/contents/ui/TaskSwitcher.qml

@@ -21,10 +21,10 @@ NanoShell.FullScreenOverlay {
     width: Screen.width
     height: Screen.height
     
-    required property real panelHeight // height of task panel, provided by main.qml
+    required property real taskPanelHeight // height of task panel, provided by main.qml
     
     property int tasksCount: window.model.count
-    property int currentTaskIndex: tasksView.contentX / (tasksView.width + tasksView.spacing)
+    property int currentTaskIndex: tasksView.currentIndexInView // Math.round(tasksView.contentX / (tasksView.width + tasksView.spacing))
     property TaskManager.TasksModel model
     
     // properties controlled from main.qml MouseArea (swipe to open gesture)
@@ -66,8 +66,8 @@ NanoShell.FullScreenOverlay {
         }
     }
     
+    // background
     color: "transparent"
-    
     Rectangle {
         id: backgroundRect
         anchors.fill: parent
@@ -184,23 +184,10 @@ NanoShell.FullScreenOverlay {
         anchors.centerIn: parent
         
         width: window.width - horizontalMargin * 2
-        height: window.height - (MobileShell.TopPanelControls.panelHeight + window.panelHeight + footerButtons.height 
-                + PlasmaCore.Units.gridUnit * 2 + PlasmaCore.Units.largeSpacing * 2)
-        
-        // scale gesture
-        scale: {
-            if (window.wasInActiveTask || !taskSwitcher.currentlyDragging) {
-                let maxScale = 1 / tasksView.scalingFactor;
-                let subtract = (maxScale - 1) * (window.yOffset / window.targetYOffsetDist);
-                let finalScale = Math.max(0, Math.min(maxScale, maxScale - subtract));
-                
-                return finalScale;
-            }
-            return 1;
-        }
+        height: window.height - (MobileShell.TopPanelControls.panelHeight + window.taskPanelHeight + PlasmaCore.Units.gridUnit * 2 + PlasmaCore.Units.largeSpacing * 2)
 
         // ensure that window previews are exactly to the scale of the device screen
-        property real windowHeight: window.height - window.panelHeight - MobileShell.TopPanelControls.panelHeight
+        property real windowHeight: window.height - window.taskPanelHeight - MobileShell.TopPanelControls.panelHeight
         property real scalingFactor: {
             let candidateWidth = tasksView.width;
             let candidateHeight = (tasksView.width / window.width) * windowHeight;
@@ -246,9 +233,37 @@ NanoShell.FullScreenOverlay {
         delegate: Task {
             id: task
             property int curIndex: model.index
+            z: curIndex === tasksView.currentIndexInView ? 1 : 0
             width: tasksView.width
             height: tasksView.height
-            z: curIndex === tasksView.currentIndexInView ? 1 : 0
+            
+            // account for header offset (center the preview)
+            y: task.headerHeight / 2
+            
+            // scale gesture
+            property bool preventOverJump: false
+            scale: {
+                let maxScale = 1 / tasksView.scalingFactor;
+                let subtract = (maxScale - 1) * (window.yOffset / window.targetYOffsetDist);
+                let finalScale = Math.max(0, Math.min(maxScale, maxScale - subtract));
+                
+                // prevent y "jump" when letting go of gesture from homescreen
+                if (window.wasInActiveTask) {
+                    preventOverJump = false;
+                } else {
+                    if (!taskSwitcher.currentlyDragging && finalScale === 1) {
+                        preventOverJump = false;
+                    }
+                    if (window.wasInActiveTask && taskSwitcher.currentlyDragging) {
+                        preventOverJump = true;
+                    }
+                }
+                
+                if ((window.wasInActiveTask || !taskSwitcher.currentlyDragging) && !preventOverJump && window.currentTaskIndex === task.curIndex) {
+                    return finalScale;
+                }
+                return 1;
+            }
             
             // ensure that window previews are exactly to the scale of the device screen
             previewWidth: tasksView.scalingFactor * window.width
@@ -256,41 +271,113 @@ NanoShell.FullScreenOverlay {
         }
     }
     
-    RowLayout {
-        id: footerButtons
+    // top panel swipe down gesture
+    MouseArea {
+        anchors.top: parent.top
         anchors.left: parent.left
         anchors.right: parent.right
+        height: MobileShell.TopPanelControls.panelHeight
+        
+        property int oldMouseY: 0
+        onPositionChanged: {
+            MobileShell.TopPanelControls.requestRelativeScroll(mouse.y - oldMouseY);
+            oldMouseY = mouse.y;
+        }
+        onPressed: {
+            oldMouseY = mouse.y;
+            MobileShell.TopPanelControls.startSwipe();
+        }
+        onReleased: MobileShell.TopPanelControls.endSwipe();
+    }
+    
+    // task panel
+    NavigationPanel {
+        id: navPanel
+        
+        property bool isPortrait: Screen.width <= Screen.height
+        width: isPortrait ? implicitWidth : window.taskPanelHeight
+        height: isPortrait ? window.taskPanelHeight : implicitWidth
+        
+        anchors.left: isPortrait ? parent.left : undefined
+        anchors.right: parent.right
+        anchors.top: isPortrait ? undefined: parent.top
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: PlasmaCore.Units.largeSpacing + window.panelHeight
-        anchors.topMargin: PlasmaCore.Units.largeSpacing
         
-        spacing: PlasmaCore.Units.largeSpacing
+        taskSwitcher: window
+        backgroundColor: window.visible ? Qt.rgba(0, 0, 0, 0.1) : "transparent"
+        foregroundColorGroup: PlasmaCore.Theme.ComplementaryColorGroup
+        dragGestureEnabled: false
         
-        PlasmaComponents.ToolButton {
-            Layout.alignment: Qt.AlignRight
-            icon.width: PlasmaCore.Units.iconSizes.medium
-            icon.height: PlasmaCore.Units.iconSizes.medium
-            icon.name: "view-list-symbolic" // "view-grid-symbolic"
-            text: i18n("Switch to list view")
-            display: PlasmaComponents.ToolButton.IconOnly
+        Behavior on backgroundColor { ColorAnimation {} }
+        
+        leftAction: NavigationPanelAction {
+            enabled: true
+            iconSource: "mobile-task-switcher"
+            iconSizeFactor: 0.75
+            onTriggered: {
+                if (window.wasInActiveTask) {
+                    window.activateWindow(window.currentTaskIndex);
+                } else {
+                    window.hide();
+                }
+            }
         }
         
-        PlasmaComponents.ToolButton {
-            Layout.alignment: Qt.AlignHCenter
-            icon.width: PlasmaCore.Units.iconSizes.medium
-            icon.height: PlasmaCore.Units.iconSizes.medium
-            icon.name: "trash-empty"
-            text: i18n("Clear All")
-            display: PlasmaComponents.ToolButton.IconOnly
+        middleAction: NavigationPanelAction {
+            enabled: true
+            iconSource: "start-here-kde"
+            iconSizeFactor: 1
+            onTriggered: {
+                window.hide();
+                root.triggerHomescreen();
+            }
         }
         
-        PlasmaComponents.ToolButton {
-            Layout.alignment: Qt.AlignLeft
-            icon.width: PlasmaCore.Units.iconSizes.medium
-            icon.height: PlasmaCore.Units.iconSizes.medium
-            icon.name: "system-search"
-            text: i18n("Search")
-            display: PlasmaComponents.ToolButton.IconOnly
+        rightAction: NavigationPanelAction {
+            enabled: true
+            iconSource: "mobile-close-app"
+            iconSizeFactor: 0.75
+            onTriggered: {
+                tasksModel.requestClose(tasksModel.index(window.currentTaskIndex, 0));
             }
         }
     }
+    
+//     RowLayout {
+//         id: footerButtons
+//         anchors.left: parent.left
+//         anchors.right: parent.right
+//         anchors.bottom: parent.bottom
+//         anchors.bottomMargin: PlasmaCore.Units.largeSpacing + window.taskPanelHeight
+//         anchors.topMargin: PlasmaCore.Units.largeSpacing
+//         
+//         spacing: PlasmaCore.Units.largeSpacing
+//         
+//         PlasmaComponents.ToolButton {
+//             Layout.alignment: Qt.AlignRight
+//             icon.width: PlasmaCore.Units.iconSizes.medium
+//             icon.height: PlasmaCore.Units.iconSizes.medium
+//             icon.name: "view-list-symbolic" // "view-grid-symbolic"
+//             text: i18n("Switch to list view")
+//             display: PlasmaComponents.ToolButton.IconOnly
+//         }
+//         
+//         PlasmaComponents.ToolButton {
+//             Layout.alignment: Qt.AlignHCenter
+//             icon.width: PlasmaCore.Units.iconSizes.medium
+//             icon.height: PlasmaCore.Units.iconSizes.medium
+//             icon.name: "trash-empty"
+//             text: i18n("Clear All")
+//             display: PlasmaComponents.ToolButton.IconOnly
+//         }
+//         
+//         PlasmaComponents.ToolButton {
+//             Layout.alignment: Qt.AlignLeft
+//             icon.width: PlasmaCore.Units.iconSizes.medium
+//             icon.height: PlasmaCore.Units.iconSizes.medium
+//             icon.name: "system-search"
+//             text: i18n("Search")
+//             display: PlasmaComponents.ToolButton.IconOnly
+//         }
+//     }
+}

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

@@ -33,27 +33,8 @@ PlasmaCore.ColorScope {
     readonly property bool hasTasks: tasksModel.count > 0
 
     property QtObject taskSwitcher: taskSwitcherLoader.item ? taskSwitcherLoader.item : null
-    Loader {
-        id: taskSwitcherLoader
-    }
-    //FIXME: why it crashes on startup if TaskSwitcher is loaded immediately?
-    Connections {
-        target: plasmoid.nativeInterface
-        function onAllMinimizedChanged() {
-            MobileShell.HomeScreenControls.homeScreenVisible = plasmoid.nativeInterface.allMinimized
-        }
-    }
-    Timer {
-        running: true
-        interval: 200
-        onTriggered: {
-            taskSwitcherLoader.setSource(Qt.resolvedUrl("TaskSwitcher.qml"), {
-                "model": tasksModel, 
-                "panelHeight": root.height
-            });
-        }
-    }
 
+//BEGIN functions
     function minimizeAll() {
         for (var i = 0 ; i < tasksModel.count; i++) {
             var idx = tasksModel.makeModelIndex(i);
@@ -72,6 +53,21 @@ PlasmaCore.ColorScope {
         }
     }
     
+    function triggerHomescreen() {
+        root.minimizeAll();
+        MobileShell.HomeScreenControls.resetHomeScreenPosition();
+        MobileShell.HomeScreenControls.showHomeScreen(true);
+        plasmoid.nativeInterface.allMinimizedChanged();
+    }
+//END functions
+
+    Connections {
+        target: plasmoid.nativeInterface
+        function onAllMinimizedChanged() {
+            MobileShell.HomeScreenControls.homeScreenVisible = plasmoid.nativeInterface.allMinimized
+        }
+    }
+
     TaskManager.TasksModel {
         id: tasksModel
         groupMode: TaskManager.TasksModel.GroupDisabled
@@ -91,156 +87,6 @@ PlasmaCore.ColorScope {
         id: activityInfo
     }
     
-    MouseArea {
-        id: mainMouseArea
-        anchors.fill: parent
-        property int oldMouseY: 0
-        property int startMouseY: 0
-        property int oldMouseX: 0
-        property int startMouseX: 0
-        property bool opening: false
-        drag.filterChildren: true
-        property Button activeButton
-
-        onPressed: {
-            startMouseX = oldMouseX = mouse.y;
-            startMouseY = oldMouseY = mouse.y;
-            activeButton = icons.childAt(mouse.x, mouse.y);
-        }
-        onPositionChanged: {
-            let newButton = icons.childAt(mouse.x, mouse.y);
-            if (newButton != activeButton) {
-                activeButton = null;
-            }
-            
-            if (!taskSwitcher.currentlyDragging && Math.abs(startMouseY - oldMouseY) < root.height) {
-                oldMouseY = mouse.y;
-                return;
-            } else if (mainMouseArea.pressed) {
-                taskSwitcher.currentlyDragging = true;
-            }
-
-            // update offsets with drags
-            taskSwitcher.oldYOffset = taskSwitcher.yOffset;
-            taskSwitcher.yOffset = Math.max(0, taskSwitcher.yOffset - (mouse.y - oldMouseY));
-            
-            opening = oldMouseY > mouse.y;
-
-            if (taskSwitcher.visibility == Window.Hidden && Math.abs(startMouseY - mouse.y) > PlasmaCore.Units.gridUnit && taskSwitcher.tasksCount) {
-                // start task switcher gesture
-                activeButton = null;
-                taskSwitcher.show(false);
-            } else if (taskSwitcher.tasksCount === 0) { // no tasks, let's scroll up the homescreen instead
-                MobileShell.HomeScreenControls.requestRelativeScroll(Qt.point(mouse.x - oldMouseX, mouse.y - oldMouseY));
-            }
-            
-            oldMouseY = mouse.y;
-            oldMouseX = mouse.x;
-        }
-        onReleased: {
-            if (taskSwitcher.visibility == Window.Hidden) {
-                if (taskSwitcher.tasksCount === 0) {
-                    MobileShell.HomeScreenControls.snapHomeScreenPosition();
-                }
-
-                if (activeButton) {
-                    activeButton.clicked();
-                }
-                return;
-            }
-
-            if (taskSwitcher.currentlyDragging) {
-                taskSwitcher.currentlyDragging = false;
-                taskSwitcher.snapOffset();
-            }
-        }
-
-        DropShadow {
-            anchors.fill: icons
-            visible: !showingApp
-            cached: true
-            horizontalOffset: 0
-            verticalOffset: 1
-            radius: 4.0
-            samples: 17
-            color: Qt.rgba(0,0,0,0.8)
-            source: icons
-        }
-        Item {
-            id: icons
-            anchors.fill: parent
-
-            visible: plasmoid.configuration.PanelButtonsVisible
-            property real buttonLength: 0
-
-            // background colour
-            Rectangle {
-                anchors.fill: parent
-                color: showingApp ? root.backgroundColor : "transparent"
-            }
-
-            Button {
-                id: tasksButton
-                mouseArea: mainMouseArea
-                enabled: root.hasTasks
-                onClicked: {
-                    if (!enabled) {
-                        return;
-                    }
-                    plasmoid.nativeInterface.showDesktop = false;
-                    taskSwitcher.visible ? taskSwitcher.hide() : taskSwitcher.show(true);
-                }
-                iconSizeFactor: 0.75
-                iconSource: "mobile-task-switcher"
-                colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
-            }
-
-            Button {
-                id: showDesktopButton
-                anchors.centerIn: parent
-                mouseArea: mainMouseArea
-                onClicked: {
-                    if (!enabled) {
-                        return;
-                    }
-                    root.minimizeAll();
-                    MobileShell.HomeScreenControls.resetHomeScreenPosition();
-                    MobileShell.HomeScreenControls.showHomeScreen(true);
-                    plasmoid.nativeInterface.allMinimizedChanged();
-                }
-                iconSizeFactor: 1
-                iconSource: "start-here-kde"
-                colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
-            }
-
-            Button {
-                id: closeTaskButton
-                mouseArea: mainMouseArea
-                enabled: TaskPanel.KWinVirtualKeyboard.visible || (plasmoid.nativeInterface.hasCloseableActiveWindow && !taskSwitcher.visible)
-                onClicked: {
-                    if (!enabled) {
-                        return
-                    }
-                    if (TaskPanel.KWinVirtualKeyboard.active) {
-                        TaskPanel.KWinVirtualKeyboard.active = false
-                        return;
-                    }
-                    if (!plasmoid.nativeInterface.hasCloseableActiveWindow) {
-                        return;
-                    }
-                    var index = taskSwitcher.model.activeTask;
-                    if (index) {
-                        taskSwitcher.model.requestClose(index);
-                    }
-                }
-
-                // mobile-close-app (from plasma-frameworks) seems to have less margins than icons from breeze-icons
-                iconSizeFactor: TaskPanel.KWinVirtualKeyboard.visible ? 1 : 0.75
-                iconSource: TaskPanel.KWinVirtualKeyboard.visible ? "go-down-symbolic" : "mobile-close-app"
-                colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
-            }
-        }
-
     Window.onWindowChanged: {
         if (!Window.window)
             return;
@@ -250,6 +96,64 @@ PlasmaCore.ColorScope {
         });
     }
 
+    // task switcher
+    Loader {
+        id: taskSwitcherLoader
+        sourceComponent: TaskSwitcher {
+            model: tasksModel
+            taskPanelHeight: root.state === "portrait" ? root.height : root.width
+        }
+    }
+
+    // bottom navigation panel
+    NavigationPanel {
+        id: panel
+        anchors.fill: parent
+        opacity: (root.taskSwitcher && root.taskSwitcher.visible) ? 0 : 1 // hide bar when task switcher is open
+        
+        backgroundColor: root.showingApp ? root.backgroundColor : "transparent"
+        foregroundColorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
+        
+        dragGestureEnabled: true
+        taskSwitcher: root.taskSwitcher
+            
+        leftAction: NavigationPanelAction {
+            enabled: hasTasks
+            iconSource: "mobile-task-switcher"
+            iconSizeFactor: 0.75
+            
+            onTriggered: {
+                plasmoid.nativeInterface.showDesktop = false;
+                taskSwitcher.visible ? taskSwitcher.hide() : taskSwitcher.show(true);
+            }
+        }
+        
+        middleAction: NavigationPanelAction {
+            enabled: true
+            iconSource: "start-here-kde"
+            iconSizeFactor: 1
+            onTriggered: root.triggerHomescreen()
+        }
+        
+        rightAction: NavigationPanelAction {
+            enabled: TaskPanel.KWinVirtualKeyboard.visible || (plasmoid.nativeInterface.hasCloseableActiveWindow && !taskSwitcher.visible)
+            // mobile-close-app (from plasma-frameworks) seems to have less margins than icons from breeze-icons
+            iconSizeFactor: TaskPanel.KWinVirtualKeyboard.visible ? 1 : 0.75
+            iconSource: TaskPanel.KWinVirtualKeyboard.visible ? "go-down-symbolic" : "mobile-close-app"
+            
+            onTriggered: {
+                if (TaskPanel.KWinVirtualKeyboard.active) {
+                    TaskPanel.KWinVirtualKeyboard.active = false;
+                } else if (plasmoid.nativeInterface.hasCloseableActiveWindow) {
+                    var index = taskSwitcher.model.activeTask;
+                    if (index) {
+                        taskSwitcher.model.requestClose(index);
+                    }
+                }
+            }
+        }
+    }
+    
     states: [
         State {
             name: "landscape"
@@ -263,41 +167,6 @@ PlasmaCore.ColorScope {
                 width: PlasmaCore.Units.gridUnit
                 height: PlasmaCore.Units.gridUnit
             }
-                PropertyChanges {
-                    target: icons
-                    buttonLength: icons.height * 0.8 / 3
-                }
-                AnchorChanges {
-                    target: tasksButton
-                    anchors {
-                        horizontalCenter: parent.horizontalCenter
-                        top: parent.top
-                    }
-                }
-                PropertyChanges {
-                    target: tasksButton
-                    width: parent.width
-                    height: icons.buttonLength
-                    anchors.topMargin: parent.height * 0.1
-                }
-                PropertyChanges {
-                    target: showDesktopButton
-                    width: parent.width
-                    height: icons.buttonLength
-                }
-                AnchorChanges {
-                    target: closeTaskButton
-                    anchors {
-                        horizontalCenter: parent.horizontalCenter
-                        bottom: parent.bottom
-                    }
-                }
-                PropertyChanges {
-                    target: closeTaskButton
-                    height: icons.buttonLength
-                    width: icons.width
-                    anchors.bottomMargin: parent.height * 0.1
-                }
         }, State {
             name: "portrait"
             when: Screen.width <= Screen.height
@@ -309,42 +178,6 @@ PlasmaCore.ColorScope {
                 target: plasmoid.nativeInterface
                 location: PlasmaCore.Types.BottomEdge
             }
-                PropertyChanges {
-                    target: icons
-                    buttonLength: icons.width * 0.8 / 3
-                }
-                AnchorChanges {
-                    target: tasksButton
-                    anchors {
-                        verticalCenter: parent.verticalCenter
-                        left: parent.left
-                    }
-                }
-                PropertyChanges {
-                    target: tasksButton
-                    height: parent.height
-                    width: icons.buttonLength
-                    anchors.leftMargin: parent.width * 0.1
-                }
-                PropertyChanges {
-                    target: showDesktopButton
-                    height: parent.height
-                    width: icons.buttonLength
-                }
-                AnchorChanges {
-                    target: closeTaskButton
-                    anchors {
-                        verticalCenter: parent.verticalCenter
-                        right: parent.right
-                    }
-                }
-                PropertyChanges {
-                    target: closeTaskButton
-                    height: parent.height
-                    width: icons.buttonLength
-                    anchors.rightMargin: parent.width * 0.1
-                }
         }
     ]
 }
-}