diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 61037c9c54..670d577497 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/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 { diff --git a/InvenTree/InvenTree/static/script/inventree/notification.js b/InvenTree/InvenTree/static/script/inventree/notification.js index 01754bceaf..0e8a19ed87 100644 --- a/InvenTree/InvenTree/static/script/inventree/notification.js +++ b/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', + ]; + + styles.forEach(function(style) { + + var msg = sessionStorage.getItem(`inventree-alert-${style}`); + + 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++; } - // Info Message - if (sessionStorage.getItem("inventree-alert-info")) { - showAlert("#alert-info", sessionStorage.getItem("inventree-alert-info")); - sessionStorage.removeItem("inventree-alert-info"); + var icon = ''; + + if (options.icon) { + icon = ` + ${icon} + ${message} + + + `; - // Danger Message - if (sessionStorage.getItem("inventree-alert-danger")) { - showAlert("#alert-danger", sessionStorage.getItem("inventree-alert-danger")); - sessionStorage.removeItem("inventree-alert-danger"); - } + $('#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); } \ No newline at end of file diff --git a/InvenTree/part/templates/part/part_base.html b/InvenTree/part/templates/part/part_base.html index 6cbd3f92db..1dcb509a59 100644 --- a/InvenTree/part/templates/part/part_base.html +++ b/InvenTree/part/templates/part/part_base.html @@ -23,13 +23,15 @@ {% include "admin_button.html" with url=url %} {% endif %} - +{% else %} + +{% endif %} {% if barcodes %} diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index 3b6350e40b..d01d5051f6 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -84,6 +84,13 @@
+ + {% block alerts %} +
+ +
+ {% endblock %} + {% block breadcrumb_list %}
{% include 'modals.html' %} {% include 'about.html' %} - {% include 'notification.html' %} diff --git a/InvenTree/templates/js/translated/part.js b/InvenTree/templates/js/translated/part.js index 2c59723f14..adc10566d7 100644 --- a/InvenTree/templates/js/translated/part.js +++ b/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', + }); } } } diff --git a/InvenTree/templates/notification.html b/InvenTree/templates/notification.html deleted file mode 100644 index 9919b0d6f5..0000000000 --- a/InvenTree/templates/notification.html +++ /dev/null @@ -1,18 +0,0 @@ -
-
- × -
Success alert
-
-
- × -
Info alert
-
-
- × -
Warning alert
-
-
- × -
Danger alert
-
-
\ No newline at end of file