[TASK] Func Module: Unify IconSelect 51/36751/2
authorBenjamin Kott <benjamin.kott@outlook.com>
Sun, 8 Feb 2015 19:28:04 +0000 (20:28 +0100)
committerMathias Schreiber <mathias.schreiber@wmdb.de>
Mon, 9 Feb 2015 18:37:45 +0000 (19:37 +0100)
Create multiple pages wizard now adapts the FormEngine styling.
The new styling needs more space, the amount of default visible
fields is reduced to 5.

Resolves: #64915
Releases: master
Change-Id: I6a12bf411cd492a2f94caab62a907386d4be1c5b
Reviewed-on: http://review.typo3.org/36751
Reviewed-by: Wouter Wolters <typo3@wouterwolters.nl>
Tested-by: Wouter Wolters <typo3@wouterwolters.nl>
Reviewed-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Michael Oehlhof <typo3@oehlhof.de>
Reviewed-by: Felix Kopp <felix-source@phorax.com>
Tested-by: Felix Kopp <felix-source@phorax.com>
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Reviewed-by: Frederic Gaus <gaus@flagbit.de>
Tested-by: Frederic Gaus <gaus@flagbit.de>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_main_form.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css
typo3/sysext/wizard_crpages/Classes/Controller/CreatePagesWizardModuleFunctionController.php
typo3/sysext/wizard_crpages/Resources/Public/JavaScript/WizardCreatePages.js

