[BUGFIX] Broken layout in File Element Browser 06/44706/3
authorFrank Nägler <frank.naegler@typo3.org>
Fri, 13 Nov 2015 14:18:48 +0000 (15:18 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Fri, 13 Nov 2015 19:27:28 +0000 (20:27 +0100)
Resolves: #68052
Releases: master
Change-Id: If0ea2c931ebba90b745be5b90f4fcdb728ad5a5b
Reviewed-on: https://review.typo3.org/44706
Reviewed-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Tested-by: Morton Jonuschat <m.jonuschat@mojocode.de>
Reviewed-by: Daniel Goerz <ervaude@gmail.com>
Tested-by: Daniel Goerz <ervaude@gmail.com>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
Build/Resources/Public/Less/TYPO3/_element_rte.less
Build/Resources/Public/Less/TYPO3/_main_elementbrowser.less [new file with mode: 0644]
Build/Resources/Public/Less/backend.less
typo3/sysext/recordlist/Classes/Browser/FileBrowser.php
typo3/sysext/recordlist/Classes/View/FolderUtilityRenderer.php
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index d671227..5e2633f 100644 (file)
@@ -120,11 +120,6 @@ input.typo3-link-input {
 // Element Browser / RTE link selection
 //
 
-form#typo3-uplFilesForm,
-form#typo3-crFolderForm {
-       border-top: 1px solid #adadad;
-}
-
 table#typo3-linkPages tr td.c-wCell,
 table#typo3-linkFiles tr td.c-wCell,
 table#typo3-EBrecords tr td.c-wCell,
diff --git a/Build/Resources/Public/Less/TYPO3/_main_elementbrowser.less b/Build/Resources/Public/Less/TYPO3/_main_elementbrowser.less
new file mode 100644 (file)
index 0000000..363a10f
--- /dev/null
@@ -0,0 +1,11 @@
+//
+// Element Browser
+//
+
+.element-browser {
+       &-section {
+               border-bottom: 1px solid @gray-light;
+               padding-bottom: 30px;
+               margin: 0 15px 30px 15px;
+       }
+}
index caa6c5f..a8025ca 100644 (file)
@@ -59,6 +59,7 @@
 @import "TYPO3/_login_screen.less";
 @import "TYPO3/_main_body.less";
 @import "TYPO3/_main_content.less";
+@import "TYPO3/_main_elementbrowser.less";
 @import "TYPO3/_main_form.less";
 @import "TYPO3/_main_scaffolding.less";
 @import "TYPO3/_module_menu.less";
index 8036892..0e7e91e 100644 (file)
@@ -202,12 +202,14 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
                        <!--
                                Wrapper table for folder tree / filelist:
                        -->
+                       <div class="element-browser-section element-browser-filetree">
                        <table border="0" cellpadding="0" cellspacing="0" id="typo3-EBfiles">
                                <tr>
                                        <td class="c-wCell" valign="top"><h3>' . $this->getLanguageService()->getLL('folderTree', true) . ':</h3>' . $tree . '</td>
                                        <td class="c-wCell" valign="top">' . $files . '</td>
                                </tr>
                        </table>
+                       </div>
                        ';
         // Adding create folder + upload forms if applicable:
         if (!$backendUser->getTSConfigVal('options.uploadFieldsInTopOfEB')) {
index 2937935..cd7868a 100644 (file)
@@ -62,37 +62,36 @@ class FolderUtilityRenderer
             return '';
         }
         $lang = $this->getLanguageService();
-        $code = '
-
-                       <!--
-                               Form, for creating new folders:
-                       -->
-                       <form action="' . htmlspecialchars(BackendUtility::getModuleUrl('tce_file')) . '" method="post" name="editform2" id="typo3-crFolderForm">
-                               <table border="0" cellpadding="0" cellspacing="0" id="typo3-crFolder">
-                                       <tr>
-                                               <td><h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_newfolder.php.pagetitle', true) . ':</h3></td>
-                                       </tr>
-                                       <tr>
-                                               <td class="c-wCell c-hCell"><strong>' . $lang->getLL('path', true) . ':</strong> '
-                            . htmlspecialchars($folderObject->getIdentifier()) . '</td>
-                                       </tr>
-                                       <tr>
-                                               <td class="c-wCell c-hCell">';
-        // Create the new-folder name field:
+
+        $formAction = BackendUtility::getModuleUrl('tce_file');
+        $markup = array();
+        $markup[] = '<div class="element-browser-section element-browser-createfolder">';
+        $markup[] = '<form action="' . htmlspecialchars($formAction)
+            . '" method="post" name="editform" enctype="multipart/form-data">';
+        $markup[] = '<h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_newfolder.php.pagetitle', true) . ':</h3>';
+        $markup[] = '<p><strong>' . $lang->getLL('path', true) . ':</strong>'
+            . htmlspecialchars($folderObject->getIdentifier()) . '</p>';
+
         $a = 1;
