e the state machine

compositor/contents/Compositor.qml

@@ -25,23 +25,22 @@ import "WindowManagement.js" as WindowManagement
 
 Rectangle {
     property alias showSplash: splash.visible
-    property bool showHome: true
     property bool showPanel: true
     readonly property alias layers: layers
     readonly property real topBarHeight: units.iconSizes.small
-    readonly property real bottomBarHeight: units.iconSizes.large
+    readonly property real bottomBarHeight: units.iconSizes.medium
     property var currentWindow: null
 
     onCurrentWindowChanged: {
         if (!currentWindow) {
             return;
         }
-        compositorRoot.showHome = false;
+        compositorRoot.state = "application";
-        windowsLayout.scale = 1;
     }
 
     id: compositorRoot
     color: "black"
+    state: "homeScreen"
 
     Image {
         id: splash
@@ -76,7 +75,6 @@ Rectangle {
         id: desktopLayer
         anchors.fill: parent
         visible: true
-        z: showHome ? 2 : 1
     }
 
     Rectangle {
@@ -84,14 +82,6 @@ Rectangle {
         anchors.fill: parent
         anchors.topMargin: topBarHeight
         color: Qt.rgba(0, 0, 0, 0.5)
-        opacity: windowsLayer.switchMode || !compositorRoot.showHome ? 1 : 0
-        z: showHome ? 1 : 2
-        Behavior on opacity {
-            NumberAnimation {
-                easing.type: "InOutQuad"
-                duration: units.longDuration
-            }
-        }
 
         Flickable {
             id: windowsLayer
@@ -113,28 +103,15 @@ Rectangle {
             MouseArea {
                 anchors.fill: parent
                 onClicked: {
-                    windowsLayout.scale = 1
+                    compositorRoot.state = "homeScreen";
-                    compositorRoot.showHome = true;
                 }
                 Row {
                     id: windowsLayout
                     height: windowsLayerBackground.height
                     transformOrigin: Item.Left
-
+                    onChildrenChanged: {
-                    Behavior on scale {
+                        if (children.length == 0) {
-                        enabled: !taskSwitchEdge.active
+                            compositorRoot.state = "homeScreen";
-                        ParallelAnimation {
-                            PropertyAnimation {
-                                duration: units.shortDuration
-                                easing: Easing.InOutQuad
-                            }
-                            PropertyAnimation {
-                                target: windowsLayer
-                                property: "contentX"
-                                to: compositorRoot.currentWindow ? compositorRoot.currentWindow.x : 0
-                                duration: units.shortDuration
-                                easing: Easing.InOutQuad
-                            }
                         }
                     }
                 }
@@ -156,7 +133,7 @@ Rectangle {
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         height: (!windowsLayer.switchMode) ? 0 : bottomBarHeight
-        color: "black"
+        color: Qt.rgba(0, 0, 0, 0.5)
 
         Behavior on height {
             NumberAnimation {
@@ -181,8 +158,7 @@ Rectangle {
                 MouseArea {
                     anchors.fill: parent
                     onClicked: {
-                        showHome = true
+                        compositorRoot.state = "homeScreen";
-                        windowsLayout.scale = 1
                     }
                 }
             }
@@ -206,10 +182,10 @@ Rectangle {
             oldX = mouse.x;
         }
         onPositionChanged: {
+            compositorRoot.state = "switcher";
             var newScale = (1-Math.abs(mouse.y)/(compositorRoot.height/2))
             if (newScale > 0.3) {
                 windowsLayout.scale = newScale
-                compositorRoot.showHome = false;
             }
             windowsLayer.contentX -= (mouse.x - oldX);
             oldX = mouse.x;
@@ -217,9 +193,104 @@ Rectangle {
         onReleased: {
             active = false
             if (windowsLayout.scale > 0.7) {
-                windowsLayout.scale = 1
+                compositorRoot.state = compositorRoot.currentWindow ? "application" : "homeScreen";
-                compositorRoot.showHome = true;
             }
         }
     }
+
+    states: [
+        State {
+            name: "homeScreen"
+            PropertyChanges {
+                target: windowsLayerBackground
+                opacity: 0
+            }
+            PropertyChanges {
+                target: windowsLayout
+                scale: 1
+            }
+        },
+        State {
+            name: "application"
+            PropertyChanges {
+                target: windowsLayerBackground
+                opacity: 1
+            }
+            PropertyChanges {
+                target: windowsLayout
+                scale: 1
+            }
+            PropertyChanges {
+                target: windowsLayer
+                contentX: compositorRoot.currentWindow ? compositorRoot.currentWindow.x : 0
+            }
+        },
+        State {
+            name: "switcher"
+            PropertyChanges {
+                target: windowsLayerBackground
+                opacity: 1
+            }
+            PropertyChanges {
+                target: windowsLayer
+                contentX: compositorRoot.currentWindow ? compositorRoot.currentWindow.x : 0
+            }
+        }
+    ]
+
+    transitions: [
+        Transition {
+            to: "switcher"
+            SequentialAnimation {
+                ScriptAction {
+                    script: {
+                        desktopLayer.z = 1
+                        windowsLayerBackground.z = 2
+                    }
+                }
+                PropertyAnimation {
+                    target: windowsLayerBackground
+                    duration: units.longDuration
+                    easing: Easing.InOutQuad
+                    properties: "opacity"
+                }
+            }
+        },
+        Transition {
+            SequentialAnimation {
+                ParallelAnimation {
+                    PropertyAnimation {
+                        target: windowsLayerBackground
+                        duration: units.longDuration
+                        easing: Easing.InOutQuad
+                        properties: "opacity"
+                    }
+                    PropertyAnimation {
+                        target: windowsLayout
+                        duration: units.shortDuration
+                        easing: Easing.InOutQuad
+                        properties: "scale"
+                    }
+                    PropertyAnimation {
+                        target: windowsLayer
+                        duration: units.shortDuration
+                        easing: Easing.InOutQuad
+                        properties: "contentX"
+                    }
+                }
+                ScriptAction {
+                    script: {
+                        if (compositorRoot.state == "homeScreen") {
+                            desktopLayer.z = 2;
+                            windowsLayerBackground.z = 1;
+                            compositorRoot.currentWindow = null;
+                        } else {
+                            desktopLayer.z = 1;
+                            windowsLayerBackground.z = 2;
+                        }
+                    }
+                }
+            }
+        }
+    ]
 }

compositor/contents/WindowManagement.js

@@ -132,7 +132,7 @@ function mapApplicationSurface(surface) {
     window.height = surface.size.height;
 
     // Switch to the applications layer and take focus
-    compositorRoot.showHome = false;
+    compositorRoot.state = "application";
     compositorRoot.currentWindow = window;
     window.child.takeFocus();
 
@@ -162,7 +162,7 @@ function mapShellSurface(surface, child) {
             if (surface.className == "plasmashell.desktop") {
                 compositorRoot.showPanel = true;
             } else {
-                compositorRoot.showHome = true;
+                compositorRoot.state = "homeScreen";
             }
             entry.window.child.takeFocus();
 
@@ -192,7 +192,7 @@ function mapShellSurface(surface, child) {
     if (surface.className == "plasmashell.desktop") {
         compositorRoot.showPanel = true;
     } else {
-        compositorRoot.showHome = true;
+        compositorRoot.state = "homeScreen";
     }
     window.child.takeFocus();
 
@@ -206,7 +206,7 @@ function mapShellSurface(surface, child) {
 
 function unmapApplicationSurface(surface) {
     // Reactivate home layer as soon as an application window is unmapped
-    compositorRoot.showHome = true;
+    compositorRoot.state = "homeScreen";
     compositorRoot.currentWindow = null;
 }