[TASK] Improve layout of file list in FileBrowser 85/46485/2
authorDaniel Maier <dani-maier@gmx.de>
Sat, 30 Jan 2016 19:20:18 +0000 (20:20 +0100)
committerFrank Naegler <frank.naegler@typo3.org>
Mon, 15 Feb 2016 16:16:08 +0000 (17:16 +0100)
The layout of the FileBrowser is streamlined with the current layout of the
Filelist backend module. The file listing has now a similar layout as
the one in the filelist module, and uses the same icon style.

Resolves: #73040
Releases: master, 7.6
Change-Id: I774ddfa3fdc86dddab8e41395e959a1453b0f3d9
Reviewed-on: https://review.typo3.org/46485
Reviewed-by: Daniel Maier <dani-maier@gmx.de>
Tested-by: Daniel Maier <dani-maier@gmx.de>
Reviewed-by: Markus Sommer <markussom@posteo.de>
Tested-by: Markus Sommer <markussom@posteo.de>
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
typo3/sysext/recordlist/Classes/Browser/FileBrowser.php

index 0e7e91e..c40fe5f 100644 (file)
@@ -251,9 +251,17 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
 
         // Create the header of current folder:
         $folderIcon = $this->iconFactory->getIconForResource($folder, Icon::SIZE_SMALL);
-        $lines[] = '<tr class="t3-row-header"><th colspan="4">'
-            . $folderIcon . ' ' . htmlspecialchars(GeneralUtility::fixed_lgd_cs($folder->getIdentifier(), $titleLen))
-            . '</th></tr>';
+
+        $lines[] = '
+                       <tr class="t3-row-header">
+                               <th class="col-title" nowrap="nowrap">' . $folderIcon . ' ' . htmlspecialchars(GeneralUtility::fixed_lgd_cs($folder->getIdentifier(), $titleLen)) . '</th>
+                               <th class="col-control" nowrap="nowrap"></th>
+                               <th class="col-clipboard" nowrap="nowrap">
+                                       <a href="#" class="btn btn-default" id="t3js-importSelection" title="' . $lang->getLL('importSelection', true) . '">' . $this->iconFactory->getIcon('actions-document-import-t3d', Icon::SIZE_SMALL) . '</a>
+                                       <a href="#" class="btn btn-default" id="t3js-toggleSelection" title="' . $lang->getLL('toggleSelection', true) . '">' . $this->iconFactory->getIcon('actions-document-select', Icon::SIZE_SMALL) . '</a>
+                               </th>
+                               <th nowrap="nowrap">&nbsp;</th>
+                       </tr>';
 
         if ($filesCount === 0) {
             $lines[] = '
@@ -300,10 +308,10 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
                 'fileIcon' => $icon
             );
             if ($this->fileIsSelectableInFileList($fileObject, $imgInfo)) {
-                $ATag = '<a href="#" title="' . htmlspecialchars($fileObject->getName()) . '" data-file-index="' . htmlspecialchars($filesIndex) . '" data-close="0">';
+                $ATag = '<a href="#" class="btn btn-default" title="' . htmlspecialchars($fileObject->getName()) . '" data-file-index="' . htmlspecialchars($filesIndex) . '" data-close="0">';
                 $ATag_alt = '<a href="#" title="' . htmlspecialchars($fileObject->getName()) . '" data-file-index="' . htmlspecialchars($filesIndex) . '" data-close="1">';
                 $ATag_e = '</a>';
-                $bulkCheckBox = '<input type="checkbox" class="typo3-bulk-item" name="file_' . $filesIndex . '" value="0" /> ';
+                $bulkCheckBox = '<label class="btn btn-default btn-checkbox"><input type="checkbox" class="typo3-bulk-item" name="file_' . $filesIndex . '" value="0" /><span class="t3-icon fa"></span></label>';
             } else {
                 $ATag = '';
                 $ATag_alt = '';
@@ -319,13 +327,16 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
             ));
 
             // Combine the stuff:
-            $filenameAndIcon = $bulkCheckBox . $ATag_alt . $icon . htmlspecialchars(GeneralUtility::fixed_lgd_cs($fileObject->getName(), $titleLen)) . $ATag_e;
+            $filenameAndIcon = $ATag_alt . $icon . htmlspecialchars(GeneralUtility::fixed_lgd_cs($fileObject->getName(), $titleLen)) . $ATag_e;
             // Show element:
             $lines[] = '
-                                       <tr>
-                                               <td nowrap="nowrap">' . $filenameAndIcon . '&nbsp;</td>
-                                               <td>' . $ATag . '<span title="' .  $lang->getLL('addToList', true) . '">' . $this->iconFactory->getIcon('actions-edit-add', Icon::SIZE_SMALL)->render() . '</span>' . $ATag_e . '</td>
-                                               <td nowrap="nowrap"><a href="' . htmlspecialchars($Ahref) . '" title="' . $lang->getLL('info', true) . '">' . $this->iconFactory->getIcon('actions-document-info', Icon::SIZE_SMALL) . $lang->getLL('info', true) . '</a></td>
+                                       <tr class="file_list_normal">
+                                               <td class="col-title" nowrap="nowrap">' . $filenameAndIcon . '&nbsp;</td>
+                                               <td class="col-control">
+                                                       <div class="btn-group">' . $ATag . '<span title="' .  $lang->getLL('addToList', true) . '">' . $this->iconFactory->getIcon('actions-edit-add', Icon::SIZE_SMALL)->render() . '</span>' . $ATag_e . '
+                                                       <a href="' . htmlspecialchars($Ahref) . '" class="btn btn-default" title="' . $lang->getLL('info', true) . '">' . $this->iconFactory->getIcon('actions-document-info', Icon::SIZE_SMALL) . '</a>
+                                               </td>
+                                               <td class="col-clipboard" valign="top">'. $bulkCheckBox .'</td>
                                                <td nowrap="nowrap">&nbsp;' . $pDim . '</td>
                                        </tr>';
             if ($pDim) {
@@ -386,15 +397,7 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
         }
 
         $lang = $this->getLanguageService();
-        $labelToggleSelection = $lang->sL('LLL:EXT:lang/locallang_browse_links.xlf:toggleSelection', true);
-        $labelImportSelection = $lang->sL('LLL:EXT:lang/locallang_browse_links.xlf:importSelection', true);
-
-        $out = '<div style="padding-top:10px;">' . '<a href="#" id="t3js-importSelection" title="' . $labelImportSelection . '">'
-            . $this->iconFactory->getIcon('actions-document-import-t3d', Icon::SIZE_SMALL)
-            . $labelImportSelection . '</a>&nbsp;&nbsp;&nbsp;'
-            . '<a href="#" id="t3js-toggleSelection" title="' . $labelToggleSelection . '">'
-            . $this->iconFactory->getIcon('actions-document-select', Icon::SIZE_SMALL)
-            . $labelToggleSelection . '</a>' . '</div>';
+        $out = '';
 
         // Getting flag for showing/not showing thumbnails:
         $noThumbsInEB = $this->getBackendUser()->getTSConfigVal('options.noThumbsInEB');