simplify a lot top panel

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

@@ -0,0 +1,36 @@
+/*
+ *  Copyright 2019 Marco Martin <mart@kde.org>
+ *
+ *  This program is free software; you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation; either version 2 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program; if not, write to the Free Software
+ *  Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  2.010-1301, USA.
+ */
+
+import QtQuick 2.6
+import QtQuick.Layouts 1.4
+import QtQuick.Controls 2.4 as QQC2
+
+import org.kde.plasma.core 2.0 as PlasmaCore
+
+
+QQC2.Control {
+    id: root
+    leftPadding: background.margins.left
+    topPadding: background.margins.top
+    rightPadding: background.margins.right
+    bottomPadding: background.margins.bottom
+
+    background: PlasmaCore.FrameSvgItem {
+        imagePath: "widgets/background"
+    }
+}

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

@@ -21,42 +21,40 @@ import QtQuick 2.0
 import QtQuick.Layouts 1.1
 import QtQuick.Window 2.2
 import org.kde.plasma.core 2.0 as PlasmaCore
+import org.kde.plasma.components 3.0 as PlasmaComponents
 import org.kde.plasma.private.nanoshell 2.0 as NanoShell
 
 NanoShell.FullScreenOverlay {
     id: window
 
     property int offset: 0
-    property int peekHeight
+    property int openThreshold
     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
+    readonly property int drawerHeight: contentArea.height + headerHeight
     property int drawerX: 0
 
-    color: Qt.rgba(0, 0, 0, 0.6 * Math.min(1, offset/contentArea.height))
+    color: Qt.rgba(0, 0, 0, 0.6 * Math.min(1, offset/drawerHeight))
-    property alias contents: contentArea.data
+    property alias contentItem: contentArea.contentItem
     property int headerHeight
 
     width: Screen.width
     height: Screen.height
+    
 
-    property alias fixedArea: fixedArea
     function open() {
         window.showFullScreen();
-        peekAnim.running = true;
+        open.running = true;
     }
     function close() {
         closeAnim.running = true;
     }
     function updateState() {
-        if (expanded) {
+        print("SUKUNNU"+offset + " "+openThreshold)
-            openAnim.running = true;
+        if (offset < openThreshold) {
-        } else if (offset < peekHeight / 2) {
             close();
-        } else if (offset < peekHeight) {
+        } else {
-            open();
-        } else if (mainFlickable.contentY < 0) {
             openAnim.running = true;
         }
     }
@@ -75,8 +73,6 @@ NanoShell.FullScreenOverlay {
             window.width = Screen.width;
             window.height = Screen.height;
             window.requestActivate();
-        } else {
-            window.expanded = false;
         }
     }
     SequentialAnimation {
@@ -91,19 +87,10 @@ NanoShell.FullScreenOverlay {
         }
         ScriptAction {
             script: {
-                 window.visible = false;
+                window.visible = false;
             }
         }
     }
-    PropertyAnimation {
-        id: peekAnim
-        target: window
-        duration: units.longDuration
-        easing.type: Easing.InOutQuad
-        properties: "offset"
-        from: window.offset
-        to: window.peekHeight - headerHeight
-    }
     PropertyAnimation {
         id: openAnim
         target: window
@@ -111,38 +98,27 @@ NanoShell.FullScreenOverlay {
         easing.type: Easing.InOutQuad
         properties: "offset"
         from: window.offset
-        to: contentArea.height
+        to: drawerHeight
     }
 
     PlasmaCore.ColorScope {
         anchors.fill: parent
-        y: Math.min(0, -height + window.offset)
-        //colorGroup: PlasmaCore.Theme.ComplementaryColorGroup
-
-        Rectangle {
-            x: drawerX
-            anchors.top: parent.top
-            height: contentArea.height - mainFlickable.contentY
-            color: PlasmaCore.ColorScope.backgroundColor
-            width: drawerWidth
-        }
 
         Flickable {
             id: mainFlickable
             anchors.fill: parent
-            interactive: !window.expanded
             Binding {
                 target: mainFlickable
                 property: "contentY"
-                value: -window.offset + contentArea.height - window.headerHeight
+                value: -window.offset + drawerHeight
                 when: !mainFlickable.moving && !mainFlickable.dragging && !mainFlickable.flicking
             }
             //no loop as those 2 values compute to exactly the same
             onContentYChanged: {
-                window.offset = -contentY + contentArea.height - window.headerHeight
+                window.offset = -contentY + drawerHeight
-                if (contentY > contentArea.height - headerHeight) {
+              /*  if (contentY > drawerHeight) {
-                    contentY = contentArea.height - headerHeight;
+                    contentY = d;
-                }
+                }*/
             }
             contentWidth: window.width
             contentHeight: window.height*2
@@ -158,59 +134,17 @@ NanoShell.FullScreenOverlay {
                 window.updateState();
             }
             MouseArea {
+                id: dismissArea
                 width: parent.width
-                height: mainItem.height
+                height: mainFlickable.contentHeight
                 onClicked: window.close();
-
+                PlasmaComponents.Control {
-                Item {
+                    id: contentArea
-                    id: mainItem
+                    y: headerHeight
                     x: drawerX
                     width: drawerWidth
-                    height: Math.max(contentArea.height, window.height*2)
-                    Item {
-                        id: contentArea
-                        anchors {
-                            left: parent.left
-                            right: parent.right
-                        }
-                        height: children[0].implicitHeight
-                        onHeightChanged: {
-                            if (!window.userInteracting) {
-                                updateStateTimer.restart()
-                            }
-                        }
-                    }
-                    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)
-                            }
-                            GradientStop {
-                                position: 0.5
-                                color: Qt.rgba(0, 0, 0, 0.2)
-                            }
-                            GradientStop {
-                                position: 1.0
-                                color: "transparent"
-                            }
-                        }
-                    }
                 }
             }
         }
-        Item {
-            id: fixedArea
-            anchors.top: parent.top
-            x: drawerX
-            width: drawerWidth
-            height: childrenRect.height
-        }
     }
 }

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

