[TASK] Introduce CSS based trees 07/36807/7
authorAndreas Fernandez <a.fernandez@scripting-base.de>
Tue, 10 Feb 2015 15:45:00 +0000 (16:45 +0100)
committerGeorg Ringer <georg.ringer@gmail.com>
Thu, 19 Feb 2015 07:25:23 +0000 (08:25 +0100)
A new CSS based tree is introduced. As first step, the
trees in the "New record" wizard are ported to use it.

Resolves: #65039
Releases: master
Change-Id: Ibd8c8d4120157e83f0a11ea1c2ce66fc1951cae1
Reviewed-on: http://review.typo3.org/36807
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Reviewed-by: Benjamin Kott <info@bk2k.info>
Tested-by: Benjamin Kott <info@bk2k.info>
Reviewed-by: Nicole Cordes <typo3@cordes.co>
Tested-by: Nicole Cordes <typo3@cordes.co>
Reviewed-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Michael Oehlhof <typo3@oehlhof.de>
Tested-by: Andy Grunwald <andygrunwald@gmail.com>
Reviewed-by: Xavier Perseguers <xavier@typo3.org>
Tested-by: Xavier Perseguers <xavier@typo3.org>
Reviewed-by: Georg Ringer <georg.ringer@gmail.com>
Tested-by: Georg Ringer <georg.ringer@gmail.com>
typo3/sysext/backend/Classes/Controller/NewRecordController.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tree.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index a45d057..9c1198c 100644 (file)
@@ -38,6 +38,11 @@ class NewRecordController {
        public $pidInfo;
 
        /**
+        * @var array
+        */
+       protected $newRecordSortList;
+
+       /**
         * @var int
         */
        public $newPagesInto;
@@ -336,13 +341,6 @@ class NewRecordController {
                $doNotShowFullDescr = FALSE;
                // Initialize array for accumulating table rows:
                $this->tRows = array();
-               // tree images
-               $halfLine = '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/line.gif', 'width="18" height="16"') . ' alt="" />';
-               $firstLevel = '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/join.gif', 'width="18" height="16"') . ' alt="" />';
-               $secondLevel = '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/line.gif', 'width="18" height="16"') . ' alt="" />' .
-                                               '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/join.gif', 'width="18" height="16"') . ' alt="" />';
-               $secondLevelLast = '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/line.gif', 'width="18" height="16"') . ' alt="" />' .
-                                               '<img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/joinbottom.gif', 'width="18" height="16"') . ' alt="" />';
                // Get TSconfig for current page
                $pageTS = BackendUtility::getPagesTSconfig($this->id);
                // Finish initializing new pages options with TSconfig