-        $code .= '<input size="20" type="text" name="file[newfolder][' . $a . '][data]" />'
-            . '<input type="hidden" name="file[newfolder][' . $a . '][target]" value="'
+        $markup[] = '<input class="form-control" type="text" name="file[newfolder][' . $a . '][data]" />';
+        $markup[] = '<input type="hidden" name="file[newfolder][' . $a . '][target]" value="'
             . htmlspecialchars($folderObject->getCombinedIdentifier()) . '" />';
+
         // Make footer of upload form, including the submit button:
-        $redirectValue = $this->parameterProvider->getScriptUrl() . GeneralUtility::implodeArrayForUrl('', $this->parameterProvider->getUrlParameters(['identifier' => $folderObject->getCombinedIdentifier()]));
-        $code .= '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />'
-            . '<input class="btn btn-default" type="submit" name="submit" value="'
+        $redirectValue = $this->parameterProvider->getScriptUrl() . GeneralUtility::implodeArrayForUrl(
+            '',
+            $this->parameterProvider->getUrlParameters(
+                ['identifier' => $folderObject->getCombinedIdentifier()]
+            )
+        );
+        $markup[] = '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />';
+        $markup[] = '<input class="btn btn-default" type="submit" name="submit" value="'
             . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_newfolder.php.submit', true) . '" />';
