[TASK] Use correct icons for TCA type select with renderType selectTree 10/47810/2
authorManuel Selbach <manuel_selbach@yahoo.de>
Fri, 8 Apr 2016 14:05:30 +0000 (16:05 +0200)
committerPhilipp Gampe <philipp.gampe@typo3.org>
Wed, 20 Apr 2016 13:11:14 +0000 (15:11 +0200)
With the introduction of the new icon API the icons shown in the TCA
selectTree broke. This patch changes the tree js so it can handle the
new icon API.

The "old fashioned" fallback icons in tree view of e.g. categories
are replaced with current style of icons from the page tree.

Change-Id: Ibf39920b15c17b196d51e2e63c3a755c79cf3e3a
Resolves: #75463
Releases: master, 7.6
Reviewed-on: https://review.typo3.org/47810
Reviewed-by: Philipp Gampe <philipp.gampe@typo3.org>
Tested-by: Philipp Gampe <philipp.gampe@typo3.org>
typo3/sysext/backend/Classes/Tree/Renderer/ExtJsJsonTreeRenderer.php
typo3/sysext/backend/Resources/Public/JavaScript/tree.js
typo3/sysext/core/Classes/Tree/TableConfiguration/DatabaseTreeDataProvider.php
typo3/sysext/t3skin/extjs/xtheme-t3skin.css

index 10e5076..aada785 100644 (file)
@@ -54,19 +54,13 @@ class ExtJsJsonTreeRenderer extends \TYPO3\CMS\Backend\Tree\Renderer\AbstractTre
     protected function getNodeArray(\TYPO3\CMS\Backend\Tree\TreeRepresentationNode $node)
     {
         $nodeArray = array(
-            'iconCls' => $node->getIcon(),
-            'text' => $node->getLabel(),
+            'iconTag' => $node->getIcon(),
+            'text' => htmlspecialchars($node->getLabel()),
             'leaf' => !$node->hasChildNodes(),
-            'id' => $node->getId(),
-            'uid' => $node->getId()
+            'id' => htmlspecialchars($node->getId()),
+            'uid' => htmlspecialchars($node->getId())
         );
 
-        foreach ($nodeArray as &$nodeItem) {
-            if (is_string($nodeItem)) {
-                $nodeItem = htmlspecialchars($nodeItem);
-            }
-        }
-
         return $nodeArray;
     }
 