@@ -353,7 +351,7 @@ class NewRecordController {
                $displayNewPagesIntoLink = $this->newPagesInto && !empty($pageTS['mod.']['wizards.']['newRecord.']['pages.']['show.']['pageInside']) ? 1 : 0;
                $displayNewPagesAfterLink = $this->newPagesAfter && !empty($pageTS['mod.']['wizards.']['newRecord.']['pages.']['show.']['pageAfter']) ? 1 : 0;
                // Slight spacer from header:
-               $this->code .= '<div class="typo3-newRecord-treeline">' . $halfLine . '</div>';
+               $this->code .= '';
                // New Page
                $table = 'pages';
                $v = $GLOBALS['TCA'][$table];
@@ -378,29 +376,17 @@ class NewRecordController {
                // Assemble all new page links
                $numPageLinks = count($newPageLinks);
                for ($i = 0; $i < $numPageLinks; $i++) {
-                       // For the last link, use the "branch bottom" icon
-                       if ($i == $numPageLinks - 1) {
-                               $treeComponent = $secondLevelLast;
-                       } else {
-                               $treeComponent = $secondLevel;
-                       }
-                       $rowContent .= '<div class="typo3-newRecord-treeline">' . $treeComponent . $newPageLinks[$i] . '</div>';
+                       $rowContent .= '<li>' . $newPageLinks[$i] . '</li>';
                }
                // Add row header and half-line if not empty
                if (!empty($rowContent)) {
-                       $rowContent .= '<div class="typo3-newRecord-treeline">' . $halfLine . '</div>';
-                       $rowContent = '<div class="typo3-newRecord-treeline">' . $firstLevel . $newPageIcon . '&nbsp;<strong>' .
-                               $GLOBALS['LANG']->getLL('createNewPage') . '</strong></div>' . $rowContent;
+                       $rowContent = '<ul class="list-tree"><li>' .$newPageIcon . '<strong>' .
+                               $GLOBALS['LANG']->getLL('createNewPage') . '</strong><ul>' . $rowContent . '</ul></li>';
                }
                // Compile table row to show the icon for "new page (select position)"
                $startRows = array();
                if ($this->showNewRecLink('pages') && !empty($rowContent)) {
-                       $startRows[] = '
-                               <tr>
-                                       <td nowrap="nowrap">' . $rowContent . '</td>
-                                       <td>' . BackendUtility::wrapInHelp($table, '') . '</td>
-                               </tr>
-                       ';
+                       $startRows[] = $rowContent;
                }
                // New tables (but not pages) INSIDE this pages
                $isAdmin = $GLOBALS['BE_USER']->isAdmin();
@@ -409,7 +395,6 @@ class NewRecordController {
                        if (is_array($GLOBALS['TCA'])) {
                                $groupName = '';
                                foreach ($GLOBALS['TCA'] as $table => $v) {
-                                       $count = count($GLOBALS['TCA'][$table]);
                                        $counter = 1;
                                        if ($table != 'pages'
                                                && $this->showNewRecLink($table)
@@ -425,14 +410,12 @@ class NewRecordController {
                                                // If the table is 'tt_content' (from "cms" extension), create link to wizard
                                                if ($table == 'tt_content') {
                                                        $groupName = $GLOBALS['LANG']->getLL('createNewContent');
-                                                       $rowContent = '<div class="typo3-newRecord-treeline">' . $firstLevel . $newContentIcon . '&nbsp;<strong>' . $GLOBALS['LANG']->getLL('createNewContent') . '</strong></div>';
+                                                       $rowContent = $newContentIcon . '<strong>' . $GLOBALS['LANG']->getLL('createNewContent') . '</strong><ul>';
                                                        // If mod.web_list.newContentWiz.overrideWithExtension is set, use that extension's wizard instead:
                                                        $overrideExt = $this->web_list_modTSconfig['properties']['newContentWiz.']['overrideWithExtension'];
                                                        $pathToWizard = ExtensionManagementUtility::isLoaded($overrideExt) ? ExtensionManagementUtility::extRelPath($overrideExt) . 'mod1/db_new_content_el.php?' : BackendUtility::getModuleUrl('new_content_element') . '&';
                                                        $href = $pathToWizard . 'id=' . $this->id . '&returnUrl=' . rawurlencode(GeneralUtility::getIndpEnv('REQUEST_URI'));
-                                                       $rowContent .= '<div class="typo3-newRecord-treeline">' . $secondLevel . $newLink . '</div><div class="typo3-newRecord-treeline">' . $secondLevelLast . '<a href="' . htmlspecialchars($href) . '">' . $newContentIcon . htmlspecialchars($GLOBALS['LANG']->getLL('clickForWizard')) . '</a></div>';
-                                                       // Half-line added:
-                                                       $rowContent .= '<div class="typo3-newRecord-treeline">' . $halfLine . '</div>';
+                                                       $rowContent .= '<li>' . $newLink . ' ' . BackendUtility::wrapInHelp($table, '') . '</li><li><a href="' . htmlspecialchars($href) . '">' . $newContentIcon . htmlspecialchars($GLOBALS['LANG']->getLL('clickForWizard')) . '</a></li></ul>';
                                                } else {
                                                        // Get the title
                                                        if ($v['ctrl']['readOnly'] || $v['ctrl']['hideTable'] || $v['ctrl']['is_static']) {
@@ -478,15 +461,10 @@ class NewRecordController {
                                                                $groupName = empty($v['ctrl']['groupName']) ? $_EXTKEY : $v['ctrl']['groupName'];
                                                        }
                                                        $rowContent .= $newLink;
-                                                       $counter++;
                                                }
                                                // Compile table row:
                                                if ($table == 'tt_content') {
-                                                       $startRows[] = '
-                                                               <tr>
-                                                                       <td nowrap="nowrap">' . $rowContent . '</td>
-                                                                       <td>' . BackendUtility::wrapInHelp($table, '') . '</td>
-                                                               </tr>';
+                                                       $startRows[] = '<li>' . $rowContent . '</li>';
                                                } else {
                                                        $this->tRows[$groupName]['title'] = $thisTitle;
                                                        $this->tRows[$groupName]['html'][] = $rowContent;
@@ -505,33 +483,15 @@ class NewRecordController {
                $finalRows = array();
                $finalRows[] = implode('', $startRows);
                foreach ($this->tRows as $key => $value) {
-                       $row = '<tr>
-                                               <td nowrap="nowrap"><div class="typo3-newRecord-treeline">' . $halfLine . '</div><div class="typo3-newRecord-treeline">' . $firstLevel .
-                               $iconFile[$key] . '&nbsp;<strong>' . $value['title'] . '</strong></div></td><td>&nbsp;<br />' . BackendUtility::wrapInHelp($key, '') . '</td>
-                                               </tr>';
-                       $count = count($value['html']) - 1;
+                       $row = '<li>' . $iconFile[$key] . ' <strong>' . $value['title'] . '</strong><ul>';
                        foreach ($value['html'] as $recordKey => $record) {
-                               $row .= '
-                                       <tr>
-                                               <td nowrap="nowrap"><div class="typo3-newRecord-treeline">' . ($recordKey < $count ? $secondLevel : $secondLevelLast) . $record . '</div></td>
-                                               <td>' . BackendUtility::wrapInHelp($value['table'][$recordKey], '') . '</td>
-                                       </tr>';
+                               $row .= '<li>' . $record . ' ' . BackendUtility::wrapInHelp($value['table'][$recordKey], '') . '</li>';
                        }
+                       $row .= '</ul></li>';
                        $finalRows[] = $row;
                }
-               // end of tree
-               $finalRows[] = '
-                       <tr>
-                               <td><img' . IconUtility::skinImg($this->doc->backPath, 'gfx/ol/stopper.gif', 'width="18" height="16"') . ' alt="" /></td>
-                               <td></td>
-                       </tr>
-               ';
                // Make table:
-               $this->code .= '
-                       <table border="0" cellpadding="0" cellspacing="0" id="typo3-newRecord">
-                       ' . implode('', $finalRows) . '
-                       </table>
-               ';
+               $this->code .= implode('', $finalRows);
        }
 
        /**
@@ -621,6 +581,8 @@ class NewRecordController {
                if (strstr($allowedTableList, '*') || GeneralUtility::inList($allowedTableList, $checkTable)) {
                        return TRUE;
                }
+
+               return FALSE;
        }
 
        /**
index ebf1186..9fe286a 100644 (file)
@@ -5,6 +5,61 @@
 @navigation-text: #000;
 @navigation-bg: rgb(245, 245, 245);
 @navigation-border: rgb(195, 195, 195);
+@indentation: 0.5em;
+
+.list-tree,
+.list-tree ul {
+       margin: 0;
+       padding: 0;
+       list-style: none;
+}
+
+.list-tree {
+       > li {
+               margin-top: @indentation * 2;
+       }
+
+       ul {
+               margin-left: @indentation;
+               position: relative;
+
+               &:before {
+                       content: "";
+                       display: block;
+                       width: 0;
+                       position: absolute;
+                       top: 0;
+                       bottom: 1em;
+                       left: 0;
+                       margin-bottom: -2px;
+                       border-left: 1px dotted @navigation-border;
+               }
+
+               ul {
+                       margin-left: @indentation / 2;
+               }
+
+               li {
+                       &:before {
+                               content: "";
+                               display: block;
+                               width: 0.75em;
+                               height: 0;
+                               border-top: 1px dotted;
+                               margin-top: -2px;
+                               position: absolute;
+                               top: 1em;
+                               left: 2px;
+                       }
+
+                       margin: 0;
+                       padding-left: @indentation * 2.5;
+                       line-height: 1.75em;
+                       color: @navigation-border;
+                       position: relative;
+               }
+       }
+}
 
 table#typo3-tree {
        margin: 10px 0 20px 10px;
index 6ca0b2e..e151935 100644 (file)
@@ -9036,6 +9036,51 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 .t3-form-field-label.t3-form-field-state-changed {
   color: #004fb0;
 }
+.list-tree,
+.list-tree ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.list-tree > li {
+  margin-top: 1em;
+}
+.list-tree ul {
+  margin-left: 0.5em;
+  position: relative;
+}
+.list-tree ul:before {
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 0;
+  bottom: 1em;
+  left: 0;
+  margin-bottom: -2px;
+  border-left: 1px dotted #c3c3c3;
+}
+.list-tree ul ul {
+  margin-left: 0.25em;
+}
+.list-tree ul li {
+  margin: 0;
+  padding-left: 1.25em;
+  line-height: 1.75em;
+  color: #c3c3c3;
+  position: relative;
+}
+.list-tree ul li:before {
+  content: "";
+  display: block;
+  width: 0.75em;
+  height: 0;
+  border-top: 1px dotted;
+  margin-top: -2px;
+  position: absolute;
+  top: 1em;
+  left: 2px;
+}
 table#typo3-tree {
   margin: 10px 0 20px 10px;
   width: 95%;