Commit 6f7ff565 authored by Benjamin Kott's avatar Benjamin Kott Committed by Christian Kuhn
Browse files

[!!!][FEATURE] FormEngine Checkbox to bootstrap

* Streamline checkbox styling
* Add inline rendering for checkboxes
* Add responsive breakpoints

Releases: master
Resolves: #64190
Change-Id: I84d4596543131a545070103b73190a9620bda44c
Reviewed-on: http://review.typo3.org/35906

Reviewed-by: default avatarMarkus Klein <klein.t3@reelworx.at>
Reviewed-by: Benni Mack's avatarBenjamin Mack <benni@typo3.org>
Tested-by: Benni Mack's avatarBenjamin Mack <benni@typo3.org>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent e60e8ab9
......@@ -56,8 +56,34 @@ class CheckboxElement extends AbstractFormElement {
$formElementValue = (int)$additionalInformation['itemFormElValue'];
$cols = (int)$config['cols'];
if ($cols > 1) {
$colWidth = floor(12 / $cols);
$colLeftover = 12 - $colWidth * $cols;
$colWidth = (int)floor(12 / $cols);
$colClass = "col-md-12";
$colClear = array();
if ($colWidth == 6){
$colClass = "col-sm-6";
$colClear = array(
2 => 'visible-sm-block visible-md-block visible-lg-block',
);
} elseif ($colWidth === 4) {
$colClass = "col-sm-4";
$colClear = array(
3 => 'visible-sm-block visible-md-block visible-lg-block',
);
} elseif ($colWidth === 3) {
$colClass = "col-sm-6 col-md-3";
$colClear = array(
2 => 'visible-sm-block',
4 => 'visible-md-block visible-lg-block',
);
} elseif ($colWidth <= 2) {
$colClass = "checkbox-column col-sm-6 col-md-3 col-lg-2";
$colClear = array(
2 => 'visible-sm-block',
4 => 'visible-md-block',
6 => 'visible-lg-block'
);
}
$item .= '<div class="checkbox-row row">';
for ($counter = 0; $counter < $numberOfItems; $counter++) {
// use "default" for typical single checkboxes
$tsConfigKey = ($numberOfItems === 1 ? 'default' : $items[$counter][1]);
......@@ -70,25 +96,19 @@ class CheckboxElement extends AbstractFormElement {
} else {
$label = $items[$counter][0];
}
if (!($counter % $cols)) {
$item .= '<div class="row">';
}
$item .= '<div class="col-md-' . $colWidth . '">'
. $this->renderSingleCheckboxElement($label, $counter, $formElementValue, $numberOfItems, $additionalInformation, $disabled)
. '</div>';
if ($counter % $cols + 1 == $cols) {
$item .= ($colLeftover > 0 ? '<div class="col-md-' . $colLeftover . '"></div>' : '') . '</div>';
}
}
if ($counter % $cols) {
$rest = $cols - $counter % $cols;
for ($counter = 0; $counter < $rest; $counter++) {
$item .= '<div class="col-md-' . $colWidth . '></div>';
}
if ($counter > 0) {
$item .= ($colLeftover > 0 ? '<div class="col-md-' . $colLeftover . '"></div>' : '') . '</div>';
$item .=
'<div class="checkbox-column ' . $colClass . '">'
. $this->renderSingleCheckboxElement($label, $counter, $formElementValue, $numberOfItems, $additionalInformation, $disabled) .
'</div>';
if ($counter + 1 < $numberOfItems && !empty($colClear)) {
foreach ($colClear as $rowBreakAfter => $clearClass) {
if (($counter + 1) % $rowBreakAfter === 0) {
$item .= '<div class="clearfix '. $clearClass . '"></div>';
}
}
}
}
$item .= '</div>';
} else {
for ($counter = 0; $counter < $numberOfItems; $counter++) {
// use "default" for typical single checkboxes
......@@ -123,6 +143,8 @@ class CheckboxElement extends AbstractFormElement {
* @return string Single element HTML
*/
protected function renderSingleCheckboxElement($label, $itemCounter, $formElementValue, $numberOfItems, $additionalInformation, $disabled) {
$config = $additionalInformation['fieldConf']['config'];
$inline = !empty($config['cols']) && $config['cols'] === "inline";
$checkboxParameters = $this->checkBoxParams(
$additionalInformation['itemFormElName'],
$formElementValue,
......@@ -132,21 +154,20 @@ class CheckboxElement extends AbstractFormElement {
);
$checkboxName = $additionalInformation['itemFormElName'] . '_' . $itemCounter;
$checkboxId = $additionalInformation['itemFormElID'] . '_' . $itemCounter;
return '<div class="checkbox' . (!$disabled ?: ' disabled') . '">'
. '<label for="' . $checkboxId . '">'
. '<input '
. 'type="checkbox" '
. 'value="1" '
. 'class="' . $this->cssClassTypeElementPrefix . 'check" '
. 'name="' . $checkboxName . '" '
. $checkboxParameters . ' '
. $additionalInformation['onFocus'] . ' '
. (!$disabled ?: ' disabled="disabled"')
. ' id="' . $checkboxId . '" '
. ' />'
. htmlspecialchars($label)
. '</label>'
. '</div>';
return '
<div class="checkbox' . ($inline ? ' checkbox-inline' : '') . (!$disabled ? '' : ' disabled') . '">
<label>
<input type="checkbox"
value="1"
class="' . $this->cssClassTypeElementPrefix . 'check"
name="' . $checkboxName . '"
' . $checkboxParameters . '
' . $additionalInformation['onFocus'] . '
' . (!$disabled ?: ' disabled="disabled"') . '
id="' . $checkboxId . '" />
' . ($label ? htmlspecialchars($label) : '&nbsp;') . '
</label>
</div>';
}
/**
......
=========================================================================
Breaking: #63818 - FormEngine Checkbox Element limitation of cols setting
=========================================================================
Description
===========
The TCA configuration for checkbox cols has been changed. We reduced the
number of accepted values to 1, 2, 3, 4 and 6 to provide a responsive experience.
For usecases like checkboxes for weekdays like mo, tu, we, th, fr, sa, su
we introduced a new value "inline".
Impact
======
For values equals 5 or above 6 the rendering of 6 will be used.
Affected installations
======================
Installations with TCA column configurations for checkboxes with values
equals 5 or above 6.
Migration
=========
Choose between one of the supported valued or change the display to inline.
==================================================================
Feature: #62960 - Inline rendering for FormEngine Checkbox Element
==================================================================
Description
===========
The checkbox setting "inline" for cols can be used to render the checkboxes
directly next to each other to reduce the amount of used space.
Example Configuration:
::
'weekdays' => array(
'label' => 'Weekdays',
'config' => array(
'type' => 'check',
'items' => array(
array('Mo', ''),
array('Tu', ''),
array('We', ''),
array('Th', ''),
array('Fr', ''),
array('Sa', ''),
array('Su', ''),
),
'cols' => 'inline',
),
),
..
Impact
======
Checkboxes will be placed directly next to each other to reduce the amount of used space.
......@@ -219,12 +219,6 @@ select option.c-divider {
margin-top: 4px;
}
.typo3-TCEforms .checkbox,
.typo3-TCEforms .checkbox:hover {
position: relative;
z-index: 3500;
}
.typo3-TCEforms td.formField-header,
.typo3-TCEforms td.palette-header,
.typo3-TCEforms td.formField-field {
......@@ -658,11 +652,6 @@ table#typo3-altdoc-header input,
border: 0;
}
.typo3-TCEforms .checkbox,
.typo3-TCEforms .checkbox:hover {
border: 0;
}
.t3-tceforms-widget-null-wrapper {
display: inline-block;
float: right;
......
......@@ -23,14 +23,6 @@ textarea.fixed-font {
font-family: "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", monospace;
}
.checkbox,
.checkbox:hover,
input[type="checkbox"] {
background: none;
border: none;
cursor: pointer;
}
//
// Groups
//
......@@ -92,4 +84,45 @@ a.typo3-goBack {
margin-right: 0.5em;
}
}
}
\ No newline at end of file
}
//
// Radio & Checkbox
//
.radio-row,
.checkbox-row {
margin-top: 10px;
margin-bottom: 5px;
}
.radio-column,
.checkbox-column {
margin-bottom: 5px;
> .radio,
> .checkbox {
margin: 0;
}
}
.radio-inline,
.checkbox-inline {
&.radio,
&.checkbox {
display: block;
margin-left: 0;
margin-right: 10px;
margin-bottom: 10px;
padding: 0;
@media (max-width: @screen-xs-max) {
& + .radio,
& + .checkbox {
margin-top: -5px;
}
}
@media (min-width: @screen-sm-min) {
display: inline-block;
margin-top: 10px;
label {
white-space: nowrap;
}
}
}
}
......@@ -9058,11 +9058,6 @@ select option.c-divider {
margin-bottom: 10px;
margin-top: 4px;
}
.typo3-TCEforms .checkbox,
.typo3-TCEforms .checkbox:hover {
position: relative;
z-index: 3500;
}
.typo3-TCEforms td.formField-header,
.typo3-TCEforms td.palette-header,
.typo3-TCEforms td.formField-field {
......@@ -9398,10 +9393,6 @@ table#typo3-altdoc-header input,
background: none;
border: 0;
}
.typo3-TCEforms .checkbox,
.typo3-TCEforms .checkbox:hover {
border: 0;
}
.t3-tceforms-widget-null-wrapper {
display: inline-block;
float: right;
......@@ -10237,13 +10228,6 @@ textarea {
textarea.fixed-font {
font-family: "Lucida Console", "Lucida Sans Typewriter", "Bitstream Vera Sans Mono", monospace;
}
.checkbox,
.checkbox:hover,
input[type="checkbox"] {
background: none;
border: none;
cursor: pointer;
}
.t3-form-field-group {
margin-bottom: 1.5em;
}
......@@ -10284,6 +10268,58 @@ a.typo3-goBack {
.form-inline-spaced .form-group label {
margin-right: 0.5em;
}
.radio-row,
.checkbox-row {
margin-top: 10px;
margin-bottom: 5px;
}
.radio-column,
.checkbox-column {
margin-bottom: 5px;
}
.radio-column > .radio,
.checkbox-column > .radio,
.radio-column > .checkbox,
.checkbox-column > .checkbox {
margin: 0;
}
.radio-inline.radio,
.checkbox-inline.radio,
.radio-inline.checkbox,
.checkbox-inline.checkbox {
display: block;
margin-left: 0;
margin-right: 10px;
margin-bottom: 10px;
padding: 0;
}
@media (max-width: 767px) {
.radio-inline.radio + .radio,
.checkbox-inline.radio + .radio,
.radio-inline.checkbox + .radio,
.checkbox-inline.checkbox + .radio,
.radio-inline.radio + .checkbox,
.checkbox-inline.radio + .checkbox,
.radio-inline.checkbox + .checkbox,
.checkbox-inline.checkbox + .checkbox {
margin-top: -5px;
}
}
@media (min-width: 768px) {
.radio-inline.radio,
.checkbox-inline.radio,
.radio-inline.checkbox,
.checkbox-inline.checkbox {
display: inline-block;
margin-top: 10px;
}
.radio-inline.radio label,
.checkbox-inline.radio label,
.radio-inline.checkbox label,
.checkbox-inline.checkbox label {
white-space: nowrap;
}
}
body#typo3-backend-php {
margin: 0;
padding: 0;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment