wactioncenter: media controls

dots/.config/quickshell/ii/modules/waffle/looks/WBarAttachedPanelContent.qml

@@ -12,8 +12,6 @@ Item {
 
     signal closed()
 
-    property alias border: borderRect
-    property alias borderColor: borderRect.border.color
     required property Item contentItem
     property real visualMargin: 12
     property int closeAnimDuration: 150
@@ -24,32 +22,19 @@ Item {
 
     readonly property bool barAtBottom: Config.options.waffles.bar.bottom
 
-    implicitHeight: borderRect.implicitHeight
-    implicitWidth: borderRect.implicitWidth
-
-    WRectangularShadow {
-        target: borderRect
-    }
-
-    Rectangle {
-        id: borderRect
-        z: 1
-
-        color: "transparent"
-        radius: Looks.radius.large
-        border.color: Looks.colors.bg2Border
-        border.width: 1
-        implicitWidth: contentItem.implicitWidth + border.width * 2
-        implicitHeight: contentItem.implicitHeight + border.width * 2
+    implicitHeight: contentItem.implicitHeight + visualMargin * 2
+    implicitWidth: contentItem.implicitWidth + visualMargin * 2
 
+    Item {
+        id: panelContent
         anchors {
             left: parent.left
             right: parent.right
             top: root.barAtBottom ? undefined : parent.top
             bottom: root.barAtBottom ? parent.bottom : undefined
             // Opening anim
-            bottomMargin: root.barAtBottom ? sourceEdgeMargin : 0
-            topMargin: root.barAtBottom ? 0 : sourceEdgeMargin
+            bottomMargin: root.barAtBottom ? sourceEdgeMargin : root.visualMargin
+            topMargin: root.barAtBottom ? root.visualMargin : sourceEdgeMargin
         }
 
         Component.onCompleted: {
@@ -59,9 +44,9 @@ Item {
         property real sourceEdgeMargin: -(implicitHeight + root.visualMargin)
         PropertyAnimation {
             id: openAnim
-            target: borderRect
+            target: panelContent
             property: "sourceEdgeMargin"
-            to: 0
+            to: root.visualMargin
             duration: 200
             easing.type: Easing.BezierSpline
             easing.bezierCurve: Looks.transition.easing.bezierCurve.easeIn
@@ -69,7 +54,7 @@ Item {
         SequentialAnimation {
             id: closeAnim
             PropertyAnimation {
-                target: borderRect
+                target: panelContent
                 property: "sourceEdgeMargin"
                 to: -(implicitHeight + root.visualMargin)
                 duration: root.closeAnimDuration
@@ -82,23 +67,8 @@ Item {
                 }
             }
         }
-    }
-
-    Item {
-        id: contentArea
-        z: 0
-        anchors.fill: borderRect
-        anchors.margins: borderRect.border.width
-        implicitWidth: contentItem.implicitWidth
-        implicitHeight: contentItem.implicitHeight
-        layer.enabled: true
-        layer.effect: OpacityMask {
-            maskSource: Rectangle {
-                width: contentArea.width
-                height: contentArea.height
-                radius: borderRect.radius - borderRect.border.width
-            }
-        }
+        implicitWidth: root.contentItem.implicitWidth
+        implicitHeight: root.contentItem.implicitHeight
         children: [root.contentItem]
-    }
+    }    
 }

dots/.config/quickshell/ii/modules/waffle/looks/WPane.qml

@@ -0,0 +1,58 @@
+pragma ComponentBehavior: Bound
+import QtQuick
+import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
+import Quickshell
+import qs
+import qs.services
+import qs.modules.common
+import qs.modules.waffle.looks
+
+Item {
+    id: root
+    required property Item contentItem
+    property real radius: Looks.radius.large
+    property alias border: borderRect
+    property alias borderColor: borderRect.border.color
+
+    implicitWidth: contentItem.implicitWidth
+    implicitHeight: contentItem.implicitHeight
+
+    WRectangularShadow {
+        target: borderRect
+    }
+
+    Rectangle {
+        id: borderRect
+        z: 1
+
+        color: "transparent"
+        radius: root.radius
+        border.color: Looks.colors.bg2Border
+        border.width: 1
+        implicitWidth: contentItem.implicitWidth + border.width * 2
+        implicitHeight: contentItem.implicitHeight + border.width * 2
+        anchors.fill: contentRect
+        anchors.margins: -border.width
+    }
+
+    Rectangle {
+        id: contentRect
+        anchors.centerIn: parent
+        z: 0
+        
+        color: Looks.colors.bgPanelFooterBase
+        implicitWidth: contentItem.implicitWidth
+        implicitHeight: contentItem.implicitHeight
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            maskSource: Rectangle {
+                id: contentAreaMask
+                width: contentRect.width
+                height: contentRect.height
+                radius: root.radius - borderRect.border.width
+            }
+        }
+        children: [root.contentItem]
+    }
+}

dots/.config/quickshell/ii/modules/waffle/looks/WStackView.qml

@@ -11,11 +11,7 @@ StackView {
     property list<real> fadeBezierCurve: Looks.transition.easing.bezierCurve.easeInOut
     clip: true
 
-    property alias color: background.color
-    background: Rectangle {
-        id: background
-        color: Looks.colors.bgPanelFooterBase
-    }
+    background: null
 
     pushEnter: Transition {
         XAnimator {