Enhance notification display and styling

Author: Axenide

modules/controls.py

@@ -205,9 +205,9 @@ def on_speaker_changed(self, *_):
             self.progress_bar.remove_style_class("muted")
             self.vol_label.remove_style_class("muted")
         self.progress_bar.value = self.audio.speaker.volume / 100
-        if self.audio.speaker.volume >= 75:
+        if self.audio.speaker.volume > 74:
             self.vol_button.get_child().set_markup(icons.vol_high)
-        elif self.audio.speaker.volume >= 1:
+        elif self.audio.speaker.volume > 0:
             self.vol_button.get_child().set_markup(icons.vol_medium)
         else:
             self.vol_button.get_child().set_markup(icons.vol_mute)
@@ -325,9 +325,9 @@ def on_brightness_changed(self, *_):
             return
         self.progress_bar.value = self.brightness.screen_brightness / self.brightness.max_screen
         brightness_percentage = (self.brightness.screen_brightness / self.brightness.max_screen) * 100
-        if brightness_percentage >= 75:
+        if brightness_percentage > 74:
             self.brightness_label.set_markup(icons.brightness_high)
-        elif brightness_percentage >= 25:
+        elif brightness_percentage > 24:
             self.brightness_label.set_markup(icons.brightness_medium)
         else:
             self.brightness_label.set_markup(icons.brightness_low)

modules/notch.py

@@ -4,6 +4,7 @@
 from fabric.widgets.centerbox import CenterBox
 from fabric.widgets.button import Button
 from fabric.widgets.stack import Stack
+from fabric.widgets.revealer import Revealer
 from fabric.widgets.wayland import WaylandWindow as Window
 from fabric.hyprland.widgets import ActiveWindow
 from fabric.utils.helpers import FormattedString, truncate
@@ -25,7 +26,7 @@ def __init__(self, **kwargs):
             name="notch",
             layer="top",
             anchor="top",
-            margin="-40px 10px 10px 10px",
+            margin="-40px 40px 10px 10px",
             keyboard_mode="none",
             exclusivity="normal",
             visible=True,
@@ -136,9 +137,33 @@ def __init__(self, **kwargs):
             )
         )
 
+        self.notification_revealer = Revealer(
+            name="notification-revealer",
+            transition_type="slide-down",
+            transition_duration=250,
+            child_revealed=False,
+        )
+
+        self.boxed_notification_revealer = Box(
+            name="boxed-notification-revealer",
+            orientation="v",
+            children=[
+                self.notification_revealer,
+            ]
+        )
+
+        self.notch_complete = Box(
+            name="notch-complete",
+            orientation="v",
+            children=[
+                self.notch_box,
+                self.boxed_notification_revealer,
+            ]
+        )
+
         self.hidden = False
 
-        self.add(self.notch_box)
+        self.add(self.notch_complete)
         self.show_all()
 
         self.add_keybinding("Escape", lambda *_: self.close_notch())
