From fb6cd03b5ae8f0f093c739c9c943033f43b8e82f Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Sat, 7 Dec 2024 16:49:19 -0800
Subject: [PATCH] ui: Use collapse instead of dropdown for notification in
 Bootstrap 5

- In Bootstrap 5, dropdown button and dropdown menu not being siblings does not
work like it did in Bootstrap 4.

- Use collapse component instead of dropdown. Collapse component does not have
the same limitations. Apply some of the styling from dropdown-menu to restore
previous appearance.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: Veiko Aasa <veiko17@disroot.org>
---
 plinth/templates/notifications-dropdown.html |  4 ++--
 plinth/templates/notifications.html          |  4 ++--
 static/themes/default/css/main.css           | 15 ++++++++++++---
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/plinth/templates/notifications-dropdown.html b/plinth/templates/notifications-dropdown.html
index f016fd6f0..50e9c132c 100644
--- a/plinth/templates/notifications-dropdown.html
+++ b/plinth/templates/notifications-dropdown.html
@@ -7,9 +7,9 @@
 {% load i18n %}
 
 {% if notifications %}
-  <li class="nav-item dropdown notifications-dropdown">
+  <li class="nav-item notifications-dropdown">
     <a href="#" title="{% trans "Notifications" %}"
-       class="nav-link dropdown-toggle" data-bs-toggle="dropdown"
+       class="nav-link dropdown-toggle" data-bs-toggle="collapse"
        role="button" aria-expanded="false" aria-haspopup="true"
        data-bs-target=".notifications">
       <span class="fa fa-bell nav-icon"></span>
diff --git a/plinth/templates/notifications.html b/plinth/templates/notifications.html
index 7a340b75a..7a26e8b13 100644
--- a/plinth/templates/notifications.html
+++ b/plinth/templates/notifications.html
@@ -8,8 +8,8 @@
 {% load static %}
 
 {% if notifications %}
-  <div class="notifications dropdown">
-    <ul class="dropdown-menu" role="menu">
+  <div class="notifications collapse">
+    <ul>
       {% for note in notifications %}
         <li class="notification notification-{{ note.severity }}">
           {% if note.data.app_name %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index 26d1f8f60..e5d9d10a7 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -941,16 +941,25 @@ input[type='submit'].running-status-button {
 .notifications {
     margin-left: -0.9375rem;
     margin-right: -0.9375rem;
+    position: relative;
+    transition: none;  /* Remove Bootstrap's default animation */
 }
 
-.notifications .dropdown-menu {
+.notifications.collapsing {
+    display: none;  /* Don't show up with blue background momentarily */
+}
+
+.notifications > ul {
+    position: absolute; /* Don't increase parent's height */
+    list-style: none;
     width: 100%;
     padding: 0;
     float: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
     margin-top: 0;
     background-clip: border-box;
+    background-color: var(--bs-body-bg);
+    border: 1px solid rgba(0,0,0,0.15);
+    border-radius: 0 0 0.25em 0.25em;
 }
 
 /* Style for individual notification */