[FEATURE] Group-work for HTML5 [x] checkbox-label-groups 62/32762/5
authorFelix Kopp <felix-source@phorax.com>
Sun, 14 Sep 2014 15:10:40 +0000 (17:10 +0200)
committerWouter Wolters <typo3@wouterwolters.nl>
Sun, 14 Sep 2014 16:10:58 +0000 (18:10 +0200)
Kick-Off patch to bring semantic HTML5 for checkbox+label groups
in the backend. Bootstrap compatible HTML5 mark-up for improved
semantics.

Adapts Web>Page and Web>List and Tools>Config.

Resolves: #61577
Releases: master
Change-Id: Ia0f030a3e3970462390563722d51f0bb0d4eb4de
Reviewed-on: http://review.typo3.org/32762
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Reviewed-by: Frank Nägler <typo3@naegler.net>
Tested-by: Frank Nägler <typo3@naegler.net>
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
typo3/sysext/backend/Classes/Controller/PageLayoutController.php
typo3/sysext/core/Documentation/Changelog/master/Feature-61577-BackendMarkupForCheckboxesWithLabel.rst [new file with mode: 0644]
typo3/sysext/lowlevel/Classes/View/ConfigurationView.php
typo3/sysext/recordlist/Classes/RecordList.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/structure/_main_form.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3kin.css

index e694ce9..09cc61c 100644 (file)
@@ -821,13 +821,36 @@ class PageLayoutController {
                }
                // Bottom controls (function menus):
                $q_count = $this->getNumberOfHiddenElements();
-               $h_func_b = BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], 'db_layout.php', '', 'id="checkTt_content_showHidden"') . '<label for="checkTt_content_showHidden">' . (!$q_count ? $GLOBALS['TBE_TEMPLATE']->dfw($GLOBALS['LANG']->getLL('hiddenCE', TRUE)) : $GLOBALS['LANG']->getLL('hiddenCE', TRUE) . ' (' . $q_count . ')') . '</label>';
-               $h_func_b .= '<br />' . BackendUtility::getFuncCheck($this->id, 'SET[showPalettes]', $this->MOD_SETTINGS['showPalettes'], 'db_layout.php', '', 'id="checkShowPalettes"') . '<label for="checkShowPalettes">' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showPalettes', TRUE) . '</label>';
+
+               $h_func_b = '<div class="checkbox">' .
+                       '<label for="checkTt_content_showHidden">' .
+                       BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], 'db_layout.php', '', 'id="checkTt_content_showHidden"') .
+                       (!$q_count ? $GLOBALS['TBE_TEMPLATE']->dfw($GLOBALS['LANG']->getLL('hiddenCE', TRUE)) : $GLOBALS['LANG']->getLL('hiddenCE', TRUE) . ' (' . $q_count . ')') .
+                       '</label>' .
+                       '</div>';
+
+               $h_func_b .= '<div class="checkbox">' .
+                       '<label for="checkShowPalettes">' .
+                       BackendUtility::getFuncCheck($this->id, 'SET[showPalettes]', $this->MOD_SETTINGS['showPalettes'], 'db_layout.php', '', 'id="checkShowPalettes"') .
+                       $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showPalettes', TRUE) .
+                       '</label>' .
+                       '</div>';
+
                if (ExtensionManagementUtility::isLoaded('context_help')) {
-                       $h_func_b .= '<br />' . BackendUtility::getFuncCheck($this->id, 'SET[showDescriptions]', $this->MOD_SETTINGS['showDescriptions'], 'db_layout.php', '', 'id="checkShowDescriptions"') . '<label for="checkShowDescriptions">' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showDescriptions', TRUE) . '</label>';
+                       $h_func_b .= '<div class="checkbox">' .
+                               '<label for="checkShowDescriptions">' .
+                               BackendUtility::getFuncCheck($this->id, 'SET[showDescriptions]', $this->MOD_SETTINGS['showDescriptions'], 'db_layout.php', '', 'id="checkShowDescriptions"') .
+                               $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.showDescriptions', TRUE) .
+                               '</label>' .
+                               '</div>';
                }
                if ($GLOBALS['BE_USER']->isRTE()) {
-                       $h_func_b .= '<br />' . BackendUtility::getFuncCheck($this->id, 'SET[disableRTE]', $this->MOD_SETTINGS['disableRTE'], 'db_layout.php', '', 'id="checkDisableRTE"') . '<label for="checkDisableRTE">' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.disableRTE', TRUE) . '</label>';
+                       $h_func_b .= '<div class="checkbox">' .
+                               '<label for="checkDisableRTE">' .
+                               BackendUtility::getFuncCheck($this->id, 'SET[disableRTE]', $this->MOD_SETTINGS['disableRTE'], 'db_layout.php', '', 'id="checkDisableRTE"') .
+                               $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.xlf:labels.disableRTE', TRUE) .
+                               '</label>' .
+                               '</div>';
                }
                // Add the function menus to bottom:
                $content .= $this->doc->section('', $h_func_b, 0, 0);
