wallpaper and applets config as a sidepanel

shell/contents/configuration/AppletConfiguration.qml

@@ -30,7 +30,7 @@ Rectangle {
     Layout.minimumHeight: units.gridUnit * 20
 
 //BEGIN properties
-    color: syspal.window
+    color: Qt.rgba(0, 0, 0, 1 - panel.x/width)
     width: units.gridUnit * 40
     height: units.gridUnit * 30
 
@@ -109,14 +109,44 @@ Rectangle {
             main.sourceFile = globalConfigModel.get(0).source
             main.title = globalConfigModel.get(0).name
         }
-//         root.width = mainColumn.implicitWidth
-//         root.height = mainColumn.implicitHeight
     }
 //END connections
 
 //BEGIN UI components
     SystemPalette {id: syspal}
 
+    NumberAnimation {
+        id: openAnim
+        running: true
+        target: panel
+        properties: "x"
+        duration: units.longDuration
+        easing.type: Easing.InOutQuad
+        to: root.width/6
+    }
+    SequentialAnimation {
+        id: closeAnim
+        NumberAnimation {
+            target: panel
+            properties: "x"
+            duration: units.longDuration
+            easing.type: Easing.InOutQuad
+            to: root.width
+        }
+        ScriptAction {
+            script: cancelAction.trigger();
+        }
+    }
+
+    Timer {
+        running: true
+        interval: 250
+        onTriggered: {
+            openAnim.running = true;
+        }
+    }
+    onWidthChanged: panel.x = root.width/6
+
     MessageDialog {
         id: messageDialog
         icon: StandardIcon.Warning
@@ -133,6 +163,31 @@ Rectangle {
         }
     }
 
+    MouseArea {
+        anchors.fill: parent
+        drag.filterChildren: true
+        drag.target: panel
+        drag.axis: Drag.XAxis
+        drag.maximumX: width
+        drag.minimumX: width/6
+        onReleased: {
+            if (panel.x > root.width/2) {
+                closeAnim.running = true;
+            } else {
+                openAnim.running = true;
+            }
+        }
+        onClicked: {
+            if (mouse.x < width / 6) {
+                closeAnim.running = true;
+            }
+        }
+        Rectangle {
+            id: panel
+            width: root.width - root.width/6
+            x: root.width
+            height: root.height
+            color: syspal.window
             ColumnLayout {
                 id: mainColumn
                 anchors {
@@ -307,15 +362,6 @@ Rectangle {
                     onTriggered: configDialog.close();
                     shortcut: "Escape"
                 }
-
-        RowLayout {
-            id: buttonsRow
-            Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-
-            QtControls.Button {
-                iconName: "window-close"
-                text: i18nd("plasma_shell_org.kde.plasma.desktop", "Close")
-                onClicked: cancelAction.trigger()
             }
         }
     }

shell/contents/explorer/WidgetExplorer.qml

@@ -34,7 +34,7 @@ import org.kde.plasma.private.shell 2.0
 
 Rectangle {
     id: root
-    color: Qt.rgba(0, 0, 0, main.opacity * 0.8)
+    color: Qt.rgba(0, 0, 0, (1 - Math.abs(main.x / (main.width/2))) * 0.8)
     signal closed()
 
     MouseArea {
@@ -50,6 +50,11 @@ Rectangle {
                 openAnim.running = true;
             }
         }
+        onClicked: {
+            if (mouse.x > main.width) {
+                removeAnim.running = true;
+            }
+        }
 
         NumberAnimation {
             id: openAnim
@@ -81,7 +86,6 @@ Rectangle {
             height: parent.height
             color: theme.backgroundColor
 
-            opacity: 1 - Math.abs(x / (width/2))
             property alias containment: widgetExplorer.containment
 
             //external drop events can cause a raise event causing us to lose focus and