Use Plasma Theme and layout fixes

This moves all background rendering of elements in the top sliding panel to use the plasma theme, making full use of themes that can be downloaded from the store, doing so decreases the usage of the Qt.GraphicalEffects import which is slow and not in Qt6. There are some layout and behavioral fixes especially in widescreen mode

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

@@ -15,34 +15,16 @@ import org.kde.kirigami 2.12 as Kirigami
 QQC2.Control {
     id: root
 
-    required property color backgroundColor 
+    leftPadding: frameSvg.margins.left
+    topPadding: frameSvg.margins.top
+    rightPadding: frameSvg.margins.right
+    bottomPadding: frameSvg.margins.bottom
 
-    leftPadding: units.largeSpacing
+    background: PlasmaCore.FrameSvgItem {
-    topPadding: units.largeSpacing
+        id: frameSvg
-    rightPadding: units.largeSpacing
+        imagePath: "widgets/background"
-    bottomPadding: units.largeSpacing
-
-    background: Item {
         MouseArea {
             anchors.fill: parent
         }
-        PlasmaCore.FrameSvgItem {
-            imagePath: "widgets/panel-background"
-            prefix: "shadow"
-            anchors.fill: container
-            anchors.margins: -PlasmaCore.Units.smallSpacing
-        }
-        Rectangle {
-            id: container
-            color: backgroundColor
-            anchors {
-                fill: parent
-                leftMargin: PlasmaCore.Units.smallSpacing
-                rightMargin: PlasmaCore.Units.smallSpacing
-                topMargin: PlasmaCore.Units.smallSpacing
-                bottomMargin: PlasmaCore.Units.smallSpacing
-            }
-            radius: PlasmaCore.Units.smallSpacing
-        }
     }
 }

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

@@ -17,7 +17,6 @@ DrawerBackground {
     property ObjectModel fullRepresentationModel
     property ListView fullRepresentationView
 
-    backgroundColor: (applet.backgroundHints === PlasmaCore.Types.NoBackground) ? "transparent" : Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.backgroundColor, {"alpha": 0.8*255})
     visible: shouldBeVisible
 
     property bool shouldBeVisible: applet && (applet.status != PlasmaCore.Types.HiddenStatus && applet.status != PlasmaCore.Types.PassiveStatus)
@@ -35,7 +34,12 @@ DrawerBackground {
                     return;
                 }
             }
+            if (applet && applet.pluginName == "org.kde.plasma.notifications") {
+                fullRepresentationModel.insert(0, this);
+            } else {
                 fullRepresentationModel.append(this);
+            }
+
             fullRepresentationView.forceLayout();
 
             fullRepresentationView.currentIndex = ObjectModel.index;

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

