prettier osd

modules/Osd.qml

@@ -3,72 +3,120 @@ import Quickshell
 import Quickshell.Wayland
 import "." as M
 
+// OSD overlay — slides out from the bar, centered on screen.
+// Attached to the bar (square top corners, flush below it).
 PanelWindow {
     id: root
 
     required property var screen
 
-    visible: M.OsdState.visible
+    // Stay visible while animating out
+    visible: M.OsdState.visible || hideAnim.running
     color: "transparent"
 
     WlrLayershell.layer: WlrLayer.Overlay
     WlrLayershell.exclusiveZone: 0
     WlrLayershell.namespace: "nova-osd"
+    mask: Region {}
 
-    anchors.bottom: true
+    anchors.top: true
     anchors.left: true
 
-    margins.bottom: Math.round(screen.height / 3)
+    margins.top: 0
     margins.left: Math.round((screen.width - implicitWidth) / 2)
 
     implicitWidth: 200
     implicitHeight: 48
 
-    Rectangle {
+    // Slide + fade animation state
-        anchors.fill: parent
+    property bool _shown: M.OsdState.visible
-        color: M.Theme.base00
+    on_ShownChanged: {
-        opacity: Math.max(M.Theme.barOpacity, 0.85)
+        if (_shown) {
-        radius: M.Theme.radius
+            hideAnim.stop();
+            showAnim.start();
+        } else {
+            showAnim.stop();
+            hideAnim.start();
+        }
     }
 
-    Row {
+    ParallelAnimation {
-        anchors.centerIn: parent
+        id: showAnim
-        spacing: 10
+        NumberAnimation { target: content; property: "opacity"; to: 1; duration: 150; easing.type: Easing.OutCubic }
+        NumberAnimation { target: content; property: "y"; to: 0; duration: 200; easing.type: Easing.OutCubic }
+    }
 
-        Text {
+    ParallelAnimation {
-            text: M.OsdState.icon
+        id: hideAnim
-            color: M.Theme.base05
+        NumberAnimation { target: content; property: "opacity"; to: 0; duration: 250; easing.type: Easing.InCubic }
-            font.pixelSize: M.Theme.fontSize + 4
+        NumberAnimation { target: content; property: "y"; to: -content.height; duration: 250; easing.type: Easing.InCubic }
-            font.family: M.Theme.iconFontFamily
+    }
-            anchors.verticalCenter: parent.verticalCenter
+
+    Item {
+        id: content
+        anchors.left: parent.left
+        anchors.right: parent.right
+        height: root.implicitHeight
+        opacity: 0
+        y: -height
+
+        // Background — flush with bar above
+        Rectangle {
+            anchors.fill: parent
+            color: M.Theme.base00
+            opacity: Math.max(M.Theme.barOpacity, 0.85)
+            topLeftRadius: 0
+            topRightRadius: 0
+            bottomLeftRadius: M.Theme.radius
+            bottomRightRadius: M.Theme.radius
         }
 
-        Item {
+        Row {
-            width: 120
+            anchors.centerIn: parent
-            height: 6
+            spacing: 10
-            anchors.verticalCenter: parent.verticalCenter
 
-            Rectangle {
+            // Icon
-                anchors.fill: parent
+            Text {
-                color: M.Theme.base02
+                text: M.OsdState.icon
-                radius: 3
-            }
-
-            Rectangle {
-                width: parent.width * Math.min(1, Math.max(0, M.OsdState.value))
-                height: parent.height
                 color: M.Theme.base0D
-                radius: 3
+                font.pixelSize: M.Theme.fontSize + 6
+                font.family: M.Theme.iconFontFamily
+                anchors.verticalCenter: parent.verticalCenter
             }
-        }
 
-        Text {
+            // Progress bar
-            text: Math.round(M.OsdState.value * 100) + "%"
+            Item {
-            color: M.Theme.base05
+                width: 120
-            font.pixelSize: M.Theme.fontSize
+                height: 6
-            font.family: M.Theme.fontFamily
+                anchors.verticalCenter: parent.verticalCenter
-            anchors.verticalCenter: parent.verticalCenter
+
-            width: 30
+                Rectangle {
+                    anchors.fill: parent
+                    color: M.Theme.base02
+                    radius: 3
+                }
+
+                Rectangle {
+                    width: parent.width * Math.min(1, Math.max(0, M.OsdState.value))
+                    height: parent.height
+                    color: M.Theme.base0D
+                    radius: 3
+
+                    Behavior on width {
+                        NumberAnimation { duration: 120; easing.type: Easing.OutCubic }
+                    }
+                }
+            }
+
+            // Percentage
+            Text {
+                text: Math.round(M.OsdState.value * 100) + "%"
+                color: M.Theme.base05
+                font.pixelSize: M.Theme.fontSize
+                font.family: M.Theme.fontFamily
+                anchors.verticalCenter: parent.verticalCenter
+                width: 32
+            }
         }
     }
 }