Add section form field type, minor style fixes

modules/backend/assets/css/october.css

@@ -2423,12 +2423,15 @@ label{font-size:12px}
 .input-with-icon.right-align input{padding-right:32px !important}
 .input-with-icon.left-align > .icon{left:0}
 .input-with-icon.left-align input{padding-left:32px !important}
+.field-section{border-bottom:1px solid #e0e0e0;padding-top:3px;padding-bottom:7px}
+.field-section > p:first-child,.field-section > h4:first-child{margin:0}
 .field-textarea{resize:vertical}
 .field-textarea.size-tiny{min-height:50px}
 .field-textarea.size-small{min-height:100px}
 .field-textarea.size-large{min-height:200px}
 .field-textarea.size-huge{min-height:250px}
 .field-textarea.size-giant{min-height:350px}
+.field-checkboxlist .checkbox:last-of-type{margin-bottom:0}
 .field-checkboxlist-scrollable{background:white;border:1px solid #e2e2e2;padding-left:15px;height:300px}
 .field-checkboxlist-scrollable .checkbox{margin-top:15px;margin-bottom:5px}
 .field-checkboxlist-scrollable .checkbox ~ .checkbox{margin-top:0}

modules/backend/assets/less/controls/forms.less

@@ -224,6 +224,17 @@ label {
     }
 }
 
+.field-section {
+    border-bottom: 1px solid @color-form-field-border;
+    padding-top: 3px;
+    padding-bottom: 7px;
+
+    > p:first-child,
+    > h4:first-child {
+        margin: 0;
+    }
+}
+
 .field-textarea {
     resize: vertical;
     &.size-tiny { min-height: @size-tiny; }
@@ -233,6 +244,12 @@ label {
     &.size-giant { min-height: @size-giant; }
 }
 
+.field-checkboxlist {
+    .checkbox:last-of-type {
+        margin-bottom: 0;
+    }
+}
+
 .field-checkboxlist-scrollable {
     background: white;
     border: 1px solid @color-list-border;

modules/backend/widgets/form/partials/_field.htm

@@ -1,6 +1,6 @@
 <?php if (!$field->hidden): ?>
 
-    <?php if (in_array($field->type, ['checkbox', 'switch'])): ?>
+    <?php if (in_array($field->type, ['checkbox', 'switch', 'section'])): ?>
 
         <?= $this->makePartial('field_'.$field->type, ['field' => $field]) ?>
 

modules/backend/widgets/form/partials/_field_checkboxlist.htm

@@ -5,85 +5,86 @@
 <!-- Checkbox List -->
 <?php if (count($fieldOptions)): ?>
 
-    <?php if ($this->previewMode): ?>
-        <!-- Read-only -->
+    <div class="field-checkboxlist">
 
-        <?php $index = 0; foreach ($fieldOptions as $value => $option): ?>
-            <?php
-                $index++;
-                $checkboxId = 'checkbox_'.$field->getId().'_'.$index;
-                if (!in_array($value, $checkedValues)) continue;
-                if (is_string($option)) $option = [$option];
-            ?>
-            <div class="checkbox custom-checkbox">
-                <input
-                    type="checkbox"
-                    id="<?= $checkboxId ?>"
-                    name="<?= $field->getName() ?>[]"
-                    value="<?= $value ?>"
-                    disabled="disabled"
-                    checked="checked">
+        <?php if ($this->previewMode): ?>
 
-                <label for="<?= $checkboxId ?>">
-                    <?= e(trans($option[0])) ?>
-                </label>
-                <?php if (isset($option[1])): ?>
-                    <p class="help-block"><?= e(trans($option[1])) ?></p>
-                <?php endif ?>
-            </div>
-        <?php endforeach ?>
+            <?php $index = 0; foreach ($fieldOptions as $value => $option): ?>
+                <?php
+                    $index++;
+                    $checkboxId = 'checkbox_'.$field->getId().'_'.$index;
+                    if (!in_array($value, $checkedValues)) continue;
+                    if (is_string($option)) $option = [$option];
+                ?>
+                <div class="checkbox custom-checkbox">
+                    <input
+                        type="checkbox"
+                        id="<?= $checkboxId ?>"
+                        name="<?= $field->getName() ?>[]"
+                        value="<?= $value ?>"
+                        disabled="disabled"
+                        checked="checked">
 
-    <?php else: ?>
-        <!-- Editable -->
-
-        <?php if (count($fieldOptions) > 10): ?>
-            <!-- Quick selection -->
-            <small>
-                <?= e(trans('backend::lang.form.select')) ?>:
-                <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', true)"><?= e(trans('backend::lang.form.select_all')) ?></a>,
-                <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', false)"><?= e(trans('backend::lang.form.select_none')) ?></a>
-            </small>
-
-            <!-- Scrollable Checkbox list -->
-            <div class="field-checkboxlist-scrollable" id="<?= $field->getId('scrollable') ?>">
-                <div class="control-scrollbar" data-control="scrollbar">
-        <?php endif ?>
-
-        <input
-            type="hidden"
-            name="<?= $field->getName() ?>"
-            value="0" />
-
-        <?php $index = 0; foreach ($fieldOptions as $value => $option): ?>
-            <?php
-                $index++;
-                $checkboxId = 'checkbox_'.$field->getId().'_'.$index;
-                if (is_string($option)) $option = [$option];
-            ?>
-            <div class="checkbox custom-checkbox">
-                <input
-                    type="checkbox"
-                    id="<?= $checkboxId ?>"
-                    name="<?= $field->getName() ?>[]"
-                    value="<?= $value ?>"
-                    <?= in_array($value, $checkedValues) ? 'checked="checked"' : '' ?>>
-
-                <label for="<?= $checkboxId ?>">
-                    <?= e(trans($option[0])) ?>
-                </label>
-                <?php if (isset($option[1])): ?>
-                    <p class="help-block"><?= e(trans($option[1])) ?></p>
-                <?php endif ?>
-            </div>
-        <?php endforeach ?>
-
-        <?php if (count($fieldOptions) > 10): ?>
+                    <label for="<?= $checkboxId ?>">
+                        <?= e(trans($option[0])) ?>
+                    </label>
+                    <?php if (isset($option[1])): ?>
+                        <p class="help-block"><?= e(trans($option[1])) ?></p>
+                    <?php endif ?>
                 </div>
-            </div>
+            <?php endforeach ?>
+
+        <?php else: ?>
+
+            <?php if (count($fieldOptions) > 10): ?>
+                <!-- Quick selection -->
+                <small>
+                    <?= e(trans('backend::lang.form.select')) ?>:
+                    <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', true)"><?= e(trans('backend::lang.form.select_all')) ?></a>,
+                    <a href="javascript:;" onclick="jQuery('#<?= $field->getId('scrollable') ?> input[type=checkbox]').prop('checked', false)"><?= e(trans('backend::lang.form.select_none')) ?></a>
+                </small>
+
+                <!-- Scrollable Checkbox list -->
+                <div class="field-checkboxlist-scrollable" id="<?= $field->getId('scrollable') ?>">
+                    <div class="control-scrollbar" data-control="scrollbar">
+            <?php endif ?>
+
+            <input
+                type="hidden"
+                name="<?= $field->getName() ?>"
+                value="0" />
+
+            <?php $index = 0; foreach ($fieldOptions as $value => $option): ?>
+                <?php
+                    $index++;
+                    $checkboxId = 'checkbox_'.$field->getId().'_'.$index;
+                    if (is_string($option)) $option = [$option];
+                ?>
+                <div class="checkbox custom-checkbox">
+                    <input
+                        type="checkbox"
+                        id="<?= $checkboxId ?>"
+                        name="<?= $field->getName() ?>[]"
+                        value="<?= $value ?>"
+                        <?= in_array($value, $checkedValues) ? 'checked="checked"' : '' ?>>
+
+                    <label for="<?= $checkboxId ?>">
+                        <?= e(trans($option[0])) ?>
+                    </label>
+                    <?php if (isset($option[1])): ?>
+                        <p class="help-block"><?= e(trans($option[1])) ?></p>
+                    <?php endif ?>
+                </div>
+            <?php endforeach ?>
+
+            <?php if (count($fieldOptions) > 10): ?>
+                    </div>
+                </div>
+            <?php endif ?>
+
         <?php endif ?>
 
-    <?php endif ?>
-
+    </div>
 
 <?php else: ?>
 

modules/backend/widgets/form/partials/_field_section.htm

@@ -0,0 +1,10 @@
+<!-- Section -->
+<div class="field-section">
+    <?php if ($field->label): ?>
+        <h4><?= e(trans($field->label)) ?></h4>
+    <?php endif ?>
+
+    <?php if ($field->comment): ?>
+        <p class="help-block"><?= e(trans($field->comment)) ?></p>
+    <?php endif ?>
+</div>