fixed messages

addons/default/visiosoft/base-theme/resources/css/bootstrap-notify-visio.css

@@ -0,0 +1,56 @@
+.swal2-container {
+    display: grid;
+    position: fixed;
+    z-index: 1060;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    box-sizing: border-box;
+    grid-template-areas: "top-start top top-end" "center-start center center-end" "bottom-start bottom-center bottom-end" "gap gap gap";
+    grid-template-rows: auto auto auto .625em;
+    height: 100%;
+    padding: .625em .625em 0;
+    overflow-x: hidden;
+    transition: background-color .1s;
+    -webkit-overflow-scrolling: touch;
+}
+
+.swal2-popup {
+    right: 0 !important;
+    display: grid !important;
+}
+
+[class^=swal2] {
+    -webkit-tap-highlight-color: transparent;
+}
+
+.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
+    background: rgba(0, 0, 0, .4);
+}
+
+.swal2-container.swal2-bottom-end, .swal2-container.swal2-center-end, .swal2-container.swal2-top-end {
+    grid-template-columns: auto auto minmax(0, 1fr);
+}
+
+body.swal2-toast-shown .swal2-container {
+    box-sizing: border-box;
+    width: 360px;
+    max-width: 100%;
+    background-color: transparent;
+    pointer-events: none;
+}
+
+body.swal2-toast-shown .swal2-container.swal2-top-end, body.swal2-toast-shown .swal2-container.swal2-top-right {
+    top: 0;
+    right: 0;
+    bottom: auto;
+    left: auto;
+}
+
+
+.swal2-container.swal2-top-end > .swal2-popup, .swal2-container.swal2-top-right > .swal2-popup {
+    grid-column: 3;
+    align-self: start;
+    justify-self: end;
+}

addons/default/visiosoft/base-theme/resources/js/bootstrap-notify-visio.js

@@ -0,0 +1,57 @@
+const Toast = {
+    fire: function (message, type) {
+
+        $('body').addClass('swal2-shown swal2-toast-shown');
+
+        if ($('body').find('.swal2-container').length < 1) {
+            $('body').append('<div class="swal2-container swal2-top-end swal2-backdrop-show" style="overflow-y: auto;"></div>');
+        }
+
+        let alert_icon = `<div class="swal2-icon swal2-success swal2-icon-show" style="display: flex;">
+        <div class="swal2-success-circular-line-left" style="background-color: rgb(255, 255, 255);"></div>
+        <span class="swal2-success-line-tip"></span> <span class="swal2-success-line-long"></span>
+        <div class="swal2-success-ring"></div><div class="swal2-success-fix" style="background-color: rgb(255, 255, 255);"></div>
+        <div class="swal2-success-circular-line-right" style="background-color: rgb(255, 255, 255);"></div></div>`;
+
+        switch (type) {
+            case "error":
+                alert_icon = `<div class="swal2-icon swal2-error swal2-icon-show" style="display: flex;"><span class="swal2-x-mark">
+                <span class="swal2-x-mark-line-left"></span><span class="swal2-x-mark-line-right"></span></span></div>`;
+                break;
+            case "info":
+                alert_icon = `<div class="swal2-icon swal2-info swal2-icon-show" style="display: flex;"><div class="swal2-icon-content">i</div></div>`;
+            case "warning":
+                alert_icon = `<div class="swal2-icon swal2-warning swal2-icon-show" style="display: flex;"><div class="swal2-icon-content">!</div></div>`;
+                break;
+        }
+
+
+        $.notify({
+            message: message,
+        }, {
+            element: '.swal2-container',
+            position: null,
+            allow_dismiss: false,
+            newest_on_top: true,
+            showProgressbar: true,
+            delay: 3000,
+            animate: {
+                enter: 'animated fadeInRight',
+                exit: 'animated fadeOutRight'
+            },
+            onClosed: function () {
+                $('body').removeClass('swal2-shown swal2-toast-shown');
+                $('body .swal2-container').remove();
+            },
+            icon_type: 'class',
+            template: `<div aria-labelledby="swal2-title" aria-describedby="swal2-html-container"
+                         class="swal2-popup swal2-toast swal2-icon-success " tabindex="-1" role="alert" aria-live="polite"
+                         style=" display: grid; width: 100%;">${alert_icon}
+                        <h2 class="swal2-title" id="swal2-title" style="display: block;"><span data-notify="message">{2}</span></h2>
+                        <div class="swal2-timer-progress-bar-container" data-notify="progressbar">
+                        <div class="progress-bar-{0} swal2-timer-progress-bar" role="progressbar" aria-valuenow="0" 
+                            aria-valuemin="0" aria-valuemax="100" style="width: 0%; transition: width 1s linear 0s;"></div>
+                        </div></div>`
+        });
+    }
+}

