[TASK] Adjust ExtJS Pagetree TopPanel 91/44591/4
authorBenjamin Kott <benjamin.kott@outlook.com>
Sat, 7 Nov 2015 01:28:28 +0000 (02:28 +0100)
committerMathias Schreiber <mathias.schreiber@wmdb.de>
Sat, 7 Nov 2015 11:59:10 +0000 (12:59 +0100)
Resolves: #71389
Releases: master
Change-Id: Id291e97202656ba4deab3766ddb6319705531ff9
Reviewed-on: https://review.typo3.org/44591
Reviewed-by: Markus Klein <markus.klein@typo3.org>
Tested-by: Markus Klein <markus.klein@typo3.org>
Reviewed-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Tested-by: Mathias Schreiber <mathias.schreiber@wmdb.de>
Build/Resources/Public/Less/TYPO3/_element_docheader.less
Build/Resources/Public/Less/TYPO3/_element_pagetree.less
Build/Resources/Public/Less/TYPO3/_element_tree.less
typo3/sysext/backend/Classes/Tree/Pagetree/ExtdirectTreeDataProvider.php
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/app.js
typo3/sysext/backend/Resources/Public/JavaScript/extjs/components/pagetree/javascript/toppanel.js
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 491dcfe..60fb41f 100644 (file)
                content: "\f0da";
        }
 }
-
-
-
-//
-// ExtJS theme for PageTree
-//
-#typo3-pagetree-topPanelItems {
-       background: @docheader-bg;
-
-       #typo3-pagetree-topPanel {
-
-               .x-panel-body-noborder {
-                       border-bottom: 1px solid @docheader-border;
-               }
-
-               // Functions
-               .x-panel-tbar {
-                       color: @docheader-text;
-                       a {
-                               color: @docheader-text;
-                               &:hover {
-                                       color: #000;
-                               }
-                       }
-               }
-
-               // Buttons
-               .x-panel-body {
-                       color: @docheader-text;
-                       .typo3-pagetree-topPanel-button {
-                               margin-top: 0;
-                       }
-                       a {
-                               color: @docheader-text;
-                               &:hover {
-                                       color: #000;
-                               }
-                       }
-               }
-       }
-
-}
index 789a771..01ca2cd 100644 (file)
                height: 100%;
        }
 
-       .x-toolbar {
-               background: none;
-               border: none;
-               padding: 0;
-       }
-
-       .x-panel-tbar {
-               padding: 0;
-               margin: 0;
-               .x-toolbar {
-                       height: 26px;
-               }
-       }
-
-       .t3-icon {
-               margin-bottom: 2px;
-       }
-
        ul {
                padding-left: 0;
                list-style: none;
        }
+       .x-toolbar {
+               padding: 0;
+               border: none;
+       }
 
        ul.x-tree-root-ct {
                padding-top: 24px;
                margin-bottom: 50px;
        }
 
-       .typo3-pagetree-topPanel-button {
-               margin: 0;
-               margin-right: 1px;
-               padding: 2px 3px 4px 3px;
-       }
 