@@ -180,7 +205,6 @@ def open_notch(self, widget):
         widgets = {
             "launcher": self.launcher,
             "dashboard": self.dashboard,
-            "notification": self.notification,
             "overview": self.overview,
             "power": self.power,
             "bluetooth": self.bluetooth
@@ -213,7 +237,7 @@ def open_notch(self, widget):
         else:
             self.stack.set_visible_child(self.dashboard)
 
-        if widget == "dashboard":
+        if widget == "dashboard" or widget == "overview":
             self.bar.revealer.set_reveal_child(False)
         else:
             self.bar.revealer.set_reveal_child(True)

modules/notifications.py

@@ -45,6 +45,7 @@ def __init__(self, notification: Notification, timeout_ms=5000, **kwargs):
             name="notification-box",
             # spacing=8,
             orientation="v",
+            h_align="center",
             children=[
                 # self.create_header(notification),
                 self.create_content(notification),
@@ -223,10 +224,11 @@ def unhover_button(self, button):
 
 class NotificationContainer(Box):
     def __init__(self, **kwargs):
-        super().__init__(name="notification", orientation="v", spacing=4, v_expand=True, h_expand=True)
+        super().__init__(name="notification", orientation="v", spacing=4)
         self.notch = kwargs["notch"]
         self._server = Notifications()
         self._server.connect("notification-added", self.on_new_notification)
+        self._pending_removal = False
 
     def set_pointer_cursor(self, widget, cursor_name):
         """Cambia el cursor sobre un widget."""
@@ -236,18 +238,34 @@ def set_pointer_cursor(self, widget, cursor_name):
             window.set_cursor(cursor)
 
     def on_new_notification(self, fabric_notif, id):
-        for child in self.get_children():
-            child.destroy()
         notification = fabric_notif.get_notification_from_id(id)
         new_box = NotificationBox(notification)
-        self.add(new_box)
         notification.connect("closed", self.on_notification_closed)
-        self.notch.open_notch("notification")
+        
+        self._pending_removal = False
+        
+        for child in self.notch.notification_revealer:
+            child.destroy()
+            
+        self.notch.notification_revealer.add(new_box)
+        self.notch.notification_revealer.show_all()
+        self.notch.notification_revealer.set_reveal_child(True)
 
     def on_notification_closed(self, notification, reason):
-        self.notch.close_notch()
-        # Set cursor to default
+        self.notch.notification_revealer.set_reveal_child(False)
         self.set_pointer_cursor(self, "arrow")
         logger.info(f"Notification {notification.id} closed with reason: {reason}")
-        for child in self.get_children():
-            child.destroy()
+        
+        self._pending_removal = True
+        # Esperamos a que termine la transición antes de eliminar el hijo
+        GLib.timeout_add(
+            self.notch.notification_revealer.get_transition_duration(),
+            self._remove_notification_children
+        )
+    
+    def _remove_notification_children(self):
+        if self._pending_removal:
+            for child in self.notch.notification_revealer:
+                child.destroy()
+            self._pending_removal = False
+        return False  # Para que el timeout no se repita

styles/notch.css

@@ -1,7 +1,5 @@
 #notch-box {
-  margin: 10px;
-  margin-top: 0px;
-  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1);
+  margin: 0 60px 10px 60px;
 }
 
 #notch-box.hidden {
@@ -18,7 +16,7 @@
   min-height: 40px;
   min-width: 256px;
   border-radius: 0 0 20px 20px;
-  transition: all 0.5s cubic-bezier(0.5, 0.25, 0, 1.25);
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #notch-content.launcher {

styles/notifications.css

@@ -1,42 +1,54 @@
 #notification-action-buttons button.start-action {
-  border-radius: 20px;
+    border-radius: 20px;
 }
 
 #notification-action-buttons button {
-  background-color: var(--surface);
-  padding: 8px;
+    background-color: var(--surface);
+    padding: 8px;
 }
 
 #notification-action-buttons button:hover {
-  background-color: var(--surface-bright);
+    background-color: var(--surface-bright);
 }
 
 #notification-action-buttons button:active {
-  background-color: var(--primary);
+    background-color: var(--primary);
 }
 
 #notification-action-buttons button:active #button-label {
-  color: var(--shadow);
+    color: var(--shadow);
 }
 
 #notification-image image {
-  border-radius: 16px;
+    border-radius: 16px;
 }
 
 #notification-summary,
 #button-label {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 #notification-summary {
-  font-weight: bold;
-  color: var(--primary);
+    font-weight: bold;
+    color: var(--primary);
 }
 
 #notification-app-name {
-  color: var(--outline);
+    color: var(--outline);
 }
 
 #action-button {
-  margin-top: 8px;
+    margin-top: 8px;
 }
+
+#notification-box {
+    border-radius: 32px;
+    padding: 16px;
+    background-color: var(--shadow);
+    margin: 8px;
+    min-width: 336px;
+}
+
+#boxed-notification-revealer {
+    margin-top: -14px;
+}

styles/shadows.css

@@ -5,7 +5,8 @@
 #systray,
 #battery,
 #button-bar-vol,
-#control-small {
+#control-small,
+#notification-box {
   box-shadow: 0 0 4px alpha(black, 0.5);
 }