@@ -898,7 +921,14 @@ class PageLayoutController {
                foreach ($dblist->activeTables as $table => $value) {
                        if (!isset($dblist->externalTables[$table])) {
                                $q_count = $this->getNumberOfHiddenElements();
-                               $h_func_b = BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], 'db_layout.php', '', 'id="checkTt_content_showHidden"') . '<label for="checkTt_content_showHidden">' . (!$q_count ? $GLOBALS['TBE_TEMPLATE']->dfw($GLOBALS['LANG']->getLL('hiddenCE')) : $GLOBALS['LANG']->getLL('hiddenCE') . ' (' . $q_count . ')') . '</label>';
+
+                               $h_func_b = '<div class="checkbox">' .
+                                       '<label for="checkTt_content_showHidden">' .
+                                       BackendUtility::getFuncCheck($this->id, 'SET[tt_content_showHidden]', $this->MOD_SETTINGS['tt_content_showHidden'], 'db_layout.php', '', 'id="checkTt_content_showHidden"') .
+                                       (!$q_count ? $GLOBALS['TBE_TEMPLATE']->dfw($GLOBALS['LANG']->getLL('hiddenCE')) : $GLOBALS['LANG']->getLL('hiddenCE') . ' (' . $q_count . ')') .
+                                       '</label>' .
+                                       '</div>';
+
                                // Boolean: Display up/down arrows and edit icons for tt_content records
                                $dblist->tt_contentConfig['showCommands'] = 1;
                                // Boolean: Display info-marks or not
diff --git a/typo3/sysext/core/Documentation/Changelog/master/Feature-61577-BackendMarkupForCheckboxesWithLabel.rst b/typo3/sysext/core/Documentation/Changelog/master/Feature-61577-BackendMarkupForCheckboxesWithLabel.rst
new file mode 100644 (file)
index 0000000..8a97e1c
--- /dev/null
@@ -0,0 +1,24 @@
+===========================================================
+Feature: #61577 - Backend markup for checkboxes with labels
+===========================================================
+
+Description
+===========
+
+A typical checkbox with label form element should now be rendered as:
+
+::
+
+<div class="checkbox">
+       <label for="someId">
+               <input type="checkbox" id="someId" />
+               Label text
+       </label>
+</div>
+..
+
+Impact
+======
+
+If this HTML markup is applied, CSS styles by the TYPO3 core will take care of optimized view
+and custom CSS is obsolete.
\ No newline at end of file
index d17216c..cf66470 100644 (file)
@@ -130,9 +130,23 @@ class ConfigurationView {
                                                <label for="search_field">' . $GLOBALS['LANG']->getLL('enterSearchPhrase', TRUE) . '</label>
                                                <input type="text" id="search_field" name="search_field" value="' . htmlspecialchars($search_field) . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(20) . ' />
                                                <input type="submit" name="search" id="search" value="' . $GLOBALS['LANG']->getLL('search', TRUE) . '" />';
-               $this->content .= BackendUtility::getFuncCheck(0, 'SET[regexsearch]', $this->MOD_SETTINGS['regexsearch'], '', '', 'id="checkRegexsearch"') . '<label for="checkRegexsearch">' . $GLOBALS['LANG']->getLL('useRegExp', TRUE) . '</label>';
-               $this->content .= BackendUtility::getFuncCheck(0, 'SET[fixedLgd]', $this->MOD_SETTINGS['fixedLgd'], '', '', 'id="checkFixedLgd"') . '<label for="checkFixedLgd">' . $GLOBALS['LANG']->getLL('cropLines', TRUE) . '</label>
-                                               </div>';
+
+               $this->content .= '<div class="checkbox">' .
+                       '<label for="checkRegexsearch">' .
+                               BackendUtility::getFuncCheck(0, 'SET[regexsearch]', $this->MOD_SETTINGS['regexsearch'], '', '', 'id="checkRegexsearch"') .
+                               $GLOBALS['LANG']->getLL('useRegExp', TRUE) .
+                       '</label>' .
+                       '</div>';
+
+               $this->content .= '<div class="checkbox">' .
+                       '<label for="checkFixedLgd">' .
+                       BackendUtility::getFuncCheck(0, 'SET[fixedLgd]', $this->MOD_SETTINGS['fixedLgd'], '', '', 'id="checkFixedLgd"') .
+                       $GLOBALS['LANG']->getLL('cropLines', TRUE) .
+                       '</label>' .
+                       '</div>';
+
+               $this->content .= '</div>';
+
                $this->content .= $this->doc->spacer(5);
                switch ($this->MOD_SETTINGS['function']) {
                        case 0:
index 1f2353b..0ae7ce0 100644 (file)
@@ -226,6 +226,7 @@ class RecordList {
                // Loading current page record and checking access:
                $this->pageinfo = BackendUtility::readPageAccess($this->id, $this->perms_clause);
                $access = is_array($this->pageinfo) ? 1 : 0;
+
                // Apply predefined values for hidden checkboxes
                // Set predefined value for DisplayBigControlPanel:
                if ($this->modTSconfig['properties']['enableDisplayBigControlPanel'] === 'activated') {
@@ -245,6 +246,7 @@ class RecordList {
                } elseif ($this->modTSconfig['properties']['enableLocalizationView'] === 'deactivated') {
                        $this->MOD_SETTINGS['localization'] = FALSE;
                }
+
                // Initialize the dblist object:
                /** @var $dblist \TYPO3\CMS\Recordlist\RecordList\DatabaseRecordList */
                $dblist = GeneralUtility::makeInstance('TYPO3\\CMS\\Recordlist\\RecordList\\DatabaseRecordList');
@@ -401,23 +403,39 @@ class RecordList {
                                        -->
                                        <div id="typo3-listOptions">
                                                <form action="" method="post">';
+
                        // Add "display bigControlPanel" checkbox:
                        if ($this->modTSconfig['properties']['enableDisplayBigControlPanel'] === 'selectable') {
-                               $this->body .= BackendUtility::getFuncCheck($this->id, 'SET[bigControlPanel]', $this->MOD_SETTINGS['bigControlPanel'], '', $this->table ? '&table=' . $this->table : '', 'id="checkLargeControl"');
-                               $this->body .= '<label for="checkLargeControl">' . BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('largeControl', TRUE)) . '</label><br />';
+                               $this->body .= '<div class="checkbox">' .
+                                       '<label for="checkLargeControl">' .
+                                       BackendUtility::getFuncCheck($this->id, 'SET[bigControlPanel]', $this->MOD_SETTINGS['bigControlPanel'], '', $this->table ? '&table=' . $this->table : '', 'id="checkLargeControl"') .
+                                       BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('largeControl', TRUE)) .
+                                       '</label>' .
+                                       '</div>';
                        }
+
                        // Add "clipboard" checkbox:
                        if ($this->modTSconfig['properties']['enableClipBoard'] === 'selectable') {
                                if ($dblist->showClipboard) {
-                                       $this->body .= BackendUtility::getFuncCheck($this->id, 'SET[clipBoard]', $this->MOD_SETTINGS['clipBoard'], '', $this->table ? '&table=' . $this->table : '', 'id="checkShowClipBoard"');
-                                       $this->body .= '<label for="checkShowClipBoard">' . BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('showClipBoard', TRUE)) . '</label><br />';
+                                       $this->body .= '<div class="checkbox">' .
+                                               '<label for="checkShowClipBoard">' .
+                                               BackendUtility::getFuncCheck($this->id, 'SET[clipBoard]', $this->MOD_SETTINGS['clipBoard'], '', $this->table ? '&table=' . $this->table : '', 'id="checkShowClipBoard"') .
+                                               BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('showClipBoard', TRUE)) .
+                                               '</label>' .
+                                               '</div>';
                                }
                        }
+
                        // Add "localization view" checkbox:
                        if ($this->modTSconfig['properties']['enableLocalizationView'] === 'selectable') {
-                               $this->body .= BackendUtility::getFuncCheck($this->id, 'SET[localization]', $this->MOD_SETTINGS['localization'], '', $this->table ? '&table=' . $this->table : '', 'id="checkLocalization"');
-                               $this->body .= '<label for="checkLocalization">' . BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('localization', TRUE)) . '</label><br />';
+                               $this->body .= '<div class="checkbox">' .
+                                       '<label for="checkLocalization">' .
+                                       BackendUtility::getFuncCheck($this->id, 'SET[localization]', $this->MOD_SETTINGS['localization'], '', $this->table ? '&table=' . $this->table : '', 'id="checkLocalization"') .
+                                       BackendUtility::wrapInHelp('xMOD_csh_corebe', 'list_options', $GLOBALS['LANG']->getLL('localization', TRUE)) .
+                                       '</label>' .
+                                       '</div>';
                        }
+
                        $this->body .= '
                                                </form>
                                        </div>';
index a5282b8..45967b2 100644 (file)
 Form
 - - - - - - - - - - - - - - - - - - - - - */
 
-form {
-       margin: 0;
-}
-
 #typo3-docbody form {
        margin-bottom: 1.25em;
 }
 
 .t3-button,
