[!!!][FEATURE] FormEngine Checkbox to bootstrap 06/35906/10
authorBenjamin Kott <benjamin.kott@wfp2.com>
Thu, 8 Jan 2015 15:11:07 +0000 (16:11 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Fri, 9 Jan 2015 09:23:54 +0000 (10:23 +0100)
* 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: Markus Klein <klein.t3@reelworx.at>
Reviewed-by: Benjamin Mack <benni@typo3.org>
Tested-by: Benjamin Mack <benni@typo3.org>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/backend/Classes/Form/Element/CheckboxElement.php
typo3/sysext/core/Documentation/Changelog/master/Breaking-64190-FormEngineCheckboxElement.rst [new file with mode: 0644]
typo3/sysext/core/Documentation/Changelog/master/Feature-64190-FormEngineCheckboxElement.rst [new file with mode: 0644]
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tceforms.less
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_form.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 3e539c2..c0b9b1a 100644 (file)
@@ -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>';
        }
 
        /**
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Breaking-64190-FormEngineCheckboxElement.rst b/typo3/sysext/core/Documentation/Changelog/master/Breaking-64190-FormEngineCheckboxElement.rst
new file mode 100644 (file)
index 0000000..147819b
--- /dev/null
@@ -0,0 +1,29 @@
+=========================================================================
+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.
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-64190-FormEngineCheckboxElement.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-64190-FormEngineCheckboxElement.rst
new file mode 100644 (file)
index 0000000..bba6d33
--- /dev/null
@@ -0,0 +1,37 @@
+==================================================================
+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.
index 59dd269..b98a463 100644 (file)
@@ -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;
index 2e1d531..d90b126 100644 (file)
@@ -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;
+                       }
+               }
+       }
+}
index d28e595..35a5cb0 100644 (file)
@@ -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;