Skip to content

Commit

Permalink
feature #34880 [Twig][Form] Twig theme for Foundation 6 (Lyssal)
Browse files Browse the repository at this point in the history
This PR was squashed before being merged into the 5.1-dev branch (closes #34880).

Discussion
----------

[Twig][Form] Twig theme for Foundation 6

| Q             | A
| ------------- | ---
| Branch?       | master
| Bug fix?      | no
| New feature?  | yes
| Deprecations? | no
| Tickets       |
| License       | MIT
| Doc PR        | -

Hi,

I propose a form theme for Foundation 6. This layout stylizes buttons, percent / money widgets and permits switch inputs adding a 'switch-input' attribute (as for https://symfony.com/blog/new-in-symfony-4-4-bootstrap-custom-switches).

![Foundation_6](https://user-images.githubusercontent.com/10855303/70390292-184cdc80-19ca-11ea-8ad8-090358dd9e35.png)

```php
public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        // ...
        ->add('checkbox-switch', Type\CheckboxType::class, [
            'attr' => [
                'class' => 'switch-input',
            ],
        ])
    ;
}
```

Commits
-------

e47a134 [Twig][Form] Twig theme for Foundation 6
  • Loading branch information
fabpot committed Jan 10, 2020
2 parents cc64b02 + e47a134 commit c146de1
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/Symfony/Bridge/Twig/CHANGELOG.md
Expand Up @@ -8,6 +8,8 @@ CHANGELOG
* removed `transChoice` filter and token
* `HttpFoundationExtension` requires a `UrlHelper` on instantiation
* removed support for implicit STDIN usage in the `lint:twig` command, use `lint:twig -` (append a dash) instead to make it explicit.
* added form theme for Foundation 6
* added support for Foundation 6 switches: add the `switch-input` class to the attributes of a `CheckboxType`

4.4.0
-----
Expand Down
@@ -0,0 +1,50 @@
{% extends "form_div_layout.html.twig" %}

{%- block checkbox_row -%}
{%- set parent_class = parent_class|default(attr.class|default('')) -%}
{%- if 'switch-input' in parent_class -%}
{{- form_label(form) -}}
{%- set attr = attr|merge({class: (attr.class|default('') ~ ' switch-input')|trim}) -%}
{{- form_widget(form) -}}
<label class="switch-paddle" for="{{ form.vars.id }}"></label>
{{- form_errors(form) -}}
{%- else -%}
{{- block('form_row') -}}
{%- endif -%}
{%- endblock checkbox_row -%}

{% block money_widget -%}
{% set prepend = not (money_pattern starts with '{{') %}
{% set append = not (money_pattern ends with '}}') %}
{% if prepend or append %}
<div class="input-group">
{% if prepend %}
<span class="input-group-label">{{ money_pattern|form_encode_currency }}</span>
{% endif %}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' input-group-field')|trim}) %}
{{- block('form_widget_simple') -}}
{% if append %}
<span class="input-group-label">{{ money_pattern|form_encode_currency }}</span>
{% endif %}
</div>
{% else %}
{{- block('form_widget_simple') -}}
{% endif %}
{%- endblock money_widget %}

{% block percent_widget -%}
{%- if symbol -%}
<div class="input-group">
{% set attr = attr|merge({class: (attr.class|default('') ~ ' input-group-field')|trim}) %}
{{- block('form_widget_simple') -}}
<span class="input-group-label">{{ symbol|default('%') }}</span>
</div>
{%- else -%}
{{- block('form_widget_simple') -}}
{%- endif -%}
{%- endblock percent_widget %}

{% block button_widget -%}
{% set attr = attr|merge({class: (attr.class|default('') ~ ' button')|trim}) %}
{{- parent() -}}
{%- endblock button_widget %}

0 comments on commit c146de1

Please sign in to comment.