diff --git a/Build/Resources/Public/Less/Component/module.less b/Build/Resources/Public/Less/Component/module.less
index cbbe71d916f958ee64470b5726fe840f5724d175..7b9210b3f9777732ac645f755943edc2c35a3801 100644
--- a/Build/Resources/Public/Less/Component/module.less
+++ b/Build/Resources/Public/Less/Component/module.less
@@ -55,25 +55,47 @@
background-color: @module-docheader-bg;
border-bottom: 1px solid @module-docheader-border;
padding: @module-docheader-padding;
-}
-.module-docheader-bar {
- .clearfix;
- height: @module-docheader-bar-height;
- margin: @module-docheader-bar-margin;
- line-height: @module-docheader-bar-height;
- label {
- margin-top: 0;
+ .transition(margin-top 0.3s ease-in-out);
+ .module-docheader-bar {
+ .clearfix;
+ height: @module-docheader-bar-height;
+ margin: @module-docheader-bar-margin;
+ line-height: @module-docheader-bar-height;
+ label {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .form-group {
+ margin: 0;
+ }
+ .form-inline-spaced {
+ margin: 0;
+ }
+ .panel {
+ background-color: transparent;
+ margin: 0;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ border-radius: 0;
+ margin-left: -@module-docheader-padding-horizontal;
+ margin-right: -@module-docheader-padding-horizontal;
+ background-color: #fafafa;
+ box-shadow: none;
+ .panel-body {
+ padding: ceil(@module-docheader-padding-horizontal / 3) @module-docheader-padding-horizontal;
+ }
+ }
+ }
+ .module-docheader-bar-search {
margin-bottom: 0;
}
- .form-group {
- margin: 0;
+ .module-docheader-bar-column-left {
+ float: left;
+ }
+ .module-docheader-bar-column-right {
+ float: right;
}
-}
-.module-docheader-bar-column-left {
- float: left;
-}
-.module-docheader-bar-column-right {
- float: right;
}
diff --git a/typo3/sysext/backend/Classes/Template/ModuleTemplate.php b/typo3/sysext/backend/Classes/Template/ModuleTemplate.php
index f1157e5948d4e5db544d94ea928bc84b8a5b5043..7c96db0cc13d5ada95224401f563459f7ce12506 100644
--- a/typo3/sysext/backend/Classes/Template/ModuleTemplate.php
+++ b/typo3/sysext/backend/Classes/Template/ModuleTemplate.php
@@ -201,6 +201,7 @@ class ModuleTemplate {
$this->pageRenderer->loadJquery();
$this->pageRenderer->loadRequireJsModule('bootstrap');
$this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/ContextHelp');
+ $this->pageRenderer->loadRequireJsModule('TYPO3/CMS/Backend/DocumentHeader');
}
/**
diff --git a/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html b/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
index b6dd7d015e75cce8a02c7963209f70b1396f1da6..61efa4d3e7fb5013b9259bfcfe02fc9f5b1b1587 100644
--- a/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
+++ b/typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
@@ -1,5 +1,5 @@
-<div class="module-docheader">
- <div class="module-docheader-bar">
+<div class="module-docheader t3js-module-docheader">
+ <div class="module-docheader-bar module-docheader-bar-navigation t3js-module-docheader-bar t3js-module-docheader-bar-navigation">
<div class="module-docheader-bar-column-left">
<div class="form-inline">
<f:for each="{docHeader.menus}" as="menu">
@@ -12,9 +12,8 @@
<div class="module-docheader-bar-column-right">
<span class="typo3-docheader-pagePath"><f:translate key="LLL:EXT:lang/locallang_core.xlf:labels.path" />: <f:format.raw>{docHeader.metaInformation.path}</f:format.raw></span> <f:format.raw>{docHeader.metaInformation.recordInformation}</f:format.raw>
</div>
-
</div>
- <div class="module-docheader-bar">
+ <div class="module-docheader-bar module-docheader-bar-buttons t3js-module-docheader-bar t3js-module-docheader-bar-buttons">
<div class="module-docheader-bar-column-left">
<f:render partial="ButtonBar" arguments="{buttons:docHeader.buttons.left}" />
</div>
diff --git a/typo3/sysext/backend/Resources/Private/Templates/Module.html b/typo3/sysext/backend/Resources/Private/Templates/Module.html
index bb3fe1cc166d69cca3ecc203f80a3ea5eca72439..256c6819cc1c968ccecddab04bb154b4d5b10e14 100644
--- a/typo3/sysext/backend/Resources/Private/Templates/Module.html
+++ b/typo3/sysext/backend/Resources/Private/Templates/Module.html
@@ -5,7 +5,7 @@
</f:then>
</f:if>
<f:render partial="DocHeader" arguments="{docHeader:docHeader}" />
- <div class="module-body">
+ <div class="module-body t3js-module-body">
<f:format.raw>{content}</f:format.raw>
</div>
<f:if condition="{formTag}">
diff --git a/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
new file mode 100644
index 0000000000000000000000000000000000000000..20faa0ebfab0f659ff4b7575b9e573dfb264a43e
--- /dev/null
+++ b/typo3/sysext/backend/Resources/Public/JavaScript/DocumentHeader.js
@@ -0,0 +1,117 @@
+/*
+ * This file is part of the TYPO3 CMS project.
+ *
+ * It is free software; you can redistribute it and/or modify it under
+ * the terms of the GNU General Public License, either version 2
+ * of the License, or any later version.
+ *
+ * For the full copyright and license information, please read the
+ * LICENSE.txt file that was distributed with DocumentHeader source code.
+ *
+ * The TYPO3 project - inspiring people to share!
+ */
+
+define('TYPO3/CMS/Backend/DocumentHeader', ['jquery'], function($) {
+
+ var DocumentHeader = {
+ $documentHeader: null,
+ $documentHeaderBars: null,
+ $documentHeaderNavigationBar: null,
+ $documentHeaderSearchBar: null,
+ $moduleBody: null,
+ direction: 'down',
+ reactionRange: 300,
+ lastPosition: 0,
+ currentPosition: 0,
+ changedPosition: 0,
+ settings: {
+ margin: 24,
+ offset: 100,
+ selectors: {
+ moduleDocumentHeader: '.t3js-module-docheader',
+ moduleDocheaderBar: '.t3js-module-docheader-bar',
+ moduleNavigationBar: '.t3js-module-docheader-bar-navigation',
+ moduleButtonBar: '.t3js-module-docheader-bar-buttons',
+ moduleSearchBar: '.t3js-module-docheader-bar-search',
+ moduleBody: '.t3js-module-body'
+
+ },
+ }
+ };
+
+ /**
+ * Reposition
+ */
+ DocumentHeader.reposition = function() {
+ DocumentHeader.$documentHeader.css('height', 'auto');
+ DocumentHeader.$documentHeaderBars.css('height', 'auto');
+ DocumentHeader.$moduleBody.css('padding-top', DocumentHeader.$documentHeader.outerHeight() + DocumentHeader.settings.margin);
+ };
+
+ /**
+ * Resize
+ */
+ DocumentHeader.resize = function() {
+ DocumentHeader.reposition();
+ };
+
+ /**
+ * Scroll
+ */
+ DocumentHeader.scroll = function() {
+ DocumentHeader.currentPosition = $(window).scrollTop();
+ if (DocumentHeader.currentPosition > DocumentHeader.lastPosition){
+ if (DocumentHeader.direction !== 'down'){
+ DocumentHeader.direction = 'down';
+ DocumentHeader.changedPosition = DocumentHeader.currentPosition;
+ }
+ } else if (DocumentHeader.currentPosition < DocumentHeader.lastPosition){
+ if (DocumentHeader.direction !== 'up'){
+ DocumentHeader.direction = 'up';
+ DocumentHeader.changedPosition = DocumentHeader.currentPosition;
+ }
+ }
+ if(DocumentHeader.direction === "up" && (DocumentHeader.changedPosition - DocumentHeader.reactionRange) < DocumentHeader.currentPosition){
+ DocumentHeader.$documentHeader.css('margin-top', 0);
+ }
+ if(DocumentHeader.direction === "down" && (DocumentHeader.changedPosition + DocumentHeader.reactionRange) < DocumentHeader.currentPosition){
+ DocumentHeader.$documentHeader.css('margin-top', (DocumentHeader.$documentHeaderNavigationBar.outerHeight() + 4) * -1);
+ }
+ DocumentHeader.lastPosition = DocumentHeader.currentPosition;
+ };
+
+ /**
+ * Start
+ */
+ DocumentHeader.start = function() {
+ DocumentHeader.reposition();
+ $(window).on('resize', DocumentHeader.resize);
+ $(window).on('scroll', DocumentHeader.scroll);
+ };
+
+ /**
+ * Initialize
+ */
+ DocumentHeader.initialize = function() {
+ DocumentHeader.$documentHeader = $(DocumentHeader.settings.selectors.moduleDocumentHeader);
+ if(DocumentHeader.$documentHeader.length > 0){
+ DocumentHeader.$documentHeaderBars = $(DocumentHeader.settings.selectors.moduleDocheaderBar);
+ DocumentHeader.$documentHeaderNavigationBar = $(DocumentHeader.settings.selectors.moduleNavigationBar);
+ DocumentHeader.$documentHeaderSearchBar = $(DocumentHeader.settings.selectors.moduleSearchBar).remove();
+ if(DocumentHeader.$documentHeaderSearchBar.length > 0){
+ DocumentHeader.$documentHeader.append(DocumentHeader.$documentHeaderSearchBar);
+ }
+ DocumentHeader.$moduleBody = $(DocumentHeader.settings.selectors.moduleBody);
+ DocumentHeader.start();
+ }
+ };
+
+ return function () {
+ $(document).ready(function() {
+ DocumentHeader.initialize();
+ });
+ TYPO3.DocumentHeader = DocumentHeader;
+ return DocumentHeader;
+ }();
+
+});
\ No newline at end of file
diff --git a/typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php b/typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php
index b014ffb65c58176eff7a5ddfe310c3228308997d..bfde003e9d37cb5816029e7aa09c1f8a3fab66f6 100644
--- a/typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php
+++ b/typo3/sysext/recordlist/Classes/RecordList/AbstractDatabaseRecordList.php
@@ -549,7 +549,7 @@ class AbstractDatabaseRecordList extends AbstractRecordList {
}
$lMenu = '<select class="form-control" name="search_levels" title="' . $lang->sL('LLL:EXT:lang/locallang_core.xlf:labels.title.search_levels', TRUE) . '" id="search_levels">' . implode('', $opt) . '</select>';
// Table with the search box:
- $content = '<div class="db_list-searchbox-form db_list-searchbox-toolbar" id="db_list-searchbox-toolbar" style="display: ' . ($this->searchString == '' ? 'none' : 'block') . ';">
+ $content = '<div class="db_list-searchbox-form db_list-searchbox-toolbar module-docheader-bar module-docheader-bar-search t3js-module-docheader-bar t3js-module-docheader-bar-search" id="db_list-searchbox-toolbar" style="display: ' . ($this->searchString == '' ? 'none' : 'block') . ';">
' . $formElements[0] . '
<div id="typo3-dblist-search">
<div class="panel panel-default">
diff --git a/typo3/sysext/t3skin/Resources/Public/Css/backend.css b/typo3/sysext/t3skin/Resources/Public/Css/backend.css
index 395b550eeeab3e0e2e72305f3f111dfbfdb0066f..d3dcc27121430c1252ef86c7caf0440e1cd4637b 100644
--- a/typo3/sysext/t3skin/Resources/Public/Css/backend.css
+++ b/typo3/sysext/t3skin/Resources/Public/Css/backend.css
@@ -7872,6 +7872,7 @@ button.close {
background-color: #eeeeee;
border-bottom: 1px solid #c3c3c3;
padding: 0 24px;
+ transition: margin-top 0.3s ease-in-out;
}
.module-docheader:before,
.module-docheader:after {
@@ -7889,38 +7890,59 @@ button.close {
.module-docheader:after {
clear: both;
}
-.module-docheader-bar {
+.module-docheader .module-docheader-bar {
height: 26px;
margin: 4px 0;
line-height: 26px;
}
-.module-docheader-bar:before,
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:before,
+.module-docheader .module-docheader-bar:after {
content: " ";
display: table;
}
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:after {
clear: both;
}
-.module-docheader-bar:before,
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:before,
+.module-docheader .module-docheader-bar:after {
content: " ";
display: table;
}
-.module-docheader-bar:after {
+.module-docheader .module-docheader-bar:after {
clear: both;
}
-.module-docheader-bar label {
+.module-docheader .module-docheader-bar label {
margin-top: 0;
margin-bottom: 0;
}
-.module-docheader-bar .form-group {
+.module-docheader .module-docheader-bar .form-group {
margin: 0;
}
-.module-docheader-bar-column-left {
+.module-docheader .module-docheader-bar .form-inline-spaced {
+ margin: 0;
+}
+.module-docheader .module-docheader-bar .panel {
+ background-color: transparent;
+ margin: 0;
+ border-left: none;
+ border-right: none;
+ border-bottom: none;
+ border-radius: 0;
+ margin-left: -24px;
+ margin-right: -24px;
+ background-color: #fafafa;
+ box-shadow: none;
+}
+.module-docheader .module-docheader-bar .panel .panel-body {
+ padding: 8px 24px;
+}
+.module-docheader .module-docheader-bar-search {
+ margin-bottom: 0;
+}
+.module-docheader .module-docheader-bar-column-left {
float: left;
}
-.module-docheader-bar-column-right {
+.module-docheader .module-docheader-bar-column-right {
float: right;
}
.module-body {