Add a Twig component to display flash messages

EasyCorp · Dec 15, 2024 · 0e878ab · 0e878ab
1 parent 150e6cb
commit 0e878ab
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 6 deletions.
diff --git a/assets/css/easyadmin-theme/base.css b/assets/css/easyadmin-theme/base.css
@@ -1,3 +1,7 @@
+:root {
+    color-scheme: light dark;
+}
+
 /* Reset styles
    ========================================================================= */
 html, body {
@@ -869,6 +873,14 @@ a.user-menu-wrapper .user-details:hover {
     box-shadow: none;
     outline: none;
     background-size: .75em;
+    padding: .5em;
+    top: .75em;
+    right: .5em;
+}
+.alert .btn-close:focus,
+.alert .btn-close:hover {
+    opacity: 1;
+    background-color: light-dark(rgba(128, 128, 128, 0.2), rgba(128, 128, 128, 0.5));
 }
 
 .alert:last-of-type {
@@ -920,6 +932,9 @@ a.user-menu-wrapper .user-details:hover {
 .ea-dark-scheme .modal-header .btn-close {
     filter: invert(1);
 }
+[data-bs-theme="dark"] .btn-close {
+    filter: none;
+}
 
 /* Utilities */
 .text-primary { color: var(--text-primary-color) !important; }

diff --git a/config/services.php b/config/services.php
@@ -82,6 +82,7 @@
 use EasyCorp\Bundle\EasyAdminBundle\Router\UrlSigner;
 use EasyCorp\Bundle\EasyAdminBundle\Security\AuthorizationChecker;
 use EasyCorp\Bundle\EasyAdminBundle\Security\SecurityVoter;
+use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Alert;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Flag;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Icon;
 use EasyCorp\Bundle\EasyAdminBundle\Twig\EasyAdminTwigExtension;
@@ -403,5 +404,8 @@
 
         ->set(Flag::class)
             ->tag('twig.component')
+
+        ->set(Alert::class)
+            ->tag('twig.component')
     ;
 };
diff --git a/public/app.b1430af9.css → public/app.fc5841f9.css b/public/app.b1430af9.css → public/app.fc5841f9.css
diff --git a/public/entrypoints.json b/public/entrypoints.json
@@ -2,7 +2,7 @@
   "entrypoints": {
     "app": {
       "css": [
-        "/app.b1430af9.css"
+        "/app.fc5841f9.css"
       ],
       "js": [
         "/app.1ecd6d7a.js"

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,5 +1,5 @@
 {
-  "app.css": "app.b1430af9.css",
+  "app.css": "app.fc5841f9.css",
   "app.js": "app.1ecd6d7a.js",
   "form.js": "form.bcec6c2a.js",
   "page-layout.js": "page-layout.3347892e.js",

diff --git a/src/Twig/Component/Alert.php b/src/Twig/Component/Alert.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Twig\Component;
+
+use EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Option\AlertVariant;
+
+/**
+ * Highlights important messages that require the user's attention, such as notifications and flash messages.
+ * Inspired by https://primer.style/components/banner.
+ */
+class Alert
+{
+    public AlertVariant $variant = AlertVariant::Info;
+    public bool $withDismissButton = false;
+
+    public function mount(string|AlertVariant $variant): void
+    {
+        try {
+            $this->variant = \is_string($variant) ? AlertVariant::from($variant) : $variant;
+        } catch (\ValueError) {
+            throw new \InvalidArgumentException(sprintf('The alert variant "%s" is not valid. Valid values are: %s', $variant, implode(', ', array_map(static fn (AlertVariant $variant): string => $variant->value, AlertVariant::cases()))));
+        }
+    }
+
+    public function getDefaultCssClass(): string
+    {
+        $cssClass = sprintf('alert %s', $this->variant->asBootstrapCssClass());
+        if ($this->withDismissButton) {
+            $cssClass .= ' alert-dismissible';
+        }
+
+        return $cssClass;
+    }
+}
diff --git a/src/Twig/Component/Option/AlertVariant.php b/src/Twig/Component/Option/AlertVariant.php
@@ -0,0 +1,20 @@
+<?php
+
+namespace EasyCorp\Bundle\EasyAdminBundle\Twig\Component\Option;
+
+enum AlertVariant: string
+{
+    case Primary = 'primary';
+    case Secondary = 'secondary';
+    case Success = 'success';
+    case Danger = 'danger';
+    case Warning = 'warning';
+    case Info = 'info';
+    case Light = 'light';
+    case Dark = 'dark';
+
+    public function asBootstrapCssClass(): string
+    {
+        return 'alert-'.$this->value;
+    }
+}
diff --git a/templates/components/Alert.html.twig b/templates/components/Alert.html.twig
@@ -0,0 +1,7 @@
+<div {{ attributes.defaults({class: this.defaultCssClass(), role: 'alert'}) }}>
+    <twig:block name="content"></twig:block>
+
+    {% if withDismissButton %}
+        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+    {% endif %}
+</div>
diff --git a/templates/flash_messages.html.twig b/templates/flash_messages.html.twig
@@ -7,10 +7,9 @@
     <div id="flash-messages">
         {% for label, messages in flash_messages %}
             {% for message in messages %}
-                <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
-                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+                <twig:ea:Alert variant="{{ label }}" withDismissButton>
                     {{ message|trans|raw }}
-                </div>
+                </twig:ea:Alert>
             {% endfor %}
         {% endfor %}
     </div>