[TASK] Improve the form manager 94/56694/3
authorBjörn Jacob <bjoern.jacob@tritum.de>
Mon, 16 Apr 2018 19:09:25 +0000 (21:09 +0200)
committerBenjamin Kott <benjamin.kott@outlook.com>
Tue, 17 Apr 2018 22:11:37 +0000 (00:11 +0200)
Improve the form manager in several ways:

- add reload button to docheader
- add 'for' attribute to all labels in form wizard
- improve wording when no form has been created
- change icon
- change documentation

Resolves: #84756
Releases: master
Change-Id: Ic2292beeccce64c523a971f9ee22e6c568c6c12e
Reviewed-on: https://review.typo3.org/56694
Reviewed-by: Kay Strobach <typo3@kay-strobach.de>
Tested-by: Kay Strobach <typo3@kay-strobach.de>
Reviewed-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: Mathias Schreiber <mathias.schreiber@typo3.com>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Benjamin Kott <benjamin.kott@outlook.com>
Tested-by: Benjamin Kott <benjamin.kott@outlook.com>
typo3/sysext/form/Classes/Controller/FormManagerController.php
typo3/sysext/form/Configuration/Yaml/FormEditorSetup.yaml
typo3/sysext/form/Documentation/Config/configuration/Index.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/Form/formEditor.rst
typo3/sysext/form/Documentation/Config/proto/formElements/formElementTypes/Form/formEditor/iconIdentifier.rst
typo3/sysext/form/Resources/Private/Backend/Templates/FormEditor/Index.html
typo3/sysext/form/Resources/Private/Backend/Templates/FormManager/Index.html
typo3/sysext/form/Resources/Private/Language/Database.xlf
typo3/sysext/form/Resources/Public/JavaScript/Backend/FormEditor/ViewModel.js
typo3/sysext/form/Resources/Public/JavaScript/Backend/FormManager/ViewModel.js

index 01ba875..cccffe2 100644 (file)
@@ -459,7 +459,7 @@ class FormManagerController extends AbstractBackendController
     }
 
     /**
-     * Registers the Icons into the docheader
+     * Register document header buttons
      *
      * @throws \InvalidArgumentException
      */
@@ -471,6 +471,22 @@ class FormManagerController extends AbstractBackendController
         $moduleName = $currentRequest->getPluginName();
         $getVars = $this->request->getArguments();
 
+        // Create new
+        $addFormButton = $buttonBar->makeLinkButton()
+            ->setDataAttributes(['identifier' => 'newForm'])
+            ->setHref('#')
+            ->setTitle($this->getLanguageService()->sL('LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.create_new_form'))
+            ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-add', Icon::SIZE_SMALL));
+        $buttonBar->addButton($addFormButton, ButtonBar::BUTTON_POSITION_LEFT);
+
+        // Reload
+        $reloadButton = $buttonBar->makeLinkButton()
+            ->setHref(GeneralUtility::getIndpEnv('REQUEST_URI'))
+            ->setTitle($this->getLanguageService()->sL('LLL:EXT:lang/Resources/Private/Language/locallang_core.xlf:labels.reload'))
+            ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-refresh', Icon::SIZE_SMALL));
+        $buttonBar->addButton($reloadButton, ButtonBar::BUTTON_POSITION_RIGHT);
+
+        // Shortcut
         $mayMakeShortcut = $this->getBackendUser()->mayMakeShortcut();
         if ($mayMakeShortcut) {
             $extensionName = $currentRequest->getControllerExtensionName();
@@ -483,22 +499,7 @@ class FormManagerController extends AbstractBackendController
                 ->setModuleName($moduleName)
                 ->setDisplayName($this->getLanguageService()->sL('LLL:EXT:form/Resources/Private/Language/Database.xlf:module.shortcut_name'))
                 ->setGetVariables($getVars);
-            $buttonBar->addButton($shortcutButton);
-        }
-
-        if (isset($getVars['action']) && $getVars['action'] !== 'index') {
-            $backButton = $buttonBar->makeLinkButton()
-                ->setTitle($this->getLanguageService()->sL('LLL:EXT:lang/Resources/Private/Language/locallang_common.xlf:back'))
-                ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-view-go-up', Icon::SIZE_SMALL))
-                ->setHref($this->getModuleUrl($moduleName));
-            $buttonBar->addButton($backButton);
-        } else {
-            $addFormButton = $buttonBar->makeLinkButton()
-                ->setDataAttributes(['identifier' => 'newForm'])
-                ->setHref('#')
-                ->setTitle($this->getLanguageService()->sL('LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.create_new_form'))
-                ->setIcon($this->view->getModuleTemplate()->getIconFactory()->getIcon('actions-add', Icon::SIZE_SMALL));
-            $buttonBar->addButton($addFormButton, ButtonBar::BUTTON_POSITION_LEFT);
+            $buttonBar->addButton($shortcutButton, ButtonBar::BUTTON_POSITION_RIGHT);
         }
     }
 