-        $code .= '</td>
-                                       </tr>
-                               </table>
-                       </form>';
-        return $code;
+
+        $markup[] = '   </form>';
+        $markup[] = '</div>';
+
+        return implode(LF, $markup);
     }
 
     /**
@@ -124,102 +123,106 @@ class FolderUtilityRenderer
         $fileExtList = array();
         foreach ($allowedExtensions as $fileExt) {
             if (GeneralUtility::verifyFilenameAgainstDenyPattern($fileExt)) {
-                $fileExtList[] = '<span class="label label-success">' . strtoupper(htmlspecialchars($fileExt)) . '</span>';
+                $fileExtList[] = '<span class="label label-success">'
+                    . strtoupper(htmlspecialchars($fileExt)) . '</span>';
             }
         }
-        $code = '
-                       <br />
-                       <!--
-                               Form, for uploading files:
-                       -->
-                       <form action="' . htmlspecialchars(BackendUtility::getModuleUrl('tce_file')) . '" method="post" name="editform"'
-            . ' id="typo3-uplFilesForm" enctype="multipart/form-data">
-                               <table border="0" cellpadding="0" cellspacing="0" id="typo3-uplFiles">
-                                       <tr>
-                                               <td><h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_upload.php.pagetitle', true) . ':</h3></td>
-                                       </tr>
-                                       <tr>
-                                               <td class="c-wCell c-hCell"><strong>' . $lang->getLL('path', true) . ':</strong> ' . htmlspecialchars($header) . '</td>
-                                       </tr>
-                                       <tr>
-                                               <td class="c-wCell c-hCell">';
-        // Traverse the number of upload fields:
+        $formAction = BackendUtility::getModuleUrl('tce_file');
         $combinedIdentifier = $folderObject->getCombinedIdentifier();
+        $markup = array();
+        $markup[] = '<div class="element-browser-section element-browser-upload">';
+        $markup[] = '   <form action="' . htmlspecialchars($formAction)
+            . '" method="post" name="editform" enctype="multipart/form-data">';
+        $markup[] = '   <h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_upload.php.pagetitle', true) . ':</h3>';
+        $markup[] = '   <p><strong>' . $lang->getLL('path', true) . ':</strong>' . htmlspecialchars($header) . '</p>';
+        // Traverse the number of upload fields:
         for ($a = 1; $a <= $count; $a++) {
-            $code .= '<input type="file" multiple="multiple" name="upload_' . $a . '[]" size="50" />
-                               <input type="hidden" name="file[upload][' . $a . '][target]" value="' . htmlspecialchars($combinedIdentifier) . '" />
-                               <input type="hidden" name="file[upload][' . $a . '][data]" value="' . $a . '" /><br />';
+            $markup[] = '<div class="form-group">';
+            $markup[] = '<span class="btn btn-default btn-file">';
+            $markup[] = '<input type="file" multiple="multiple" name="upload_' . $a . '[]" size="50" />';
+            $markup[] = '</span>';
+            $markup[] = '</div>';
+            $markup[] = '<input type="hidden" name="file[upload][' . $a . '][target]" value="'
+                . htmlspecialchars($combinedIdentifier) . '" />';
+            $markup[] = '<input type="hidden" name="file[upload][' . $a . '][data]" value="' . $a . '" />';
         }
-
-        $redirectValue = $this->parameterProvider->getScriptUrl() . GeneralUtility::implodeArrayForUrl('', $this->parameterProvider->getUrlParameters(['identifier' => $combinedIdentifier]));
-        $code .= '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />';
+        $redirectValue = $this->parameterProvider->getScriptUrl() . GeneralUtility::implodeArrayForUrl(
+            '',
+            $this->parameterProvider->getUrlParameters(['identifier' => $combinedIdentifier])
+        );
+        $markup[] = '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />';
 
         if (!empty($fileExtList)) {
-            $code .= '
-                               <div class="help-block">
-                                       ' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:cm.allowedFileExtensions', true) . '<br>
-                                       ' . implode(' ', $fileExtList) . '
-                               </div>
-                       ';
+            $markup[] = '<div class="form-group">';
+            $markup[] = '    <label>';
+            $markup[] = $lang->sL('LLL:EXT:lang/locallang_core.xlf:cm.allowedFileExtensions', true) . '<br/>';
+            $markup[] = '    </label>';
+            $markup[] = '    <div class="form-control">';
+            $markup[] = implode(' ', $fileExtList);
+            $markup[] = '    </div>';
+            $markup[] = '</div>';
         }
 
-        $code .= '
-                       <div id="c-override">
-                               <label>
-                                       <input type="checkbox" name="overwriteExistingFiles" id="overwriteExistingFiles" value="1" /> ' . $lang->sL('LLL:EXT:lang/locallang_misc.xlf:overwriteExistingFiles', true) . '
-                               </label>
-                       </div>
-                       <input class="btn btn-default" type="submit" name="submit" value="' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_upload.php.submit', true) . '" />
-               ';
-        $code .= '</td>
-                                       </tr>
-                               </table>
-                       </form><br />';
+        $markup[] = '<div class="checkbox">';
+        $markup[] = '    <label>';
+        $markup[] = '    <input type="checkbox" name="overwriteExistingFiles" id="overwriteExistingFiles" value="1" />';
+        $markup[] = $lang->sL('LLL:EXT:lang/locallang_misc.xlf:overwriteExistingFiles', true);
+        $markup[] = '    </label>';
+        $markup[] = '</div>';
+        $markup[] = '<input class="btn btn-default" type="submit" name="submit" value="'
+            . $lang->sL('LLL:EXT:lang/locallang_core.xlf:file_upload.php.submit', true) . '" />';
+
+        $markup[] = '   </form>';
+        $markup[] = '</div>';
+
+        $code = implode(LF, $markup);
 
         // Add online media
         // Create a list of allowed file extensions in a readable format "youtube, vimeo" etc.
         $fileExtList = array();
         $onlineMediaFileExt = OnlineMediaHelperRegistry::getInstance()->getSupportedFileExtensions();
         foreach ($onlineMediaFileExt as $fileExt) {
-            if (
-                GeneralUtility::verifyFilenameAgainstDenyPattern($fileExt)
+            if (GeneralUtility::verifyFilenameAgainstDenyPattern($fileExt)
                 && (empty($allowedExtensions) || in_array($fileExt, $allowedExtensions, true))
             ) {
-                $fileExtList[] = '<span class="label label-success">' . strtoupper(htmlspecialchars($fileExt)) . '</span>';
+                $fileExtList[] = '<span class="label label-success">'
+                    . strtoupper(htmlspecialchars($fileExt)) . '</span>';
             }
         }
         if (!empty($fileExtList)) {
-            $code .= '
-                               <!--
-                       Form, adding online media urls:
-                               -->
-                               <form action="' . htmlspecialchars(BackendUtility::getModuleUrl('online_media')) . '" method="post" name="editform1"'
-                . ' id="typo3-addMediaForm">
-                                       <table border="0" cellpadding="0" cellspacing="0" id="typo3-uplFiles">
-                                               <tr>
-                                                       <td><h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media', true) . ':</h3></td>
-                                               </tr>
-                                               <tr>
-                                                       <td class="c-wCell c-hCell"><strong>' . $lang->getLL('path', true) . ':</strong> '
-                                . htmlspecialchars($header) . '</td>
-                                               </tr>
-                                               <tr>
-                                                       <td class="c-wCell c-hCell">
-                                                               <input type="text" name="file[newMedia][0][url]" size="50" placeholder="' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.placeholder', true) . '" />
-                                                               <input type="hidden" name="file[newMedia][0][target]" value="' . htmlspecialchars($folderObject->getCombinedIdentifier()) . '" />
-                                                               <input type="hidden" name="file[newMedia][0][allowed]" value="' . htmlspecialchars(implode(',', $allowedExtensions)) . '" />
-                                                               <button>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.submit', true) . '</button>
-                                                               <div class="help-block">
-                                                                       ' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.allowedProviders') . '<br />
-                                                                       ' . implode(' ', $fileExtList) . '
-                                                               </div>
-                                               ';
-            $code .= '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />';
-
-            $code .= '</td>
-                                       </tr>
-                               </table>
-                       </form><br />';
+            $formAction = BackendUtility::getModuleUrl('online_media');
+
+            $markup = array();
+            $markup[] = '<div class="element-browser-section element-browser-mediaurls">';
+            $markup[] = '   <form action="' . htmlspecialchars($formAction)
+                . '" method="post" name="editform1" id="typo3-addMediaForm" enctype="multipart/form-data">';
+            $markup[] = '<h3>' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media', true) . ':</h3>';
+            $markup[] = '<p><strong>' . $lang->getLL('path', true) . ':</strong>' . htmlspecialchars($header) . '</p>';
+            $markup[] = '<div class="form-group">';
+            $markup[] = '<input type="hidden" name="file[newMedia][0][target]" value="'
+                . htmlspecialchars($folderObject->getCombinedIdentifier()) . '" />';
+            $markup[] = '<input type="hidden" name="file[newMedia][0][allowed]" value="'
+                . htmlspecialchars(implode(',', $allowedExtensions)) . '" />';
+            $markup[] = '<input type="text" name="file[newMedia][0][url]" class="form-control" placeholder="'
+                . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.placeholder', true) . '" />';
+            $markup[] = '<button class="btn btn-default">'
+                . $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.submit', true) . '</button>';
+            $markup[] = '</div>';
+            $markup[] = '<div class="form-group">';
+            $markup[] = '    <label>';
+            $markup[] = $lang->sL('LLL:EXT:lang/locallang_core.xlf:online_media.new_media.allowedProviders') . '<br/>';
+            $markup[] = '    </label>';
+            $markup[] = '    <div class="form-control">';
+            $markup[] = implode(' ', $fileExtList);
+            $markup[] = '    </div>';
+            $markup[] = '</div>';
+            $markup[] = '<input type="hidden" name="redirect" value="' . htmlspecialchars($redirectValue) . '" />';
+            $markup[] = '</div>';
+            $markup[] = '</form>';
+            $markup[] = '</div>';
+
+
+            $code .= implode(LF, $markup);
         }
 
         return $code;
index a52a25f..5886c6d 100644 (file)
@@ -10175,10 +10175,6 @@ table#typo3-linkTarget {
 input.typo3-link-input {
   width: 250px;
 }
-form#typo3-uplFilesForm,
-form#typo3-crFolderForm {
-  border-top: 1px solid #adadad;
-}
 table#typo3-linkPages tr td.c-wCell,
 table#typo3-linkFiles tr td.c-wCell,
 table#typo3-EBrecords tr td.c-wCell,
@@ -12093,6 +12089,11 @@ span.warningboxheader {
 .t3-btn {
   cursor: pointer;
 }
+.element-browser-section {
+  border-bottom: 1px solid #d7d7d7;
+  padding-bottom: 30px;
+  margin: 0 15px 30px 15px;
+}
 *::-ms-clear {
   display: none;
 }