smaller top drawer in tablet mode

containments/panel/package/contents/ui/SlidingPanel.qml

@@ -30,6 +30,9 @@ NanoShell.FullScreenPanel {
     property int peekHeight
     property bool userInteracting: false
     property bool expanded: false
+    readonly property bool wideScreen: width > units.gridUnit * 45
+    readonly property int drawerWidth: wideScreen ? units.gridUnit * 25 : width
+    property int drawerX: 0
 
     color: Qt.rgba(0, 0, 0, 0.6 * Math.min(1, offset/contentArea.height))
     property alias contents: contentArea.data
@@ -117,13 +120,11 @@ NanoShell.FullScreenPanel {
         colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
 
         Rectangle {
-            anchors {
-                top: parent.top
-                left: parent.left
-                right: parent.right
-            }
+            x: drawerX
+            anchors.top: parent.top
             height: contentArea.height - mainFlickable.contentY
             color: PlasmaCore.ColorScope.backgroundColor
+            width: drawerWidth
         }
 
         Flickable {
@@ -156,62 +157,59 @@ NanoShell.FullScreenPanel {
                 window.userInteracting = true;
                 window.updateState();
             }
-            Item {
-                width: window.width
-                height: Math.max(contentArea.height, window.height*2)
+            MouseArea {
+                width: parent.width
+                height: mainItem.height
+                onClicked: window.close();
+
                 Item {
-                    id: contentArea
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                    }
-                    height: children[0].implicitHeight
-                    onHeightChanged: {
-                        if (!window.userInteracting) {
-                            updateStateTimer.restart()
+                    id: mainItem
+                    x: drawerX
+                    width: drawerWidth
+                    height: Math.max(contentArea.height, window.height*2)
+                    Item {
+                        id: contentArea
+                        anchors {
+                            left: parent.left
+                            right: parent.right
                         }
-                    }
-                }
-                Rectangle {
-                    height: units.smallSpacing
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        top: contentArea.bottom
-                    }
-                    gradient: Gradient {
-                        GradientStop {
-                            position: 0.0
-                            color: Qt.rgba(0, 0, 0, 0.6)
+                        height: children[0].implicitHeight
+                        onHeightChanged: {
+                            if (!window.userInteracting) {
+                                updateStateTimer.restart()
+                            }
                         }
-                        GradientStop {
-                            position: 0.5
-                            color: Qt.rgba(0, 0, 0, 0.2)
+                    }
+                    Rectangle {
+                        height: units.smallSpacing
+                        anchors {
+                            left: parent.left
+                            right: parent.right
+                            top: contentArea.bottom
                         }
-                        GradientStop {
-                            position: 1.0
-                            color: "transparent"
+                        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"
+                            }
                         }
                     }
                 }
-                MouseArea {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        top: contentArea.bottom
-                    }
-                    height: window.height
-                    onClicked: window.close();
-                }
             }
         }
         Item {
             id: fixedArea
-            anchors {
-                left: parent.left
-                right: parent.right
-                top: parent.top
-            }
+            anchors.top: parent.top
+            x: drawerX
+            width: drawerWidth
             height: childrenRect.height
         }
     }

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

@@ -113,7 +113,7 @@ PlasmaCore.ColorScope {
 
     Rectangle {
         z: 1
-        parent: slidingPanel.visible ? panelContents : root
+        parent: slidingPanel.visible && !slidingPanel.wideScreen ? panelContents : root
         anchors {
             left: parent.left
             right: parent.right
@@ -173,9 +173,10 @@ PlasmaCore.ColorScope {
 
         anchors.fill: parent
         onPressed: {
+            slidingPanel.drawerX = Math.min(Math.max(0, mouse.x - slidingPanel.drawerWidth/2), slidingPanel.width - slidingPanel.drawerWidth)
             slidingPanel.userInteracting = true;
             oldMouseY = mouse.y;
-            slidingPanel.visible = true;
+            slidingPanel.showFullScreen();
         }
         onPositionChanged: {
             //var factor = (mouse.y - oldMouseY > 0) ? (1 - Math.max(0, (slidingArea.y + slidingPanel.overShoot) / slidingPanel.overShoot)) : 1