Commit 42540348 authored by Andreas Fernandez's avatar Andreas Fernandez Committed by Christian Kuhn
Browse files

[TASK] Port Flexform sections to Bootstrap

Resolves: #71149
Releases: master
Change-Id: I2625ad4a23175f44674b45bebb61f9f39789fcab
Reviewed-on: https://review.typo3.org/44380

Reviewed-by: default avatarMorton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: default avatarMorton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn's avatarChristian Kuhn <lolli@schwarzbu.ch>
parent d49f117b
......@@ -31,6 +31,7 @@
//
.panel-heading {
position: relative;
&[data-toggle="formengine-flex"],
&[data-toggle="formengine-inline"] {
cursor: pointer;
}
......
......@@ -26,43 +26,23 @@
//
// 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;
}
......
......@@ -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'] = '';
......
......@@ -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);
......
......@@ -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);
......
......@@ -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;
}
......
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