index c657347..3b75ef5 100644 (file)
@@ -60,6 +60,15 @@ TYPO3.Components.Tree.StandardTree = function(config) {
 Ext.extend(TYPO3.Components.Tree.StandardTree, Ext.tree.TreePanel, {
 
        initComponent: function() {
+               if (!this.uiProvider) {
+                       this.uiProvider = TYPO3.Components.Tree.TreeNodeUI;
+               }
+               this.loader = new Ext.tree.TreeLoader({
+                       baseAttrs: {
+                               uiProvider: this.uiProvider
+                       }
+               });
+
                Ext.apply(this, {
                        tbar: this.initialConfig.showHeader ? TYPO3.Components.Tree.Toolbar([], this) : null
                });
@@ -178,7 +187,7 @@ TYPO3.Components.Tree.Toolbar = function(items, scope) {
 
 TYPO3.Components.Tree.EmptySelectionModel = new Ext.tree.DefaultSelectionModel({
        select: Ext.emptyFn
-})
+});
 
 TYPO3.Components.Tree.TcaCheckChangeHandler = function(checkedNode, checked) {
        var exclusiveKeys = this.tcaExclusiveKeys.split(','),
@@ -238,3 +247,44 @@ TYPO3.Components.Tree.TcaCheckChangeHandler = function(checkedNode, checked) {
 
        this.resumeEvents();
 };
+
+TYPO3.Components.Tree.TreeNodeUI = Ext.extend(Ext.tree.TreeNodeUI, {
+       renderElements : function(n, a, targetNode, bulkRender){
+               this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
+
+               var cb = Ext.isBoolean(a.checked),
+                       nel,
+                       href = this.getHref(a.href),
+                       buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
+                               '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
+                               '<img alt="" src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
+                               a.iconTag || ('<img alt="" src="' + (a.icon || this.emptyIcon) + '" class="x-tree-node-icon' + (a.icon ? " x-tree-node-inline-icon" : "") + (a.iconCls ? " "+a.iconCls : "") + '" unselectable="on" />'),
+                               cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
+                               '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
+                               a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
+                               '<ul class="x-tree-node-ct" style="display:none;"></ul>',
+                               "</li>"].join('');
+
+               if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
+                       this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
+               }else{
+                       this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
+               }
+
+               this.elNode = this.wrap.childNodes[0];
+               this.ctNode = this.wrap.childNodes[1];
+               var cs = this.elNode.childNodes;
+               this.indentNode = cs[0];
+               this.ecNode = cs[1];
+               this.iconNode = cs[2];
+               var index = 3;
+               if(cb){
+                       this.checkbox = cs[3];
+
+                       this.checkbox.defaultChecked = this.checkbox.checked;
+                       index++;
+               }
+               this.anchor = cs[index];
+               this.textNode = cs[index].firstChild;
+       }
+});
index 833ee3e..bee0bd3 100644 (file)
@@ -265,7 +265,7 @@ class DatabaseTreeDataProvider extends AbstractTableConfigurationTreeDataProvide
         $node->setSelectable(!GeneralUtility::inList($this->getNonSelectableLevelList(), $level) && !in_array($basicNode->getId(), $this->getItemUnselectableList()));
         $node->setSortValue($this->nodeSortValues[$basicNode->getId()]);
         $iconFactory = GeneralUtility::makeInstance(IconFactory::class);
-        $node->setIcon($iconFactory->getIconForRecord($this->tableName, $row, Icon::SIZE_SMALL));
+        $node->setIcon($iconFactory->getIconForRecord($this->tableName, $row, Icon::SIZE_SMALL)->render());
         $node->setParentNode($parent);
         if ($basicNode->hasChildNodes()) {
             $node->setHasChildren(true);
index 68bca79..161fa01 100644 (file)
@@ -1198,15 +1198,15 @@ td.x-grid3-hd-over, td.x-grid3-hd-menu-open {
 }
 
 .x-dd-drop-nodrop .x-dd-drop-icon{
-  background-image: url(images/dd/drop-no.gif);
+       background-image: url(images/dd/drop-no.gif);
 }
 
 .x-dd-drop-ok .x-dd-drop-icon{
-  background-image: url(images/dd/drop-yes.gif);
+       background-image: url(images/dd/drop-yes.gif);
 }
 
 .x-dd-drop-ok-add .x-dd-drop-icon{
-  background-image: url(images/dd/drop-add.gif);
+       background-image: url(images/dd/drop-add.gif);
 }
 
 .x-view-selector {
@@ -1225,21 +1225,23 @@ td.x-grid3-hd-over, td.x-grid3-hd-menu-open {
 }
 
 .x-tree-node-expanded .x-tree-node-icon{
-       background-image:url(../images/icons/apps/filetree-folder-opened.png);
+       background-image:url('../../core/Resources/Public/Icons/T3Icons/apps/apps-pagetree-folder-contains.svg');
 }
 
 .x-tree-node-leaf .x-tree-node-icon{
-       background-image:url(images/tree/leaf.gif);
+       background-image:url('../../core/Resources/Public/Icons/T3Icons/apps/apps-pagetree-page-not-in-menu.svg');
 }
 
 .x-tree-node-collapsed .x-tree-node-icon{
-       background-image:url(../images/icons/apps/filetree-folder-default.png);
+       background-image:url('../../core/Resources/Public/Icons/T3Icons/apps/apps-pagetree-folder-default.svg');
 }
 
 .x-tree-node-loading .x-tree-node-icon{
        background-image: url('../images/spinner/ffffff.gif') !important;
 }
-
+.x-tree-node .icon, .x-tree-node .x-tree-node-icon {
+       margin-right: 3px;
+}
 .x-tree-node .x-tree-node-inline-icon {
        background-image: none;
 }
@@ -1249,8 +1251,8 @@ td.x-grid3-hd-over, td.x-grid3-hd-menu-open {
 }
 
 .x-tree-node-loading a span{
-        font-style: italic;
-        color:#444444;
+       font-style: italic;
+       color:#444444;
 }
 
 .ext-ie .x-tree-node-el input {
@@ -1356,24 +1358,24 @@ td.x-grid3-hd-over, td.x-grid3-hd-menu-open {
 }
 
 .x-tree-node div.x-tree-drag-insert-below{
-        border-bottom-color:#686868;
+       border-bottom-color:#686868;
 }
 
 .x-tree-node div.x-tree-drag-insert-above{
-        border-top-color:#686868;
+       border-top-color:#686868;
 }
 
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-below a{
-        border-bottom-color:#686868;
+       border-bottom-color:#686868;
 }
 
 .x-tree-dd-underline .x-tree-node div.x-tree-drag-insert-above a{
-        border-top-color:#686868;
+       border-top-color:#686868;
 }
 
 .x-tree-node .x-tree-drag-append a span{
-        background-color:#ddd;
-        border-color:gray;
+       background-color:#ddd;
+       border-color:gray;
 }
 
 .x-tree-node .x-tree-node-over {
@@ -1385,19 +1387,19 @@ td.x-grid3-hd-over, td.x-grid3-hd-menu-open {
 }
 
 .x-tree-drop-ok-append .x-dd-drop-icon{
-  background-image: url(images/tree/drop-add.gif);
+       background-image: url(images/tree/drop-add.gif);
 }
 
 .x-tree-drop-ok-above .x-dd-drop-icon{
-  background-image: url(images/tree/drop-over.gif);
+       background-image: url(images/tree/drop-over.gif);
 }
 
 .x-tree-drop-ok-below .x-dd-drop-icon{
-  background-image: url(images/tree/drop-under.gif);
+       background-image: url(images/tree/drop-under.gif);
 }
 
 .x-tree-drop-ok-between .x-dd-drop-icon{
-  background-image: url(images/tree/drop-between.gif);
+       background-image: url(images/tree/drop-between.gif);
 }
 .x-date-picker {
        border-color: #373737;
@@ -1530,7 +1532,7 @@ td.x-date-mp-sel a {
 }
 
 td.x-date-mp-sep {
-   border-right-color:#A2AAB8;
+       border-right-color:#A2AAB8;
 }
 
 .x-tip {
@@ -1898,7 +1900,7 @@ a.x-menu-item:focus {
 }
 
 .x-dlg-mask{
-   background-color:#ccc;
+       background-color:#ccc;
 }
 
 .x-window-plain .x-window-mc {