|
| 1 | +{# |
| 2 | +
|
| 3 | +@var Content documentation |
| 4 | +@var Content[] documentation_items (Indexé par l'identifier du field) |
| 5 | +
|
| 6 | +extend_from_template = "@ibexadesign/content/edit/edit.html.twig" |
| 7 | +
|
| 8 | +@admin/content/edit/edit_help.html.twig (templates/themes/admin/content/edit/edit_help.html.twig) |
| 9 | +@admin/content/edit/edit.html.twig (@admin/content/edit/edit.html.twig) |
| 10 | +@IbexaAdminUi/themes/admin/content/edit_base.html.twig (@IbexaAdminUi/themes/admin/content/edit_base.html.twig) |
| 11 | +@IbexaAdminUi/themes/admin/ui/edit_base.html.twig (@IbexaAdminUi/themes/admin/ui/edit_base.html.twig) |
| 12 | +@IbexaAdminUi/themes/admin/ui/layout.html.twig (@IbexaAdminUi/themes/admin/ui/layout.html.twig) |
| 13 | +
|
| 14 | +#} |
1 | 15 | {% extends extend_from_template %} |
2 | 16 |
|
3 | | -{% trans_default_domain 'content_edit' %} |
| 17 | +{% trans_default_domain 'ezedithelp' %} |
4 | 18 |
|
5 | 19 | {% block form_before %} |
6 | 20 | {{ parent() }} |
7 | | - {% include "@ezdesign/content/edit/tophelp.html.twig" %} |
| 21 | + {% include "@ibexadesign/content/edit/tophelp.html.twig" %} |
8 | 22 | {% endblock %} |
9 | 23 |
|
10 | | - {% block form_fields %} |
| 24 | +{# |
| 25 | + L'idée d'origine c'était de copier le contenu des templates suivants et d'ajouter le bt et la popin... |
| 26 | + * vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig |
| 27 | + * vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/edit_base.html.twig |
| 28 | +
|
| 29 | + Je trouve que ça fait trop d'override de templates critiques |
11 | 30 |
|
12 | | - <section class="container mt-4 px-5 mb-5"> |
13 | | - <div class="card ez-card"> |
14 | | - <div class="card-body"> |
| 31 | + Je préfère donc ajouter le bt et la popin après et déplacer le bt avec du js. |
| 32 | +#} |
| 33 | +{% block form_fields %} |
| 34 | + {{ parent() }} {# On ne touche pas au formulaire existant. #} |
15 | 35 |
|
16 | | - {% for field in form.fieldsData if not field.rendered -%} |
17 | | - {% if field.value is defined %} |
18 | | - {% if items[field.vars.name] is defined %} |
| 36 | + {# Pour chaque item de documentation de champ. #} |
| 37 | + {% for identifier, item in documentation_items %} |
| 38 | + {% set button_id = 'nova-help-button--' ~ identifier %} |
| 39 | + {% set label_for = 'ezplatform_content_forms_content_edit_fieldsData_' ~ identifier ~ '_value' %} |
| 40 | + {% set modal_id = 'nova-help-modal--' ~ identifier %} |
19 | 41 |
|
20 | | - <div class="position-absolute" data-toggle="modal" data-target="#modal-{{ field.vars.name }}" |
21 | | - aria-expanded="false" aria-controls="modal-{{ field.vars.name }}"> |
22 | | - <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" |
23 | | - width="20px" height="20px" viewBox="0 0 20 20" version="1.1"> |
24 | | - <g> |
25 | | - <path stroke="none" fill-rule="nonzero" fill="rgb(100%,100%,100%)" |
26 | | - fill-opacity="1" |
27 | | - d="M 19.710938 10 C 19.710938 15.363281 15.363281 19.710938 10 19.710938 C 4.636719 19.710938 0.289062 15.363281 0.289062 10 C 0.289062 4.636719 4.636719 0.289062 10 0.289062 C 15.363281 0.289062 19.710938 4.636719 19.710938 10 Z M 19.710938 10 "/> |
28 | | - <path stroke="none" fill-rule="nonzero" fill="rgb(0%,0%,0%)" |
29 | | - fill-opacity="1" |
30 | | - d="M 10 0 C 4.480469 0 0 4.480469 0 10 C 0 15.519531 4.480469 20 10 20 C 15.519531 20 20 15.519531 20 10 C 20 4.480469 15.519531 0 10 0 Z M 10 1.28125 C 14.8125 1.28125 18.71875 5.1875 18.71875 10 C 18.71875 14.8125 14.8125 18.71875 10 18.71875 C 5.1875 18.71875 1.28125 14.8125 1.28125 10 C 1.28125 5.1875 5.1875 1.28125 10 1.28125 Z M 10.148438 3.40625 C 9.601562 3.410156 9.082031 3.480469 8.617188 3.613281 C 8.148438 3.746094 7.707031 3.960938 7.332031 4.234375 C 7.007812 4.46875 6.699219 4.773438 6.460938 5.085938 C 6.046875 5.640625 5.816406 6.253906 5.757812 6.957031 C 5.753906 7.003906 5.75 7.042969 5.75 7.042969 C 5.75 7.046875 7.921875 7.3125 7.929688 7.3125 C 7.9375 7.3125 7.941406 7.289062 7.960938 7.21875 C 8.152344 6.410156 8.507812 5.867188 9.054688 5.539062 C 9.488281 5.277344 10.035156 5.175781 10.632812 5.242188 C 10.90625 5.269531 11.15625 5.335938 11.371094 5.441406 C 11.644531 5.570312 11.890625 5.777344 12.066406 6.023438 C 12.21875 6.238281 12.3125 6.480469 12.339844 6.753906 C 12.347656 6.828125 12.347656 7 12.339844 7.074219 C 12.316406 7.257812 12.269531 7.414062 12.1875 7.570312 C 12.105469 7.730469 12.039062 7.824219 11.910156 7.953125 C 11.710938 8.160156 11.394531 8.4375 10.835938 8.894531 C 10.472656 9.1875 10.230469 9.410156 10.023438 9.628906 C 9.527344 10.144531 9.304688 10.535156 9.164062 11.101562 C 9.074219 11.472656 9.039062 11.855469 9.050781 12.417969 C 9.050781 12.558594 9.054688 12.691406 9.054688 12.714844 L 9.054688 12.757812 L 11.214844 12.757812 L 11.21875 12.519531 C 11.222656 12.191406 11.238281 11.980469 11.273438 11.777344 C 11.332031 11.449219 11.417969 11.277344 11.667969 10.996094 C 11.828125 10.816406 12.039062 10.621094 12.363281 10.351562 C 12.839844 9.949219 13.171875 9.652344 13.488281 9.335938 C 13.980469 8.847656 14.234375 8.511719 14.414062 8.117188 C 14.558594 7.808594 14.636719 7.503906 14.660156 7.164062 C 14.667969 7.085938 14.667969 6.863281 14.660156 6.769531 C 14.617188 6.066406 14.351562 5.445312 13.847656 4.867188 C 13.765625 4.773438 13.570312 4.578125 13.476562 4.492188 C 12.980469 4.054688 12.40625 3.757812 11.71875 3.585938 C 11.300781 3.476562 10.894531 3.425781 10.382812 3.410156 C 10.304688 3.40625 10.226562 3.40625 10.148438 3.40625 Z M 9.054688 13.765625 L 9.054688 15.964844 L 11.257812 15.964844 L 11.257812 13.765625 Z M 9.054688 13.765625 "/> |
31 | | - </g> |
32 | | - </svg> |
33 | | - </div> |
| 42 | + {# Création d'un boutton pour ouvrir la modal d'aide #} |
| 43 | + <button |
| 44 | + id="{{ button_id }}" |
| 45 | + type="button" |
| 46 | + class="btn ibexa-btn js-nova-help-bt" |
| 47 | + data-bs-toggle="modal" |
| 48 | + data-bs-target="#{{ modal_id }}" |
| 49 | + data-identifier="{{ identifier }}" |
| 50 | + title="{{ 'edithelp.help'|trans }}" |
| 51 | + > |
| 52 | + <svg class="ibexa-icon ibexa-icon--small ibexa-icon--trash"> |
| 53 | + <use xlink:href="{{ ibexa_icon_path('about-info') }}"></use> |
| 54 | + </svg> |
| 55 | + <span class="ibexa-btn__label"> |
| 56 | + {{ 'edithelp.help'|trans }} |
| 57 | + </span> |
| 58 | + </button> |
34 | 59 |
|
35 | | - {% endif %} |
36 | | - {% if items[field.vars.name] is defined %} |
37 | | - <!-- Modal --> |
38 | | - <div class="modal fade" id="modal-{{ field.vars.name }}" tabindex="-1" role="dialog" |
39 | | - aria-labelledby="modal-{{ field.vars.name }}" aria-hidden="true"> |
40 | | - <div class="modal-dialog modal-lg" role="document"> |
41 | | - <div class="modal-content"> |
42 | | - <div class="modal-body"> |
43 | | - <button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
44 | | - <span aria-hidden="true">×</span> |
45 | | - </button> |
46 | | - {% for item, value in items[field.vars.name].fields %} |
47 | | - {% if item != 'identifier' %} |
48 | | - <div class="documentation-item__field {% if item == 'title' %}h4{% endif %}"> |
49 | | - {{ ez_render_field(items[field.vars.name], item) }} |
50 | | - </div> |
51 | | - {% endif %} |
52 | | - {% endfor %} |
53 | | - </div> |
54 | | - </div> |
55 | | - </div> |
56 | | - </div> |
57 | | - {% endif %} |
58 | | - <div class="d-flex"> |
59 | | - <div class="flex-grow-1 mw-100"> |
60 | | - {{- form_widget(field) -}} |
61 | | - </div> |
62 | | - </div> |
63 | | - {% else %} |
64 | | - <div> |
65 | | - {{- form_label(field) -}} |
66 | | - <p class="non-editable"> |
67 | | - {{ "content.field.non_editable"|trans|desc('Field type is not editable') }} |
68 | | - </p> |
69 | | - {% do field.setRendered() %} |
70 | | - </div> |
71 | | - {% endif %} |
72 | | - {%- endfor %} |
73 | | - {{ form_widget(form.publish, {'attr': {'hidden': 'hidden'}}) }} |
74 | | - {{ form_widget(form.saveDraft, {'attr': {'hidden': 'hidden'}}) }} |
75 | | - {{ form_widget(form.cancel, {'attr': {'hidden': 'hidden'}}) }} |
76 | | - </div> |
77 | | - </div> |
78 | | - </section> |
| 60 | + {# Création de la modal d'aide #} |
| 61 | + {% embed '@ibexadesign/ui/component/modal/modal.html.twig' with { |
| 62 | + title: ibexa_content_name(item), |
| 63 | + id: modal_id, |
| 64 | + } %} |
| 65 | + {% block body_content %} |
| 66 | + {% if not ibexa_field_is_empty(item, 'body') %} |
| 67 | + {{ ibexa_render_field(item, 'body') }} |
| 68 | + {% endif %} |
| 69 | + {% if not ibexa_field_is_empty(item, 'image') %} |
| 70 | + {{ ibexa_render_field(item, 'image', { |
| 71 | + template: '@ibexadesign/fields/simple_ezimage_field.html.twig' |
| 72 | + }) }} |
| 73 | + {% endif %} |
| 74 | + {% endblock %} |
| 75 | + {% block footer %} |
| 76 | + <pre>identifier: {{ identifier }}</pre> |
| 77 | + {% endblock %} |
| 78 | + {% endembed %} |
79 | 79 |
|
80 | | - {% endblock %} |
| 80 | + {# Déplacement du boutton juste après le label #} |
| 81 | + <script> |
| 82 | + var bt = document.getElementById('{{ button_id }}') |
| 83 | + var label = document.querySelector('[for="{{ label_for }}"]'); |
| 84 | + if (bt && label) { |
| 85 | + label.after(bt) |
| 86 | + } |
| 87 | + </script> |
| 88 | + {% endfor %} |
| 89 | +{% endblock %} |
0 commit comments