mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 01:25:55 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Toasts now work with turbo

Browse source
This commit is contained in:
Jan Böhmer 2022-07-24 14:20:20 +02:00
parent 3df6e18a83
commit 390deca544
6 changed files with 57 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/controllers/common/toast_controller.js Normal file
View file

@ -0,0 +1,17 @@
import { Controller } from '@hotwired/stimulus';
import { Toast } from 'bootstrap';
export default class extends Controller {
connect() {
//Move all toasts from the page into our toast container and show them
const toastContainer = document.getElementById('toast-container');
if (this.element.parentNode !== toastContainer) {
toastContainer.appendChild(this.element);
return;
}
const toast = new Toast(this.element);
toast.show();
}
}

5
assets/js/register_events.js
View file

@ -12,7 +12,6 @@ import "bootstrap-fileinput";
const RegisterEventHelper = class {
constructor() {
this.registerToasts();
this.registerTooltips();
this.registerJumpToTopBtn();
@ -28,10 +27,6 @@ const RegisterEventHelper = class {
document.addEventListener('turbo:load', fn);
}
registerToasts() {
this.registerLoadHandler(() => $(".toast").toast('show'));
}
registerTooltips() {
this.registerLoadHandler(() => {
$(".tooltip").remove();

31
templates/_flash.html.twig
View file

@ -1,31 +0,0 @@
{# The container to show the flash messages #}
<div class="toast-container" id="message-container" style="min-width: 20%;">
{% for label, messages in app.flashes() %}
{% for message in messages %}
{% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
, 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
{% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
, 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
{% set flash_bg = label|replace({'success': 'bg-success text-white',
'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
'notice': 'bg-info text-white', 'info': 'bg-light'})%}
<div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000">
<div class="toast-header {{ flash_bg }}">
{# <img src="..." class="rounded mr-2" alt="...">#}
<i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
<strong class="mr-auto">{{ flash_title|trans }}</strong>
<small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
<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 {{ flash_bg }}">
{{ message | trans }}
</div>
</div>
{% endfor %}
{% endfor %}
</div>

23
templates/_toast.html.twig Normal file
View file

@ -0,0 +1,23 @@
{% set flash_title = label|replace({'success': 'flash.success', 'error': 'flash.error'
, 'warning': 'flash.warning', 'notice': 'flash.notice', 'info': 'flash.info'}) %}
{% set flash_symbol = label|replace({'success': 'fa-check-circle', 'error': 'fa-exclamation-triangle'
, 'warning': 'fa-exclamation-circle', 'notice': 'fa-flag', 'info': 'fa-flag'}) %}
{% set flash_bg = label|replace({'success': 'bg-success text-white',
'error': 'bg-danger text-white', 'warning': 'bg-warning text-white',
'notice': 'bg-info text-white', 'info': 'bg-light'})%}
<div class="toast shadow" role="alert" aria-live="assertive" aria-atomic="true" data-delay="5000" {{ stimulus_controller('common/toast') }}>
<div class="toast-header {{ flash_bg }}">
{# <img src="..." class="rounded mr-2" alt="...">#}
<i class="fas fa-fw {{ flash_symbol }} mr-2"></i>
<strong class="mr-auto">{{ flash_title|trans }}</strong>
<small class="{% if "text-white" in flash_bg %}text-white{% else %}text-muted{% endif %}">{{ "now" | format_datetime("short", "short") }}</small>
<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 {{ flash_bg }}">
{{ message | trans }}
</div>
</div>

4
templates/_toast_container.html.twig Normal file
View file

@ -0,0 +1,4 @@
{# The container to show the flash messages #}
<div class="toast-container" id="toast-container" style="min-width: 20%;">
</div>

18
templates/base.html.twig
View file

@ -55,20 +55,19 @@
</head>
<body data-base-url="{{ url('homepage', {'_locale': app.request.locale}) }}">
{% block body %}
<header>
<turbo-frame id="navbar-frame" target="content" data-turbo-action="advance">
{% include "_navbar.html.twig" %}
</turbo-frame>
{% include "_flash.html.twig" %}
</header>
<main>
<div class="container-fluid">
<div class="row">
{% include "_toast_container.html.twig" %}
<div class="collapse d-md-block bg-light" id="sidebar-container">
<nav class="fixed-sidebar col-md-3 col-lg-2 " id="fixed-sidebar">
<turbo-frame id="sidebar" target="content" data-turbo-action="advance">
@ -89,6 +88,16 @@
{% block content %}
{% endblock %}
<div class="toasts-global d-none">
{% for label, messages in app.flashes() %}
{% for message in messages %}
{{ include('_toast.html.twig', {
'label': label,
'message': message
}) }}
{% endfor %}
{% endfor %}
</div>
</turbo-frame>
{% block scripts %}
@ -108,7 +117,6 @@
<i class="fas fa-angle-up fa-fw"></i>
</a>
{% endblock %}
</body>