templates/_flashes.html.twig line 1

Open in your IDE?
  1. {# Flowbite-compatible flash messages #}
  2. <div class="fixed bottom-4 right-2 z-50 space-y-2 pointer-events-none">
  3.   {% set types = {
  4.     'success': {
  5.       'bg': 'bg-green-50 dark:bg-gray-800',
  6.       'txt': 'text-green-800 dark:text-green-300',
  7.       'btn': 'text-green-500 dark:text-green-300',
  8.       'ring': 'ring-1 ring-green-500/50',
  9.       'iconPath': 'M16.707 5.293a1 1 0 0 1 0 1.414l-7.5 7.5a1 1 0 0 1-1.414 0l-3-3a1 1 0 1 1 1.414-1.414L8.5 12.086l6.793-6.793a1 1 0 0 1 1.414 0z'
  10.     },
  11.     'warning': {
  12.       'bg': 'bg-yellow-50 dark:bg-gray-800',
  13.       'txt': 'text-yellow-800 dark:text-yellow-300',
  14.       'btn': 'text-yellow-500 dark:text-yellow-300',
  15.       'ring': 'ring-1 ring-yellow-500/50',
  16.       'iconPath': 'M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9 4h2v6H9V4Zm0 8h2v2H9v-2Z'
  17.     },
  18.     'error': {
  19.       'bg': 'bg-red-50 dark:bg-gray-800',
  20.       'txt': 'text-red-800 dark:text-red-300',
  21.       'btn': 'text-red-500 dark:text-red-300',
  22.       'ring': 'ring-1 ring-red-500/50',
  23.       'iconPath': 'M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-5h2v2H9v-2Zm0-6h2v5H9V7Z'
  24.     },
  25.     'danger': {
  26.       'bg': 'bg-red-50 dark:bg-gray-800',
  27.       'txt': 'text-red-800 dark:text-red-300',
  28.       'btn': 'text-red-500 dark:text-red-300',
  29.       'ring': 'ring-1 ring-red-500/50',
  30.       'iconPath': 'M10 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm-1-5h2v2H9v-2Zm0-6h2v5H9V7Z'
  31.     },
  32.     'info': {
  33.       'bg': 'bg-blue-50 dark:bg-gray-800',
  34.       'txt': 'text-blue-800 dark:text-blue-300',
  35.       'btn': 'text-blue-500 dark:text-blue-300',
  36.       'ring': 'ring-1 ring-blue-500/50',
  37.       'iconPath': 'M10 2a8 8 0 1 0 0 16A8 8 0 0 0 10 2Zm1 12H9v-4h2v4Zm0-6H9V6h2v2Z'
  38.     }
  39.   } %}
  41.   {% for type, messages in {
  42.     'success': app.flashes('success'),
  43.     'warning': app.flashes('warning'),
  44.     'error': app.flashes('error'),
  45.     'danger': app.flashes('danger'),
  46.     'info': app.flashes('info')
  47.   } %}
  48.     {% set conf = types[type] %}
  49.     {% for message in messages %}
  50.       {% set id = 'alert-' ~ type ~ '-' ~ loop.index ~ '-' ~ random() %}
  51.       <div id="{{ id }}" class="flex items-start gap-2 p-4 rounded-lg shadow-sm {{ conf.bg }} {{ conf.txt }} {{ conf.ring }} pointer-events-auto" role="alert">
  52.         <svg class="shrink-0 w-5 h-5 mt-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  53.           <path d="{{ conf.iconPath }}"/>
  54.         </svg>
  55.         <div class="text-sm font-medium">
  56.           {{ message|raw }}
  57.         </div>
  58.         <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-white/40 inline-flex items-center justify-center h-8 w-8 {{ conf.btn }}" data-dismiss-target="#{{ id }}" aria-label="Close">
  59.           <span class="sr-only">Fermer</span>
  60.           <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/></svg>
  61.         </button>
  62.       </div>
  63.     {% endfor %}
  64.   {% endfor %}
  66.   {# Also render MercurySeries Flashy notifications with the same Flowbite UI #}
  67.   {% for item in app.flashes('mercuryseries_flashy_notification') %}
  68.     {% set t = (item.type ?? 'info') %}
  69.     {% set conf = types[t] ?? types['info'] %}
  70.     {% set id = 'alert-flashy-' ~ t ~ '-' ~ random() %}
  71.     <div id="{{ id }}" class="flex items-start gap-2 p-4 rounded-lg shadow-sm {{ conf.bg }} {{ conf.txt }} {{ conf.ring }} pointer-events-auto" role="alert">
  72.       <svg class="shrink-0 w-5 h-5 mt-0.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
  73.         <path d="{{ conf.iconPath }}"/>
  74.       </svg>
  75.       <div class="text-sm font-medium">
  76.         {{ item.message|default('')|raw }}
  77.         {% if item.link %}
  78.           <a href="{{ item.link }}" class="underline ml-1" target="_blank" rel="noopener">Voir</a>
  79.         {% endif %}
  80.       </div>
  81.       <button type="button" class="ms-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 hover:bg-white/40 inline-flex items-center justify-center h-8 w-8 {{ conf.btn }}" data-dismiss-target="#{{ id }}" aria-label="Close">
  82.         <span class="sr-only">Fermer</span>
  83.         <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/></svg>
  84.       </button>
  85.     </div>
  86.   {% endfor %}
  87. </div>