@@ -28,8 +28,8 @@ NanoShell.FullScreenOverlay {
     readonly property int openedContentY: wideScreen || offset > (collapsedHeight + openThreshold) ? -topEmptyAreaHeight : offsetToContentY(collapsedHeight)
     readonly property int closedContentY: mainFlickable.contentHeight
     
-    readonly property bool wideScreen: width > height || width > units.gridUnit * 45
+    readonly property bool wideScreen: false//width > height || width > units.gridUnit * 45
-    readonly property int drawerWidth: wideScreen ? contentItem.implicitWidth : width
+    readonly property int drawerWidth: 400//wideScreen ? contentItem.implicitWidth : width
     
     property int drawerX: 0
     property alias fixedArea: mainScope
@@ -88,6 +88,11 @@ NanoShell.FullScreenOverlay {
         closeAnim.restart();
         initiallyOpened = false;
     }
+    function expand() {
+        cancelAnimations();
+        expandAnim.restart();
+        initiallyOpened = true;
+    }
     function updateState() {
         cancelAnimations();
         if (window.offset <= 0) {
@@ -140,6 +145,14 @@ NanoShell.FullScreenOverlay {
         easing.type: Easing.InOutQuad
         to: window.openedContentY
     }
+    PropertyAnimation {
+        id: expandAnim
+        target: mainFlickable
+        properties: "contentY"
+        duration: PlasmaCore.Units.longDuration
+        easing.type: Easing.InOutQuad
+        to: 0
+    }
 
     // fullscreen background
     Rectangle {
@@ -208,8 +221,8 @@ NanoShell.FullScreenOverlay {
                 PlasmaComponents.Control {
                     id: contentArea
                     z: 1
-                    x: drawerX
+                    x: Math.max(0, Math.min(window.drawerX, window.width - window.drawerWidth))
-                    width: drawerWidth
+                    width: Math.min(window.width, window.drawerWidth)
                 }
             }
         }

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

@@ -70,7 +70,7 @@ Item {
             fullContainer = fullContainerComponent.createObject(fullRepresentationView.contentItem, {"fullRepresentationModel": fullRepresentationModel, "fullRepresentationView": fullRepresentationView});
         }
 
-        applet.fullRepresentationItem.parent = fullContainer;
+       // applet.fullRepresentationItem.parent = fullContainer;
         fullContainer.applet = applet;
         fullContainer.contentItem = applet.fullRepresentationItem;
         //applet.fullRepresentationItem.anchors.fill = fullContainer;
@@ -209,12 +209,12 @@ Item {
 
         contentItem: MouseArea {
             // mousearea captures touch presses so that the flickable picks them up for swiping
-            implicitWidth: slidingPanel.width
+            implicitWidth: slidingPanel.wideScreen ? panelContents.implicitWidth : slidingPanel.width
             implicitHeight: Math.min(slidingPanel.height, quickSettings.implicitHeight)
 
             GridLayout {
                 id: panelContents
-                anchors.fill: parent
+                width: slidingPanel.wideScreen ? Math.min(parent.width, implicitWidth) : parent.width
                 
                 columns: slidingPanel.wideScreen ? 2 : 1
                 rows: slidingPanel.wideScreen ? 1 : 2
@@ -229,18 +229,21 @@ Item {
                     Layout.preferredWidth: slidingPanel.wideScreen ? Math.min(slidingPanel.width/2, units.gridUnit * 25) : panelContents.width
 
                     parentSlidingPanel: slidingPanel
-                    onCloseRequested: slidingPanel.hide()
+                    onExpandRequested: slidingPanel.expand()
+                    onCloseRequested: slidingPanel.close()
                 }
 
                 // notifications
                 ListView {
                     id: fullRepresentationView
                     implicitHeight: units.gridUnit * 20
-                    Layout.topMargin: slidingPanel.wideScreen ? 0 : Math.round(Kirigami.Units.gridUnit * 1.5) // add height of bottom bar
                     Layout.preferredWidth: slidingPanel.wideScreen ? Math.min(slidingPanel.width/2, quickSettings.width*fullRepresentationModel.count) : panelContents.width 
-                    Layout.preferredHeight: Math.min(plasmoid.screenGeometry.height - quickSettings.implicitHeight - bottomBar.height + slidingPanel.topEmptyAreaHeight, implicitHeight)
+                    Layout.preferredHeight: slidingPanel.wideScreen
+                            ? Math.min(units.gridUnit * 20, Math.max(units.gridUnit * 15, quickSettings.implicitHeight))
+                            : Math.min(plasmoid.screenGeometry.height - quickSettings.implicitHeight - bottomBar.height + slidingPanel.topEmptyAreaHeight, implicitHeight)
+
                     z: 1
-                    interactive: count > 0 && width < contentWidth
+                    interactive: true//count > 0 && width < contentWidth
 
                     clip: slidingPanel.wideScreen
                     y: slidingPanel.wideScreen ? 0 : quickSettings.trueHeight
@@ -251,11 +254,11 @@ Item {
                             return fullRepresentationModel.count > 0 && slidingPanel.offset / slidingPanel.collapsedHeight;
                         }
                     }
-                    preferredHighlightBegin: slidingPanel.drawerX
+                    //preferredHighlightBegin: slidingPanel.drawerX
 
                     cacheBuffer: width * 100
                     highlightFollowsCurrentItem: true
-                    highlightRangeMode: ListView.StrictlyEnforceRange
+                    highlightRangeMode: ListView.ApplyRange
                     highlightMoveDuration: units.longDuration
                     snapMode: slidingPanel.wideScreen ? ListView.NoSnap : ListView.SnapOneItem
                     model: ObjectModel {
@@ -279,8 +282,6 @@ Item {
                 right: parent.right
                 bottom: parent.bottom
             }
-            backgroundColor: Kirigami.ColorUtils.adjustColor(PlasmaCore.Theme.backgroundColor, {"alpha": 0.8*255})
-
             parent: slidingPanel.fixedArea
             opacity: fullRepresentationView.opacity
             visible: !slidingPanel.wideScreen && fullRepresentationModel.count > 1

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

@@ -24,19 +24,23 @@ import "../"
 Item {
     id: root
     implicitWidth: column.implicitWidth + PlasmaCore.Units.smallSpacing * 6
-    implicitHeight: column.implicitHeight + PlasmaCore.Units.smallSpacing * 2
+    implicitHeight: background.implicitHeight
 
+    signal expandRequested
     signal closeRequested
     signal closed
 
     property bool expandedMode: parentSlidingPanel.wideScreen
-    readonly property real expandedRatio: expandedMode ? 1 : Math.max(0, Math.min(1, (parentSlidingPanel.offset - (parentSlidingPanel.topPanelHeight + firstRowHeight) - parentSlidingPanel.topPanelHeight) / otherRowsHeight + 0.05)) // HACK: add 0.05 to prevent jumping since this height isn't exact
+    readonly property real expandedRatio: expandedMode
+                    ? 1
+                    // This counts also all spacings in form of Lyout.topMargin that some elements has
+                    : Math.max(0, Math.min(1, (parentSlidingPanel.offset - firstRowHeight - indicatorsRow.height - Kirigami.Units.largeSpacing - Kirigami.Units.smallSpacing * 2 - bottomBar.height - background.margins.top -background.fixedMargins.bottom) / otherRowsHeight + 0.05)) // HACK: add 0.05 to prevent jumping since this height isn't exact
 
     readonly property real topEmptyAreaHeight: parentSlidingPanel.userInteracting
         ? (root.height - collapsedHeight) * (1 - expandedRatio)
         : (expandedMode ? 0 : root.height - collapsedHeight)
      
-    readonly property real collapsedHeight: parentSlidingPanel.topPanelHeight + firstRowHeight + PlasmaCore.Units.smallSpacing * 2
+    readonly property real collapsedHeight: parentSlidingPanel.topPanelHeight + firstRowHeight + bottomBar.height + background.margins.top + background.fixedMargins.bottom
     readonly property real firstRowHeight: flow.children[0].height
     readonly property real otherRowsHeight: column.implicitHeight - firstRowHeight - parentSlidingPanel.topPanelHeight
     
@@ -67,80 +71,65 @@ Item {
 
     property QuickSettingsModel quickSettingsModel: QuickSettingsModel {}
     
-    // shadow below panel (only if not widescreen)
-    Rectangle {
-        visible: !parentSlidingPanel.wideScreen
-        anchors.bottom: background.bottom
-        anchors.left: background.left
-        anchors.right: background.right
-        height: PlasmaCore.Units.gridUnit
-        gradient: Gradient {
-            GradientStop {
-                position: 0.0
-                color: Qt.rgba(0, 0, 0, 0.05)
-            }
-            GradientStop {
-                position: 1.0
-                color: "transparent"
-            }
-        }
-    }
-    // shadow for bottom bar
-    RectangularGlow {
-        z: 1
-        anchors.topMargin: 1
-        anchors.fill: bottomBar
-        cached: true
-        glowRadius: 4
-        spread: 0.2
-        color: Qt.rgba(0, 0, 0, 0.1)
-    }
-    // shadow for whole panel (only if widescreen)
-    RectangularGlow {
-        visible: parentSlidingPanel.wideScreen
-        anchors.topMargin: 1
-        anchors.top: background.top
-        anchors.left: background.left
-        anchors.right: background.right
-        anchors.bottom: bottomBar.bottom
-        cached: true
-        glowRadius: 4
-        spread: 0.2
-        color: Qt.rgba(0, 0, 0, 0.1)
-    }
     
     // bottom "handle bar"
-    Rectangle {
+    Item {
         id: bottomBar
-        anchors.top: background.bottom
+        anchors {
-        anchors.left: background.left
+            bottom: background.bottom
-        anchors.right: background.right
+            left: background.left
-        color: PlasmaCore.Theme.backgroundColor
+            right: background.right
-        height: Math.round(PlasmaCore.Units.gridUnit * 1.3)
+            leftMargin: background.fixedMargins.left
-        z: 1
+            rightMargin: background.fixedMargins.right
-        
+            bottomMargin: background.fixedMargins.bottom
-        Kirigami.Icon {
+        }
         visible: !parentSlidingPanel.wideScreen
+        height: visible ? Math.round(PlasmaCore.Units.gridUnit * 1.3) : 0
+        z: 1
+        Kirigami.Separator {
+            anchors {
+                left: parent.left
+                right: parent.right
+            }
             color: PlasmaCore.Theme.disabledTextColor
-            source: expandedRatio >= 1 ? "go-up-symbolic" : "go-down-symbolic"
+            opacity: 0.3
+        }
+        Kirigami.Icon {
+            color: PlasmaCore.Theme.disabledTextColor
+            source: expandedRatio >= 0.5 ? "go-up-symbolic" : "go-down-symbolic"
             implicitWidth: PlasmaCore.Units.gridUnit
             implicitHeight: width
             anchors.centerIn: parent
         }
+        TapHandler {
+            onTapped: {
+                if (root.expandedMode) {
+                    root.closeRequested();
+                } else {
+                    root.expandRequested();
+                    root.expandedMode = true;
+                }
+            }
+        }
     }
     
-    Rectangle {
+    PlasmaCore.FrameSvgItem {
         id: background
-        color: PlasmaCore.Theme.backgroundColor
+        implicitHeight: column.implicitHeight + bottomBar.height + margins.top + fixedMargins.bottom
+        enabledBorders: parentSlidingPanel.wideScreen ? PlasmaCore.FrameSvg.AllBorders : PlasmaCore.FrameSvg.BottomBorder
         anchors.fill: parent
+        imagePath: "widgets/background"
 
         ColumnLayout {
             id: column
-            anchors.leftMargin: PlasmaCore.Units.smallSpacing
+            anchors {
-            anchors.rightMargin: PlasmaCore.Units.smallSpacing
+                leftMargin: parent.fixedMargins.left
-            anchors.left: parent.left
+                rightMargin: parent.fixedMargins.right
-            anchors.right: parent.right
+                bottomMargin: parent.fixedMargins.bottom + bottomBar.height
-            anchors.bottom: parent.bottom
+                left: parent.left
+                right: parent.right
+                bottom: parent.bottom
+            }
             spacing: 0
             clip: expandedRatio > 0 && expandedRatio < 1 // only clip when necessary to improve performance
             
@@ -157,7 +146,7 @@ Item {
                 showGradientBackground: false
                 showDropShadow: false
                 transform: Translate {
-                    y: otherRowsHeight * (1 - root.expandedRatio) - PlasmaCore.Units.smallSpacing
+                    y: otherRowsHeight * (1 - root.expandedRatio)
                 }
             }
             
@@ -165,14 +154,14 @@ Item {
                 id: flow
                 Layout.alignment: Qt.AlignHCenter
                 Layout.fillWidth: true
-                Layout.leftMargin: units.smallSpacing + (units.largeSpacing - units.smallSpacing) * root.expandedRatio
+                Layout.leftMargin: root.expandedRatio < 0.4 ? -background.fixedMargins.left * (1 - root.expandedRatio) : 0
-                Layout.rightMargin: units.smallSpacing + (units.largeSpacing - units.smallSpacing) * root.expandedRatio
+                Layout.rightMargin: root.expandedRatio < 0.4 ? -background.fixedMargins.right * (1 - root.expandedRatio) : 0
                 Layout.topMargin: units.largeSpacing
                 
                 readonly property real cellSizeHint: units.iconSizes.large + units.smallSpacing * 6
                 readonly property real columns: Math.floor(width / cellSizeHint)
                 readonly property real columnsWhenCollapsed: 1.05 // .05 to account for the fact that we have an overshoot on the panel on first flick, we don't want the movement to be jarring
-                readonly property real columnWidth: Math.floor(width / (columns + (columnsWhenCollapsed - columnsWhenCollapsed * root.expandedRatio)))
+                readonly property real columnWidth: Math.floor(width / columns)
                 
                 spacing: 0
                 Repeater {