add animations to popup

modules/applets/VolPopup.qml

@@ -12,13 +12,8 @@ import QtQuick.Controls
 
 Rectangle {
     id: root
-    focus: true
     color: Colors.barBg
     radius: Config.cfg.appearance.rounding
-    Keys.onEscapePressed: event => {
-        win.visible = false;
-        event.accepted = true;
-    }
     implicitWidth: audioLayout.implicitWidth + 10
     implicitHeight: audioLayout.implicitHeight + 10
 

modules/applets/WallPicker.qml

@@ -11,7 +11,6 @@ Rectangle {
     color: "transparent"
     Rectangle {
         id: container
-        focus: true
         anchors.fill: parent
         color: Colors.base02
         radius: Config.cfg.appearance.rounding

modules/overlays/Top.qml

@@ -28,15 +28,15 @@ Variants {
         WlrLayershell.keyboardFocus: shown ? WlrKeyboardFocus.Exclusive : WlrKeyboardFocus.None
         Item {
             anchors.fill: parent
-            focus: true
+	    focus: true
             Keys.onEscapePressed: event => {
                 WidgetTracker.close();
                 event.accepted = true;
             }
             VolPopup {
+                id: volPopup
                 z: 1
-		id: volPopup
+                property bool shown: root.shown && WidgetTracker.current === "volume"
-                property bool shown: WidgetTracker.current === "volume"
                 opacity: shown ? 1 : 0
                 visible: opacity > 0
                 anchors.right: parent.right
@@ -60,19 +60,31 @@ Variants {
                 }
             }
             WallPicker {
+                id: wallpapers
                 z: 1
+                property bool shown: root.shown && WidgetTracker.current === "wallpapers"
+                opacity: shown ? 1 : 0
+                visible: opacity > 0
                 anchors.bottom: parent.bottom
                 anchors.left: parent.left
                 anchors.right: parent.right
                 anchors.margins: 20
                 implicitWidth: 1000
                 implicitHeight: 200
-                visible: WidgetTracker.current === "wallpapers"
+
-                Behavior on visible {
+                Behavior on opacity {
-                    PropertyAnimation {
+                    NumberAnimation {
-                        duration: 350
+                        duration: 200
-                        easing.type: Easing.InOutBack
+                        easing.type: Easing.OutCubic
-                        easing.overshoot: 1.2
+                    }
+                }
+                transform: Translate {
+                    y: wallpapers.shown ? 0 : 12
+                    Behavior on y {
+                        NumberAnimation {
+                            duration: 200
+                            easing.type: Easing.OutCubic
+                        }
                     }
                 }
             }