Mirrored_Repos/crafty-4
1
0
Fork 0
mirror of https://gitlab.com/crafty-controller/crafty-4.git synced 2024-08-30 18:23:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve Notifications with Toasts

Browse Source
This commit is contained in:
Silversthorn 2023-10-08 11:40:25 +02:00
parent 2f65971261
commit 05ea1baa77
1 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
app/frontend/templates/base.html
View File

@ -124,19 +124,29 @@
.notification {
position: relative;
box-sizing: border-box;
padding: 0.5rem;
padding-left: 0.7rem;
width: 180px;
margin-left: 10px;
margin-right: 10px;
margin-right: 1rem;
background: var(--card-banner-bg);
transition: right 0.75s, opacity 0.75s, top 0.75s;
right: -6rem;
right: -20rem;
opacity: 0.1;
margin-bottom: 1rem;
z-index: 999;
top: 0px;
}
.toast-header {
background-color: var(--card-banner-bg);
color: var(--base-text);
}
.toast-body {
background-color: var(--dropdown-bg);
color: var(--base-text);
}
.notification img {
max-height: 20px;
}
.notification strong {
line-height: 20px;
}
.notification.active {
@ -147,30 +157,30 @@
.notification.remove {
right: 0rem;
opacity: 0.1;
top: -2rem;
}
.notification p {
margin: 0px;
width: calc(160.8px - 16px);
z-index: inherit;
top: -10rem;
}
.notification span {
position: absolute;
right: 0.5rem;
top: 0.46rem;
cursor: pointer;
font-weight: bold;
line-height: 20px;
font-size: 22px;
font-size: 20px;
user-select: none;
z-index: inherit;
}
</style>
<div class="notifications"></div>
<div class="notifications">
<!--<div id="toast_98" class="notification toast fade active show" role="alert" aria-lived="assertive" aria-atomic="true" data-delay="7500" data-animation="true" data-autohide="false">
<div class="toast-header">
<img src="/static/assets/images/logo_small.svg" class="mr-auto" alt="logo" />
<strong class="mr-auto"> Crafty Controller</strong>
<button type="button" class="close" data-dismiss="toast_98" aria-label="Close" onclick="closeNotification(this)">
<span class="fa-solid fa-xmark"></span>
</button>
</div>
<div class="toast-body">Admin issued command stop_server for server ServerTest1 with ID: 1</div>
</div>-->
</div>
<script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>
<script src="/static/assets/js/shared/off-canvas.js"></script>
<script src="/static/assets/js/shared/hoverable-collapse.js"></script>
@ -494,7 +504,7 @@
}
function closeNotification(element) {
element.parentElement.classList.add('remove');
element.parentElement.parentElement.classList.add('remove');
setTimeout(function () {
element.parentElement.remove();
}, 500);
@ -502,30 +512,62 @@
function notify(message) {
console.log(`notify(${message})`);
var paragraphEl = document.createElement('p');
var closeEl = document.createElement('span');
var intId = getRandomInt(0, 100);
var toastDiv = document.createElement('div');
toastDiv.setAttribute("id", "toast_" + intId);
toastDiv.setAttribute("class", "notification toast");
toastDiv.setAttribute("role", "alert");
toastDiv.setAttribute("aria-lived", "assertive");
toastDiv.setAttribute("aria-atomic", "true");
toastDiv.setAttribute("data-delay", "3000");
toastDiv.setAttribute("data-animation", "true");
toastDiv.setAttribute("data-autohide", "false");
paragraphEl.textContent = message;
var toastHeaderDiv = document.createElement('div');
toastHeaderDiv.setAttribute("class", "toast-header");
closeEl.innerHTML = '&times;';
closeEl.addEventListener('click', function () { closeNotification(this) });
var toastHeaderImg = document.createElement('img');
toastHeaderImg.setAttribute("src", "/static/assets/images/logo_small.svg");
toastHeaderImg.setAttribute("class", "mr-auto");
toastHeaderImg.setAttribute("alt", "logo");
toastHeaderDiv.appendChild(toastHeaderImg);
var parentEl = document.createElement('div');
parentEl.appendChild(paragraphEl);
parentEl.appendChild(closeEl);
var toastHeaderTitle = document.createElement('strong');
toastHeaderTitle.setAttribute("class", "mr-auto");
toastHeaderTitle.innerHTML = " Crafty Controller ";
toastHeaderDiv.appendChild(toastHeaderTitle);
parentEl.classList.add('notification');
var toastHeaderBtn = document.createElement('button');
toastHeaderBtn.setAttribute("type", "button");
toastHeaderBtn.setAttribute("class", "ml-2 mb-1 close");
toastHeaderBtn.setAttribute("data-dismiss", "toast_" + intId);
toastHeaderBtn.setAttribute("aria-label", "Close");
toastHeaderDiv.appendChild(toastHeaderBtn);
document.querySelector('.notifications').appendChild(parentEl);
var toastHeaderCloseSpan = document.createElement('span');
toastHeaderCloseSpan.setAttribute("class", "fa-solid fa-xmark");
toastHeaderCloseSpan.setAttribute("aria-hidden", "true");
toastHeaderCloseSpan.addEventListener('click', function () { closeNotification(this.parentElement) });
toastHeaderBtn.appendChild(toastHeaderCloseSpan);
var toastBodyDiv = document.createElement('div');
toastBodyDiv.setAttribute("class", "toast-body");
toastBodyDiv.textContent = message;
toastDiv.appendChild(toastHeaderDiv);
toastDiv.appendChild(toastBodyDiv);
document.querySelector('.notifications').appendChild(toastDiv);
$('#toast_' + intId).toast('show');
setTimeout(function () {
parentEl.classList.add('active');
toastDiv.classList.add('active');
}, 200);
setTimeout(function (element) {
closeNotification(element);
}, 7500, closeEl);
}, 7500, toastHeaderCloseSpan);
`
<div class="notification">