10000 feature #12587 [TwigBridge] Foundation form layout integration (totophe) · symfony/symfony@564f06b · GitHub
[go: up one dir, main page]
Skip to content

Commit 564f06b

Browse files
fabpotfabpot
committed
feature #12587 [TwigBridge] Foundation form layout integration (totophe)
This PR was submitted for the 2.7 branch but it was merged into the 2.8 branch instead (closes #12587). Discussion ---------- [TwigBridge] Foundation form layout integration | Q | A | ------------- | --- | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | License | MIT As symfony integrate in its roots Bootstrap layout, why not also include Foundation layout? I think it's not a matters of including all the css frameworks in symfony but at least having two instead of one would be interesting to have a basic choice. @hhamon told me I should create this PR :-D :-p ;-) Commits ------- 7653d95 [TwigBridge] Foundation form layout integration
2 parents 693af63 + 7653d95 commit 564f06b

File tree

1 file changed

+321
-0
lines changed

1 file changed

+321
-0
lines changed

‎src/Symfony/Bridge/Twig/Resources/views/Form/foundation_5_layout.html.twig

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
{% extends "form_div_layout.html.twig" %}
2+
3+
{# Based on Foundation 5 Doc #}
4+
{# Widgets #}
5+
6+
{% block form_widget_simple -%}
7+
{% if errors|length > 0 -%}
8+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' error')|trim}) %}
9+
{% endif %}
10+
{{- parent() -}}
11+
{%- endblock form_widget_simple %}
12+
13+
{% block textarea_widget -%}
14+
{% if errors|length > 0 -%}
15+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' error')|trim}) %}
16+
{% endif %}
17+
{{- parent() -}}
18+
{%- endblock textarea_widget %}
19+
20+
{% block button_widget -%}
21+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' button')|trim}) %}
22+
{{- parent() -}}
23+
{%- endblock %}
24+
25+
{% block money_widget -%}
26+
<div class="row collapse">
27+
{% set prepend = '{{' == money_pattern[0:2] %}
28+
{% if not prepend %}
29+
<div class="small-3 large-2 columns">
30+
<span class="prefix">{{ money_pattern|replace({ '{{ widget }}':''}) }}</span>
31+
</div>
32+
{% endif %}
33+
<div class="small-9 large-10 columns">
34+
{{- block('form_widget_simple') -}}
35+
</div>
36+
{% if prepend %}
37+
<div class="small-3 large-2 columns">
38+
<span class="postfix">{{ money_pattern|replace({ '{{ widget }}':''}) }}</span>
39+
</div>
40+
{% endif %}
41+
</div>
42+
{%- endblock money_widget %}
43+
44+
{% block percent_widget -%}
45+
<div class="row collapse">
46+
<div class="small-9 large-10 columns">
47+
{{- block('form_widget_simple') -}}
48+
</div>
49+
<div class="small-3 large-2 columns">
50+
<span class="postfix">%</span>
51+
</div>
52+
</div>
53+
{%- endblock percent_widget %}
54+
55+
{% block datetime_widget -%}
56+
{% if widget == 'single_text' %}
57+
{{- block('form_widget_simple') -}}
58+
{% else %}
59+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) %}
60+
<div class="row">
61+
<div class="large-7 columns">{{ form_errors(form.date) }}</div>
62+
<div class="large-5 columns">{{ form_errors(form.time) }}</div>
63+
</div>
64+
<div {{ block('widget_container_attributes') }}>
65+
<div class="large-7 columns">{{ form_widget(form.date, { datetime: true } ) }}</div>
66+
<div class="large-5 columns">{{ form_widget(form.time, { datetime: true } ) }}</div>
67+
</div>
68+
{% endif %}
69+
{%- endblock datetime_widget %}
70+
71+
{% block date_widget -%}
72+
{% if widget == 'single_text' %}
73+
{{- block('form_widget_simple') -}}
74+
{% else %}
75+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) %}
76+
{% if datetime is not defined or not datetime %}
77+
<div {{ block('widget_container_attributes') }}>
78+
{% endif %}
79+
{{- date_pattern|replace({
80+
'{{ year }}': '<div class="large-4 columns">' ~ form_widget(form.year) ~ '</div>',
81+
'{{ month }}': '<div class="large-4 columns">' ~ form_widget(form.month) ~ '</div>',
82+
'{{ day }}': '<div class="large-4 columns">' ~ form_widget(form.day) ~ '</div>',
83+
})|raw -}}
84+
{% if datetime is not defined or not datetime %}
85+
</div>
86+
{% endif %}
87+
{% endif %}
88+
{%- endblock date_widget %}
89+
90+
{% block time_widget -%}
91+
{% if widget == 'single_text' %}
92+
{{- block('form_widget_simple') -}}
93+
{% else %}
94+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' row')|trim}) %}
95+
{% if datetime is not defined or false == datetime %}
96+
<div {{ block('widget_container_attributes') -}}>
97+
{% endif %}
98+
{% if with_seconds %}
99+
<div class="large-4 columns">{{ form_widget(form.hour) }}</div>
100+
<div class="large-4 columns">
101+
<div class="row collapse">
102+
<div class="small-3 large-2 columns">
103+
<span class="prefix">:</span>
104+
</div>
105+
<div class="small-9 large-10 columns">
106+
{{ form_widget(form.minute) }}
107+
</div>
108+
</div>
109+
</div>
110+
<div class="large-4 columns">
111+
<div class="row collapse">
112+
<div class="small-3 large-2 columns">
113+
<span class="prefix">:</span>
114+
</div>
115+
<div class="small-9 large-10 columns">
116+
{{ form_widget(form.second) }}
117+
</div>
118+
</div>
119+
</div>
120+
{% else %}
121+
<div class="large-6 columns">{{ form_widget(form.hour) }}</div>
122+
<div class="large-6 columns">
123+
<div class="row collapse">
124+
<div class="small-3 large-2 columns">
125+
<span class="prefix">:</span>
126+
</div>
127+
<div class="small-9 large-10 columns">
128+
{{ form_widget(form.minute) }}
129+
</div>
130+
</div>
131+
</div>
132+
{% endif %}
133+
{% if datetime is not defined or false == datetime %}
134+
</div>
135+
{% endif %}
136+
{% endif %}
137+
{%- endblock time_widget %}
138+
139+
{% block choice_widget_collapsed -%}
140+
{% if errors|length > 0 -%}
141+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' error')|trim}) %}
142+
{% endif %}
143+
144+
{% if multiple -%}
145+
{% set attr = attr|merge({style: (attr.style|default('') ~ ' height: auto; background-image: none;')|trim}) %}
146+
{% endif %}
147+
148+
{% if required and placeholder is none and not placeholder_in_choices and not multiple -%}
149+
{% set required = false %}
150+
{%- endif -%}
151+
<select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple" data-customforms="disabled"{% endif %}>
152+
{% if placeholder is not none -%}
153+
<option value=""{% if required and value is empty %} selected="selected"{% endif %}>{{ placeholder|trans({}, translation_domain) }}</option>
154+
{%- endif %}
155+
{%- if preferred_choices|length > 0 -%}
156+
{% set options = preferred_choices %}
157+
{{- block('choice_widget_options') -}}
158+
{% if choices|length > 0 and separator is not none -%}
159+
<option disabled="disabled">{{ separator }}</option>
160+
{%- endif %}
161+
{%- endif -%}
162+
{% set options = choices -%}
163+
{{- block('choice_widget_options') -}}
164+
</select>
165+
{%- endblock choice_widget_collapsed %}
166+
167+
{% block choice_widget_expanded -%}
168+
{% if '-inline' in label_attr.class|default('') %}
169+
<ul class="inline-list">
170+
{% for child in form %}
171+
<li>{{ form_widget(child, {
172+
parent_label_class: label_attr.class|default(''),
173+
}) }}</li>
174+
{% endfor %}
175+
</ul>
176+
{% else %}
177+
<div {{ block('widget_container_attributes') }}>
178+
{% for child in form %}
179+
{{ form_widget(child, {
180+
parent_label_class: label_attr.class|default(''),
181+
}) }}
182+
{% endfor %}
183+
</div>
184+
{% endif %}
185+
{%- endblock choice_widget_expanded %}
186+
187+
{% block checkbox_widget -%}
188+
{% set parent_label_class = parent_label_class|default('') %}
189+
{% if errors|length > 0 -%}
190+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' error')|trim}) %}
191+
{% endif %}
192+
{% if 'checkbox-inline' in parent_label_class %}
193+
{{ form_label(form, null, { widget: parent() }) }}
194+
{% else %}
195+
<div class="checkbox">
196+
{{ form_label(form, null, { widget: parent() }) }}
197+
</div>
198+
{% endif %}
199+
{%- endblock checkbox_widget %}
200+
201+
{% block radio_widget -%}
202+
{% set parent_label_class = parent_label_class|default('') %}
203+
{% if 'radio-inline' in parent_label_class %}
204+
{{ form_label(form, null, { widget: parent() }) }}
205+
{% else %}
206+
{% if errors|length > 0 -%}
207+
{% set attr = attr|merge({class: (attr.class|default('') ~ ' error')|trim}) %}
208+
{% endif %}
209+
<div class="radio">
210+
{{ form_label(form, null, { widget: parent() }) }}
211+
</div>
212+
{% endif %}
213+
{%- endblock radio_widget %}
214+
215+
{# Labels #}
216+
217+
{% block form_label -%}
218+
{% if errors|length > 0 -%}
219+
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' error')|trim}) %}
220+
{% endif %}
221+
{{- parent() -}}
222+
{%- endblock form_label %}
223+
224+
{% block choice_label -%}
225+
{% if errors|length > 0 -%}
226+
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' error')|trim}) %}
227+
{% endif %}
228+
{# remove the checkbox-inline and radio-inline class, it's only useful for embed labels #}
229+
{% set label_attr = label_attr|merge({class: label_attr.class|default('')|replace({'checkbox-inline': '', 'radio-inline': ''})|trim}) %}
230+
{{- block('form_label') -}}
231+
{%- endblock %}
232+
233+
{% block checkbox_label -%}
234+
{{- block('checkbox_radio_label') -}}
235+
{%- endblock checkbox_label %}
236+
237+
{% block radio_label -%}
238+
{{- block('checkbox_radio_label') -}}
239+
{%- endblock radio_label %}
240+
241+
{% block checkbox_radio_label -%}
242+
{% if required %}
243+
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' required')|trim}) %}
244+
{% endif %}
245+
{% if errors|length > 0 -%}
246+
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ ' error')|trim}) %}
247+
{% endif %}
248+
{% if parent_label_class is defined %}
249+
{% set label_attr = label_attr|merge({class: (label_attr.class|default('') ~ parent_label_class)|trim}) %}
250+
{% endif %}
251+
{% if label is empty %}
252+
{% set label = name|humanize %}
253+
{% endif %}
254+
<label{% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>
255+
{{ widget|raw }}
256+
{{ label|trans({}, translation_domain) }}
257+
</label>
258+
{%- endblock checkbox_radio_label %}
259+
260+
{# Rows #}
261+
262+
{% block form_row -%}
263+
<div class="row">
264+
<div class="large-12 columns{% if (not compound or force_error|default(false)) and not valid %} error{% endif %}">
265+
{{ form_label(form) }}
266+
{{ form_widget(form) }}
267+
{{ form_errors(form) }}
268+
</div>
269+
</div>
270+
{%- endblock form_row %}
271+
272+
{% block choice_row -%}
273+
{% set force_error = true %}
274+
{{ block('form_row') }}
275+
{%- endblock choice_row %}
276+
277+
{% block date_row -%}
278+
{% set force_error = true %}
279+
{{ block('form_row') }}
280+
{%- endblock date_row %}
281+
282+
{% block time_row -%}
283+
{% set force_error = true %}
284+
{{ block('form_row') }}
285+
{%- endblock time_row %}
286+
287+
{% block datetime_row -%}
288+
{% set force_error = true %}
289+
{{ block('form_row') }}
290+
{%- endblock datetime_row %}
291+
292+
{% block checkbox_row -%}
293+
<div class="row">
294+
<div class="large-12 columns{% if not valid %} error{% endif %}">
295+
{{ form_widget(form) }}
296+
{{ form_errors(form) }}
297+
</div>
298+
</div>
299+
{%- endblock checkbox_row %}
300+
301+
{% block radio_row -%}
302+
<div class="row">
303+
<div class="large-12 columns{% if not valid %} error{% endif %}">
304+
{{ form_widget(form) }}
305+
{{ form_errors(form) }}
306+
</div>
307+
</div>
308+
{%- endblock radio_row %}
309+
310+
{# Errors #}
311+
312+
{% block form_errors -%}
313+
{% if errors|length > 0 -%}
314+
{% if form.parent %}<small class="error">{% else %}<div data-alert class="alert-box alert">{% endif %}
315+
{%- for error in errors -%}
316+
{{ error.message }}
317+
{% if not loop.last %}, {% endif %}
318+
{%- endfor -%}
319+
{% if form.parent %}</small>{% else %}</div>{% endif %}
320+
{%- endif %}
321+
{%- endblock form_errors %}

0 commit comments

Comments
 (0)
0