-input,
 textarea,
 button {
        display: inline-block;
        margin: 0 0.5em 0.5em 0;
        padding: 3px 6px;
        vertical-align: middle;
-}
-
-input[type=checkbox] {
-       padding: 0;
-}
-
-label {
-       vertical-align: middle;
-       min-height: 25px;
-       line-height: 25px;
-}
-
-.checkbox,
-.radio,
-.checkbox:hover {
-       height: 13px;
-       margin-right: 5px;
-       vertical-align: middle;
-       width: 13px;
 }
\ No newline at end of file
index 6f39504..607c5d6 100644 (file)
@@ -9188,14 +9188,10 @@ Decorations (shadows etc.)
 /* - - - - - - - - - - - - - - - - - - - - -
 Form
 - - - - - - - - - - - - - - - - - - - - - */
-form {
-  margin: 0;
-}
 #typo3-docbody form {
   margin-bottom: 1.25em;
 }
 .t3-button,
-input,
 textarea,
 button {
   display: inline-block;
@@ -9203,22 +9199,6 @@ button {
   padding: 3px 6px;
   vertical-align: middle;
 }
-input[type=checkbox] {
-  padding: 0;
-}
-label {
-  vertical-align: middle;
-  min-height: 25px;
-  line-height: 25px;
-}
-.checkbox,
-.radio,
-.checkbox:hover {
-  height: 13px;
-  margin-right: 5px;
-  vertical-align: middle;
-  width: 13px;
-}
 /**
  * This file is part of the TYPO3 CMS project.
  *