-       .x-toolbar-ct {
-               height: 20px;
-       }
-
-       .x-tree {
-               .x-panel-body {
-                       background: none;
-               }
+       .x-panel-body {
+               background: none;
        }
 
        .x-tree-node {
                .x-tree-node-el {
+                       line-height: 18px;
+                       height: 20px;
                        margin-right: 3px;
                        border-top: 1px solid transparent;
                        border-bottom: 1px solid transparent;
                        border-left: 1px solid transparent;
                }
-
                .x-tree-node-over,
                .x-tree-selected {
                        border-bottom: 1px solid #d7d7d7;
                        border-top: 1px solid #d7d7d7;
                        border-right: 1px solid #d7d7d7;
                }
-
                .x-tree-node-over {
                        background-color: #f2f2f2;
                        border-top-right-radius: 3px;
                        border-bottom-right-radius: 3px;
                }
-
                .x-tree-selected {
                        background-color: #fff;
                }
-
                .x-tree-selected.x-tree-node-over {
                        background-image: none;
                        border-radius: 0;
                }
-
        }
 
        .x-tree-node-readableRootline {
 //
 // Top Panel
 //
-
-.typo3-pagetree-topPanel-button {
-       background: none;
-       border: none;
-       margin: 1px 5px 0 0;
-       padding: 1px 2px;
-       height: 25px;
-
-       button {
-               height: 16px;
-               width: 16px;
-               border: none;
+.typo3-pagetree-toppanel {
+       .btn {
+               line-height: 16px;
        }
-}
-
-#typo3-pagetree-topPanel .x-btn-icon:hover,
-#typo3-pagetree-topPanel .x-btn-pressed,
-#typo3-pagetree-topPanel .x-btn-over,
-#typo3-pagetree-topPanel .x-btn-click {
-       border: none;
-       top: 0;
-       left: 0;
-       background: none;
-}
-
-
-#typo3-pagetree-topPanel button,
-#typo3-pagetree-topPanel button:hover {
-       background-color: transparent;
-       color: #000000;
-}
-
-#typo3-pagetree-topPanel button:focus {
-       outline: none;
-}
-
-#typo3-pagetree .typo3-pagetree-topPanel-item {
-       line-height: normal;
-}
-
-#typo3-pagetree-topPanel-filter {
-       border: 1px solid #aeaeae;
-       box-shadow: inset 0 1px 1px #aeaeae;
-}
-
-.typo3-pagetree-topPanel-filter-defaultText {
-       color: gray;
-}
-
-#typo3-pagetree .typo3-pagetree-topPanel-button {
-       border: none;
-       border-radius: 0;
-
-       button {
-               vertical-align: middle;
+       padding: 0 10px;
+       border-bottom: 1px solid #c3c3c3;
+       .x-toolbar {
+               padding: 0;
+               border: 0!important;
        }
-}
-
-#typo3-pagetree-topPanel-defaultPanel {
-       color: #a2aab8;
-       line-height: 18px;
-}
-
-
-#typo3-pagetree-topPanel-item-newNode button {
-       cursor: move;
-}
-
-#typo3-pagetree-topPanel {
-       .x-toolbar-left {
-               height: 20px;
-               padding-left: 12px;
+       .x-toolbar-left-row {
+               .btn {
+                       margin-right: 4px;
+               }
        }
-
-       .x-toolbar-right {
-               padding-right: 12px;
+       .x-toolbar-right-row {
+               .btn {
+                       margin-left: 4px;
+               }
+       }
+       .x-panel-body,
+       .x-panel-tbar {
+               margin: 4px 0;
+               min-height: 26px;
+               height: auto!important;
+       }
+       .x-panel-bwrap {
+               height: auto!important;
+               overflow: visible;
+       }
+       .x-btn button {
+               font-size: inherit;
        }
 }
-
-
-.typo3-pagetree-topPanel-item {
-       padding: 0 3px 0 3px;
-       height: 22px;
-}
-
-#typo3-pagetree-topPanel-filter {
-       height: 15px;
-       width: 98% !important;
-       margin-top: 1px;
-       padding: 1px 0 1px 2px;
+.typo3-pagetree-toppanel-filter {
+       width: 100%!important;
+       height: 26px!important;
+       padding-right: 25px;
+       padding-left: 8px;
+       box-sizing: inherit;
 }
-
-#typo3-pagetree-topPanel-filterWrap .t3-icon-input-clear {
+.typo3-pagetree-toppanel-filter-clear {
        position: absolute;
-       right: 6px;
-       top: 3px;
+       right: 5px;
+       top: 50%;
+       transform: translate(0,-50%);
 }
-
-#typo3-pagetree-topPanel-defaultPanel {
-       padding-left: 6px;
-}
-
-#typo3-pagetree-topPanel-filterWrap .x-form-field-trigger-wrap {
-       width: 100% !important;
-       margin: 0 20px 0 0;
+.typo3-pagetree-toppanel-item {
+       .x-form-field-wrap {
+               width: 100%!important;
+       }
+       .x-panel-body {
+               margin: 0;
+       }
 }
