[TASK] Port Flexform sections to Bootstrap 80/44380/3
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Thu, 29 Oct 2015 23:26:18 +0000 (00:26 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Fri, 30 Oct 2015 09:17:26 +0000 (10:17 +0100)
Resolves: #71149
Releases: master
Change-Id: I2625ad4a23175f44674b45bebb61f9f39789fcab
Reviewed-on: https://review.typo3.org/44380
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Build/Resources/Public/Less/TYPO3/_element_panel.less
Build/Resources/Public/Less/TYPO3/_element_tceforms.less
typo3/sysext/backend/Classes/Form/Container/FlexFormContainerContainer.php
typo3/sysext/backend/Classes/Form/Container/FlexFormSectionContainer.php
typo3/sysext/backend/Resources/Public/JavaScript/FormEngineFlexForm.js
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index de8fcaa..553a6bc 100644 (file)
@@ -31,6 +31,7 @@
 //
 .panel-heading {
        position: relative;
+       &[data-toggle="formengine-flex"],
        &[data-toggle="formengine-inline"] {
                cursor: pointer;
        }
index ef223fa..6fbd7cd 100644 (file)
 //
 // TCEforms Sections
 //
-
-.t3-flex-section-header .t3-record-title {
-       font-weight: bold;
-}
-
 .t3-flex-section {
        clear: both;
        margin: 5px 0;
 }
 
-.t3-flex-section-header,
-.t3-form-field-container-flexsection {
-       padding-left: 20px;
-}
-
 .t3-form-field-header-flexsection {
        width: 100%;
        height: 16px;
 }
 
-.t3-form-field-label-flexsection {
-       border-top: 1px solid #cdcdcd;
-       padding: 5px 10px;
-}
-
-.t3-form-field-toggle-flexsection {
-       padding: 5px 0 5px 20px;
-}
-
 .t3-form-field-add-flexsection {
        border-top: 1px solid #cdcdcd;
-       padding: 10px 5px 5px 20px;
+       padding: 10px 5px 5px 0;
 }
 
 .t3-form-flex,
 .t3-form-field-container-flexsections {
-       background: #dadada;
        margin: 5px 0;
        clear: both;
 }
index de7a2e2..3ead01c 100644 (file)
@@ -47,11 +47,11 @@ class FlexFormContainerContainer extends AbstractContainer
         $flexFormFieldIdentifierPrefix = $flexFormFieldIdentifierPrefix . '-' . GeneralUtility::shortMd5(uniqid('id', true));
 
         $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
-        $toggleIcons = '<span class="t3-flex-control-toggle-icon-open" style="' . ($flexFormContainerElementCollapsed ? 'display: none;' : '') . '">'
-            . $iconFactory->getIcon('actions-move-down', Icon::SIZE_SMALL)->render()
+        $toggleIcons = '<span class="t3js-flex-control-toggle-icon-open" style="' . ($flexFormContainerElementCollapsed ? 'display: none;' : '') . '">'
+            . $iconFactory->getIcon('actions-view-list-collapse', Icon::SIZE_SMALL)->render()
             . '</span>';
-        $toggleIcons .= '<span class="t3-flex-control-toggle-icon-close" style="' . ($flexFormContainerElementCollapsed ? '' : 'display: none;') . '">'
-            . $iconFactory->getIcon('actions-move-right', Icon::SIZE_SMALL)->render()
+        $toggleIcons .= '<span class="t3js-flex-control-toggle-icon-close" style="' . ($flexFormContainerElementCollapsed ? '' : 'display: none;') . '">'
+            . $iconFactory->getIcon('actions-view-list-expand', Icon::SIZE_SMALL)->render()
             . '</span>';
 
         $flexFormContainerCounter = $this->data['flexFormContainerCounter'];
@@ -68,10 +68,8 @@ class FlexFormContainerContainer extends AbstractContainer
         $moveAndDeleteContent = array();
         $userHasAccessToDefaultLanguage = $this->getBackendUserAuthentication()->checkLanguageAccess(0);
         if ($userHasAccessToDefaultLanguage) {
-            $moveAndDeleteContent[] = '<div class="pull-right">';
-            $moveAndDeleteContent[] = '<span title="' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:sortable.dragmove', true) . '" class="t3-js-sortable-handle">' . $iconFactory->getIcon('actions-move-move', Icon::SIZE_SMALL)->render() . '</span>';
-            $moveAndDeleteContent[] = '<span title="' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_common.xlf:delete', true) . '" class="t3-js-delete">' . $iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render() . '</span>';
-            $moveAndDeleteContent[] = '</div>';
+            $moveAndDeleteContent[] = '<span class="btn btn-default"><span title="' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_core.xlf:sortable.dragmove', true) . '" class="t3js-sortable-handle">' . $iconFactory->getIcon('actions-move-move', Icon::SIZE_SMALL)->render() . '</span></span>';
+            $moveAndDeleteContent[] = '<span class="btn btn-default"><span title="' . $this->getLanguageService()->sL('LLL:EXT:lang/locallang_common.xlf:delete', true) . '" class="t3js-delete">' . $iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render() . '</span></span>';
         }
 
         $options = $this->data;
@@ -82,25 +80,35 @@ class FlexFormContainerContainer extends AbstractContainer
         $containerContentResult = $this->nodeFactory->create($options)->render();
 
         $html = array();
-        $html[] = '<div id="' . $flexFormFieldIdentifierPrefix . '" class="t3-form-field-container-flexsections t3-flex-section">';
-        $html[] =    '<input class="t3-flex-control t3-flex-control-action" type="hidden" name="' . htmlspecialchars($actionFieldName) . '" value="" />';
-        $html[] =    '<div class="t3-form-field-header-flexsection t3-flex-section-header">';
-        $html[] =        '<div class="pull-left">';
-        $html[] =            '<a href="#" class="t3-flex-control-toggle-button">' . $toggleIcons . '</a>';
-        $html[] =            '<span class="t3-record-title">' . $flexFormContainerTitle . '</span>';
+        $html[] = '<div id="' . $flexFormFieldIdentifierPrefix . '" class="t3-form-field-container-flexsections t3-flex-section t3js-flex-section">';
+        $html[] =    '<input class="t3-flex-control t3js-flex-control-action" type="hidden" name="' . htmlspecialchars($actionFieldName) . '" value="" />';
+        $html[] =    '<div class="panel panel-default panel-condensed">';
+        $html[] =        '<div class="panel-heading t3js-flex-section-header" data-toggle="formengine-flex">';
+        $html[] =            '<div class="form-irre-header">';
+        $html[] =                '<div class="form-irre-header-cell form-irre-header-icon">';
+        $html[] =                    $toggleIcons;
+        $html[] =                '</div>';
+        $html[] =                '<div class="form-irre-header-cell form-irre-header-body">';
+        $html[] =                    '<span class="t3js-record-title">' . $flexFormContainerTitle . '</span>';
+        $html[] =                '</div>';
+        $html[] =                '<div class="form-irre-header-cell form-irre-header-control">';
+        $html[] =                    '<div class="btn-group btn-group-sm">';
+        $html[] =                        implode(LF, $moveAndDeleteContent);
+        $html[] =                    '</div>';
+        $html[] =                '</div>';
+        $html[] =            '</div>';
         $html[] =        '</div>';
-        $html[] =        implode(LF, $moveAndDeleteContent);
-        $html[] =    '</div>';
-        $html[] =    '<div class="t3-form-field-record-flexsection t3-flex-section-content"' . ($flexFormContainerElementCollapsed ? ' style="display:none;"' : '') . '>';
-        $html[] =        $containerContentResult['html'];
+        $html[] =        '<div class="panel-collapse t3js-flex-section-content"' . ($flexFormContainerElementCollapsed ? ' style="display:none;"' : '') . '>';
+        $html[] =            $containerContentResult['html'];
+        $html[] =        '</div>';
+        $html[] =        '<input';
+        $html[] =            'class="t3-flex-control t3js-flex-control-toggle"';
+        $html[] =            'id="' . $flexFormFieldIdentifierPrefix . '-toggleClosed"';
+        $html[] =            'type="hidden"';
+        $html[] =            'name="' . htmlspecialchars($toggleFieldName) . '"';
+        $html[] =            'value="' . ($flexFormContainerElementCollapsed ? '1' : '0') . '"';
+        $html[] =        '/>';
         $html[] =    '</div>';
-        $html[] =    '<input';
-        $html[] =        'class="t3-flex-control t3-flex-control-toggle"';
-        $html[] =        'id="' . $flexFormFieldIdentifierPrefix . '-toggleClosed"';
-        $html[] =        'type="hidden"';
-        $html[] =        'name="' . htmlspecialchars($toggleFieldName) . '"';
-        $html[] =        'value="' . ($flexFormContainerElementCollapsed ? '1' : '0') . '"';
-        $html[] =    '/>';
         $html[] = '</div>';
 
         $containerContentResult['html'] = '';
index 944be9f..0e43f30 100644 (file)
@@ -124,7 +124,7 @@ class FlexFormSectionContainer extends AbstractContainer
             $onClickInsert[] = 'TYPO3.FormEngine.reinitialize();';
             $onClickInsert[] = 'return false;';
 
-            $containerTemplateHtml[] = '<a href="#" onclick="' . htmlspecialchars(implode(LF, $onClickInsert)) . '">';
+            $containerTemplateHtml[] = '<a href="#" class="btn btn-default" onclick="' . htmlspecialchars(implode(LF, $onClickInsert)) . '">';
             $containerTemplateHtml[] =    $iconFactory->getIcon('actions-document-new', Icon::SIZE_SMALL)->render();
             $containerTemplateHtml[] =    htmlspecialchars(GeneralUtility::fixed_lgd_cs($sectionTitle, 30));
             $containerTemplateHtml[] = '</a>';
@@ -141,35 +141,38 @@ class FlexFormSectionContainer extends AbstractContainer
         $createElementsHtml = array();
         if ($userHasAccessToDefaultLanguage) {
             $createElementsHtml[] = '<div class="t3-form-field-add-flexsection">';
-            $createElementsHtml[] =    '<strong>';
-            $createElementsHtml[] =        $languageService->sL('LLL:EXT:lang/locallang_core.xlf:labels.addnew', true) . ':';
-            $createElementsHtml[] =    '</strong>';
-            $createElementsHtml[] =    implode('|', $containerTemplatesHtml);
+            $createElementsHtml[] =    '<div class="btn-group">';
+            $createElementsHtml[] =        implode('|', $containerTemplatesHtml);
+            $createElementsHtml[] =    '</div>';
             $createElementsHtml[] = '</div>';
         }
 
         // Wrap child stuff
         $toggleAll = $languageService->sL('LLL:EXT:lang/locallang_core.xlf:labels.toggleall', true);
         $html = array();
-        $html[] = '<div class="t3-form-field-container t3-form-flex">';
-        $html[] =    '<div class="t3-form-field-label-flexsection">';
-        $html[] =        '<strong>';
-        $html[] =            htmlspecialchars($flexFormSectionTitle);
-        $html[] =        '</strong>';
-        $html[] =    '</div>';
-        $html[] =    '<div class="t3-form-field-toggle-flexsection t3-form-flexsection-toggle">';
-        $html[] =        '<a href="#" title="' . $toggleAll . '">';
-        $html[] =            $iconFactory->getIcon('actions-move-right', Icon::SIZE_SMALL)->render() . $toggleAll;
-        $html[] =        '</a>';
-        $html[] =    '</div>';
-        $html[] =    '<div';
-        $html[] =        'id="' . $flexFormFieldIdentifierPrefix . '"';
-        $html[] =        'class="t3-form-field-container-flexsection t3-flex-container"';
-        $html[] =        'data-t3-flex-allow-restructure="' . ($userHasAccessToDefaultLanguage ? '1' : '0') . '"';
-        $html[] =    '>';
-        $html[] =        $resultArray['html'];
-        $html[] =    '</div>';
-        $html[] =    implode(LF, $createElementsHtml);
+        $html[] = '<div class="panel panel-tab">';
+        $html[] =     '<div class="panel-body">';
+        $html[] =         '<div class="t3-form-field-container t3-form-flex">';
+        $html[] =             '<div class="t3-form-field-label-flexsection">';
+        $html[] =                 '<h4>';
+        $html[] =                     htmlspecialchars($flexFormSectionTitle);
+        $html[] =                 '</h4>';
+        $html[] =             '</div>';
+        $html[] =             '<div class="t3js-form-field-toggle-flexsection t3-form-flexsection-toggle">';
+        $html[] =                 '<a class="btn btn-default" href="#" title="' . $toggleAll . '">';
+        $html[] =                     $iconFactory->getIcon('actions-move-right', Icon::SIZE_SMALL)->render() . $toggleAll;
+        $html[] =                 '</a>';
+        $html[] =             '</div>';
+        $html[] =             '<div';
+        $html[] =                 'id="' . $flexFormFieldIdentifierPrefix . '"';
+        $html[] =                 'class="panel-group panel-hover t3-form-field-container-flexsection t3-flex-container"';
+        $html[] =                 'data-t3-flex-allow-restructure="' . ($userHasAccessToDefaultLanguage ? '1' : '0') . '"';
+        $html[] =             '>';
+        $html[] =                 $resultArray['html'];
+        $html[] =             '</div>';
+        $html[] =             implode(LF, $createElementsHtml);
+        $html[] =         '</div>';
+        $html[] =     '</div>';
         $html[] = '</div>';
 
         $resultArray['html'] = implode(LF, $html);
index 570311a..a8035aa 100644 (file)
@@ -114,18 +114,18 @@ define(['jquery', 'TYPO3/CMS/Backend/FormEngine'], function ($) {
 
        // setting some default values
        TYPO3.FormEngine.FlexFormElement.defaults = {
-               'deleteIconSelector': '.t3-js-delete',
-               'sectionSelector': '.t3-flex-section',
-               'sectionContentSelector': '.t3-flex-section-content',
-               'sectionHeaderSelector': '.t3-flex-section-header',
-               'sectionHeaderPreviewSelector': '.t3-flex-section-header-preview',
-               'sectionActionInputFieldSelector': '.t3-flex-control-action',
-               'sectionToggleInputFieldSelector': '.t3-flex-control-toggle',
-               'sectionToggleIconOpenSelector': '.t3-flex-control-toggle-icon-open',
-               'sectionToggleIconCloseSelector': '.t3-flex-control-toggle-icon-close',
-               'sectionToggleButtonSelector': 'a.t3-flex-control-toggle-button',
-               'flexFormToggleAllSectionsSelector': '.t3-form-field-toggle-flexsection',
-               'sectionDeletedClass': 't3-flex-section-deleted',
+               'deleteIconSelector': '.t3js-delete',
+               'sectionSelector': '.t3js-flex-section',
+               'sectionContentSelector': '.t3js-flex-section-content',
+               'sectionHeaderSelector': '.t3js-flex-section-header',
+               'sectionHeaderPreviewSelector': '.t3js-flex-section-header-preview',
+               'sectionActionInputFieldSelector': '.t3js-flex-control-action',
+               'sectionToggleInputFieldSelector': '.t3js-flex-control-toggle',
+               'sectionToggleIconOpenSelector': '.t3js-flex-control-toggle-icon-open',
+               'sectionToggleIconCloseSelector': '.t3js-flex-control-toggle-icon-close',
+               'sectionToggleButtonSelector': '[data-toggle="formengine-flex"]',
+               'flexFormToggleAllSectionsSelector': '.t3js-form-field-toggle-flexsection',
+               'sectionDeletedClass': 't3js-flex-section-deleted',
                'allowRestructure': 0,  // whether the form can be modified
                'flexformId': false
        };
@@ -140,7 +140,7 @@ define(['jquery', 'TYPO3/CMS/Backend/FormEngine'], function ($) {
                require(['jquery-ui/sortable'], function () {
                        me.$el.sortable({
                                containment: 'parent',
-                               handle: '.t3-js-sortable-handle',
+                               handle: '.t3js-sortable-handle',
                                axis: 'y',
                                tolerance: 'pointer',
                                stop: function () {
@@ -203,8 +203,8 @@ define(['jquery', 'TYPO3/CMS/Backend/FormEngine'], function ($) {
                }
 
                // create a preview container span element
-               if ($sectionEl.find(this.options.sectionHeaderPreviewSelector).length == 0) {
-                       $sectionEl.find(this.options.sectionHeaderSelector).children(':first').append('<span class="' + this.options.sectionHeaderPreviewSelector.replace(/\./, '') + '"></span>');
+               if ($sectionEl.find(this.options.sectionHeaderPreviewSelector).length === 0) {
+                       $sectionEl.find(this.options.sectionHeaderSelector).find('.t3js-record-title').parent().append('<span class="' + this.options.sectionHeaderPreviewSelector.replace(/\./, '') + '"></span>');
                }
 
                $sectionEl.find(this.options.sectionHeaderPreviewSelector).text(previewContent);
index 5c79b9d..7ded77a 100644 (file)
@@ -10863,6 +10863,7 @@ fieldset[disabled] .table .btn-default.active {
 .panel-heading {
   position: relative;
 }
+.panel-heading[data-toggle="formengine-flex"],
 .panel-heading[data-toggle="formengine-inline"] {
   cursor: pointer;
 }
@@ -10982,35 +10983,20 @@ fieldset[disabled] .table .btn-default.active {
 .sortableHandle {
   cursor: move;
 }
-.t3-flex-section-header .t3-record-title {
-  font-weight: bold;
-}
 .t3-flex-section {
   clear: both;
   margin: 5px 0;
 }
-.t3-flex-section-header,
-.t3-form-field-container-flexsection {
-  padding-left: 20px;
-}
 .t3-form-field-header-flexsection {
   width: 100%;
   height: 16px;
 }
-.t3-form-field-label-flexsection {
-  border-top: 1px solid #cdcdcd;
-  padding: 5px 10px;
-}
-.t3-form-field-toggle-flexsection {
-  padding: 5px 0 5px 20px;
-}
 .t3-form-field-add-flexsection {
   border-top: 1px solid #cdcdcd;
-  padding: 10px 5px 5px 20px;
+  padding: 10px 5px 5px 0;
 }
 .t3-form-flex,
 .t3-form-field-container-flexsections {
-  background: #dadada;
   margin: 5px 0;
   clear: both;
 }