diff --git a/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_horizontal_layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_horizontal_layout.html.twig new file mode 100644 index 000000000..d9fb09777 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_horizontal_layout.html.twig @@ -0,0 +1,131 @@ +{# use "bootstrap_5_layout.html.twig" #} +{% use "@ChillMain/Form/bootstrap5/bootstrap_5_layout.html.twig" %} + +{# Labels #} + +{% block form_label -%} + {%- if label is same as(false) -%} +
+ {%- else -%} + {%- set row_class = row_class|default(row_attr.class|default('')) -%} + {%- if 'form-floating' not in row_class and 'input-group' not in row_class -%} + {%- if expanded is not defined or not expanded -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label')|trim}) -%} + {%- endif -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ block('form_label_class'))|trim}) -%} + {%- endif -%} + {{- parent() -}} + {%- endif -%} +{%- endblock form_label %} + +{% block form_label_class -%} + col-sm-2 +{%- endblock form_label_class %} + +{# Rows #} + +{% block form_row -%} + {%- if expanded is defined and expanded -%} + {{ block('fieldset_form_row') }} + {%- else -%} + {%- set widget_attr = {} -%} + {%- if help is not empty -%} + {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} + {%- endif -%} + {%- set row_class = row_class|default(row_attr.class|default('mb-3')) -%} + {%- set is_form_floating = is_form_floating|default('form-floating' in row_class) -%} + {%- set is_input_group = is_input_group|default('input-group' in row_class) -%} + {#- Remove behavior class from the main container -#} + {%- set row_class = row_class|replace({'form-floating': '', 'input-group': ''}) -%} + + {%- if is_form_floating or is_input_group -%} +
+
+ {%- if is_form_floating -%} +
+ {{- form_widget(form, widget_attr) -}} + {{- form_label(form) -}} +
+ {%- elseif is_input_group -%} +
+ {{- form_label(form) -}} + {{- form_widget(form, widget_attr) -}} + {#- Hack to properly display help with input group -#} + {{- form_help(form) -}} +
+ {%- endif -%} + {%- if not is_input_group -%} + {{- form_help(form) -}} + {%- endif -%} + {{- form_errors(form) -}} +
+ {%- else -%} + {{- form_label(form) -}} +
+ {{- form_widget(form, widget_attr) -}} + {{- form_help(form) -}} + {{- form_errors(form) -}} +
+ {%- endif -%} + {##} + {%- endif -%} +{%- endblock form_row %} + +{% block fieldset_form_row -%} + {%- set widget_attr = {} -%} + {%- if help is not empty -%} + {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} + {%- endif -%} + +
+ {{- form_label(form) -}} +
+ {{- form_widget(form, widget_attr) -}} + {{- form_help(form) -}} + {{- form_errors(form) -}} +
+
+ +{%- endblock fieldset_form_row %} + +{% block submit_row -%} + {#--#} +
{#--#} +
+ {{- form_widget(form) -}} +
{#--#} + +{%- endblock submit_row %} + +{% block reset_row -%} + {#--#} +
{#--#} +
+ {{- form_widget(form) -}} +
{#--#} + +{%- endblock reset_row %} + +{% block button_row -%} + {#--#} +
{#--#} +
+ {{- form_widget(form) -}} +
{#--#} + +{%- endblock button_row %} + +{% block checkbox_row -%} + {#--#} +
{#--#} +
+ {{- form_widget(form) -}} + {{- form_help(form) -}} + {{- form_errors(form) -}} +
{#--#} + +{%- endblock checkbox_row %} + +{% block form_group_class -%} + col-sm-10 +{%- endblock form_group_class %} diff --git a/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_layout.html.twig new file mode 100644 index 000000000..cd6a261b3 --- /dev/null +++ b/src/Bundle/ChillMainBundle/Resources/views/Form/bootstrap5/bootstrap_5_layout.html.twig @@ -0,0 +1,374 @@ +{% use "bootstrap_base_layout.html.twig" %} + +{# Widgets #} + +{% block money_widget -%} + {%- set prepend = not (money_pattern starts with '{{') -%} + {%- set append = not (money_pattern ends with '}}') -%} + {%- if prepend or append -%} +
+ {%- if prepend -%} + {{ money_pattern|form_encode_currency }} + {%- endif -%} + {{- block('form_widget_simple') -}} + {%- if append -%} + {{ money_pattern|form_encode_currency }} + {%- endif -%} +
+ {%- else -%} + {{- block('form_widget_simple') -}} + {%- endif -%} +{%- endblock money_widget %} + +{% block date_widget -%} + {%- if widget == 'single_text' -%} + {{- block('form_widget_simple') -}} + {%- else -%} + {% if not valid %} + {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) -%} + {% set valid = true %} + {% endif %} + {%- if datetime is not defined or not datetime -%} +
+ {%- endif %} + {%- if label is not same as(false) -%} +
+ {{- form_label(form.year) -}} + {{- form_label(form.month) -}} + {{- form_label(form.day) -}} +
+ {%- endif -%} +
+ {{- date_pattern|replace({ + '{{ year }}': form_widget(form.year), + '{{ month }}': form_widget(form.month), + '{{ day }}': form_widget(form.day), + })|raw -}} +
+ {%- if datetime is not defined or not datetime -%} +
+ {%- endif -%} + {%- endif -%} +{%- endblock date_widget %} + +{% block time_widget -%} + {%- if widget == 'single_text' -%} + {{- block('form_widget_simple') -}} + {%- else -%} + {% if not valid %} + {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) -%} + {% set valid = true %} + {% endif %} + {%- if datetime is not defined or false == datetime -%} +
+ {%- endif -%} + {%- if label is not same as(false) -%} +
+ {{- form_label(form.hour) -}} + {%- if with_minutes -%}{{ form_label(form.minute) }}{%- endif -%} + {%- if with_seconds -%}{{ form_label(form.second) }}{%- endif -%} +
+ {%- endif -%} + {% if with_minutes or with_seconds %} +
+ {% endif %} + {{- form_widget(form.hour) -}} + {%- if with_minutes -%} + : + {{- form_widget(form.minute) -}} + {%- endif -%} + {%- if with_seconds -%} + : + {{- form_widget(form.second) -}} + {%- endif -%} + {% if with_minutes or with_seconds %} +
+ {% endif %} + {%- if datetime is not defined or false == datetime -%} +
+ {%- endif -%} + {%- endif -%} +{%- endblock time_widget %} + +{% block datetime_widget -%} + {%- if widget == 'single_text' -%} + {{- block('form_widget_simple') -}} + {%- else -%} + {% if not valid %} + {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) -%} + {% set valid = true %} + {% endif %} +
+ {{- form_widget(form.date, { datetime: true } ) -}} + {{- form_errors(form.date) -}} + {{- form_widget(form.time, { datetime: true } ) -}} + {{- form_errors(form.time) -}} +
+ {%- endif -%} +{%- endblock datetime_widget %} + +{% block dateinterval_widget -%} + {%- if widget == 'single_text' -%} + {{- block('form_widget_simple') -}} + {%- else -%} + {% if not valid %} + {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) -%} + {% set valid = true %} + {% endif %} +
+ {%- if with_years -%} +
+ {{ form_label(form.years) }} + {{ form_widget(form.years) }} +
+ {%- endif -%} + {%- if with_months -%} +
+ {{ form_label(form.months) }} + {{ form_widget(form.months) }} +
+ {%- endif -%} + {%- if with_weeks -%} +
+ {{ form_label(form.weeks) }} + {{ form_widget(form.weeks) }} +
+ {%- endif -%} + {%- if with_days -%} +
+ {{ form_label(form.days) }} + {{ form_widget(form.days) }} +
+ {%- endif -%} + {%- if with_hours -%} +
+ {{ form_label(form.hours) }} + {{ form_widget(form.hours) }} +
+ {%- endif -%} + {%- if with_minutes -%} +
+ {{ form_label(form.minutes) }} + {{ form_widget(form.minutes) }} +
+ {%- endif -%} + {%- if with_seconds -%} +
+ {{ form_label(form.seconds) }} + {{ form_widget(form.seconds) }} +
+ {%- endif -%} + {%- if with_invert %}{{ form_widget(form.invert) }}{% endif -%} +
+ {%- endif -%} +{%- endblock dateinterval_widget %} + +{% block percent_widget -%} + {%- if symbol -%} +
+ {{- block('form_widget_simple') -}} + {{ symbol|default('%') }} +
+ {%- else -%} + {{- block('form_widget_simple') -}} + {%- endif -%} +{%- endblock percent_widget %} + +{% block form_widget_simple -%} + {%- if type is not defined or type != 'hidden' %} + {%- set widget_class = ' form-control' %} + {%- if type|default('') == 'color' -%} + {%- set widget_class = widget_class ~ ' form-control-color' -%} + {%- elseif type|default('') == 'range' -%} + {%- set widget_class = ' form-range' -%} + {%- endif -%} + {%- set attr = attr|merge({class: (attr.class|default('') ~ widget_class)|trim}) -%} + {% endif -%} + {%- if type is defined and type in ['range', 'color'] %} + {# Attribute "required" is not supported #} + {% set required = false %} + {% endif -%} + {{- parent() -}} +{%- endblock form_widget_simple %} + +{%- block widget_attributes -%} + {%- if not valid %} + {% set attr = attr|merge({class: (attr.class|default('') ~ ' is-invalid')|trim}) %} + {% endif -%} + {{ parent() }} +{%- endblock widget_attributes -%} + +{%- block button_widget -%} + {%- set attr = attr|merge({class: (attr.class|default('btn-secondary') ~ ' btn')|trim}) -%} + {{- parent() -}} +{%- endblock button_widget %} + +{%- block submit_widget -%} + {%- set attr = attr|merge({class: (attr.class|default('btn-primary'))|trim}) -%} + {{- parent() -}} +{%- endblock submit_widget %} + +{%- block checkbox_widget -%} + {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%} + {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%} + {%- set row_class = 'form-check' -%} + {%- if 'checkbox-inline' in parent_label_class %} + {% set row_class = row_class ~ ' form-check-inline' %} + {% endif -%} + {%- if 'checkbox-switch' in parent_label_class %} + {% set row_class = row_class ~ ' form-switch' %} + {% endif -%} +
+ {{- form_label(form, null, { widget: parent() }) -}} +
+{%- endblock checkbox_widget %} + +{%- block radio_widget -%} + {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-check-input')|trim}) -%} + {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%} + {%- set row_class = 'form-check' -%} + {%- if 'radio-inline' in parent_label_class -%} + {%- set row_class = row_class ~ ' form-check-inline' -%} + {%- endif -%} +
+ {{- form_label(form, null, { widget: parent() }) -}} +
+{%- endblock radio_widget %} + +{%- block choice_widget_collapsed -%} + {%- set attr = attr|merge({class: (attr.class|default('') ~ ' form-select')|trim}) -%} + {{- parent() -}} +{%- endblock choice_widget_collapsed -%} + +{%- block choice_widget_expanded -%} +
+ {%- for child in form %} + {{- form_widget(child, { + parent_label_class: label_attr.class|default(''), + translation_domain: choice_translation_domain, + valid: valid, + }) -}} + {% endfor -%} +
+{%- endblock choice_widget_expanded %} + +{# Labels #} + +{%- block form_label -%} + {% if label is not same as(false) -%} + {%- set parent_label_class = parent_label_class|default(label_attr.class|default('')) -%} + {%- if compound is defined and compound -%} + {%- set element = 'legend' -%} + {%- if 'col-form-label' not in parent_label_class -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' col-form-label' )|trim}) -%} + {%- endif -%} + {%- else -%} + {%- set row_class = row_class|default(row_attr.class|default('')) -%} + {%- set label_attr = label_attr|merge({for: id}) -%} + {%- if 'col-form-label' not in parent_label_class -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ('input-group' in row_class ? ' input-group-text' : ' form-label') )|trim}) -%} + {%- endif -%} + {%- endif -%} + {%- endif -%} + {{- parent() -}} +{%- endblock form_label %} + +{%- block checkbox_radio_label -%} + {#- Do not display the label if widget is not defined in order to prevent double label rendering -#} + {%- if widget is defined -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' form-check-label')|trim}) -%} + {%- if not compound -%} + {% set label_attr = label_attr|merge({'for': id}) %} + {%- endif -%} + {%- if required -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) -%} + {%- endif -%} + {%- if parent_label_class is defined -%} + {%- set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' ' ~ parent_label_class)|replace({'checkbox-inline': '', 'radio-inline': ''})|trim}) -%} + {%- endif -%} + {%- if label is not same as(false) and label is empty -%} + {%- if label_format is not empty -%} + {%- set label = label_format|replace({ + '%name%': name, + '%id%': id, + }) -%} + {%- else -%} + {%- set label = name|humanize -%} + {%- endif -%} + {%- endif -%} + + {{ widget|raw }} {# adaptation before sf5 upgrade #}{% set label_html = false %}{# end adaptation before sf5 upgrade #} + + {%- if label is not same as(false) -%} + {%- if translation_domain is same as(false) -%} + {%- if label_html is same as(false) -%} + {{- label -}} + {%- else -%} + {{- label|raw -}} + {%- endif -%} + {%- else -%} + {%- if label_html is same as(false) -%} + {{- label|trans(label_translation_parameters, translation_domain) -}} + {%- else -%} + {{- label|trans(label_translation_parameters, translation_domain)|raw -}} + {%- endif -%} + {%- endif -%} + {%- endif -%} + + {%- endif -%} +{%- endblock checkbox_radio_label %} + +{# Rows #} + +{%- block form_row -%} + {%- if compound is defined and compound -%} + {%- set element = 'fieldset' -%} + {%- endif -%} + {%- set widget_attr = {} -%} + {%- if help is not empty -%} + {%- set widget_attr = {attr: {'aria-describedby': id ~"_help"}} -%} + {%- endif -%} + {%- set row_class = row_class|default(row_attr.class|default('mb-3')|trim) -%} + <{{ element|default('div') }}{% with {attr: row_attr|merge({class: row_class})} %}{{ block('attributes') }}{% endwith %}> + {%- if 'form-floating' in row_class -%} + {{- form_widget(form, widget_attr) -}} + {{- form_label(form) -}} + {%- else -%} + {{- form_label(form) -}} + {{- form_widget(form, widget_attr) -}} + {%- endif -%} + {{- form_help(form) -}} + {{- form_errors(form) -}} + +{%- endblock form_row %} + +{%- block button_row -%} + + {{- form_widget(form) -}} + +{%- endblock button_row %} + +{# Errors #} + +{%- block form_errors -%} + {%- if errors|length > 0 -%} + {%- for error in errors -%} +
{{ error.message }}
+ {%- endfor -%} + {%- endif %} +{%- endblock form_errors %} + +{# Help #} + +{%- block form_help -%} + {% set row_class = row_attr.class|default('') %} + {% set help_class = ' form-text' %} + {% if 'input-group' in row_class %} + {#- Hack to properly display help with input group -#} + {% set help_class = ' input-group-text' %} + {% endif %} + {%- if help is not empty -%} + {%- set help_attr = help_attr|merge({class: (help_attr.class|default('') ~ help_class ~ ' mb-0')|trim}) -%} + {%- endif -%} + {{- parent() -}} +{%- endblock form_help %}