[FOLLOWUP][TASK] Pagetrees: adopt open/close icons and align items of same level

Let the open/close icons for the tree root elements reappear.

Releases: master
Resolves: #68649
Change-Id: I0a7c9065b5773a8266a7df6587887dfcd59aa416
Reviewed-on: http://review.typo3.org/42210
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>

diff --git a/Build/Resources/Public/Less/TYPO3/_element_rte.less b/Build/Resources/Public/Less/TYPO3/_element_rte.less
index 430d8ef..9f90625 100644 (file)
--- a/Build/Resources/Public/Less/TYPO3/_element_rte.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_rte.less
@@ -8,11 +8,6 @@
        background-repeat: repeat-x;
        width: 100%;
        padding-top: 5px;
-
-       a {
-               text-decoration: none;
-       }
-
        #typo3-messages {
                margin: 0px;
                padding: 10px;

diff --git a/Build/Resources/Public/Less/TYPO3/_element_tree.less b/Build/Resources/Public/Less/TYPO3/_element_tree.less
index 39ec19d..e184483 100644 (file)
--- a/Build/Resources/Public/Less/TYPO3/_element_tree.less
+++ b/Build/Resources/Public/Less/TYPO3/_element_tree.less
@@ -10,8 +10,8 @@
 // Trees Variables
 //
 @tree-indentation: 16px;
-@tree-intendation-space: 5px;
-@tree-line-height: 23px;
+@tree-intendation-space: 6px;
+@tree-line-height: 21px;
 @tree-border: #666666;
 @tree-bg: white;
 @tree-control-size: 20px;
@@ -23,7 +23,7 @@
 //
 .list-tree,
 .list-tree ul {
-       margin-left: (@tree-indentation / 2);
+       margin-left: ceil((@tree-indentation / 2));
        padding: 0;
        list-style: none;
        position: relative;
@@ -41,21 +41,26 @@
 }
 .list-tree {
        li {
-               .list-tree-group {
-                       > .pull-right {
-                               padding-left: 15px;
-                       }
-               }
                &.active {
-                       > .list-tree-group,
-                       > .list-tree-group a {
-                               .text-danger();
+                       > .list-tree-group {
+                               &:before {
+                                       content: '';
+                                       position: absolute;
+                                       right: -@tree-intendation-space;
+                                       left: -@tree-intendation-space;
+                                       top: -1px;
+                                       bottom: -1px;
+                                       display: block;
+                                       border: 1px solid rgba(0,0,0,0.25);
+                                       background-color: rgba(255,255,255,0.75);
+                                       border-radius: 2px;
+                               }
                        }
                }
                &:before {
                        content: '';
                        display: block;
-                       width: ceil(@tree-indentation - @tree-intendation-space);
+                       width: ceil(@tree-indentation - @tree-intendation-space - 1px);
                        height: 0;
                        border-top: 1px dotted @tree-border;
                        margin-top: -2px;
@@ -67,7 +72,7 @@
                        background: @tree-bg;
                        height: auto;
                        left: 0;
-                       width: ceil(@tree-indentation - @tree-intendation-space) + 2;
+                       width: ceil(@tree-indentation - @tree-intendation-space) + 1;
                        bottom: 0;
                }
                margin: 0;
@@ -76,9 +81,23 @@
                position: relative;
        }
 }
+.list-tree-group {
+       position: relative;
+       display: block;
+       > span {
+               position: relative;
+       }
+}
 .list-tree-value {
        font-weight: bold;
 }
+.list-tree-icon {
+       top: -2px;
+}
+.list-tree-show {
+       float: right;
+       margin-left: @tree-intendation-space;
+}
 .list-tree-control {
        .user-select(none);
        position: relative;
@@ -95,8 +114,8 @@
                position: absolute;
                top: 50%;
                left: 50%;
-               margin-top: -(@tree-control-icon-size / 2);
-               margin-left: -(@tree-control-icon-size / 2);
+               margin-top: ceil(-(@tree-control-icon-size / 2));
+               margin-left: ceil(-(@tree-control-icon-size / 2));
                width: @tree-control-icon-size;
                height: @tree-control-icon-size;
                background-color: @tree-bg;
@@ -125,41 +144,58 @@
                display: none;
        }
        > li {
-               padding-left: 0;
+               padding-left: @tree-control-size;
                &:before {
                        display: none;
                }
                > .list-tree-group {
                        > .list-tree-control {
-                               display: none;
+                               margin-left: -@tree-control-size;
+                               &:before {
+                                       background-color: transparent;
+                               }
                        }
                }
        }
 }