index e129746..8554fcb 100644 (file)
@@ -165,7 +165,7 @@ TYPO3:
 
                 paginationTitle: 'formEditor.pagination.title'
 
-                iconIdentifier: 'content-elements-mailform'
+                iconIdentifier: 'content-form'
                 predefinedDefaults:
                   renderingOptions:
                     submitButtonLabel: 'formEditor.elements.Form.editor.submitButtonLabel.value'
index 1e14d6e..c3dedd4 100644 (file)
@@ -79,7 +79,7 @@ Full default configuration
               modalRemoveElementLastAvailablePageFlashMessageMessage: formEditor.modals.removeElement.lastAvailablePageFlashMessageMessage
               inspectorEditorFormElementSelectorNoElements: formEditor.inspector.editor.formelement_selector.no_elements
               paginationTitle: formEditor.pagination.title
-              iconIdentifier: content-elements-mailform
+              iconIdentifier: content-form
               propertyCollections:
                 finishers:
                   10:
index 4d72513..16d2964 100644 (file)
@@ -79,7 +79,7 @@ formEditor
              modalRemoveElementLastAvailablePageFlashMessageMessage: formEditor.modals.removeElement.lastAvailablePageFlashMessageMessage
              inspectorEditorFormElementSelectorNoElements: formEditor.inspector.editor.formelement_selector.no_elements
              paginationTitle: formEditor.pagination.title
-             iconIdentifier: content-elements-mailform
+             iconIdentifier: content-form
              propertyCollections:
                finishers:
                  10:
index 171ebbd..2819996 100644 (file)
@@ -20,7 +20,7 @@ formEditor.iconIdentifier
 
          Form:
            formEditor:
-             iconIdentifier: content-elements-mailform
+             iconIdentifier: content-form
 
 .. :aspect:`Good to know`
       ToDo
@@ -32,4 +32,4 @@ formEditor.iconIdentifier
       - :ref:`"Inspector [FormElementHeaderEditor]"<typo3.cms.form.prototypes.\<prototypeidentifier>.formelementsdefinition.\<formelementtypeidentifier>.formeditor.editors.*.formelementheadereditor>`.
       - :ref:`"Abstract view formelement templates"<apireference-formeditor-stage-commonabstractformelementtemplates>`.
       - ``Tree`` component.
-      - "new element" Modal
\ No newline at end of file
+      - "new element" Modal
index 239b8e9..922d06e 100644 (file)
@@ -4,7 +4,7 @@
 
        <div class="t3-form-x-component-inner-wrapper">
                <div id="t3-form-navigation-component-tree-root-container" data-identifier="treeRootContainer">
-                       <core:icon identifier="content-elements-mailform" />
+                       <core:icon identifier="content-form" />
                        <span id="t3-form-navigation-component-tree-root" data-identifier="treeRootElement"></span>
                </div>
                <div class="tree" data-identifier="structure-element"></div>
index 4924949..057a911 100644 (file)
@@ -46,7 +46,7 @@
                                                                                        </f:else>
                                                                                        <f:else>
                                                                                                <span title="id={form.identifier}" data-toggle="tooltip" data-placement="right">
-                                                                                                       <core:icon identifier="content-elements-mailform" />
+                                                                                                       <core:icon identifier="content-form" />
                                                                                                </span>
                                                                                        </f:else>
                                                                                </f:if>
                </div>
        </f:then>
        <f:else>
-               <f:be.infobox title="{f:translate(key: 'formManager.no_forms', extensionName:'form')}" state="-1">
-                       <p><f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.no_forms" /></p>
-                       <a class="btn btn-primary" data-identifier="newForm" href="#"><f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.create_new_form" /></a>
+               <f:be.infobox state="-1" title="{f:translate(key: 'LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.forms_not_found.title')}">
+                       <p><f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.forms_not_found.message" /></p>
+                       <a class="btn btn-primary" href="#" data-identifier="newForm"><f:translate key="LLL:EXT:form/Resources/Private/Language/Database.xlf:formManager.create_new_form" /></a>
                </f:be.infobox>
        </f:else>
 </f:if>
index 40c0542..25871c6 100644 (file)
             </trans-unit>
 
             <trans-unit id="formManager.headline" xml:space="preserve">
-                <source>Manage forms</source>
+                <source>Form Management</source>
             </trans-unit>
             <trans-unit id="formManager.create_new_form" xml:space="preserve">
-                <source>Create new form</source>
+                <source>Create new form</source>
             </trans-unit>
             <trans-unit id="formManager.edit_existing_forms" xml:space="preserve">
                 <source>Edit existing forms</source>
             <trans-unit id="formManager.delete_form" xml:space="preserve">
                 <source>Remove this form</source>
             </trans-unit>
