Improvements for alert notifications

- Dismissable
- Delete after a certain amount of time

InvenTree/InvenTree/static/css/inventree.css

@@ -745,13 +745,7 @@ input[type="submit"] {
 }
 
 .notification-area {
-    position: fixed;
-    top: 0px;
-    margin-top: 20px;
-    width: 100%;
-    padding: 20px;
-    z-index: 5000;
-    pointer-events: none; /* Prevent this div from blocking links underneath */
+    opacity: 0.8;
 }
 
 .notes {
@@ -761,7 +755,6 @@ input[type="submit"] {
 }
 
 .alert {
-    display: none;
     border-radius: 5px;
     opacity: 0.9;
     pointer-events: all;
@@ -771,9 +764,8 @@ input[type="submit"] {
     display: block;
 }
 
-.btn {
-    margin-left: 2px;
-    margin-right: 2px;
+.navbar .btn {
+    margin-left: 5px;
 }
 
 .btn-secondary {

InvenTree/InvenTree/static/script/inventree/notification.js

@@ -16,29 +16,83 @@ function showAlertOrCache(alertType, message, cache, timeout=5000) {
     }
 }
 
+
+/*
+ * Display cached alert messages when loading a page
+ */
 function showCachedAlerts() {
 
-    // Success Message
-    if (sessionStorage.getItem("inventree-alert-success")) {
-        showAlert("#alert-success", sessionStorage.getItem("inventree-alert-success"));
-        sessionStorage.removeItem("inventree-alert-success");
-    }
+    var styles = [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'danger',
+    ];
 
-    // Info Message
-    if (sessionStorage.getItem("inventree-alert-info")) {
-        showAlert("#alert-info", sessionStorage.getItem("inventree-alert-info"));
-        sessionStorage.removeItem("inventree-alert-info");
-    }
+    styles.forEach(function(style) {
 
-    // Warning Message
-    if (sessionStorage.getItem("inventree-alert-warning")) {
-        showAlert("#alert-warning", sessionStorage.getItem("inventree-alert-warning"));
-        sessionStorage.removeItem("inventree-alert-warning");
-    }
+        var msg = sessionStorage.getItem(`inventree-alert-${style}`);
 
-    // Danger Message
-    if (sessionStorage.getItem("inventree-alert-danger")) {
-        showAlert("#alert-danger", sessionStorage.getItem("inventree-alert-danger"));
-        sessionStorage.removeItem("inventree-alert-danger");
+        if (msg) {
+            showMessage(msg, {
+                style: style,
+            });
         }
+    });
+}
+
+
+/* 
+ * Display an alert message at the top of the screen.
+ * The message will contain a "close" button,
+ * and also dismiss automatically after a certain amount of time.
+ * 
+ * arguments:
+ * - message: Text / HTML content to display
+ * 
+ * options:
+ * - style: alert style e.g. 'success' / 'warning'
+ * - timeout: Time (in milliseconds) after which the message will be dismissed
+ */
+function showMessage(message, options={}) {
+
+    var style = options.style || 'info';
+
+    var timeout = options.timeout || 5000;
+
+    // Hacky function to get the next available ID
+    var id = 1;
+
+    while ($(`#alert-${id}`).exists()) {
+        id++;
+    }
+
+    var icon = '';
+
+    if (options.icon) {
+        icon = `<span class='${options.icon}></span>`;
+    }
+
+    // Construct the alert
+    var html = `
+    <div id='alert-${id}' class='alert alert-${style} alert-dismissible fade show' role='alert'>
+        ${icon}
+        ${message}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>  
+    </div>
+    `;
+
+    $('#alerts').append(html);
+
+    // Remove the alert automatically after a specified period of time
+    setInterval(function() {
+        $(`#alert-${id}`).animate({
+            'opacity': 0.0,
+            'height': '0px',
+        }, 250, function() {
+            $(`#alert-${id}`).remove();
+        });
+    }, timeout);
 }

InvenTree/part/templates/part/part_base.html

@@ -23,13 +23,15 @@
 {% include "admin_button.html" with url=url %}
 {% endif %}
 
-<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "Subscribe to nofications for this part" %}'>
-    {% if starred %}
+{% if starred %}
+<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "You are subscribed to nofications for this part" %}'>
     <span id='part-star-icon' class='fas fa-bell icon-green'/>
-    {% else %}
-    <span id='part-star-icon' class='fa fa-bell-slash'/>
-    {% endif %}
 </button>
+{% else %}
+<button type='button' class='btn btn-outline-secondary' id='toggle-starred' title='{% trans "Subscribe to nofications for this part" %}'>
+    <span id='part-star-icon' class='fa fa-bell-slash'/>
+</button>
+{% endif %}
 
 {% if barcodes %}
 <!-- Barcode actions menu -->

InvenTree/templates/base.html

@@ -84,6 +84,13 @@
             </div>
         </div>
         <main class='col ps-md-2 pt-2'>
+
+            {% block alerts %}
+            <div class='notification-area' id='alerts'>
+                <!-- Div for displayed alerts -->
+            </div>
+            {% endblock %}
+
             {% block breadcrumb_list %}
             <div class='container-fluid navigation'>
                 <nav aria-label='breadcrumb'>
@@ -102,7 +109,6 @@
     </div>
     {% include 'modals.html' %}
     {% include 'about.html' %}
-    {% include 'notification.html' %}
 </div>
 
 <!-- Scripts -->

InvenTree/templates/js/translated/part.js

@@ -399,8 +399,18 @@ function toggleStar(options) {
                     success: function(response) {
                         if (response.starred) {
                             $(options.button).removeClass('fa fa-bell-slash').addClass('fas fa-bell icon-green');
+                            $(options.button).attr('title', '{% trans "You are subscribed to notifications for this part" %}');
+
+                            showMessage('{% trans "You have subscribed to notifications for this part" %}', {
+                                style: 'success',
+                            });
                         } else {
                             $(options.button).removeClass('fas fa-bell icon-green').addClass('fa fa-bell-slash');
+                            $(options.button).attr('title', '{% trans "Subscribe to notifications for this part" %}');
+
+                            showMessage('{% trans "You have unsubscribed to notifications for this part" %}', {
+                                style: 'warning',
+                            });
                         }
                     }
                 }

InvenTree/templates/notification.html

@@ -1,18 +0,0 @@
-<div class='notification-area'>
-<div class="alert alert-success alert-dismissable" id="alert-success">
-     <a href="#" class="close" data-bs-dismiss="alert" aria-label="close">&times;</a>
-     <div class='alert-msg'>Success alert</div>
-</div>
-<div class='alert alert-info alert-dismissable' id='alert-info'>
-     <a href="#" class="close" data-bs-dismiss="alert" aria-label="close">&times;</a>
-     <div class='alert-msg'>Info alert</div>
-</div>
-<div class='alert alert-warning alert-dismissable' id='alert-warning'>
-     <a href="#" class="close" data-bs-dismiss="alert" aria-label="close">&times;</a>
-     <div class='alert-msg'>Warning alert</div>
-</div>
-<div class='alert alert-danger alert-dismissable' id='alert-danger'>
-    <a href="#" class="close" data-bs-dismiss="alert" aria-label="close">&times;</a>
-    <div class='alert-msg'>Danger alert</div>
-</div>
-</div>