[BUGFIX] Give Record browser more UX space 84/58984/2
authorBenni Mack <benni@typo3.org>
Thu, 29 Nov 2018 16:04:59 +0000 (17:04 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Mon, 3 Dec 2018 20:02:01 +0000 (21:02 +0100)
The Record Browser (modal popups) wastes a
lot of space, and is not in line with the
rest of the TYPO3 Backend UX.

This patch fixes various issues regarding
- Trees do not have headlines anymore
- Filter box is simpler
- Icon is aligned with text next to it

Resolves: #87043
Releases: master
Change-Id: I9f7592912c4677e723e6662ccf0965940898083e
Reviewed-on: https://review.typo3.org/58984
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/recordlist/Classes/Browser/DatabaseBrowser.php
typo3/sysext/recordlist/Classes/Browser/FileBrowser.php
typo3/sysext/recordlist/Classes/Browser/FolderBrowser.php
typo3/sysext/recordlist/Classes/RecordList/DatabaseRecordList.php
typo3/sysext/recordlist/Resources/Private/Templates/LinkBrowser/File.html
typo3/sysext/recordlist/Resources/Private/Templates/LinkBrowser/Folder.html
typo3/sysext/recordlist/Resources/Private/Templates/LinkBrowser/Page.html
typo3/sysext/recordlist/Resources/Private/Templates/LinkBrowser/Record.html

index ca411e2..6b778a3 100644 (file)
@@ -123,7 +123,6 @@ class DatabaseBrowser extends AbstractElementBrowser implements ElementBrowserIn
         if ($withTree) {
             $markup[] = '   <div class="element-browser-main-sidebar">';
             $markup[] = '       <div class="element-browser-body">';
-            $markup[] = '           <h3>' . htmlspecialchars($this->getLanguageService()->getLL('pageTree')) . ':</h3>';
             $markup[] = '           ' . $this->getTemporaryTreeMountCancelNotice();
             $markup[] = '           ' . $tree;
             $markup[] = '       </div>';
@@ -195,7 +194,7 @@ class DatabaseBrowser extends AbstractElementBrowser implements ElementBrowserIn
             $tablesArr = GeneralUtility::trimExplode(',', $tables, true);
         }
 
-        $out = '<h3>' . htmlspecialchars($this->getLanguageService()->getLL('selectRecords')) . ':</h3>';
+        $out = '';
         // Create the header, showing the current page for which the listing is.
         // Includes link to the page itself, if pages are amount allowed tables.
         $titleLen = (int)$backendUser->uc['titleLen'];
@@ -203,7 +202,7 @@ class DatabaseBrowser extends AbstractElementBrowser implements ElementBrowserIn
         if (is_array($mainPageRecord)) {
             $pText = htmlspecialchars(GeneralUtility::fixed_lgd_cs($mainPageRecord['title'], $titleLen));
 
-            $out .= $this->iconFactory->getIconForRecord('pages', $mainPageRecord, Icon::SIZE_SMALL)->render();
+            $out .= '<p>' . $this->iconFactory->getIconForRecord('pages', $mainPageRecord, Icon::SIZE_SMALL)->render() . '&nbsp;';
             if (in_array('pages', $tablesArr, true)) {
                 $out .= '<span data-uid="' . htmlspecialchars($mainPageRecord['uid']) . '" data-table="pages" data-title="' . htmlspecialchars($mainPageRecord['title']) . '" data-icon="">';
                 $out .= '<a href="#" data-close="0">'
@@ -216,7 +215,7 @@ class DatabaseBrowser extends AbstractElementBrowser implements ElementBrowserIn
             } else {
                 $out .= $pText;
             }
-            $out .= '<br />';
+            $out .= '</p>';
         }
 
         $permsClause = $backendUser->getPagePermsClause(Permission::PAGE_SHOW);
index a69c42b..99f6bd9 100644 (file)
@@ -213,7 +213,6 @@ class FileBrowser extends AbstractElementBrowser implements ElementBrowserInterf
         $markup[] = '   <div class="element-browser-panel element-browser-main">';
         $markup[] = '       <div class="element-browser-main-sidebar">';
         $markup[] = '           <div class="element-browser-body">';
-        $markup[] = '               <h3>' . htmlspecialchars($this->getLanguageService()->getLL('folderTree')) . ':</h3>';
         $markup[] = '               ' . $tree;
         $markup[] = '           </div>';
         $markup[] = '       </div>';
index b34a346..976f1fb 100644 (file)
@@ -109,7 +109,6 @@ class FolderBrowser extends AbstractElementBrowser implements ElementBrowserInte
         $markup[] = '   <div class="element-browser-panel element-browser-main">';
         $markup[] = '       <div class="element-browser-main-sidebar">';
         $markup[] = '           <div class="element-browser-body">';
-        $markup[] = '               <h3>' . htmlspecialchars($this->getLanguageService()->getLL('folderTree')) . ':</h3>';
         $markup[] = '               ' . $tree;
         $markup[] = '           </div>';
         $markup[] = '       </div>';
index 9da79ba..d318bba 100644 (file)
@@ -3162,33 +3162,33 @@ class DatabaseRecordList
                     <div class="panel panel-default">
                         <div class="panel-body">
                             <div class="row">
-                                <div class="form-group col-xs-12">
+                                <div class="col-sm-6 col-xs-12">
                                     <label for="search_field">' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.searchString')