-            <trans-unit id="formManager.no_forms" xml:space="preserve">
-                <source>No form available.</source>
+            <trans-unit id="formManager.forms_not_found.title" xml:space="preserve">
+                <source>No forms found!</source>
+            </trans-unit>
+            <trans-unit id="formManager.forms_not_found.message" xml:space="preserve">
+                <source>There are currently no forms found in the system.</source>
             </trans-unit>
             <trans-unit id="formManager.edit_form_not_allowed" xml:space="preserve">
                 <source>Edit this form is not allowed.</source>
index 447a22c..06ccc3a 100644 (file)
@@ -64,7 +64,7 @@ define(['jquery',
         buttonHeaderViewModePreview: 'buttonViewModePreview',
         buttonStageNewElementBottom: 'stageNewElementBottom',
         buttonStructureNewPage: 'treeNewPageBottom',
-        iconMailform: 'content-elements-mailform',
+        iconMailform: 'content-form',
         iconSave: 'actions-document-save',
         iconSaveSpinner: 'spinner-circle-dark',
         inspectorSection: 'inspectorSection',
index 19edf1e..95aab06 100644 (file)
@@ -108,7 +108,7 @@ define(['jquery',
 
           Wizard.set('savePath', folders[0]['value']);
           if (folders.length > 1) {
-            savePathSelect = $('<select class="new-form-save-path form-control" data-identifier="newFormSavePath" />');
+            savePathSelect = $('<select class="new-form-save-path form-control" id="new-form-save-path" data-identifier="newFormSavePath" />');
             for (var i = 0, len = folders.length; i < len; ++i) {
               var option = new Option(folders[i]['label'], folders[i]['value']);
               $(savePathSelect).append(option);
@@ -127,16 +127,16 @@ define(['jquery',
           html = '<div class="new-form-modal">'
             + '<div class="form-horizontal">'
             + '<div>'
-            + '<label class="control-label">' + TYPO3.lang['formManager.form_name'] + '</label>'
-            + '<input class="new-form-name form-control has-error" data-identifier="newFormName" />';
+            + '<label class="control-label" for="new-form-name">' + TYPO3.lang['formManager.form_name'] + '</label>'
+            + '<input class="new-form-name form-control has-error" id="new-form-name" data-identifier="newFormName" />';
 
           if (savePathSelect) {
-            html += '<label class="control-label">' + TYPO3.lang['formManager.form_save_path'] + '</label>' + $(savePathSelect)[0].outerHTML;
+            html += '<label class="control-label" for="new-form-save-path">' + TYPO3.lang['formManager.form_save_path'] + '</label>' + $(savePathSelect)[0].outerHTML;
           }
 
           if (prototypes.length > 1 || templates.length > 1) {
-            html += '<label class="control-label">' + TYPO3.lang['formManager.newFormWizard.step1.advanced'] + '</label>'
-              + '<div class="t3-form-controls"><input type="checkbox" class="new-form-advance-wizard" data-identifier="advancedWizard" /></div>';
+            html += '<label class="control-label" for="new-form-advance-wizard">' + TYPO3.lang['formManager.newFormWizard.step1.advanced'] + '</label>'
+              + '<div class="t3-form-controls"><input type="checkbox" class="new-form-advance-wizard" id="new-form-advance-wizard" data-identifier="advancedWizard" /></div>';
           }
 
           html += '</div>'
@@ -192,8 +192,8 @@ define(['jquery',
           modal = Wizard.setup.$carousel.closest('.modal');
           nextButton = modal.find('.modal-footer').find('button[name="next"]');
 
-          prototypeNameSelect = $('<select class="new-form-prototype-name form-control" data-identifier="newFormPrototypeName" />');
-          templateSelect = $('<select class="new-form-template form-control" data-identifier="newFormTemplate" />');
+          prototypeNameSelect = $('<select class="new-form-prototype-name form-control" id="new-form-prototype-name" data-identifier="newFormPrototypeName" />');
+          templateSelect = $('<select class="new-form-template form-control" id="new-form-template" data-identifier="newFormTemplate" />');
 
           prototypes = _formManagerApp.getPrototypes();
           templates = {};
@@ -215,10 +215,10 @@ define(['jquery',
             + '<div>';
 
           if (prototypes.length > 1) {
-            html += '<label class="control-label">' + TYPO3.lang['formManager.form_prototype'] + '</label>' + $(prototypeNameSelect)[0].outerHTML;
+            html += '<label class="control-label" for="new-form-prototype-name">' + TYPO3.lang['formManager.form_prototype'] + '</label>' + $(prototypeNameSelect)[0].outerHTML;
           }
           if (templates.length > 1) {
-            html += '<label class="control-label">' + TYPO3.lang['formManager.form_template'] + '</label>' + $(templateSelect)[0].outerHTML;
+            html += '<label class="control-label" for="new-form-template">' + TYPO3.lang['formManager.form_template'] + '</label>' + $(templateSelect)[0].outerHTML;
           }
 
           html += '</div>'