prettier top panel

shell/contents/views/Desktop.qml

@@ -205,7 +205,7 @@ Item {
 
         Rectangle {
             anchors.fill: parent
-            color: Qt.rgba(0, 0, 0, 0.9)
+            color: PlasmaCore.ColorScope.backgroundColor
 
             PlasmaCore.IconItem {
                 id: strengthIcon
@@ -235,21 +235,7 @@ Item {
                 verticalAlignment: Qt.AlignVCenter
                 font.pixelSize: height / 2
             }
-            MouseArea {
+            
-                property int oldMouseY: 0
-
-                anchors.fill: parent
-                enabled: !dialerOverlay.item.visible
-                onPressed: {
-                    oldMouseY = mouse.y;
-                    slidingPanel.visible = true;
-                }
-                onPositionChanged: {
-                    slidingPanel.offset = slidingPanel.offset + (mouse.y - oldMouseY);
-                    oldMouseY = mouse.y;
-                }
-                onReleased: slidingPanel.updateState();
-            }
 
 
             PlasmaWorkspace.BatteryIcon {
@@ -278,6 +264,24 @@ Item {
                 }
             }
         }
+        MouseArea {
+            property int oldMouseY: 0
+
+            anchors.fill: parent
+            enabled: !dialerOverlay.item.visible
+            onPressed: {
+                oldMouseY = mouse.y;
+                slidingPanel.visible = true;
+            }
+            onPositionChanged: {
+                //var factor = (mouse.y - oldMouseY > 0) ? (1 - Math.max(0, (slidingArea.y + slidingPanel.overShoot) / slidingPanel.overShoot)) : 1
+                var factor = 1;
+                print(slidingPanel.offset +" "+ slidingPanel.height)
+                slidingPanel.offset = slidingPanel.offset + (mouse.y - oldMouseY) * factor;
+                oldMouseY = mouse.y;
+            }
+            onReleased: slidingPanel.updateState();
+        }
     }
 
     SlidingPanel {

shell/contents/views/SlidingPanel.qml

@@ -26,8 +26,10 @@ Window {
     flags: Qt.WindowDoesNotAcceptFocus
 
     property int offset: 0
+    property int overShoot: units.gridUnit * 2
 
     color: "transparent"
+    property alias contents: contentArea.data
 
     function updateState() {
         var delta = offset - mouseArea.startOffset;
@@ -59,6 +61,7 @@ Window {
         property int oldMouseY: 0
         property int startOffset: units.iconSizes.large;
         property string startState: "closed"
+
         onPressed: {
             startState = state;
             startOffset = window.offset;
@@ -67,26 +70,71 @@ Window {
             window.offset = startOffset;
         }
         onPositionChanged: {
-            window.offset = window.offset + (mouse.y - oldMouseY);
+            var factor = (mouse.y - oldMouseY > 0) ? (1 - Math.max(0, (slidingArea.y + overShoot) / overShoot)) : 1
+
+            window.offset = window.offset + (mouse.y - oldMouseY) * factor;
             oldMouseY = mouse.y;
         }
-        onReleased: window.updateState()
+        onReleased: {
+            if (Math.abs(window.offset - mouseArea.startOffset) < units.gridUnit &&
+                  slidingArea.y + slidingArea.height < mouse.y) {
+                mouseArea.state = "closed";
+            } else {
+                window.updateState();
+            }
+        }
 
         Rectangle {
+            anchors.fill: parent
+            color: Qt.rgba(0, 0, 0, 0.6-Math.abs(slidingArea.y/slidingArea.height))
+        }
+        PlasmaCore.ColorScope {
             id: slidingArea
             width: parent.width
-            height: parent.height
+            height: parent.height/1.5
             y: Math.min(0, -height + window.offset)
-
+            colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
-            color: Qt.rgba(0, 0, 0, 0.7)
             Rectangle {
-                width: parent.width / 4
+                anchors.fill: parent
-                height: units.gridUnit/2
+
-                color: "yellow"
+                Item {
-                anchors {
+                    id: contentArea
-                    horizontalCenter: parent.horizontalCenter
+                    anchors {
-                    bottom: parent.bottom
+                        fill: parent
-                    bottomMargin: units.gridUnit/2
+                        topMargin: overShoot
+                    }
+                }
+                color: PlasmaCore.ColorScope.backgroundColor
+                Rectangle {
+                    height: units.smallSpacing/2
+                    color: PlasmaCore.ColorScope.highlightColor
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        bottom: parent.bottom
+                    }
+                }
+                Rectangle {
+                    height: units.gridUnit
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                        top: parent.bottom
+                    }
+                    gradient: Gradient {
+                        GradientStop {
+                            position: 0.0
+                            color: Qt.rgba(0, 0, 0, 0.6)
+                        }
+                        GradientStop {
+                            position: 0.5
+                            color: Qt.rgba(0, 0, 0, 0.2)
+                        }
+                        GradientStop {
+                            position: 1.0
+                            color: "transparent"
+                        }
+                    }
                 }
             }
         }
@@ -103,7 +151,7 @@ Window {
                 name: "open"
                 PropertyChanges {
                     target: window
-                    offset: slidingArea.height
+                    offset: slidingArea.height - overShoot
                 }
             },
             State {
@@ -127,7 +175,7 @@ Window {
                     PropertyAnimation {
                         target: window
                         duration: units.longDuration
-                        easing: Easing.InOutQuad
+                        easing.type: Easing.InOutQuad
                         properties: "offset"
                     }
                     ScriptAction {