index b713775..60e0fad 100644 (file)
@@ -52,6 +52,13 @@ a.typo3-goBack {
 .form-control-wrap {
        margin: 9px 0;
 }
+.row {
+       > .form-group {
+               > .form-control-wrap {
+                       margin-bottom: 0;
+               }
+       }
+}
 
 //
 // Select
index 64df5f5..c420de3 100644 (file)
@@ -9712,6 +9712,9 @@ a.typo3-goBack {
 .form-control-wrap {
   margin: 9px 0;
 }
+.row > .form-group > .form-control-wrap {
+  margin-bottom: 0;
+}
 select.form-control[multiple],
 select.form-control[size] {
   min-height: 156px;
index 1c84f97..6a9cdc2 100644 (file)
@@ -14,6 +14,7 @@ namespace TYPO3\CMS\WizardCrpages\Controller;
  * The TYPO3 project - inspiring people to share!
  */
 
+use TYPO3\CMS\Backend\Utility\IconUtility;
 use TYPO3\CMS\Backend\Utility\BackendUtility;
 use TYPO3\CMS\Core\Utility\GeneralUtility;
 use TYPO3\CMS\Core\Messaging\FlashMessage;
@@ -125,17 +126,42 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
                        } else {
                                // Display create form
                                $this->typeSelectHtml = $this->getTypeSelectHtml();
-                               $lines = array();
                                $tableData = array();
-                               for ($a = 0; $a < 9; $a++) {
+                               for ($a = 0; $a < 5; $a++) {
                                        $tableData[] = $this->getFormLine($a);
                                }
-                               $lines[] = '<div class="table-fit"><table id="formFieldContainer" class="table table-striped table-hover"><tbody id="formFieldContainerBody">' . implode(LF, $tableData) . '</tbody></table></div>';
-                               $theCode .= '<h4>' . $this->getLanguageService()->getLL('wiz_newPages') . ':</h4>' . implode('', $lines) . '<input class="btn btn-default" type="button" id="createNewFormFields" value="' . $this->getLanguageService()->getLL('wiz_newPages_addMoreLines') . '" />';
-                               $theCode .= '<div class="checkbox"><label for="createInListEnd"><input type="checkbox" name="createInListEnd" id="createInListEnd" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_listEnd') . '</label></div>';
-                               $theCode .= '<div class="checkbox"><label for="hidePages"><input type="checkbox" name="hidePages" id="hidePages" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_hidePages') . '</label></div>';
-                               $theCode .= '<div class="checkbox"><label for="hidePagesInMenus"><input type="checkbox" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />' . $this->getLanguageService()->getLL('wiz_newPages_hidePagesInMenus') . '</label></div>';
-                               $theCode .= '<input class="btn btn-default" type="submit" name="create" value="' . $this->getLanguageService()->getLL('wiz_newPages_lCreate') . '" /> <input class="btn btn-default" type="reset" value="' . $this->getLanguageService()->getLL('wiz_newPages_lReset') . '" />';
+                               $theCode .= '
+                                       <h4>' . $this->getLanguageService()->getLL('wiz_newPages') . ':</h4>
+                                       <div class="form-group t3js-wizardcrpages-container">
+                                               ' . implode(LF, $tableData) . '
+                                       </div>
+                                       <div class="form-group">
+                                               <input class="btn btn-default t3js-wizardcrpages-createnewfields" type="button" value="' . $this->getLanguageService()->getLL('wiz_newPages_addMoreLines') . '" />
+                                       </div>
+                                       <div class="form-group">
+                                               <div class="checkbox">
+                                                       <label for="createInListEnd">
+                                                               <input type="checkbox" name="createInListEnd" id="createInListEnd" value="1" />
+                                                               ' . $this->getLanguageService()->getLL('wiz_newPages_listEnd') . '
+                                                       </label>
+                                               </div>
+                                               <div class="checkbox">
+                                                       <label for="hidePages">
+                                                               <input type="checkbox" name="hidePages" id="hidePages" value="1" />
+                                                               ' . $this->getLanguageService()->getLL('wiz_newPages_hidePages') . '
+                                                       </label>
+                                               </div>
+                                               <div class="checkbox">
+                                                       <label for="hidePagesInMenus">
+                                                               <input type="checkbox" name="hidePagesInMenus" id="hidePagesInMenus" value="1" />
+                                                               ' . $this->getLanguageService()->getLL('wiz_newPages_hidePagesInMenus') . '
+                                                       </label>
+                                               </div>
+                                       </div>
+                                       <div class="form-group">
+                                               <input class="btn btn-default" type="submit" name="create" value="' . $this->getLanguageService()->getLL('wiz_newPages_lCreate') . '" />
+                                               <input class="btn btn-default" type="reset" value="' . $this->getLanguageService()->getLL('wiz_newPages_lReset') . '" />
+                                       </div>';
 
                                /** @var \TYPO3\CMS\Core\Page\PageRenderer $pageRenderer */
                                $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer();
@@ -169,16 +195,35 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
                        $index = '{0}';
                        $label = '{1}';
                }
-               $content = '<label for="page_new_' . $index . '"> ' . $this->getLanguageService()->getLL('wiz_newPages_page') . ' ' . $label;
-               $content .= ':&nbsp;</label>';
-               // Title
-               $content .= '<input type="text" id="page_new_' . $index . '" name="data[pages][NEW' . $index . '][title]"' . $this->pObj->doc->formWidth(35) . ' />&nbsp';
-               // type selector
-               $content .= '<span>' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_general.xlf:LGL.type') . '</span>';
-               $content .= '<select class="select icon-select" name="data[pages][NEW' . $index . '][doktype]" style="background: url(&quot;' . $this->backPath . 'sysext/t3skin/icons/gfx/i/pages.gif&quot;) no-repeat scroll 0% 50% rgb(255, 255, 255); padding: 1px 1px 1px 24px;">';
-               $content .= $this->typeSelectHtml;
-               $content .= '</select>';
-               return '<tr id="form-line-' . $index . '"><td>' . $content . '</td></tr>';
+               $content = '' .
+                       '<div class="form-section" id="form-line-' . $index . '">' .
+                               '<div class="row">' .
+                                       '<div class="form-group col-sm-6">' .
+                                               '<label for="page_new_' . $index . '">' .
+                                                       $this->getLanguageService()->getLL('wiz_newPages_page') . ' ' . $label . ':' .
+                                               '</label>' .
+                                               '<div class="form-control-wrap">' .
+                                                       '<input class="form-control" type="text" id="page_new_' . $index . '" name="data[pages][NEW' . $index . '][title]" />' .
+                                               '</div>' .
+                                       '</div>' .
+                                       '<div class="form-group col-sm-6">' .
+                                               '<label>' .
+                                                       $this->getLanguageService()->sL('LLL:EXT:lang/locallang_general.xlf:LGL.type') .
+                                               '</label>' .
+                                               '<div class="form-control-wrap">' .
+                                                       '<div class="input-group">' .
+                                                               '<div id="page_new_icon_' . $index . '" class="input-group-addon input-group-icon">' .
+                                                                       '<img src="' . IconUtility::skinImg($this->backPath, 'gfx/i/pages.gif', '', 1) . '" />' .
+                                                               '</div>' .
+                                                               '<select class="form-control form-control-adapt t3js-wizardcrpages-select-doktype" name="data[pages][NEW' . $index . '][doktype]" data-target="#page_new_icon_' . $index . '">' .
+                                                                       $this->typeSelectHtml .
+                                                               '</select>' .
+                                                       '</div>' .
+                                               '</div>' .
+                                       '</div>' .
+                               '</div>' .
+                       '</div>';
+               return $content;
        }
 
        /**
@@ -222,28 +267,17 @@ class CreatePagesWizardModuleFunctionController extends \TYPO3\CMS\Backend\Modul
                        foreach ($items as $item) {
                                $label = $this->getLanguageService()->sL($item[0], TRUE);
                                $value = $item[1];
-                               $icon = ($item[2] ? $this->getStyleAttributeWithIcon($item[2]) : '');
-                               $groupContent .= '<option ' . $icon . ' value="' . htmlspecialchars($value) . '">' . $label . '</option>';
+                               $icon = (!empty($item[2]) ? '<img src="' . IconUtility::skinImg($this->backPath, 'gfx/' . $item[2], '', 1) . '" />' : '');
+                               $groupContent .= '<option value="' . htmlspecialchars($value) . '" data-icon="' . htmlspecialchars($icon) . '">' . $label . '</option>';
                        }
                        $groupLabel = $this->getLanguageService()->sL($groupLabel, TRUE);
-                       $content .= '<optgroup class="c-divider" label="' . $groupLabel . '">' . $groupContent . '</optgroup>';
+                       $content .= '<optgroup label="' . $groupLabel . '">' . $groupContent . '</optgroup>';
                }
 
                return $content;
        }
 
        /**
-        * Returns the style attribute for a select element with the icon in it
-        *
-        * @param string $src
-        * @return string
-        */
-       protected function getStyleAttributeWithIcon($src) {
-               $icon = \TYPO3\CMS\Backend\Utility\IconUtility::skinImg($this->backPath, 'gfx/' . $src, '', 1);
-               return 'style="background: #fff url(&quot;' . $icon. '&quot;) 0% 50% no-repeat; height: 16px; padding-top: 2px; padding-left: 22px;"';
-       }
-
-       /**
         * Returns LanguageService
         *
         * @return \TYPO3\CMS\Lang\LanguageService
index 003ddef..ca9b639 100644 (file)
 define('TYPO3/CMS/WizardCrpages/WizardCreatePages', ['jquery'], function($) {
 
        var WizardCreatePages = {
-               lineCounter: 9,
-               containerSelector: '#formFieldContainerBody',
-               addMoreFieldsButtonSelector: '#createNewFormFields'
+               lineCounter: 5,
+               containerSelector: '.t3js-wizardcrpages-container',
+               addMoreFieldsButtonSelector: '.t3js-wizardcrpages-createnewfields',
+               doktypeSelector: '.t3js-wizardcrpages-select-doktype'
        };
 
        WizardCreatePages.createNewFormFields = function() {
@@ -33,7 +34,8 @@ define('TYPO3/CMS/WizardCrpages/WizardCreatePages', ['jquery'], function($) {
 
        WizardCreatePages.actOnTypeSelectChange = function($selectElement) {
                var $optionElement = $selectElement.find(':selected');
-               $selectElement.css('background-image', $optionElement.css('background-image'));
+               var $target = $($selectElement.data('target'));
+               $target.html($optionElement.data('icon'));
        };
 
        /**
@@ -44,7 +46,7 @@ define('TYPO3/CMS/WizardCrpages/WizardCreatePages', ['jquery'], function($) {
                        WizardCreatePages.createNewFormFields();
                });
 
-               $(document).on('change', '.icon-select', function() {
+               $(document).on('change', this.doktypeSelector, function() {
                        WizardCreatePages.actOnTypeSelectChange($(this));
                });
        };