Task panel visual improvements

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

@@ -16,7 +16,7 @@
  *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  2.010-1301, USA.
  */
 
-import QtQuick 2.4
+import QtQuick 2.12
 import QtQuick.Layouts 1.1
 
 import org.kde.plasma.plasmoid 2.0
@@ -35,15 +35,42 @@ Item {
     signal clicked()
 
     Rectangle {
+        id: rect
         radius: height/2
         anchors.fill: parent
-        opacity: button.pressed && button.enabled ? 0.1 : 0
+        opacity: 0
         color: PlasmaCore.ColorScope.textColor
-        Behavior on opacity {
-            //an OpacityAnimator causes stuttering in task switcher dragging
-            NumberAnimation {
-                duration: units.longDuration
-                easing.type: Easing.InOutQuad
+        
+        // this way of calculating animations lets the animation fully complete before switching back (tap runs the full animation)
+        property bool buttonHeld: button.pressed && button.enabled
+        
+        onButtonHeldChanged: showBackground(buttonHeld)
+        Component.onCompleted: showBackground(buttonHeld)
+        
+        function showBackground(show) {
+            if (show) {
+                if (!opacityAnimator.running && opacityAnimator.to !== 0.1) {
+                    opacityAnimator.to = 0.1;
+                    opacityAnimator.start();
+                }
+            } else {
+                if (!opacityAnimator.running && opacityAnimator.to !== 0) {
+                    opacityAnimator.to = 0;
+                    opacityAnimator.start();
+                }
+            }
+        }
+        NumberAnimation on opacity {
+            id: opacityAnimator
+            duration: units.shortDuration
+            easing.type: Easing.InOutQuad
+            onFinished: {
+                // animate the state back
+                if (rect.buttonHeld && opacityAnimator.to === 0) {
+                    rect.showBackground(true);
+                } else if (!rect.buttonHeld && opacityAnimator.to === 0.1) {
+                    rect.showBackground(false);
+                }
             }
         }
     }

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

@@ -180,7 +180,18 @@ PlasmaCore.ColorScope {
             anchors.fill: parent
 
             visible: plasmoid.configuration.PanelButtonsVisible
-
+            
+            PlasmaCore.Svg {
+                id: panelSvg
+                imagePath: "icons/mobile"
+                colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
+            }
+            PlasmaCore.Svg {
+                id: startSvg
+                imagePath: "icons/start"
+                colorGroup: root.showingApp ? PlasmaCore.Theme.NormalColorGroup : PlasmaCore.Theme.ComplementaryColorGroup
+            }
+            
             Rectangle {
                 anchors.fill: parent
                 gradient: Gradient {
@@ -196,12 +207,15 @@ PlasmaCore.ColorScope {
             }
 
             Button {
-                anchors.left: parent.left
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    left: parent.left
+                    leftMargin: parent.width * 0.1
+                }
                 height: parent.height
-                width: parent.width/3
+                width: parent.width*0.8/3
                 mouseArea: mainMouseArea
                 enabled: root.hasTasks
-                iconSource: "box"
                 onClicked: {
                     if (!enabled) {
                         return;
@@ -209,15 +223,29 @@ PlasmaCore.ColorScope {
                     plasmoid.nativeInterface.showDesktop = false;
                     taskSwitcher.visible ? taskSwitcher.hide() : taskSwitcher.show();
                 }
+                PlasmaCore.SvgItem {
+                    anchors.centerIn: parent
+                    implicitHeight: 0.75 * parent.height * 0.6 // 0.75 sizing adjustment fix needed 
+                    implicitWidth: implicitHeight
+                    opacity: parent.enabled ? 1 : 0.5
+                    svg: panelSvg
+                    elementId: "mobile-task-switcher"
+                    
+                    Behavior on opacity {
+                        NumberAnimation { duration: units.shortDuration }
+                    }
+                }
             }
 
             Button {
                 id: showDesktopButton
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    horizontalCenter: parent.horizontalCenter
+                }
                 height: parent.height
-                width: parent.width/3
-                anchors.horizontalCenter: parent.horizontalCenter
+                width: parent.width*0.8/3
                 mouseArea: mainMouseArea
-                iconSource: "start-here-kde"
                 enabled: !taskSwitcher.visible && (root.showingApp || MobileShell.HomeScreenControls.homeScreenPosition != 0)
                 onClicked: {
                     if (!enabled) {
@@ -227,14 +255,29 @@ PlasmaCore.ColorScope {
                     MobileShell.HomeScreenControls.resetHomeScreenPosition();
                     plasmoid.nativeInterface.allMinimizedChanged();
                 }
+                PlasmaCore.SvgItem {
+                    anchors.centerIn: parent
+                    implicitHeight: parent.height * 0.6
+                    implicitWidth: implicitHeight
+                    opacity: parent.enabled ? 1 : 0.5
+                    svg: startSvg
+                    elementId: "16-16-start-here-kde"
+                    
+                    Behavior on opacity {
+                        NumberAnimation { duration: units.shortDuration }
+                    }
+                }
             }
 
             Button {
+                anchors {
+                    verticalCenter: parent.verticalCenter
+                    right: parent.right
+                    rightMargin: parent.width * 0.1
+                }
                 height: parent.height
-                width: parent.width/3
-                anchors.right: parent.right
+                width: parent.width*0.8/3
                 mouseArea: mainMouseArea
-                iconSource: "paint-none"
                 enabled: plasmoid.nativeInterface.hasCloseableActiveWindow && !taskSwitcher.visible
                 onClicked: {
                     if (!enabled) {
@@ -248,6 +291,19 @@ PlasmaCore.ColorScope {
                         taskSwitcher.model.requestClose(index);
                     }
                 }
+
+                PlasmaCore.SvgItem {
+                    anchors.centerIn: parent
+                    implicitHeight: 0.75 * parent.height * 0.6 // 0.75 sizing adjustment fix needed 
+                    implicitWidth: implicitHeight
+                    opacity: parent.enabled ? 1 : 0.5
+                    svg: panelSvg
+                    elementId: "mobile-close-app"
+                    
+                    Behavior on opacity {
+                        NumberAnimation { duration: units.shortDuration }
+                    }
+                }
             }
         }
     }