+.list-tree-root-clean {
+       > li {
+               padding-left: 0;
+       }
+}
 
 
 //
 // Tree Variations
 //
-#imp-exp-mod {
+[id=imp-exp-mod] {
        .list-tree li:last-child:before,
        .list-tree-control:before {
                background-color: #f1f1f1;
        }
 }
-#typo3-browse-links-php {
+[id=typo3-browse-links-php] {
        .list-tree li:last-child:before,
        .list-tree-control:before {
                background-color: #ececec;
        }
 }
-#ext-backend-Modules-FileSystemNavigationFrame-index-php {
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] {
        .list-tree li:last-child:before,
        .list-tree-control:before {
                background-color: #f5f5f5;
        }
-       .list-tree-root {
-               margin-left: (@tree-indentation / 2);
+       [id=typo3-inner-docbody] {
+               padding-left: 10px;
+               padding-right: 10px;
+       }
+}
+[id=ext-lowlevel-Modules-Configuration-index-php] {
+       .active {
+               > .list-tree-group {
+                       display: inline-block;
+                       color: @brand-danger;
+               }
        }
 }
 
@@ -243,9 +279,8 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
        padding: 0;
 }
 
-body#typo3-pagetree #typo3-inner-docbody,
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
-       padding: 10px 0 10px 10px;
+#typo3-pagetree #typo3-inner-docbody {
+       padding: 10px 0;
 }
 
 ul.tree {

diff --git a/Build/Resources/Public/Less/TYPO3/_main_body.less b/Build/Resources/Public/Less/TYPO3/_main_body.less
index 0e2097b..92c092c 100644 (file)
--- a/Build/Resources/Public/Less/TYPO3/_main_body.less
+++ b/Build/Resources/Public/Less/TYPO3/_main_body.less
@@ -35,7 +35,7 @@ div#typo3-docbody {
        z-index: 2;
 }
 
-div#typo3-inner-docbody {
+[id=typo3-inner-docbody] {
        padding: 24px;
        margin-top: 0;
        transition: border 0.2s ease;

diff --git a/typo3/sysext/backend/Classes/Tree/View/AbstractTreeView.php b/typo3/sysext/backend/Classes/Tree/View/AbstractTreeView.php
index 686226d..8d1cf80 100644 (file)
--- a/typo3/sysext/backend/Classes/Tree/View/AbstractTreeView.php
+++ b/typo3/sysext/backend/Classes/Tree/View/AbstractTreeView.php
@@ -426,7 +426,12 @@ abstract class AbstractTreeView {
                        }
 
                        $idAttr = htmlspecialchars($this->domIdPrefix . $this->getId($treeItem['row']) . '_' . $treeItem['bank']);
-                       $out .= '<li id="' . $idAttr . '"' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '><span class="list-tree-group">' . $treeItem['HTML'] . $this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $treeItem['bank']) . '</span>';
+                       $out .= '
+                               <li id="' . $idAttr . '"' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '>
+                                       <span class="list-tree-group">
+                                               <span class="list-tree-icon">' . $treeItem['HTML'] . '</span>
+                                               <span class="list-tree-title">' .$this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $treeItem['bank']) . '</span>
+                                       </span>';
 
                        if (!$treeItem['hasSub']) {
                                $out .= '</li>';
@@ -446,7 +451,7 @@ abstract class AbstractTreeView {
                                }
                        }
                }
-               $out = '<ul class="list-tree list-tree-root">' . $out . '</ul>';
+               $out = '<ul class="list-tree list-tree-root list-tree-root-clean">' . $out . '</ul>';
                return $out;
        }
 