-
-.typo3-pagetree-topPanel-item .x-form-trigger {
-       margin: 4px 0 0;
-       display: none;
+.typo3-pagetree-toppanel-drag-node {
+       cursor: move;
+    padding: 5px;
+    border: none;
+    background: none;
+       font-size: 11px;
+       line-height: 16px;
 }
 
-.typo3-pagetree-topPanel-item .x-form-field-trigger-wrap:hover .x-form-trigger {
-       display: block;
-}
 
 //
 // Deletion Drop Zone
 //
 // Tree Highlighting
 //
-
 .x-tree-node-readableRootline {
        font-style: italic;
 }
 //
 // Indicator Bar
 //
-
-#typo3-pagetree-indicatorBar-filter,
-#typo3-pagetree-indicatorBar-temporaryMountPoint {
-       background-color: #eaf7ff;
-       border-bottom: 1px solid #c5dbe6;
-       color: #4c73a1;
-
-       p {
-               padding: 10px 35px;
-       }
-}
-
-#typo3-pagetree-indicatorBar-temporaryMountPoint p {
-       line-height: 13px;
-}
-
-#typo3-pagetree-indicatorBar-indicatorTitle {
-       background-color: #ffec97;
-       font-weight: bold;
-
-       span {
-               margin-right: 10px;
-       }
-}
-
-.typo3-pagetree-indicatorBar-item {
-       .typo3-pagetree-indicatorBar-item-rightIcon {
-               cursor: pointer;
-       }
-
-       p {
-               margin-bottom: 0;
-               padding: 5px 10px;
-       }
-
-       .typo3-pagetree-indicatorBar-item-leftIcon {
-               left: 10px;
-               top: 9px;
-               position: absolute;
-       }
-
-       .typo3-pagetree-indicatorBar-item-rightIcon {
-               right: 10px;
-               top: 5px;
-               position: absolute;
+[id=typo3-pagetree-indicatorBar] {
+       .alert {
+               margin: 10px 10px 0;
        }
 }
 
index 03db1cd..b27c1a6 100644 (file)
@@ -401,35 +401,25 @@ ul.tree div.treeLinkItem span.dragIcon {
        white-space: nowrap;
 }
 
-#typo3-pagetree #typo3-docheader img {
-       margin: 2px;
-}
-
 
 //
 // Tree
 //
-
-body#typo3-pagetree,
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
-       background: @navigation-bg;
-}
-
-.typo3-pagetree-indicatorBar-item,
-#typo3-pagetree-topPanelItems,
-#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
-#typo3-pagetree-treeContainer,
-#typo3-pagetree .x-panel-tbar,
 #typo3-pagetree-deletionDropZone .x-panel-body {
        background-position: right;
        background-repeat: repeat-y;
 }
-
-#ext-backend-Modules-FileSystemNavigationFrame-index-php .module-body,
-#typo3-pagetree-treeContainer {
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
+[id=typo3-pagetree-treeContainer] {
        background-color: @navigation-bg;
 }
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
+       padding-left: 10px;
+       padding-right: 10px;
+}
+
 .x-layout-split {
        width: 1px;
-       background-color: #c3c3c3;
+       background-color: @navigation-border;
 }
