diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/js/main.js | 23 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 6 | ||||
| -rw-r--r-- | view/tpl/hdr.tpl | 1 | ||||
| -rw-r--r-- | view/tpl/notifications_widget.tpl | 8 |
4 files changed, 33 insertions, 5 deletions
diff --git a/view/js/main.js b/view/js/main.js index c9798dede..f38d9db2d 100644 --- a/view/js/main.js +++ b/view/js/main.js @@ -1305,7 +1305,8 @@ function dropItem(url, object, b64mid) { $(object + ', #pinned-wrapper-' + id).remove(); $('body').css('cursor', 'auto'); - $.jGrowl(aStr.itemdel, { sticky: false, theme: 'info', life: 3000 }); + toast(aStr.itemdel, 'info') + //$.jGrowl(aStr.itemdel, { sticky: false, theme: 'info', life: 3000 }); if (typeof b64mid !== typeof undefined) { $('[data-b64mid=\'' + b64mid + '\']').fadeOut(function() { @@ -1408,7 +1409,8 @@ function submitPoll(id) { $.post('vote/' + id, $('#question-form-' + id).serialize(), function(data) { - $.jGrowl(data.message, { sticky: false, theme: ((data.success) ? 'info' : 'notice'), life: 10000 }); + toast(data.message, ((data.success) ? 'info' : 'danger')); + //$.jGrowl(data.message, { sticky: false, theme: ((data.success) ? 'info' : 'notice'), life: 10000 }); if(timer) clearTimeout(timer); timer = setTimeout(updateInit, 500); } @@ -1815,3 +1817,20 @@ function toggleAside() { $('<div id="overlay"></div>').appendTo('body').one('click', function() { toggleAside(); }); } } + +function toast(string, severity) { + let container = document.getElementById('toast-container'); + let toast = document.createElement('div'); + + toast.innerHTML = '<div class="d-flex"><div class="toast-body">' + string + '</div><button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>'; + toast.classList.add('toast', 'p-2', 'm-3', 'bg-' + severity + '-subtle', 'text-' + severity + '-emphasis', 'border-' + severity,); + container.prepend(toast); + + let toastInstance = bootstrap.Toast.getOrCreateInstance(toast); + + if (severity === 'danger') { + toastInstance._config.autohide = false; + } + + toastInstance.show(); +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 56194c735..05cd75422 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -168,6 +168,11 @@ input[type=text], textarea { color: #FF0000; } +#toast-container { + z-index: 1030; + width: 300px; +} + #powered-by { font-size: 0.5rem; position: absolute; @@ -719,6 +724,7 @@ div.jGrowl div.info { color: #ffffff; padding-left: 58px; } + #jGrowl.top-right { top: 4.5rem; right: .25rem; diff --git a/view/tpl/hdr.tpl b/view/tpl/hdr.tpl index e69de29bb..7d20633bc 100644 --- a/view/tpl/hdr.tpl +++ b/view/tpl/hdr.tpl @@ -0,0 +1 @@ +<div id="toast-container" class="position-fixed top-0 end-0 me-4"></div> diff --git a/view/tpl/notifications_widget.tpl b/view/tpl/notifications_widget.tpl index 9ea5ffec6..aa53905ad 100644 --- a/view/tpl/notifications_widget.tpl +++ b/view/tpl/notifications_widget.tpl @@ -337,17 +337,19 @@ sse_setNotificationsStatus(); // notice and info - $.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>'; + //$.jGrowl.defaults.closerTemplate = '<div>[ ' + aStr.closeAll + ']</div>'; if(obj.notice) { $(obj.notice.notifications).each(function() { - $.jGrowl(this, { sticky: true, theme: 'notice' }); + toast(this, 'danger'); + //$.jGrowl(this, { sticky: true, theme: 'notice' }); }); } if(obj.info) { $(obj.info.notifications).each(function(){ - $.jGrowl(this, { sticky: false, theme: 'info', life: 10000 }); + toast(this, 'info'); + //$.jGrowl(this, { sticky: false, theme: 'info', life: 10000 }); }); } |