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>
background-repeat: repeat-x;
width: 100%;
padding-top: 5px;
-
- a {
- text-decoration: none;
- }
-
#typo3-messages {
margin: 0px;
padding: 10px;
// 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;
//
.list-tree,
.list-tree ul {
- margin-left: (@tree-indentation / 2);
+ margin-left: ceil((@tree-indentation / 2));
padding: 0;
list-style: none;
position: relative;
}
.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;
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;
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;
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;
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;
+ }
}
}
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 {
z-index: 2;
}
-div#typo3-inner-docbody {
+[id=typo3-inner-docbody] {
padding: 24px;
margin-top: 0;
transition: border 0.2s ease;
}
$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>';
}
}
}
- $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;
}
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>';
}
}
$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>';
}
$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) {
$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>';
}
/**
$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) {
}
// The value has matched the search string
if ($this->tsbrowser_searchKeys[$depth] & 2) {
- $HTML .= ' = <strong class="text-danger">' . htmlspecialchars($theValue) . '</strong>';
+ $HTML .= ' = <span class="list-tree-value text-danger">' . htmlspecialchars($theValue) . '</span>';
} else {
- $HTML .= ' = <strong>' . htmlspecialchars($theValue) . '</strong>';
+ $HTML .= ' = <span class="list-tree-value">' . htmlspecialchars($theValue) . '</span>';
}
if ($this->ext_regComments && isset($arr[$key . '..'])) {
$comment = $arr[$key . '..'];
}
}
}
+ $HTML .= '</span>';
if ($deeper) {
$HTML .= $this->ext_getObjTree($arr[$key . '.'], $depth, $depthData, '', $arr[$key], $alphaSort);
}
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> ';
}
/**
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>';
}
}
. '&varname=' . urlencode($variableName)))
. '#varname">' . $label . '</a>';
}
-
- return $label;
+ return '<span class="list-tree-label">' . $label . '</span>';
}
/**
// 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',
$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;
}
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();
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>';
}
$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>';
width: 100%;
padding-top: 5px;
}
-#typo3-browse-links-php a {
- text-decoration: none;
-}
#typo3-browse-links-php #typo3-messages {
margin: 0px;
padding: 10px;
width: 0;
position: absolute;
top: 0;
- bottom: 12px;
+ bottom: 11px;
left: 0;
margin-bottom: -2px;
border-left: 1px dotted #666666;
.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;
position: relative;
display: block;
float: left;
- margin-top: 2px;
+ margin-top: 1px;
margin-left: -26px;
text-align: center;
line-height: 20px;
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;
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;
width: 100%;
z-index: 2;
}
-div#typo3-inner-docbody {
+[id=typo3-inner-docbody] {
padding: 24px;
margin-top: 0;
transition: border 0.2s ease;