Update: SweetAlert Introduction

Introducing SweeAlerts for Notifications
This commit is contained in:
Focuslinkstech 2024-02-16 10:03:35 +01:00
parent 11c226caf5
commit 21bea606c3
7 changed files with 105 additions and 34 deletions

View File

@ -9,6 +9,9 @@
<link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
<script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
</head>
@ -23,12 +26,22 @@
<hr>
</div>
{if isset($notify)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<div>{$notify}</div>
</div>
<script>
// Display SweetAlert toast notification
Swal.fire({
icon: '{if $notify_t == "s"}success{else}warning{/if}',
title: '{$notify}',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
{/if}
<div class="row">
<div class="col-md-4">

View File

@ -9,6 +9,9 @@
<link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
<script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
</head>
@ -22,12 +25,22 @@
<hr>
</div>
{if isset($notify)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<div>{$notify}</div>
</div>
<script>
// Display SweetAlert toast notification
Swal.fire({
icon: '{if $notify_t == "s"}success{else}warning{/if}',
title: '{$notify}',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
{/if}
<div class="row">
<div class="col-md-2">

View File

@ -9,6 +9,9 @@
<link rel="stylesheet" href="ui/ui/styles/bootstrap.min.css">
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
<script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
</head>
@ -23,12 +26,22 @@
<hr>
</div>
{if isset($notify)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<div>{$notify}</div>
</div>
<script>
// Display SweetAlert toast notification
Swal.fire({
icon: '{if $notify_t == "s"}success{else}warning{/if}',
title: '{$notify}',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
{/if}
<div class="row">
<div class="col-md-4">

6
ui/ui/scripts/sweetalert2.all.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -15,6 +15,8 @@
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/select2.min.css" />
<link rel="stylesheet" href="ui/ui/styles/select2-bootstrap.min.css" />
<link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
<script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
<style>
::-moz-selection {
/* Code for Firefox */
@ -332,10 +334,20 @@
<section class="content">
{if isset($notify)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<div>{$notify}</div>
</div>
{/if}
<script>
// Display SweetAlert toast notification
Swal.fire({
icon: '{if $notify_t == "s"}success{else}error{/if}',
title: '{$notify}',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
{/if}

View File

@ -12,7 +12,9 @@
<link rel="stylesheet" href="ui/ui/fonts/ionicons/css/ionicons.min.css">
<link rel="stylesheet" href="ui/ui/fonts/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="ui/ui/fonts/MaterialDesign/css/materialdesignicons.min.css">
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/modern-AdminLTE.min.css">
<link rel="stylesheet" href="ui/ui/styles/sweetalert2.min.css" />
<script src="ui/ui/scripts/sweetalert2.all.min.js"></script>
<style>
@ -165,11 +167,22 @@
</section>
<section class="content">
{if isset($notify)}
<div class="alert alert-{if $notify_t == 's'}success{else}danger{/if}">
<button type="button" class="close" data-dismiss="alert">
<span aria-hidden="true">×</span>
</button>
<div>{$notify}</div>
</div>
{/if}
{if isset($notify)}
<script>
// Display SweetAlert toast notification
Swal.fire({
icon: '{if $notify_t == "s"}success{else}warning{/if}',
title: '{$notify}',
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 5000,
timerProgressBar: true,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
});
</script>
{/if}

1
ui/ui/styles/sweetalert2.min.css vendored Normal file

File diff suppressed because one or more lines are too long