Add an optional icon and description to the page title

Sylius · Dec 23, 2024 · d262dd1 · d262dd1
1 parent edfc39c
commit d262dd1
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/config/packages/sylius_twig_hooks.yaml b/config/packages/sylius_twig_hooks.yaml
@@ -25,3 +25,10 @@ sylius_twig_hooks:
                 props:
                     form: '@=_context.form'
                     initialFormData: '@=_context.resource'
+
+        'sylius_admin.speaker.index.content.header.title_block':
+            title:
+                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
+                configuration:
+                    icon: tabler:users
+                    subheader: app.ui.managing_your_speakers
diff --git a/src/BootstrapAdminUi/templates/shared/crud/common/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/common/content/header/title_block/title.html.twig
@@ -7,10 +7,12 @@
     {% set header = hookable_metadata.configuration.title %}
 {% endif %}
 
+{% set icon = hookable_metadata.configuration.icon|default(null) %}
+{% set subheader = hookable_metadata.configuration.subheader|default(null) %}
 {% set test_attribute = hookable_metadata.configuration.sylius_test_html_attribute is defined ? sylius_test_html_attribute(hookable_metadata.configuration.sylius_test_html_attribute) : null %}
 
 <div class="col-12 col-md" {{ test_attribute }}>
     <div class="d-md-flex gap-2 align-items-center">
-        {{ header.h1(header|trans) }}
+        {{ header.h1(header|trans, icon, subheader|trans) }}
     </div>
 </div>
diff --git a/src/BootstrapAdminUi/templates/shared/helper/header.html.twig b/src/BootstrapAdminUi/templates/shared/helper/header.html.twig
@@ -1,7 +1,17 @@
 {% macro default(level, header, icon, subheader) %}
-    <h{{ level}} class="page-title">
-        {{ header }}
-    </h{{ level }}>
+    <div class="d-flex gap-3 align-items-center">
+        {% if icon %}
+            <div>{{ ux_icon(icon, {'class': 'icon icon-md text-primary'}) }}</div>
+        {% endif %}
+        <div class="d-flex flex-column gap-2">
+            <h{{ level }} class="page-title">
+                {{ header }}
+            </h{{ level }}>
+            {% if subheader %}
+                <div>{{ subheader }}</div>
+            {% endif %}
+        </div>
+    </div>
 {% endmacro %}
 
 {% macro h1(header, icon, subheader) %}

diff --git a/translations/messages.en.yaml b/translations/messages.en.yaml
@@ -15,6 +15,7 @@ app:
         first_name: First name
         last_name: Last name
         library: Library
+        managing_your_speakers: Managing your speakers
         name: Name
         past_event: Past event
         show_talks: Show talks