[FEATURE] EXT:form - Add form settings button to module header

Adds a new button into the form editor module header.
Clicking on this buttons shows the form settings within the inspector.

Resolves: #79467
Releases: master
Change-Id: I767c71fcf65ca5bd58b2b530a60fce1caf75e3c9
Reviewed-on: https://review.typo3.org/51425


Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Steiger <typo3@andreassteiger.de>
Tested-by: Andreas Steiger <typo3@andreassteiger.de>
Tested-by: Riccardo De Contardi <erredeco@gmail.com>
Reviewed-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Tested-by: Bjoern Jacob <bjoern.jacob@tritum.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>

Build/Resources/Public/Less/form.less

@@ -954,7 +954,7 @@
         outline-width: 0px;
       }
     }
-    .btn-group {
+    .btn-group, .t3-form-element-form-settings-button {
       margin-left: 25px;
     }
   }

typo3/sysext/core/Documentation/Changelog/master/Feature-79467-EXTform-AddFormSettingsButtonToModuleHeader.rst

+.. include:: ../../Includes.txt
+
+======================================================================
+Feature: #79467 - EXT:form - add form settings button to module header
+======================================================================
+
+See :issue:`79467`
+
+Description
+===========
+
+A new button has been added the module header of the form editor. Clicking on this button shows the form settings within the inspector.
+
+.. index:: Backend, ext:form
\ No newline at end of file

typo3/sysext/form/Classes/Controller/FormEditorController.php

@@ -305,6 +305,15 @@ class FormEditorController extends AbstractBackendController
                 ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-document-save', Icon::SIZE_SMALL))
                 ->setShowLabelText(true);
 
+            $formSettingsButton = $buttonBar->makeInputButton()
+                ->setDataAttributes(['identifier' => 'formSettingsButton'])
+                ->setTitle($this->getLanguageService()->sL('LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.form_settings_button'))
+                ->setName('formeditor-form-settings')
+                ->setValue('settings')
+                ->setClasses('t3-form-element-form-settings-button hidden')
+                ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-system-extension-configure', Icon::SIZE_SMALL))
+                ->setShowLabelText(true);
+
             $undoButton = $buttonBar->makeInputButton()
                 ->setDataAttributes(['identifier' => 'undoButton'])
                 ->setTitle($this->getLanguageService()->sL('LLL:EXT:form/Resources/Private/Language/Database.xlf:formEditor.undo_button'))
@@ -324,8 +333,9 @@ class FormEditorController extends AbstractBackendController
             $buttonBar->addButton($newPageButton, ButtonBar::BUTTON_POSITION_LEFT, 1);
             $buttonBar->addButton($closeButton, ButtonBar::BUTTON_POSITION_LEFT, 2);
             $buttonBar->addButton($saveButton, ButtonBar::BUTTON_POSITION_LEFT, 3);
-            $buttonBar->addButton($undoButton, ButtonBar::BUTTON_POSITION_LEFT, 4);
-            $buttonBar->addButton($redoButton, ButtonBar::BUTTON_POSITION_LEFT, 4);
+            $buttonBar->addButton($formSettingsButton, ButtonBar::BUTTON_POSITION_LEFT, 4);
+            $buttonBar->addButton($undoButton, ButtonBar::BUTTON_POSITION_LEFT, 5);
+            $buttonBar->addButton($redoButton, ButtonBar::BUTTON_POSITION_LEFT, 5);
         }
     }
 

typo3/sysext/form/Resources/Private/Language/Database.xlf

@@ -185,6 +185,9 @@
             <trans-unit id="formEditor.save_button" xml:space="preserve">
                 <source>Save</source>
             </trans-unit>
+            <trans-unit id="formEditor.form_settings_button" xml:space="preserve">
+                <source>Settings</source>
+            </trans-unit>
             <trans-unit id="formEditor.undo_button" xml:space="preserve">
                 <source>Undo</source>
             </trans-unit>

typo3/sysext/form/Resources/Public/Css/form.css

@@ -842,7 +842,8 @@
   outline-style: initial;
   outline-width: 0px;
 }
-.module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .btn-group {
+.module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .btn-group,
+.module[data-module-name="web_FormFormbuilder_FormEditor"] .module-docheader-bar-column-left .t3-form-element-form-settings-button {
   margin-left: 25px;
 }
 .t3-form-element-new-page-button {

typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/Mediator.js

@@ -278,7 +278,6 @@ define(['jquery',
              * @subscribe view/header/button/save/clicked
              */
             getPublisherSubscriber().subscribe('view/header/button/save/clicked', function(topic, args) {
-
                 if (getFormEditorApp().validationResultsHasErrors(getFormEditorApp().validateFormElementRecursive(getRootFormElement(), true))) {
                     getViewModel().showValidationErrorsModal();
                 } else {
@@ -286,6 +285,23 @@ define(['jquery',
                 }
             });
 
+            /**
+             * @private
+             *
+             * @param string
+             * @param array
+             * @return void
+             * @subscribe view/header/formSettings/clicked
+             */
+            getPublisherSubscriber().subscribe('view/header/formSettings/clicked', function(topic, args) {
+                getViewModel().addStructureRootElementSelection();
+                getFormEditorApp().setCurrentlySelectedFormElement(getRootFormElement());
+                getViewModel().renderAbstractStageArea();
+                getViewModel().renewStructure();
+                getViewModel().renderPagination();
+                getViewModel().renderInspectorEditors();
+            });
+
             /**
              * @private
              *

typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/ViewModel.js

@@ -58,6 +58,7 @@ define(['jquery',
                 buttonHeaderPaginationPrevious: 'buttonPaginationPrevious',
                 buttonHeaderRedo: 'redoButton',
                 buttonHeaderSave: 'saveButton',
+                buttonHeaderSettings: 'formSettingsButton',
                 buttonHeaderUndo: 'undoButton',
                 buttonHeaderViewModeAbstract: 'buttonViewModeAbstract',
                 buttonHeaderViewModePreview: 'buttonViewModePreview',
@@ -396,6 +397,10 @@ define(['jquery',
                 getPublisherSubscriber().publish('view/header/button/save/clicked', []);
             });
 
+            $(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSettings')).on('click', function(e) {
+                getPublisherSubscriber().publish('view/header/formSettings/clicked', []);
+            });
+
             $(getHelper().getDomElementDataIdentifierSelector('buttonStageNewElementBottom')).on('click', function(e) {
                 getPublisherSubscriber().publish('view/stage/abstract/button/newElement/clicked', ['view/insertElements/perform/bottom']);
             });
@@ -1322,6 +1327,7 @@ define(['jquery',
             hideComponent($(getHelper().getDomElementDataIdentifierSelector('moduleLoadingIndicator')));
             showComponent($(getHelper().getDomElementDataIdentifierSelector('moduleWrapper')));
             showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSave')));
+            showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderSettings')));
             showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderClose')));
             showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderNewPage')));
             showComponent($(getHelper().getDomElementDataIdentifierSelector('buttonHeaderUndo')));