Fix list not applying toggleable / style: vertical (#518)

* Fix list not applying `toggleable`
* Fix #503 list not applying `style: vertical`
This commit is contained in:
Flavio Copes
2016-04-25 22:11:51 +02:00
parent 7128543e8a
commit ed6c4dd481
3 changed files with 30 additions and 9 deletions

View File

@@ -55,7 +55,7 @@ export default class Form {
let parent = toggle.closest('.form-field'); let parent = toggle.closest('.form-field');
let label = parent.find('label.toggleable'); let label = parent.find('label.toggleable');
let fields = parent.find('.form-data'); let fields = parent.find('.form-data');
let inputs = fields.find('input, select, textarea'); let inputs = fields.find('input, select, textarea, button');
label.add(fields).css('opacity', enabled ? '' : 0.7); label.add(fields).css('opacity', enabled ? '' : 0.7);
inputs.map((index, input) => { inputs.map((index, input) => {

File diff suppressed because one or more lines are too long

View File

@@ -1,11 +1,23 @@
{% extends "forms/field.html.twig" %}
{% set value = (value is null ? field.default : value) %} {% set value = (value is null ? field.default : value) %}
{% set name = field.name %} {% set name = field.name %}
{% set btnLabel = field.btnLabel is defined ? field.btnLabel : "PLUGIN_ADMIN.ADD_ITEM" %} {% set btnLabel = field.btnLabel is defined ? field.btnLabel : "PLUGIN_ADMIN.ADD_ITEM" %}
{% block contents %}
<div class="form-field grid pure-g"> <div class="form-label{% if not vertical %} block size-1-4 pure-u-1-4{% endif %}">
<div class="form-label block size-1-4 pure-u-1-4"> {% if field.toggleable %}
<label> <span class="checkboxes toggleable" data-grav-field="toggleable" data-grav-field-name="{{ (scope ~ field.name)|fieldName }}">
<input type="checkbox"
id="toggleable_{{ field.name }}"
{% if toggleableChecked %}value="1"{% endif %}
name="toggleable_{{ (scope ~ field.name)|fieldName }}"
{% if toggleableChecked %}checked="checked"{% endif %}
>
<label for="toggleable_{{ field.name }}"></label>
</span>
{% endif %}
<label{{ (field.toggleable ? ' class="toggleable" for="toggleable_' ~ field.name ~ '"')|raw }}>
{% if field.help %} {% if field.help %}
<span class="hint--bottom" data-hint="{{ field.help|e|tu }}">{{ field.label|tu }}</span> <span class="hint--bottom" data-hint="{{ field.help|e|tu }}">{{ field.label|tu }}</span>
{% else %} {% else %}
@@ -14,7 +26,14 @@
{{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }} {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
</label> </label>
</div> </div>
<div class="form-data block size-3-4 pure-u-3-4"> <div class="form-data{% if not vertical %} block size-3-4 pure-u-3-4{% endif %}"
{% block global_attributes %}
data-grav-field="{{ field.type }}"
data-grav-disabled="{{ toggleableChecked }}"
data-grav-default="{{ field.default|json_encode|e('html_attr') }}"
{% endblock %}
>
<div class="form-list-wrapper {{ field.size }}" data-type="collection"> <div class="form-list-wrapper {{ field.size }}" data-type="collection">
<ul data-collection-holder="{{ name }}" <ul data-collection-holder="{{ name }}"
{% if field.sort is same as(false) %} {% if field.sort is same as(false) %}
@@ -62,7 +81,8 @@
{% endif %} {% endif %}
</ul> </ul>
<div class="collection-actions"> <div class="collection-actions">
<button class="button" type="button" data-action="add"><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button> <button class="button" type="button" data-action="add"
{% if field.disabled or isDisabledToggleable %}disabled="disabled"{% endif %}><i class="fa fa-plus"></i> {{ btnLabel|e|tu }}</button>
</div> </div>
{%- set itemName = name ? name ~ '.*' : '*' -%} {%- set itemName = name ? name ~ '.*' : '*' -%}
@@ -107,4 +127,5 @@
<div style="display: none;" data-collection-config="{{ name }}"></div> <div style="display: none;" data-collection-config="{{ name }}"></div>
</div> </div>
</div> </div>
</div> {% endblock %}