Merge pull request #210 from Sommerregen/feature/add-fieldset-form-field

Add fieldset form field

themes/grav/scss/template/_forms.scss

@@ -472,3 +472,64 @@ form {
         z-index: 10005;
     }
 }
+
+// Fieldset
+#admin-main .admin-block h2 {
+    font-size: 1.25rem;
+    margin: 0 0 .5rem;
+
+    letter-spacing: normal;
+}
+.form-fieldset {
+    background-color: #f7f7f7;
+    border: 2px solid #e1e1e1;
+    margin: 1rem 2rem;
+}
+
+.form-fieldset--label {
+    background-color: #f3f3f3;
+
+    &:hover,
+    .form-fieldset input:checked + & {
+        background-color: #eee;
+    }
+
+    label {
+        display: table;
+        font-size: 1.25rem;
+        padding: .5rem 1rem;
+        width: 100%;
+    }
+
+    h2 {
+        margin: 0 !important;
+    }
+
+    .actions {
+        font-size: initial;
+        display: table-cell;
+        text-align: right;
+        vertical-align: middle;
+    }
+
+    & + .form-data {
+        margin-top: 1rem;
+        padding: 0;
+    }
+}
+.form-fieldset--cursor {
+    cursor: pointer;
+}
+.form-fieldset--info {
+    font-size: small;
+}
+.form-fieldset > input:checked ~ .form-data,
+.form-fieldset--collapsible .open,
+.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .close {
+    display: block;
+}
+.form-fieldset > .form-data,
+.form-fieldset--collapsible .close,
+.form-fieldset input:checked ~ .form-label .form-fieldset--collapsible .open {
+    display: none;
+}

themes/grav/templates/forms/fields/fieldset/fieldset.html.twig

@@ -0,0 +1,67 @@
+{% extends "forms/field.html.twig" %}
+
+{% block field %}
+  <div class="form-fieldset{% if vertical %} vertical{% endif %}">
+    {% block contents %}
+      <input type="checkbox" class="hidden" id="fieldset_collapsible_{{ field.name }}"{% if not field.collapsible or not field.collapsed %} checked="checked"{% endif %} />
+
+      <div class="form-label form-fieldset--label">
+        <h2>
+          <label{% if field.collapsible %} for="fieldset_collapsible_{{ field.name }}" class="form-fieldset--cursor"{% endif %}>
+            {% if field.help %}
+            <span class="hint--bottom" data-hint="{{ field.help|e|tu }}">
+            {% endif %}
+            {% block label %}
+              {% if field.icon %}
+                <i class="fa fa-fw fa-{{ field.icon }}"></i>
+              {% endif %}
+              {{ field.title|tu }}
+              {{ field.validate.required in ['on', 'true', 1] ? '<span class="required">*</span>' }}
+              {% if field.info %}
+                <span class="form-fieldset--info">{{ field.info|tu }}</span>
+              {% endif %}
+            {% endblock %}
+          {% if field.help %}
+          </span>
+          {% endif %}
+
+          {# Actions panel #}
+          <span class="actions">
+            {% block actions %}
+              {% if field.collapsible %}
+                <span class="form-fieldset--collapsible">
+                  <i class="fa fa-chevron-down open"></i>
+                  <i class="fa fa-chevron-up close"></i>
+                </span>
+              {% endif %}
+            {% endblock %}
+          </span>
+        </label>
+      </h2>
+      </div>
+      <div class="form-data"
+        {#{% block global_attributes %}
+          data-grav-field="{{ field.type }}"
+          data-grav-disabled="{{ originalValue is null ? 'true' : 'false' }}"
+          data-grav-default="{{ field.default|json_encode()|e('html_attr') }}"
+        {% endblock %}#}
+      >
+
+        {% block group %}
+          {% if field.text %}
+            <p>{% if grav.twig.twig.filters['tu'] is defined %}{{ field.text|tu }}{% else %}{{ field.text|t }}{% endif %}<p>
+          {% endif %}
+
+          {% if field.fields %}
+            {% for field in field.fields %}
+              {% if field.type %}
+                {% set value = data.value(field.name) %}
+                {% include ["forms/fields/#{field.type}/#{field.type}.html.twig", 'forms/fields/text/text.html.twig'] %}
+              {% endif %}
+            {% endfor %}
+          {% endif %}
+        {% endblock %}
+      </div>
+    {% endblock %}
+  </div>
+{% endblock %}