[applets/systemtray]: Make system tray sliding spatially consistent

Before this patch, the system tray always animated sliding to the left when switching between items. Now system tray items will slide according to their order on the panel. Clicking an item to the left of the active icon will cause the sliding animation to slide that direction as well, and same for the an item to the right of the active item.

applets/systemtray/package/contents/ui/PlasmoidPopupsContainer.qml

@@ -85,15 +85,25 @@ StackView {
     }
 
     delegate: StackViewDelegate {
+        id: transitioner
         function transitionFinished(properties) {
             properties.exitItem.opacity = 1
         }
+        property bool goingLeft: {
+            const unFlipped = systemTrayState.oldVisualIndex < systemTrayState.newVisualIndex
+
+            if (Qt.application.layoutDirection == Qt.LeftToRight) {
+                return unFlipped
+            } else {
+                return !unFlipped
+            }
+        }
         replaceTransition: StackViewTransition {
             ParallelAnimation {
                 PropertyAnimation {
                     target: enterItem
                     property: "x"
-                    from: enterItem.width
+                    from: transitioner.goingLeft ? enterItem.width : -enterItem.width
                     to: 0
                     easing.type: Easing.InOutQuad
                     duration: PlasmaCore.Units.shortDuration
@@ -112,9 +122,9 @@ StackView {
                     target: exitItem
                     property: "x"
                     from: 0
-                    to: -exitItem.width
+                    to: transitioner.goingLeft ? -exitItem.width : exitItem.width
                     easing.type: Easing.InOutQuad
-                    duration: PlasmaCore.Units.shortDuration
+                    duration: units.longDuration
                 }
                 PropertyAnimation {
                     target: exitItem

applets/systemtray/package/contents/ui/SystemTrayState.qml

@@ -34,7 +34,21 @@ QtObject {
     //this is to suppress expanded state change during Plasma startup
     property bool acceptExpandedChange: false
 
-    function setActiveApplet(applet) {
+    // These properties allow us to keep track of where the expanded applet
+    // was and is on the panel, allowing PlasmoidPopupContainer.qml to animate
+    // depending on their locations.
+    property int oldVisualIndex: -1
+    property int newVisualIndex: -1
+
+    function setActiveApplet(applet, visualIndex) {
+        if (visualIndex === undefined) {
+            oldVisualIndex = -1
+            newVisualIndex = -1
+        } else {
+            oldVisualIndex = newVisualIndex
+            newVisualIndex = visualIndex
+        }
+
         const oldApplet = activeApplet
         activeApplet = applet
         if (oldApplet && oldApplet !== applet) {

applets/systemtray/package/contents/ui/items/PlasmoidItem.qml

@@ -121,7 +121,7 @@ AbstractItem {
 
         function onExpandedChanged(expanded) {
             if (expanded) {
-                systemTrayState.setActiveApplet(applet)
+                systemTrayState.setActiveApplet(applet, model.row)
                 plasmoidContainer.activated()
             }
         }