replaced bootstrap-notify.min.js with bootstrap toasts

This commit is contained in:
zadam 2019-10-17 20:03:05 +02:00
parent 6d5762fac8
commit 8886e95847
5 changed files with 42 additions and 32 deletions

File diff suppressed because one or more lines are too long

View file

@ -1,13 +1,35 @@
import ws from "./ws.js";
import utils from "./utils.js";
function toast(options) {
const $toast = $(`<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="mr-auto"><span class="jam jam-${options.icon}"></span> ${options.title}</strong>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="toast-body">
${options.message}
</div>
</div>`);
$("#toast-container").append($toast);
$toast.toast({
delay: options.delay
}).toast("show");
}
function showMessage(message, delay = 3000) {
console.debug(utils.now(), "message: ", message);
$.notify({
icon: 'jam jam-check',
message: message
}, getNotifySettings('success', delay));
toast({
title: "Info",
icon: "check",
message: message,
delay
});
}
function showAndLogError(message, delay = 10000) {
@ -19,28 +41,12 @@ function showAndLogError(message, delay = 10000) {
function showError(message, delay = 10000) {
console.log(utils.now(), "error: ", message);
$.notify({
// options
icon: 'jam jam-alert',
message: message
}, getNotifySettings('danger', delay));
}
function getNotifySettings(type, delay) {
return {
element: 'body',
type: type,
z_index: 90000,
placement: {
from: "top",
align: "center"
},
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
delay: delay
};
toast({
title: "Error",
icon: 'alert',
message: message,
delay
});
}
function throwError(message) {

View file

@ -857,4 +857,11 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
border-radius: 10px;
padding: 5px;
margin-top: 5px;
}
#toast-container {
position: absolute;
width: 100%;
top: 20px;
z-index: 10000;
}

View file

@ -6,6 +6,9 @@
</head>
<body class="desktop theme-<%= theme %>" style="--main-font-size: <%= mainFontSize %>%; --tree-font-size: <%= treeFontSize %>%; --detail-font-size: <%= detailFontSize %>%;">
<noscript>Trilium requires JavaScript to be enabled.</noscript>
<div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
<div id="container" style="display: none; grid-template-columns: minmax(<%= leftPaneMinWidth %>px, <%= leftPaneWidthPercent %>fr) minmax(0, <%= rightPaneWidthPercent %>fr)">
<div id="header" class="hide-toggle">
<div id="history-navigation" style="display: none;">
@ -195,8 +198,6 @@
<link href="libraries/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="libraries/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="libraries/bootstrap-notify.min.js"></script>
<!-- Include Fancytree skin and library -->
<link href="libraries/fancytree/skin-win8/ui.fancytree.css" rel="stylesheet">
<script src="libraries/fancytree/jquery.fancytree-all-deps.js"></script>

View file

@ -112,8 +112,6 @@
<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/mobile.css" rel="stylesheet">
<script src="libraries/bootstrap-notify.min.js"></script>
<link rel="stylesheet" type="text/css" href="libraries/jam/css/jam.min.css">
<script type="text/javascript">