@@ -197,12 +197,11 @@ PlasmaCore.ColorScope {
             slidingPanel.drawerX = Math.min(Math.max(0, mouse.x - slidingPanel.drawerWidth/2), slidingPanel.width - slidingPanel.drawerWidth)
             slidingPanel.userInteracting = true;
             oldMouseY = mouse.y;
+            slidingPanel.offset = units.gridUnit * 2;
             slidingPanel.showFullScreen();
         }
         onPositionChanged: {
-            //var factor = (mouse.y - oldMouseY > 0) ? (1 - Math.max(0, (slidingArea.y + slidingPanel.overShoot) / slidingPanel.overShoot)) : 1
+            slidingPanel.offset = slidingPanel.offset + (mouse.y - oldMouseY);
-            var factor = 1;
-            slidingPanel.offset = slidingPanel.offset + (mouse.y - oldMouseY) * factor;
             oldMouseY = mouse.y;
         }
         onReleased: {
@@ -215,52 +214,29 @@ PlasmaCore.ColorScope {
         id: slidingPanel
         width: plasmoid.availableScreenRect.width
         height: plasmoid.availableScreenRect.height
-        peekHeight: quickSettingsParent.height + notificationsParent.minimumHeight + root.height
+        openThreshold: units.gridUnit * 10
         headerHeight: root.height
-        onExpandedChanged: {
+
-            modeSwitchAnim.running = false;
+        contentItem: ColumnLayout {
-            modeSwitchAnim.to = expanded ? width : 0
-            modeSwitchAnim.running = true;
-        }
-        contents: Item {
             id: panelContents
             anchors.fill: parent
-            implicitHeight: slidingPanel.expanded ? (slidingPanel.height-slidingPanel.headerHeight)*0.8 :  (quickSettingsParent.height + notificationsParent.height + root.height)
+
-            Rectangle {
+            DrawerBackground {
-                id: quickSettingsParent
+                Layout.fillWidth: true
-                parent: slidingPanel.fixedArea
+                contentItem: QuickSettings {
-                color: PlasmaCore.ColorScope.backgroundColor
-                z: 2
-                width: parent.width
-                y: Math.min(0, slidingPanel.offset - height - root.height)
-                height: quickSettings.Layout.minimumHeight
-                QuickSettings {
                     id: quickSettings
-                    anchors.fill: parent
-                }
-                Rectangle {
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        bottom:parent.bottom
-                    }
-                    height: units.devicePixelRatio
-                    color: PlasmaCore.ColorScope.textColor
-                    opacity: 0.2
-                    visible: slidingPanel.offset + slidingPanel.headerHeight < panelContents.height
                 }
             }
-            Item {
+
-                id: notificationsParent
+            DrawerBackground {
-                anchors {
+                Layout.fillWidth: true
-                    left: parent.left
+                contentItem: Item {
-                    bottom: parent.bottom
+                    id: notificationsParent
-                    right: parent.right
+
-                    bottomMargin: root.height
+                    property var applet
+                    implicitHeight: applet ? applet.fullRepresentationItem.Layout.maximumHeight : 0
+                    property int minimumHeight: applet ? applet.fullRepresentationItem.Layout.minimumHeight : 0
                 }
-                property var applet
-                height: applet ? applet.fullRepresentationItem.Layout.maximumHeight : 0
-                property int minimumHeight: applet ? applet.fullRepresentationItem.Layout.minimumHeight : 0
             }
         }
     }

containments/panel/package/contents/ui/quicksettings/Delegate.qml

@@ -32,7 +32,7 @@ RowLayout {
         Layout.minimumHeight: width
         color: toggled ? 
             Qt.rgba(PlasmaCore.ColorScope.highlightColor.r, PlasmaCore.ColorScope.highlightColor.g, PlasmaCore.ColorScope.highlightColor.b, iconMouseArea.pressed ? 0.5 : 0.3) :
-            Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, iconMouseArea.pressed ? 0.5 : 0.2)
+            Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, iconMouseArea.pressed ? 0.5 : 0.1)
 
         PlasmaCore.IconItem {
             colorGroup: PlasmaCore.ColorScope.colorGroup
@@ -61,7 +61,7 @@ RowLayout {
     Rectangle {
         Layout.fillWidth: true
         Layout.fillHeight: true
-        color: Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, labelMouseArea.pressed ? 0.5 : 0.2)
+        color: Qt.rgba(PlasmaCore.ColorScope.textColor.r, PlasmaCore.ColorScope.textColor.g, PlasmaCore.ColorScope.textColor.b, labelMouseArea.pressed ? 0.5 : 0.1)
         PlasmaComponents.Label {
             anchors {
                 fill: parent

containments/panel/package/contents/ui/quicksettings/QuickSettings.qml

@@ -25,6 +25,9 @@ import org.kde.plasma.components 2.0 as PlasmaComponents
 Item {
     id: root
 
+    implicitWidth: flow.implicitWidth + units.smallSpacing * 6
+    implicitHeight: flow.implicitHeight + units.smallSpacing * 6
+
     function toggleAirplane() {
         print("toggle airplane mode")
     }
@@ -180,7 +183,7 @@ Item {
         id: flow
         anchors {
             fill: parent
-            margins: units.largeSpacing
+            margins: units.smallSpacing*3
         }
         spacing: units.largeSpacing
         Repeater {