index 3cbdf9c..1788a6d 100644 (file)
@@ -207,9 +207,10 @@ class ExtdirectTreeDataProvider extends \TYPO3\CMS\Backend\Tree\AbstractExtJsTre
             ),
             'Icons' => array(
                 'InputClear' => $this->iconFactory->getIcon('actions-input-clear', Icon::SIZE_SMALL)->render(),
-                'TrashCan' => $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render(),
-                'TrashCanRestore' => $this->iconFactory->getIcon('actions-edit-restore', Icon::SIZE_SMALL)->render(),
-                'Info' => $this->iconFactory->getIcon('actions-document-info', Icon::SIZE_SMALL)->render(),
+                'Close' => $this->iconFactory->getIcon('actions-close', Icon::SIZE_SMALL)->render('inline'),
+                'TrashCan' => $this->iconFactory->getIcon('actions-edit-delete', Icon::SIZE_SMALL)->render('inline'),
+                'TrashCanRestore' => $this->iconFactory->getIcon('actions-edit-restore', Icon::SIZE_SMALL)->render('inline'),
+                'Info' => $this->iconFactory->getIcon('actions-document-info', Icon::SIZE_SMALL)->render('inline'),
                 'NewNode' => $this->iconFactory->getIcon('actions-page-new', Icon::SIZE_SMALL)->render(),
                 'Filter' => $this->iconFactory->getIcon('actions-filter', Icon::SIZE_SMALL)->render(),
                 'Refresh' => $this->iconFactory->getIcon('actions-refresh', Icon::SIZE_SMALL)->render()
index 144c051..f877171 100644 (file)
@@ -111,6 +111,7 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                        }).hide();
 
                        var topPanel = new TYPO3.Components.PageTree.TopPanel({
+                               cls: this.id + '-toppanel',
                                dataProvider: TYPO3.Components.PageTree.DataProvider,
                                filteringTree: filteringTree,
                                ddGroup: this.id,
@@ -129,9 +130,10 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
 
                        var topPanelItems = new Ext.Panel({
                                id: this.id + '-topPanelItems',
+                               cls: this.id + '-toppanel-items',
                                border: false,
                                region: 'north',
-                               height: 49,
+                               height: 65,
                                items: [
                                        topPanel, {
                                                border: false,
@@ -220,17 +222,22 @@ TYPO3.Components.PageTree.App = Ext.extend(Ext.Panel, {
                                        scope: this
                                }
                        },
-
-                       html: '<p>' +
-                                       '<span id="' + this.id + '-indicatorBar-temporaryMountPoint-info' + '" ' +
-                                               'class="' + this.id + '-indicatorBar-item-leftIcon">' +
-                                                       TYPO3.Components.PageTree.Icons.Info + '</span>' +
-                                       '<span id="' + this.id + '-indicatorBar-temporaryMountPoint-clear' + '" ' +
-                                               'class="' + this.id + '-indicatorBar-item-rightIcon ' + '">X' +
-                                       '</span>' +
-                                       TYPO3.Components.PageTree.LLL.temporaryMountPointIndicatorInfo + '<br />' +
-                                               TYPO3.Components.PageTree.Configuration.temporaryMountPoint +
-                               '</p>'
+                       html: '' +
+                               '<div class="alert alert-info">' +
+                                       '<div class="media">' +
+                                               '<div class="media-left">' +
+                                                       TYPO3.Components.PageTree.Icons.Info +
+                                               '</div>' +
+                                               '<div class="media-body">' +
+                                                       TYPO3.Components.PageTree.Configuration.temporaryMountPoint +
+                                               '</div>' +
+                                               '<div class="media-right">' +
+                                                       '<a href="#" id="' + this.id + '-indicatorBar-temporaryMountPoint-clear">' +
+                                                               TYPO3.Components.PageTree.Icons.Close +
+                                                       '</a>' +
+                                               '</div>' +
+                                       '</div>' +
+                               '</div>'
                });
        },
 
index 0015a04..39b403e 100644 (file)
@@ -29,6 +29,13 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
        id: 'typo3-pagetree-topPanel',
 
        /**
+        * Component Class
+        *
+        * @type {String}
+        */
+       cls: 'typo3-pagetree-toppanel',
+
+       /**
         * Border
         *
         * @type {Boolean}
@@ -106,7 +113,8 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
        initComponent: function() {
                this.currentlyShownPanel = new Ext.Panel({
                        id: this.id + '-defaultPanel',
-                       cls: this.id + '-item'
+                       cls: this.id + '-item typo3-pagetree-toppanel-item',
+                       border: false
                });
                this.items = [this.currentlyShownPanel];
 
@@ -132,7 +140,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
         */
        getButtonTemplate: function() {
                return new Ext.Template(
-                       '<div id="{4}" class="x-btn {3}"><button type="{0}"">&nbsp;</button></div>'
+                       '<div id="{4}" class="x-btn {3}"><button type="{0}">&nbsp;</button></div>'
                );
        },
 
@@ -145,6 +153,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
         */
        addButton: function(button, connectedWidget) {
                button.template = this.getButtonTemplate();
+               button.on('toggle', this.topbarButtonToggleCallback);
                if (!button.hasListener('click')) {
                        button.on('click', this.topbarButtonCallback);
                }
@@ -160,6 +169,19 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
        },
 
        /**
+        * Toggle button state
+        *
+        * @return {void}
+        */
+       topbarButtonToggleCallback: function() {
+               if (this.pressed) {
+                       this.el.addClass(['active']);
+               } else {
+                       this.el.removeClass(['active']);
+               }
+       },
+
+       /**
         * Usual button callback method that triggers the assigned component of the
         * clicked toolbar button
         *
@@ -250,15 +272,22 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
                        border: false,
                        id: this.app.id + '-indicatorBar-filter',
                        cls: this.app.id + '-indicatorBar-item',
-                       html: '<p>' +
-                                       '<span id="' + this.app.id + '-indicatorBar-filter-info' + '" ' +
-                                               'class="' + this.app.id + '-indicatorBar-item-leftIcon">' +
-                                                       TYPO3.Components.PageTree.Icons.Info + '</span>' +
-                                       '<span id="' + this.app.id + '-indicatorBar-filter-clear' + '" ' +
-                                               'class="' + this.app.id + '-indicatorBar-item-rightIcon ' + '">X' +
-                                       '</span>' +
-                                       TYPO3.Components.PageTree.LLL.activeFilterMode +
-                               '</p>',
+                       html: '' +
+                               '<div class="alert alert-info">' +
+                                       '<div class="media">' +
+                                               '<div class="media-left">' +
+                                                       TYPO3.Components.PageTree.Icons.Info +
+                                               '</div>' +
+                                               '<div class="media-body">' +
+                                                       TYPO3.Components.PageTree.LLL.activeFilterMode +
+                                               '</div>' +
+                                               '<div class="media-right">' +
+                                                       '<a href="#" id="' + this.app.id + '-indicatorBar-filter-clear">' +
+                                                               TYPO3.Components.PageTree.Icons.Close +
+                                                       '</a>' +
+                                               '</div>' +
+                                       '</div>' +
+                               '</div>',
                        filteringTree: this.filteringTree,
 
                        listeners: {
@@ -284,18 +313,19 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
        addFilterFeature: function() {
                var topPanelButton = new Ext.Button({
                        id: this.id + '-button-filter',
-                       cls: this.id + '-button',
+                       cls: 'btn btn-default btn-sm',
                        text: TYPO3.Components.PageTree.Icons.Filter,
                        tooltip: TYPO3.Components.PageTree.LLL.buttonFilter
                });
 
                var textField = new Ext.form.TriggerField({
                        id: this.id + '-filter',
+                       cls: 'form-control input-sm typo3-pagetree-toppanel-filter',
                        enableKeyEvents: true,
                        triggerConfig: {
                                tag: 'span',
                                html: TYPO3.Components.PageTree.Icons.InputClear,
-                               cls: 't3-icon-input-clear'
+                               cls: 'typo3-pagetree-toppanel-filter-clear'
                        },
                        value: TYPO3.Components.PageTree.LLL.searchTermInfo,
 
@@ -337,7 +367,8 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
                var topPanelWidget = new Ext.Container({
                        border: false,
                        id: this.id + '-filterWrap',
-                       cls: this.id + '-item',
+                       cls: this.id + '-item typo3-pagetree-toppanel-item',
+                       border: false,
                        items: [textField],
 
                        listeners: {
@@ -369,13 +400,13 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
 
                        getDragData: function(event) {
                                this.proxyElement = document.createElement('div');
-
-                               var node = Ext.getCmp(event.getTarget('.x-btn').id);
-                               node.shouldCreateNewNode = true;
-
-                               return {
-                                       ddel: this.proxyElement,
-                                       item: node
+                               if (event.getTarget('.x-btn') !== null){
+                                       var node = Ext.getCmp(event.getTarget('.x-btn').id);
+                                       node.shouldCreateNewNode = true;
+                                       return {
+                                               ddel: this.proxyElement,
+                                               item: node
+                                       }
                                }
                        },
 
@@ -416,8 +447,6 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
                var newNodeToolbar = new Ext.Toolbar({
                        border: false,
                        id: this.id + '-item-newNode',
-                       cls: this.id + '-item',
-
                        listeners: {
                                render: {
                                        fn: this.createNewNodeToolbar
@@ -431,6 +460,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
                                topPanelButton.show();
                                for (var i = 0; i < amountOfNodeTypes; ++i) {
                                        response[i].template = this.getButtonTemplate();
+                                       response[i].cls = 'typo3-pagetree-toppanel-drag-node';
                                        newNodeToolbar.addItem(response[i]);
                                }
                                newNodeToolbar.doLayout();
@@ -439,7 +469,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
 
                var topPanelButton = new Ext.Button({
                        id: this.id + '-button-newNode',
-                       cls: this.id + '-button',
+                       cls: 'btn btn-default btn-sm',
                        text: TYPO3.Components.PageTree.Icons.NewNode,
                        tooltip: TYPO3.Components.PageTree.LLL.buttonNewNode,
                        hidden: true
@@ -456,7 +486,7 @@ TYPO3.Components.PageTree.TopPanel = Ext.extend(Ext.Panel, {
        addRefreshTreeFeature: function() {
                var topPanelButton = new Ext.Button({
                        id: this.id + '-button-refresh',
-                       cls: this.id + '-button',
+                       cls: 'btn btn-default btn-sm',
                        text: TYPO3.Components.PageTree.Icons.Refresh,
                        tooltip: TYPO3.Components.PageTree.LLL.buttonRefresh,
 
index 99509d0..9ccd1ce 100644 (file)
@@ -9613,33 +9613,6 @@ div#contentMenu1 {
   color: #fff;
   content: "\f0da";
 }
-#typo3-pagetree-topPanelItems {
-  background: #eeeeee;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-body-noborder {
-  border-bottom: 1px solid #c3c3c3;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-tbar {
-  color: #2d2d2d;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-tbar a {
-  color: #2d2d2d;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-tbar a:hover {
-  color: #000;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-body {
-  color: #2d2d2d;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-body .typo3-pagetree-topPanel-button {
-  margin-top: 0;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-body a {
-  color: #2d2d2d;
-}
-#typo3-pagetree-topPanelItems #typo3-pagetree-topPanel .x-panel-body a:hover {
-  color: #000;
-}
 ul.typo3-messages {
   padding: 0;
 }
@@ -9838,41 +9811,24 @@ ul.typo3-messages {
 #typo3-pagetree .x-panel-body {
   height: 100%;
 }
-#typo3-pagetree .x-toolbar {
-  background: none;
-  border: none;
-  padding: 0;
-}
-#typo3-pagetree .x-panel-tbar {
-  padding: 0;
-  margin: 0;
-}
-#typo3-pagetree .x-panel-tbar .x-toolbar {
-  height: 26px;
-}
-#typo3-pagetree .t3-icon {
-  margin-bottom: 2px;
-}
 #typo3-pagetree ul {
   padding-left: 0;
   list-style: none;
 }
+#typo3-pagetree .x-toolbar {
+  padding: 0;
+  border: none;
+}
 #typo3-pagetree ul.x-tree-root-ct {
   padding-top: 24px;
   margin-bottom: 50px;
 }
-#typo3-pagetree .typo3-pagetree-topPanel-button {
-  margin: 0;
-  margin-right: 1px;
-  padding: 2px 3px 4px 3px;
-}
-#typo3-pagetree .x-toolbar-ct {
-  height: 20px;
-}
-#typo3-pagetree .x-tree .x-panel-body {
+#typo3-pagetree .x-panel-body {
   background: none;
 }
 #typo3-pagetree .x-tree-node .x-tree-node-el {
+  line-height: 18px;
+  height: 20px;
   margin-right: 3px;
   border-top: 1px solid transparent;
   border-bottom: 1px solid transparent;
@@ -10014,94 +9970,64 @@ ul.typo3-messages {
   background-color: inherit;
   border: none;
 }
-.typo3-pagetree-topPanel-button {
-  background: none;
-  border: none;
-  margin: 1px 5px 0 0;
-  padding: 1px 2px;
-  height: 25px;
-}
-.typo3-pagetree-topPanel-button button {
-  height: 16px;
-  width: 16px;
-  border: none;
-}
-#typo3-pagetree-topPanel .x-btn-icon:hover,
-#typo3-pagetree-topPanel .x-btn-pressed,
-#typo3-pagetree-topPanel .x-btn-over,
-#typo3-pagetree-topPanel .x-btn-click {
-  border: none;
-  top: 0;
-  left: 0;
-  background: none;
-}
-#typo3-pagetree-topPanel button,
-#typo3-pagetree-topPanel button:hover {
-  background-color: transparent;
-  color: #000000;
-}
-#typo3-pagetree-topPanel button:focus {
-  outline: none;
-}
-#typo3-pagetree .typo3-pagetree-topPanel-item {
-  line-height: normal;
-}
-#typo3-pagetree-topPanel-filter {
-  border: 1px solid #aeaeae;
-  box-shadow: inset 0 1px 1px #aeaeae;
-}
-.typo3-pagetree-topPanel-filter-defaultText {
-  color: gray;
+.typo3-pagetree-toppanel {
+  padding: 0 10px;
+  border-bottom: 1px solid #c3c3c3;
 }
-#typo3-pagetree .typo3-pagetree-topPanel-button {
-  border: none;
-  border-radius: 0;
+.typo3-pagetree-toppanel .btn {
+  line-height: 16px;
 }
-#typo3-pagetree .typo3-pagetree-topPanel-button button {
-  vertical-align: middle;
+.typo3-pagetree-toppanel .x-toolbar {
+  padding: 0;
+  border: 0!important;
 }
-#typo3-pagetree-topPanel-defaultPanel {
-  color: #a2aab8;
-  line-height: 18px;
+.typo3-pagetree-toppanel .x-toolbar-left-row .btn {
+  margin-right: 4px;
 }
-#typo3-pagetree-topPanel-item-newNode button {
-  cursor: move;
+.typo3-pagetree-toppanel .x-toolbar-right-row .btn {
+  margin-left: 4px;
 }
-#typo3-pagetree-topPanel .x-toolbar-left {
-  height: 20px;
-  padding-left: 12px;
+.typo3-pagetree-toppanel .x-panel-body,
+.typo3-pagetree-toppanel .x-panel-tbar {
+  margin: 4px 0;
+  min-height: 26px;
+  height: auto!important;
 }
-#typo3-pagetree-topPanel .x-toolbar-right {
-  padding-right: 12px;
+.typo3-pagetree-toppanel .x-panel-bwrap {
+  height: auto!important;
+  overflow: visible;
 }
-.typo3-pagetree-topPanel-item {
-  padding: 0 3px 0 3px;
-  height: 22px;
+.typo3-pagetree-toppanel .x-btn button {
+  font-size: inherit;
 }
-#typo3-pagetree-topPanel-filter {
-  height: 15px;
-  width: 98% !important;
-  margin-top: 1px;
-  padding: 1px 0 1px 2px;
+.typo3-pagetree-toppanel-filter {
+  width: 100%!important;
+  height: 26px!important;
+  padding-right: 25px;
+  padding-left: 8px;
+  box-sizing: inherit;
 }
-#typo3-pagetree-topPanel-filterWrap .t3-icon-input-clear {
+.typo3-pagetree-toppanel-filter-clear {
   position: absolute;
-  right: 6px;
-  top: 3px;
-}
-#typo3-pagetree-topPanel-defaultPanel {
-  padding-left: 6px;
+  right: 5px;
+  top: 50%;
+  -webkit-transform: translate(0, -50%);
+      -ms-transform: translate(0, -50%);
+          transform: translate(0, -50%);
 }
-#typo3-pagetree-topPanel-filterWrap .x-form-field-trigger-wrap {
-  width: 100% !important;
-  margin: 0 20px 0 0;
+.typo3-pagetree-toppanel-item .x-form-field-wrap {
+  width: 100%!important;
 }
-.typo3-pagetree-topPanel-item .x-form-trigger {
-  margin: 4px 0 0;
-  display: none;
+.typo3-pagetree-toppanel-item .x-panel-body {
+  margin: 0;
 }
-.typo3-pagetree-topPanel-item .x-form-field-trigger-wrap:hover .x-form-trigger {
-  display: block;
+.typo3-pagetree-toppanel-drag-node {
+  cursor: move;
+  padding: 5px;
+  border: none;
+  background: none;
+  font-size: 11px;
+  line-height: 16px;
 }
 #typo3-pagetree-deletionDropZone {
   color: #FFF;
@@ -10153,42 +10079,8 @@ ul.typo3-messages {
 .x-tree-node-readableRootline {
   font-style: italic;
 }
-#typo3-pagetree-indicatorBar-filter,
-#typo3-pagetree-indicatorBar-temporaryMountPoint {
-  background-color: #eaf7ff;
-  border-bottom: 1px solid #c5dbe6;
-  color: #4c73a1;
-}
-#typo3-pagetree-indicatorBar-filter p,
-#typo3-pagetree-indicatorBar-temporaryMountPoint p {
-  padding: 10px 35px;
-}
-#typo3-pagetree-indicatorBar-temporaryMountPoint p {
-  line-height: 13px;
-}
-#typo3-pagetree-indicatorBar-indicatorTitle {
-  background-color: #ffec97;
-  font-weight: bold;
-}
-#typo3-pagetree-indicatorBar-indicatorTitle span {
-  margin-right: 10px;
-}
-.typo3-pagetree-indicatorBar-item .typo3-pagetree-indicatorBar-item-rightIcon {
-  cursor: pointer;
-}
-.typo3-pagetree-indicatorBar-item p {
-  margin-bottom: 0;
-  padding: 5px 10px;
-}
-.typo3-pagetree-indicatorBar-item .typo3-pagetree-indicatorBar-item-leftIcon {
-  left: 10px;
-  top: 9px;
-  position: absolute;
-}
-.typo3-pagetree-indicatorBar-item .typo3-pagetree-indicatorBar-item-rightIcon {
-  right: 10px;
-  top: 5px;
-  position: absolute;
+[id=typo3-pagetree-indicatorBar] .alert {
+  margin: 10px 10px 0;
 }
 .x-menu-floating {
   z-index: 50 !important;
@@ -11466,26 +11358,19 @@ ul.tree div.treeLinkItem span.dragIcon {
   opacity: 0.5;
   white-space: nowrap;
 }
-#typo3-pagetree #typo3-docheader img {
-  margin: 2px;
-}
-body#typo3-pagetree,
-body#ext-backend-Modules-FileSystemNavigationFrame-index-php {
-  background: #f5f5f5;
-}
-.typo3-pagetree-indicatorBar-item,
-#typo3-pagetree-topPanelItems,
-#typo3-pagetree-topPanel .typo3-pagetree-topPanel-item,
-#typo3-pagetree-treeContainer,
-#typo3-pagetree .x-panel-tbar,
 #typo3-pagetree-deletionDropZone .x-panel-body {
   background-position: right;
   background-repeat: repeat-y;
 }
-#ext-backend-Modules-FileSystemNavigationFrame-index-php .module-body,
-#typo3-pagetree-treeContainer {
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php],
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-body,
+[id=typo3-pagetree-treeContainer] {
   background-color: #f5f5f5;
 }
+[id=ext-backend-Modules-FileSystemNavigationFrame-index-php] .module-docheader {
+  padding-left: 10px;
+  padding-right: 10px;
+}
 .x-layout-split {
   width: 1px;
   background-color: #c3c3c3;