diff --git a/typo3/sysext/backend/Classes/Tree/View/ElementBrowserPageTreeView.php b/typo3/sysext/backend/Classes/Tree/View/ElementBrowserPageTreeView.php
index 16969df..b9593e1 100644 (file)
--- a/typo3/sysext/backend/Classes/Tree/View/ElementBrowserPageTreeView.php
+++ b/typo3/sysext/backend/Classes/Tree/View/ElementBrowserPageTreeView.php
@@ -50,9 +50,9 @@ class ElementBrowserPageTreeView extends BrowseTreeView {
        public function wrapTitle($title, $v, $ext_pArrPages = '') {
                if ($this->ext_isLinkable($v['doktype'], $v['uid'])) {
                        $aOnClick = 'return link_typo3Page(' . \TYPO3\CMS\Core\Utility\GeneralUtility::quoteJSvalue($v['uid']) . ');';
-                       return '<a href="#" onclick="' . htmlspecialchars($aOnClick) . '">' . $title . '</a>';
+                       return '<span class="list-tree-title"><a href="#" onclick="' . htmlspecialchars($aOnClick) . '">' . $title . '</a></span>';
                } else {
-                       return '<span class="text-muted">' . $title . '</span>';
+                       return '<span class="list-tree-title text-muted">' . $title . '</span>';
                }
        }
 
@@ -85,11 +85,16 @@ class ElementBrowserPageTreeView extends BrowseTreeView {
                        $selected = '';
                        if ($GLOBALS['SOBE']->browser->curUrlInfo['act'] == 'page' && $GLOBALS['SOBE']->browser->curUrlInfo['pageid'] == $treeItem['row']['uid'] && $GLOBALS['SOBE']->browser->curUrlInfo['pageid']) {
                                $selected = ' bg-success';
+                               $classAttr .= ' active';
                        }
                        $aOnClick = 'return jumpToUrl(' . \TYPO3\CMS\Core\Utility\GeneralUtility::quoteJSvalue($this->getThisScript() . 'act=' . $GLOBALS['SOBE']->browser->act . '&mode=' . $GLOBALS['SOBE']->browser->mode . '&expandPage=' . $treeItem['row']['uid']) . ');';
                        $cEbullet = $this->ext_isLinkable($treeItem['row']['doktype'], $treeItem['row']['uid']) ? '<a href="#" class="pull-right" onclick="' . htmlspecialchars($aOnClick) . '"><i class="fa fa-caret-square-o-right"></i></a>' : '';
-                       $out .= '<li' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '><span class="list-tree-group' . $selected . '">' . $cEbullet . $treeItem['HTML'] . $this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $this->ext_pArrPages) . '</span>';
-
+                       $out .= '
+                               <li' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '>
+                                       <span class="list-tree-group' . $selected . '">
+                                               ' . $cEbullet . $treeItem['HTML'] . $this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $this->ext_pArrPages) . '
+                                       </span>
+                               ';
                        if (!$treeItem['hasSub']) {
                                $out .= '</li>';
                        }

diff --git a/typo3/sysext/backend/Classes/View/PageTreeView.php b/typo3/sysext/backend/Classes/View/PageTreeView.php
index 2f04b67..8797ff9 100644 (file)
--- a/typo3/sysext/backend/Classes/View/PageTreeView.php
+++ b/typo3/sysext/backend/Classes/View/PageTreeView.php
@@ -79,7 +79,7 @@ class PageTreeView extends \TYPO3\CMS\Backend\Tree\View\BrowseTreeView {
                        $thePageIcon = '<a href="#" onclick="' . htmlspecialchars($aOnClick) . '">' . $thePageIcon . '</a>';
                }
                // Wrap icon in a drag/drop span.
-               $dragDropIcon = '<span class="dragIcon" id="dragIconID_' . $row['uid'] . '">' . $thePageIcon . '</span>';
+               $dragDropIcon = '<span class="list-tree-icon dragIcon" id="dragIconID_' . $row['uid'] . '">' . $thePageIcon . '</span> ';
                // Add Page ID:
                $pageIdStr = '';
                if ($this->ext_showPageId) {
@@ -119,7 +119,7 @@ class PageTreeView extends \TYPO3\CMS\Backend\Tree\View\BrowseTreeView {
 
                $thePageTitle = '<a href="#" onclick="' . htmlspecialchars($aOnClick) . '"' . GeneralUtility::implodeAttributes($clickMenuParts) . '>' . $title . '</a>';
                // Wrap title in a drag/drop span.
-               return '<span class="dragTitle" id="dragTitleID_' . $row['uid'] . '">' . $thePageTitle . '</span>';
+               return '<span class="list-tree-title dragTitle" id="dragTitleID_' . $row['uid'] . '">' . $thePageTitle . '</span>';
        }
 
        /**

diff --git a/typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php b/typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
index b258c90..3937c2d 100644 (file)
--- a/typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
+++ b/typo3/sysext/core/Classes/TypoScript/ExtendedTemplateService.php
@@ -475,7 +475,9 @@ class ExtendedTemplateService extends TemplateService {
                                                $label = '<a href="' . htmlspecialchars($aHref) . '" title="' . htmlspecialchars($ln) . '">' . $label . '</a>';
                                        }
                                }
-                               $HTML .= '<span class="list-tree-group">[' . $label . ']</span>';
+                               $HTML .= '
+                                       <span class="list-tree-group">
+                                               <span class="list-tree-label">[' . $label . ']</span>';
                                if (isset($arr[$key])) {
                                        $theValue = $arr[$key];
                                        if ($this->fixedLgd) {
@@ -485,9 +487,9 @@ class ExtendedTemplateService extends TemplateService {
                                        }
                                        // The value has matched the search string
                                        if ($this->tsbrowser_searchKeys[$depth] & 2) {
-                                               $HTML .= '&nbsp;=&nbsp;<strong class="text-danger">' . htmlspecialchars($theValue) . '</strong>';
+                                               $HTML .= ' = <span class="list-tree-value text-danger">' . htmlspecialchars($theValue) . '</span>';
                                        } else {
-                                               $HTML .= '&nbsp;=&nbsp;<strong>' . htmlspecialchars($theValue) . '</strong>';
+                                               $HTML .= ' = <span class="list-tree-value">' . htmlspecialchars($theValue) . '</span>';
                                        }
                                        if ($this->ext_regComments && isset($arr[$key . '..'])) {
                                                $comment = $arr[$key . '..'];
@@ -505,6 +507,7 @@ class ExtendedTemplateService extends TemplateService {
                                                }
                                        }
                                }
+                               $HTML .= '</span>';
                                if ($deeper) {
                                        $HTML .= $this->ext_getObjTree($arr[$key . '.'], $depth, $depthData, '', $arr[$key], $alphaSort);
                                }

diff --git a/typo3/sysext/filelist/Classes/FileListFolderTree.php b/typo3/sysext/filelist/Classes/FileListFolderTree.php
index c5366a4..3c3e9d0 100644 (file)
--- a/typo3/sysext/filelist/Classes/FileListFolderTree.php
+++ b/typo3/sysext/filelist/Classes/FileListFolderTree.php
@@ -35,7 +35,7 @@ class FileListFolderTree extends \TYPO3\CMS\Backend\Tree\View\FolderTreeView {
        public function wrapIcon($theFolderIcon, $folderObject) {
                $theFolderIcon = parent::wrapIcon($theFolderIcon, $folderObject);
                // Wrap icon in a drag/drop span.
-               return '<span class="dragIcon" id="dragIconID_' . $this->getJumpToParam($folderObject) . '">' . $theFolderIcon . '</span>';
+               return '<span class="list-tree-icon dragIcon" id="dragIconID_' . $this->getJumpToParam($folderObject) . '">' . $theFolderIcon . '</span> ';
        }
 
        /**
@@ -50,7 +50,7 @@ class FileListFolderTree extends \TYPO3\CMS\Backend\Tree\View\FolderTreeView {
        public function wrapTitle($title, $folderObject, $bank = 0) {
                $theFolderTitle = parent::wrapTitle($title, $folderObject, $bank);
                // Wrap title in a drag/drop span.
-               return '<span class="dragTitle" id="dragTitleID_' . $this->getJumpToParam($folderObject) . '">' . $theFolderTitle . '</span>';
+               return '<span class="list-tree-title dragTitle" id="dragTitleID_' . $this->getJumpToParam($folderObject) . '">' . $theFolderTitle . '</span>';
        }
 
 }

diff --git a/typo3/sysext/lowlevel/Classes/Utility/ArrayBrowser.php b/typo3/sysext/lowlevel/Classes/Utility/ArrayBrowser.php
index 2fc2718..9813439 100644 (file)
--- a/typo3/sysext/lowlevel/Classes/Utility/ArrayBrowser.php
+++ b/typo3/sysext/lowlevel/Classes/Utility/ArrayBrowser.php
@@ -169,8 +169,7 @@ class ArrayBrowser {
                                . '&varname=' . urlencode($variableName)))
                                . '#varname">' . $label . '</a>';
                }
-
-               return $label;
+               return '<span class="list-tree-label">' . $label . '</span>';
        }
 
        /**

diff --git a/typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php b/typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php
index f0503cc..fc2573f 100755 (executable)
--- a/typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php
+++ b/typo3/sysext/recordlist/Classes/Browser/ElementBrowser.php
@@ -1606,9 +1606,16 @@ class ElementBrowser {
                        // Create header for listing, showing the page title/icon:
                        $mainPageRec = BackendUtility::getRecordWSOL('pages', $expPageId);
                        $db = $this->getDatabaseConnection();
-                       $picon = IconUtility::getSpriteIconForRecord('pages', $mainPageRec);
-                       $picon .= BackendUtility::getRecordTitle('pages', $mainPageRec, TRUE);
-                       $out .= $picon . '<ul class="list-tree list-tree-root">';
+                       $out .= '
+                               <ul class="list-tree list-tree-root list-tree-root-clean">
+                                       <li class="list-tree-control-open">
+                                               <span class="list-tree-group">
+                                                       <span class="list-tree-icon">' . IconUtility::getSpriteIconForRecord('pages', $mainPageRec) . '</span>
+                                                       <span class="list-tree-title">' . BackendUtility::getRecordTitle('pages', $mainPageRec, TRUE) . '</span>
+                                               </span>
+                                               <ul>
+                               ';
+
                        // Look up tt_content elements from the expanded page:
                        $res = $db->exec_SELECTquery(
                                'uid,header,hidden,starttime,endtime,fe_group,CType,colPos,bodytext',
@@ -1626,14 +1633,29 @@ class ElementBrowser {
                                $icon = IconUtility::getSpriteIconForRecord('tt_content', $row);
                                $selected = '';
                                if ($this->curUrlInfo['act'] == 'page' && $this->curUrlInfo['cElement'] == $row['uid']) {
-                                       $selected = ' class="bg-success"';
+                                       $selected = ' class="active"';
                                }
                                // Putting list element HTML together:
-                               $out .= '<li>'
-                                       . '<a href="#"' . $selected . ' onclick="return link_typo3Page(\'' . $expPageId . '\',\'#' . $row['uid'] . '\');">'
-                                       . $icon . BackendUtility::getRecordTitle('tt_content', $row, TRUE) . '</a></li>';
+                               $out .= '
+                                       <li' . $selected . '>
+                                               <span class="list-tree-group">
+                                                       <span class="list-tree-icon">
+                                                               ' . $icon . '
+                                                       </span>
+                                                       <span class="list-tree-title">
+                                                               <a href="#" onclick="return link_typo3Page(\'' . $expPageId . '\',\'#' . $row['uid'] . '\');">
+                                                                       ' . BackendUtility::getRecordTitle('tt_content', $row, TRUE) . '
+                                                               </a>
+                                                       </span>
+                                               </span>
+                                       </li>
+                                       ';
                        }
-                       $out .= '</ul>';
+                       $out .= '
+                                               </ul>
+                                       </li>
+                               </ul>
+                               ';
                }
                return $out;
        }
@@ -1784,8 +1806,11 @@ class ElementBrowser {
                if ($this->curUrlInfo['act'] == 'folder' && $currentIdentifier == $folder->getCombinedIdentifier()) {
                        $selected = ' class="bg-success"';
                }
-               $out .= '<a href="#"' . $selected . ' title="' . htmlspecialchars($folder->getIdentifier()) . '" onclick="return link_folder(\'file:' . $folder->getCombinedIdentifier() . '\');">'
-                       . $folderIcon . '</a><br />';
+               $out .= '
+                       <a href="#"' . $selected . ' title="' . htmlspecialchars($folder->getIdentifier()) . '" onclick="return link_folder(\'file:' . $folder->getCombinedIdentifier() . '\');">
+                               ' . $folderIcon . '
+                       </a>
+                       ';
                // Get files from the folder:
                if ($renderFolders) {
                        $items = $folder->getSubfolders();
@@ -1820,14 +1845,16 @@ class ElementBrowser {
                                if (($this->curUrlInfo['act'] == 'file' || $this->curUrlInfo['act'] == 'folder')
                                        && $currentIdentifier == $fileIdentifier
                                ) {
-                                       $selected = ' class="bg-success"';
+                                       $selected = ' class="active"';
                                }
                                // Put it all together for the file element:
                                $out .=
-                                       '<li><a href="#"' . $selected . ' title="' . htmlspecialchars($fileOrFolderObject->getName()) . '" onclick="return link_folder(\'' . $itemUid . '\');">' .
-                                               $icon .
-                                               htmlspecialchars(GeneralUtility::fixed_lgd_cs($fileOrFolderObject->getName(), $titleLen)) .
-                                       '</a></li>';
+                                       '<li' . $selected . '>
+                                               <a href="#"title="' . htmlspecialchars($fileOrFolderObject->getName()) . '" onclick="return link_folder(\'' . $itemUid . '\');">
+                                                       ' .     $icon . '
+                                                       ' . htmlspecialchars(GeneralUtility::fixed_lgd_cs($fileOrFolderObject->getName(), $titleLen)) . '
+                                               </a>
+                                       </li>';
                        }
                        $out .= '</ul>';
                }

diff --git a/typo3/sysext/rtehtmlarea/Classes/PageTree.php b/typo3/sysext/rtehtmlarea/Classes/PageTree.php
index fd7b22a..9e3be01 100644 (file)
--- a/typo3/sysext/rtehtmlarea/Classes/PageTree.php
+++ b/typo3/sysext/rtehtmlarea/Classes/PageTree.php
@@ -55,11 +55,18 @@ class PageTree extends \TYPO3\CMS\Backend\Tree\View\ElementBrowserPageTreeView {
 
                        $selected = '';
                        if ($GLOBALS['SOBE']->browser->curUrlInfo['act'] == 'page' && $GLOBALS['SOBE']->browser->curUrlInfo['pageid'] == $treeItem['row']['uid'] && $GLOBALS['SOBE']->browser->curUrlInfo['pageid']) {
-                               $selected = ' bg-success';
+                               $classAttr .= ' active';
                        }
                        $aOnClick = 'return jumpToUrl(' . GeneralUtility::quoteJSvalue($this->getThisScript() . 'act=' . $GLOBALS['SOBE']->browser->act . '&editorNo=' . $GLOBALS['SOBE']->browser->editorNo . '&contentTypo3Language=' . $GLOBALS['SOBE']->browser->contentTypo3Language . '&mode=' . $GLOBALS['SOBE']->browser->mode . '&expandPage=' . $treeItem['row']['uid']) . ');';
-                       $cEbullet = $this->ext_isLinkable($treeItem['row']['doktype'], $treeItem['row']['uid']) ? '<a href="#" class="pull-right" onclick="' . htmlspecialchars($aOnClick) . '"><i class="fa fa-caret-square-o-right"></i></a>' : '';
-                       $out .= '<li' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '><span class="list-tree-group' . $selected . '">' . $cEbullet . $treeItem['HTML'] . $this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $this->ext_pArrPages) . '</span>';
+                       $cEbullet = $this->ext_isLinkable($treeItem['row']['doktype'], $treeItem['row']['uid']) ? '<a href="#" class="list-tree-show" onclick="' . htmlspecialchars($aOnClick) . '"><i class="fa fa-caret-square-o-right"></i></a>' : '';
+                       $out .= '
+                               <li' . ($classAttr ? ' class="' . trim($classAttr) . '"' : '') . '>
+                                       <span class="list-tree-group">
+                                               ' . $cEbullet . '
+                                               <span class="list-tree-icon">' . $treeItem['HTML'] . '</span>
+                                               ' . $this->wrapTitle($this->getTitleStr($treeItem['row'], $titleLen), $treeItem['row'], $this->ext_pArrPages) . '
+                                       </span>
+                               ';
 
                        if (!$treeItem['hasSub']) {
                                $out .= '</li>';

diff --git a/typo3/sysext/t3skin/Resources/Public/Css/backend.css b/typo3/sysext/t3skin/Resources/Public/Css/backend.css
index bd95d09..3fcd048 100644 (file)
--- a/typo3/sysext/t3skin/Resources/Public/Css/backend.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/backend.css
@@ -9782,9 +9782,6 @@ ul.typo3-messages {
   width: 100%;
   padding-top: 5px;
 }
-#typo3-browse-links-php a {
-  text-decoration: none;
-}
 #typo3-browse-links-php #typo3-messages {
   margin: 0px;
   padding: 10px;
@@ -10778,7 +10775,7 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
   width: 0;
   position: absolute;
   top: 0;
-  bottom: 12px;
+  bottom: 11px;
   left: 0;
   margin-bottom: -2px;
   border-left: 1px dotted #666666;
@@ -10786,43 +10783,56 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 .list-tree li {
   margin: 0;
   padding-left: 16px;
-  line-height: 23px;
+  line-height: 21px;
   position: relative;
 }
-.list-tree li .list-tree-group > .pull-right {
-  padding-left: 15px;
-}
-.list-tree li.active > .list-tree-group,
-.list-tree li.active > .list-tree-group a {
-  color: #c83c3c;
-}
-a.list-tree li.active > .list-tree-group:hover,
-a.list-tree li.active > .list-tree-group a:hover,
-a.list-tree li.active > .list-tree-group:focus,
-a.list-tree li.active > .list-tree-group a:focus {
-  color: #a32e2e;
+.list-tree li.active > .list-tree-group:before {
+  content: '';
+  position: absolute;
+  right: -6px;
+  left: -6px;
+  top: -1px;
+  bottom: -1px;
+  display: block;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  background-color: rgba(255, 255, 255, 0.75);
+  border-radius: 2px;
 }
 .list-tree li:before {
   content: '';
   display: block;
-  width: 11px;
+  width: 9px;
   height: 0;
   border-top: 1px dotted #666666;
   margin-top: -2px;
   position: absolute;
-  top: 13px;
+  top: 12px;
   left: 2px;
 }
 .list-tree li:last-child:before {
   background: white;
   height: auto;
   left: 0;
-  width: 13px;
+  width: 11px;
   bottom: 0;
 }
+.list-tree-group {
+  position: relative;
+  display: block;
+}
+.list-tree-group > span {
+  position: relative;
+}
 .list-tree-value {
   font-weight: bold;
 }
+.list-tree-icon {
+  top: -2px;
+}
+.list-tree-show {
+  float: right;
+  margin-left: 6px;
+}
 .list-tree-control {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -10831,7 +10841,7 @@ a.list-tree li.active > .list-tree-group a:focus {
   position: relative;
   display: block;
   float: left;
-  margin-top: 2px;
+  margin-top: 1px;
   margin-left: -26px;
   text-align: center;
   line-height: 20px;
@@ -10873,28 +10883,39 @@ a.list-tree li.active > .list-tree-group a:focus {
   display: none;
 }
 .list-tree-root > li {
-  padding-left: 0;
+  padding-left: 20px;
 }
 .list-tree-root > li:before {
   display: none;
 }
 .list-tree-root > li > .list-tree-group > .list-tree-control {
-  display: none;
+  margin-left: -20px;
 }
-#imp-exp-mod .list-tree li:last-child:before,
-#imp-exp-mod .list-tree-control:before {
+.list-tree-root > li > .list-tree-group > .list-tree-control:before {
+  background-color: transparent;
+}
+.list-tree-root-clean > li {
+  padding-left: 0;
+}
+[id=imp-exp-mod] .list-tree li:last-child:before,
+[id=imp-exp-mod] .list-tree-control:before {
   background-color: #f1f1f1;
 }
-#typo3-browse-links-php .list-tree li:last-child:before,
-#typo3-browse-links-php .list-tree-control:before {
+[id=typo3-browse-links-php] .list-tree li:last-child:before,
+[id=typo3-browse-links-php] .list-tree-control:before {
   background-color: #ececec;
 }
-#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree li:last-child:before,
-#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree-control:before {
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .list-tree li:last-child:before,
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .list-tree-control:before {
   background-color: #f5f5f5;
 }
-#ext-backend-Modules-FileSystemNavigationFrame-index-php .list-tree-root {
-  margin-left: 8px;
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] [id=typo3-inner-docbody] {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+[id=ext-lowlevel-Modules-Configuration-index-php] .active > .list-tree-group {
+  display: inline-block;
+  color: #c83c3c;
 }
 .treeline-icon {
   position: relative;
@@ -10961,9 +10982,8 @@ body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
   margin: 0;
   padding: 0;
 }
-body#typo3-pagetree #typo3-inner-docbody,
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php #typo3-inner-docbody {
-  padding: 10px 0 10px 10px;
+#typo3-pagetree #typo3-inner-docbody {
+  padding: 10px 0;
 }
 ul.tree {
   line-height: 12px;
@@ -11572,7 +11592,7 @@ div#typo3-docbody {
   width: 100%;
   z-index: 2;
 }
-div#typo3-inner-docbody {
+[id=typo3-inner-docbody] {
   padding: 24px;
   margin-top: 0;
   transition: border 0.2s ease;