-            ) . '</label>
+            ) . '</label>
                                                                        <input class="form-control" type="search" placeholder="' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')
             ) . '" title="' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.searchString')
             ) . '" name="search_field" id="search_field" value="' . htmlspecialchars($this->searchString) . '" />
                                 </div>
-                                <div class="form-group col-xs-12 col-sm-6">
+                                <div class="col-xs-12 col-sm-3">
                                                                        <label for="search_levels">' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.search_levels')
-            ) . '</label>
+            ) . '</label>
                                                                        ' . $lMenu . '
                                 </div>
-                                <div class="form-group col-xs-12 col-sm-6">
+                                <div class="col-xs-12 col-sm-3">
                                                                        <label for="showLimit">' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.limit')
-            ) . '</label>
+            ) . '</label>
                                                                        <input class="form-control" type="number" min="0" max="10000" placeholder="10" title="' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.limit')
             ) . '" name="showLimit" id="showLimit" value="' . htmlspecialchars(
                 ($this->showLimit ? $this->showLimit : '')
             ) . '" />
                                 </div>
-                                <div class="form-group col-xs-12">
+                                <div class="col-xs-12">
                                     <div class="form-control-wrap">
                                         <button type="submit" class="btn btn-default" name="search" title="' . htmlspecialchars(
                 $lang->sL('LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search')
index 02502fb..60dbbac 100644 (file)
@@ -1,7 +1,6 @@
 <div class="element-browser-panel element-browser-main">
        <div class="element-browser-main-sidebar">
                <div class="element-browser-body">
-                       <h3><f:translate key="LLL:EXT:recordlist/Resources/Private/Language/locallang_browse_links.xlf:folderTree" /></h3>
                        {tree -> f:format.raw()}
                </div>
        </div>
index 45d9158..2c0cbef 100644 (file)
@@ -1,7 +1,6 @@
 <div class="element-browser-panel element-browser-main">
        <div class="element-browser-main-sidebar">
                <div class="element-browser-body">
-                       <h3><f:translate key="LLL:EXT:recordlist/Resources/Private/Language/locallang_browse_links.xlf:folderTree" /></h3>
                        {tree -> f:format.raw()}
                </div>
        </div>
index 6fe3d10..dbb7278 100644 (file)
@@ -1,7 +1,6 @@
 <div class="element-browser-panel element-browser-main">
        <div class="element-browser-main-sidebar">
                <div class="element-browser-body">
-                       <h3><f:translate key="LLL:EXT:recordlist/Resources/Private/Language/locallang_browse_links.xlf:pageTree" /></h3>
                        <f:if condition="{temporaryTreeMountCancelLink}">
                                <p>
                                        <a href="{temporaryTreeMountCancelLink}" class="btn btn-primary">
index 64e86f8..c29a92d 100644 (file)
@@ -2,7 +2,6 @@
        <f:if condition="{tree}">
                <div class="element-browser-main-sidebar">
                        <div class="element-browser-body">
-                               <h3>{f:translate(key:'LLL:EXT:recordlist/Resources/Private/Language/locallang_browse_links.xlf:pageTree')}</h3>
                                {tree -> f:format.raw()}
                        </div>
                </div>