[TASK] Render configuration tree through CSS 53/37653/4
authorBenjamin Kott <benjamin.kott@outlook.com>
Sun, 8 Mar 2015 22:41:22 +0000 (23:41 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Thu, 12 Mar 2015 10:43:45 +0000 (11:43 +0100)
Releases: master
Resolves: #65678
Change-Id: If73967831c4524ee3bb44deefcbaf8dbc7127a0c
Reviewed-on: http://review.typo3.org/37653
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
typo3/sysext/lowlevel/Classes/Utility/ArrayBrowser.php
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_tree.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 75d5d41..36885b8 100644 (file)
@@ -91,57 +91,48 @@ class ArrayBrowser {
         * Before calling this function you may want to set some of the internal vars like
         * depthKeys, regexMode and fixedLgd.
         *
-        * @param array $arr The array to display
-        * @param string $depth_in Key-position id. Build up during recursive calls - [key1].[key2].[key3] - an so on.
-        * @param string $depthData Depth-data - basically a prefix for the icons. For calling this function from outside, let it stay blank.
+        * @param array $array The array to display
+        * @param string $positionKey Key-position id. Build up during recursive calls - [key1].[key2].[key3] - an so on.
+        * @param string $depthData is deprecated since TYPO3 CMS 7, and will be removed with CMS 8
         * @return string HTML for the tree
         */
-       public function tree($arr, $depth_in, $depthData) {
-               $HTML = '';
-               $a = 0;
-               if ($depth_in) {
-                       $depth_in = $depth_in . '.';
+       public function tree($array, $positionKey, $depthData = NULL) {
+               if ($depthData) {
+                       GeneralUtility::deprecationLog('ArrayBrowser::tree parameter $depthData is deprecated since TYPO3 CMS 7 and is not used anymore. Please remove the parameter.');
                }
-               $c = count($arr);
-               foreach ($arr as $key => $value) {
-                       $a++;
-                       $depth = $depth_in . $key;
-                       $goto = 'a' . substr(md5($depth), 0, 6);
+               $output = '<ul class="list-tree text-monospace">';
+               if ($positionKey) {
+                       $positionKey = $positionKey . '.';
+               }
+               foreach ($array as $key => $value) {
+                       $depth = $positionKey . $key;
                        if (is_object($value) && !$value instanceof \Traversable) {
                                $value = (array)$value;
                        }
                        $isArray = is_array($value) || $value instanceof \Traversable;
-                       $deeper = $isArray && ($this->depthKeys[$depth] || $this->expAll);
-                       $LN = $a == $c ? 'blank' : 'line';
-                       $BTM = $a == $c ? 'bottom' : '';
-                       $PM = $isArray ? ($deeper ? 'minus' : 'plus') : 'join';
-                       $HTML .= $depthData;
-                       $theIcon = '<img' . IconUtility::skinImg($GLOBALS['BACK_PATH'], ('gfx/ol/' . $PM . $BTM . '.gif'), 'width="18" height="16"') . ' align="top" border="0" alt="" />';
-                       if ($PM == 'join') {
-                               $HTML .= $theIcon;
-                       } else {
-                               $HTML .= ($this->expAll ? '' : '<a id="' . $goto . '" href="' . htmlspecialchars((BackendUtility::getModuleUrl(GeneralUtility::_GP('M')) . '&node[' . $depth . ']=' . ($deeper ? 0 : 1) . '#' . $goto)) . '">') . $theIcon . ($this->expAll ? '' : '</a>');
+                       $isResult = (bool)$this->searchKeys[$depth];
+                       $isExpanded = $isArray && ($this->depthKeys[$depth] || $this->expAll);
+                       $output .= '<li' . ($isResult ? ' class="active"' : '') . '>';
+                       if ($isArray && !$this->expAll) {
+                               $goto = 'a' . substr(md5($depth), 0, 6);
+                               $output .= '<a class="list-tree-control' . ($isExpanded ? ' list-tree-control-open' : ' list-tree-control-closed') . '" id="' . $goto . '" href="' . htmlspecialchars((BackendUtility::getModuleUrl(GeneralUtility::_GP('M')) . '&node[' . $depth . ']=' . ($isExpanded ? 0 : 1) . '#' . $goto)) . '"><i class="fa"></i></a> ';
                        }
-                       $label = $key;
-                       $HTML .= $this->wrapArrayKey($label, $depth, !$isArray ? $value : '');
+                       $output .= '<span class="list-tree-group">';
+                       $output .= $this->wrapArrayKey($key, $depth, !$isArray ? $value : '');
                        if (!$isArray) {
-                               $theValue = $value;
-                               if ($this->searchKeys[$depth]) {
-                                       $HTML .= ' = <span style="color:red;">' . $this->wrapValue($theValue) . '</span>';
-                               } else {
-                                       $HTML .= ' = ' . $this->wrapValue($theValue);
-                               }
+                               $output .= ' = <span class="list-tree-value">' . $this->wrapValue($value) . '</span>';
                        }
-                       $HTML .= '<br />';
-                       if ($deeper) {
-                               $HTML .= $this->tree(
+                       $output .= '</span>';
+                       if ($isExpanded) {
+                               $output .= $this->tree(
                                        $value,
-                                       $depth,
-                                       $depthData . '<img' . IconUtility::skinImg($GLOBALS['BACK_PATH'], ('gfx/ol/' . $LN . '.gif'), 'width="18" height="16"') . ' align="top" alt="" />'
+                                       $depth
                                );
                        }
+                       $output .= '</li>';
                }
-               return $HTML;
+               $output .= '</ul>';
+               return $output;
        }
 
        /**
@@ -153,7 +144,7 @@ class ArrayBrowser {
        public function wrapValue($theValue) {
                $wrappedValue = '';
                if ((string)$theValue !== '') {
-                       $wrappedValue = '<strong>' . htmlspecialchars($theValue) . '</strong>';
+                       $wrappedValue = htmlspecialchars($theValue);
                }
                return $wrappedValue;
        }
@@ -176,7 +167,7 @@ class ArrayBrowser {
                                . '[\'' . str_replace('.', '\'][\'', $depth) . '\'] = '
                                . (!MathUtility::canBeInterpretedAsInteger($theValue) ? '\''
                                . addslashes($theValue) . '\'' : $theValue) . '; ';
-                       $label = '<a href="'
+                       $label = '<a class="list-tree-label" href="'
                                . htmlspecialchars((BackendUtility::getModuleUrl(GeneralUtility::_GP('M'))
                                . '&varname=' . urlencode($variableName)))
                                . '#varname">' . $label . '</a>';
index 9fe286a..b52df16 100644 (file)
@@ -1,66 +1,95 @@
 //
-// Trees
+// Variables
 //
-
 @navigation-text: #000;
 @navigation-bg: rgb(245, 245, 245);
 @navigation-border: rgb(195, 195, 195);
-@indentation: 0.5em;
 
+
+//
+// Trees Variables
+//
+@tree-indentation: 0.5em;
+@tree-border: @navigation-border;
+
+
+//
+// Trees
+//
 .list-tree,
 .list-tree ul {
-       margin: 0;
+       margin-left: @tree-indentation;
        padding: 0;
        list-style: none;
+       position: relative;
+       &:before {
+               content: "";
+               display: block;
+               width: 0;
+               position: absolute;
+               top: 0;
+               bottom: 1em;
+               left: 0;
+               margin-bottom: -2px;
+               border-left: 1px dotted @tree-border;
+       }
 }
-
 .list-tree {
-       > li {
-               margin-top: @indentation * 2;
-       }
-
-       ul {
-               margin-left: @indentation;
-               position: relative;
-
+       li {
+               &.active {
+                       > .list-tree-group,
+                       > .list-tree-group a {
+                               .text-danger();
+                       }
+               }
                &:before {
                        content: "";
                        display: block;
-                       width: 0;
+                       width: @tree-indentation * 1.6;
+                       height: 0;
+                       border-top: 1px dotted @tree-border;
+                       margin-top: -2px;
                        position: absolute;
-                       top: 0;
-                       bottom: 1em;
-                       left: 0;
-                       margin-bottom: -2px;
-                       border-left: 1px dotted @navigation-border;
-               }
-
-               ul {
-                       margin-left: @indentation / 2;
+                       top: 1em;
+                       left: 2px;
                }
-
-               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;
+               &:last-child:before {
+                       background: white;
+                       height: auto;
+                       top: 1em;
+                       left: 0;
+                       bottom: 0;
                }
+               margin: 0;
+               padding-left: @tree-indentation * 2.5;
+               line-height: 1.75em;
+               position: relative;
+       }
+}
+.list-tree-value {
+       font-weight: bold;
+}
+.list-tree-control {
+       &:active,
+       &:focus,
+       &:hover {
+               text-decoration: none;
+       }
+       > .fa {
+               font-size: 1.1em;
+               display: inline-block;
+               text-align: center;
+               width: @tree-indentation * 2;
+       }
+       &.list-tree-control-open > .fa:before {
+               content: "\f0d7";
+       }
+       &.list-tree-control-closed > .fa:before {
+               content: "\f0da";
        }
 }
 
+
 table#typo3-tree {
        margin: 10px 0 20px 10px;
        width: 95%;
index 0640fac..7dbebf9 100644 (file)
@@ -9195,17 +9195,12 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
 }
 .list-tree,
 .list-tree ul {
-  margin: 0;
+  margin-left: 0.5em;
   padding: 0;
   list-style: none;
-}
-.list-tree > li {
-  margin-top: 1em;
-}
-.list-tree ul {
-  margin-left: 0.5em;
   position: relative;
 }
+.list-tree:before,
 .list-tree ul:before {
   content: "";
   display: block;
@@ -9217,27 +9212,58 @@ div.t3-form-field-container:first-child .t3-form-field-label-flex {
   margin-bottom: -2px;
   border-left: 1px dotted #c3c3c3;
 }
-.list-tree ul ul {
-  margin-left: 0.25em;
-}
-.list-tree ul li {
+.list-tree li {
   margin: 0;
   padding-left: 1.25em;
   line-height: 1.75em;
-  color: #c3c3c3;
   position: relative;
 }
-.list-tree ul li:before {
+.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 {
+  color: #a32e2e;
+}
+.list-tree li:before {
   content: "";
   display: block;
-  width: 0.75em;
+  width: 0.8em;
   height: 0;
-  border-top: 1px dotted;
+  border-top: 1px dotted #c3c3c3;
   margin-top: -2px;
   position: absolute;
   top: 1em;
   left: 2px;
 }
+.list-tree li:last-child:before {
+  background: white;
+  height: auto;
+  top: 1em;
+  left: 0;
+  bottom: 0;
+}
+.list-tree-value {
+  font-weight: bold;
+}
+.list-tree-control:active,
+.list-tree-control:focus,
+.list-tree-control:hover {
+  text-decoration: none;
+}
+.list-tree-control > .fa {
+  font-size: 1.1em;
+  display: inline-block;
+  text-align: center;
+  width: 1em;
+}
+.list-tree-control.list-tree-control-open > .fa:before {
+  content: "\f0d7";
+}
+.list-tree-control.list-tree-control-closed > .fa:before {
+  content: "\f0da";
+}
 table#typo3-tree {
   margin: 10px 0 20px 10px;
   width: 95%;