addons/default/visiosoft/base-theme/resources/views/partials/messages.twig

@@ -1,53 +1,33 @@
+<style>
+    {{ asset_inline('visiosoft.theme.base::css/bootstrap-notify-visio.css') }}
+</style>
 <script>
-    const Toast = Swal.mixin({
+    {{ asset_inline('visiosoft.theme.base::js/bootstrap-notify-visio.js') }}
-        toast: true,
-        position: 'top-end',
-        showConfirmButton: false,
-        timer: 3000,
-        timerProgressBar: true,
-        didOpen: (toast) => {
-            toast.addEventListener('mouseenter', Swal.stopTimer)
-            toast.addEventListener('mouseleave', Swal.resumeTimer)
-        }
-    })
 
-    // Success Messages
     {% if message_exists('success') %}
-        {% for message in message_pull('success') %}
+    {% for message in message_pull('success') %}
-            Toast.fire({
+    Toast.fire(`{{ trans(message)|markdown|striptags }}`, 'success');
-                icon: 'success',
+    {% endfor %}
-                title: `{{ trans(message)|markdown }}`,
-            })
-        {% endfor %}
     {% endif %}
 
     // Informational Messages
     {% if message_exists('info') %}
-        {% for message in message_pull('info') %}
+    {% for message in message_pull('info') %}
-            Toast.fire({
+    Toast.fire(`{{ trans(message)|markdown|striptags }}`, 'info');
-                icon: 'info',
+    {% endfor %}
-                title: `{{ trans(message)|markdown }}`,
-            })
-        {% endfor %}
     {% endif %}
 
     // Warning Messages
     {% if message_exists('warning') %}
-        {% for message in message_pull('warning') %}
+    {% for message in message_pull('warning') %}
-            Toast.fire({
+    Toast.fire(`{{ trans(message)|markdown|striptags }}`, 'warning');
-                icon: 'warning',
+    {% endfor %}
-                title: `{{ trans(message)|markdown }}`,
-            })
-        {% endfor %}
     {% endif %}
 
     // Error Messages
     {% if message_exists('error') %}
-        {% for message in message_pull('error') %}
+    {% for message in message_pull('error') %}
-            Toast.fire({
+    Toast.fire(`{{ trans(message)|markdown|striptags }}`, 'error');
-                icon: 'error',
+    {% endfor %}
-                title: `{{ trans(message)|markdown }}`,
-            })
-        {% endfor %}
     {% endif %}
 </script>

addons/default/visiosoft/base-theme/resources/views/partials/metadata.twig

@@ -19,10 +19,12 @@
 {{ asset_add("theme.css", "visiosoft.theme.base::css/select2.css") }}
 {{ asset_add("theme.css", "visiosoft.theme.base::css/font-awesome.min.css") }}
 {{ asset_add("theme.css", "visiosoft.theme.base::css/intlTelInput.css") }}
+{{ asset_add("theme.css", "visiosoft.theme.base::css/animate.min.css") }}
 {{ asset_style("visiosoft.theme.base::css/offline.scss") }}
 
 <script src="{{ asset_path('visiosoft.theme.base::js/vendor/jquery.min.js') }}"></script>
 {{ asset_script('visiosoft.theme.base::js/sweetalert2.all.min.js') }}
+{{ asset_script('visiosoft.theme.base::js/notify.min.js') }}
 {{ asset_script('visiosoft.theme.base::js/visiosoft.js') }}
 
 {{ asset_style("theme.css") }}