Commit 703bca18 authored by Felix Kopp's avatar Felix Kopp Committed by Christian Kuhn
Browse files

[FEATURE] Swap doc header rows in all backend modules

Swaps all docHeader rows for the backend modules.

Function menu and CSH are moved to the top row while
buttons (save, close and shortcut) are moved underneath.

Also includes a compatibility layer for non-core legacy
extensions that don't include expected template structure.
These non-standard docHeaders are reformated by CSS.
To deliver fall-back logic the HTML structure was redefined.

Change-Id: I345646b053a1587b0f82a9bde43b479b8ca4767e
Resolves: #38759
Resolves: #33508
Releases: 6.0
Reviewed-on: http://review.typo3.org/12788
Reviewed-by: Max Roesch
Reviewed-by: Wouter Wolters
Tested-by: Wouter Wolters
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
parent 09684d7a
......@@ -170,7 +170,7 @@
/* floating */
.x-toolbar-ct {
width:100%;
width: 100%;
}
.x-toolbar-right td {
......
......@@ -69,9 +69,7 @@ TYPO3.ModuleMenu.Store = new Ext.data.JsonStore({
TYPO3.ModuleMenu.Template = new Ext.XTemplate(
'<div id="typo3-docheader">',
' <div id="typo3-docheader-row1">',
' <div class="buttonsleft"></div>',
' <div class="buttonsright"></div>',
' <div class="typo3-docheader-functions">',
' </div>',
'</div>',
'<ul id="typo3-menu">',
......
<f:be.container>
<div id="typo3-docheader">
<div id="typo3-docheader-row1">&nbsp;</div>
<div id="typo3-docheader-row2">&nbsp;</div>
<div class="typo3-docheader-functions">&nbsp;</div>
<div class="typo3-docheader-buttons">&nbsp;</div>
</div>
<div id="typo3-docbody">
......
<f:be.container loadExtJs="1">
<div class="typo3-fullDoc">
<div id="typo3-docheader">
<div id="typo3-docheader-row1">&nbsp;</div>
<div id="typo3-docheader-row2">&nbsp;</div>
<div class="typo3-docheader-functions">&nbsp;</div>
<div class="typo3-docheader-buttons">&nbsp;</div>
</div>
<div id="typo3-docbody">
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###CSH###</div>
<div class="right"></div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-csh">###CSH###</div></div>
<div class="docheader-row2-right"></div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......@@ -38,13 +37,13 @@
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###CSH###</div>
<div class="right"></div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-csh">###CSH###</div></div>
<div class="docheader-row2-right"></div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
......
......@@ -84,8 +84,9 @@ TYPO3.Form.Wizard.Viewport = Ext.extend(Ext.Container, {
* event listeners are added.
*/
addButtonsToDocHeader: function() {
var docHeaderRow1 = Ext.get('typo3-docheader-row1');
var docHeaderRow1ButtonsLeft = docHeaderRow1.first('.buttonsleft');
var docHeaderRow1 = Ext.get('typo3-docheader');
var docHeaderButtonsBar = docHeaderRow1.first('.typo3-docheader-buttons');
var docHeaderRow1ButtonsLeft = docHeaderButtonsBar.first('.left');
var saveButtonGroup = Ext.DomHelper.append(docHeaderRow1ButtonsLeft, {
tag: 'div',
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left"></div>
<div class="right">###PAGEPATH######PAGEINFO###</div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"></div>
<div class="docheader-row2-right">###PAGEPATH######PAGEINFO###</div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###FUNC_MENU###</div>
<div class="right"></div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-funcmenu">###FUNC_MENU###</div></div>
<div class="docheader-row2-right"></div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......
......@@ -2,9 +2,9 @@
<div class="typo3-fullDoc">
<!-- Empty docheader -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft"></div>
<div class="buttonsright"></div>
<div class="typo3-docheader-functions">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###FUNC_MENU###</div>
<div class="right">###PAGEPATH######PAGEINFO###</div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-funcmenu">###FUNC_MENU###</div></div>
<div class="docheader-row2-right">###PAGEPATH######PAGEINFO###</div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......@@ -23,7 +22,7 @@
<!-- Grouping the icons on top -->
<!-- ###BUTTON_GROUP_WRAP### -->
<div class="buttongroup">###BUTTONS###</div>
<div class="buttongroup">###BUTTONS###</div>
<!-- ###BUTTON_GROUP_WRAP### -->
<!-- ###BUTTON_GROUPS_LEFT### -->
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###FUNC_MENU###</div>
<div class="right"></div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-funcmenu">###FUNC_MENU###</div></div>
<div class="docheader-row2-right"> </div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......@@ -23,7 +22,7 @@
<!-- Grouping the icons on top -->
<!-- ###BUTTON_GROUP_WRAP### -->
<div class="buttongroup">###BUTTONS###</div>
<div class="buttongroup">###BUTTONS###</div>
<!-- ###BUTTON_GROUP_WRAP### -->
<!-- ###BUTTON_GROUPS_LEFT### -->
......
<!-- ###FULLDOC### begin -->
<div class="typo3-fullDoc">
<!-- Page header with buttons, path details and csh -->
<div id="typo3-docheader">
<div id="typo3-docheader-row1">
<div class="buttonsleft">###BUTTONLIST_LEFT###</div>
<div class="buttonsright">###BUTTONLIST_RIGHT###</div>
<div class="typo3-docheader-functions">
<div class="left">###CSH######FUNC_MENU###</div>
<div class="right"></div>
</div>
<div id="typo3-docheader-row2">
<div class="docheader-row2-left"><div class="docheader-csh">###CSH###</div><div class="docheader-funcmenu">###FUNC_MENU###</div></div>
<div class="docheader-row2-right"></div>
<div class="typo3-docheader-buttons">
<div class="left">###BUTTONLIST_LEFT###</div>
<div class="right">###BUTTONLIST_RIGHT###</div>
</div>
</div>
<!-- Content of module, for instance listing, info or editing -->
<div id="typo3-docbody">
<div id="typo3-inner-docbody">
###CONTENT###
......@@ -23,7 +22,7 @@
<!-- Grouping the icons on top -->
<!-- ###BUTTON_GROUP_WRAP### -->
<div class="buttongroup">###BUTTONS###</div>
<div class="buttongroup">###BUTTONS###</div>
<!-- ###BUTTON_GROUP_WRAP### -->
<!-- ###BUTTON_GROUPS_LEFT### -->
......
......@@ -2272,14 +2272,22 @@ body.ext-chrome #typo3-navigationContainer-xsplit {
#typo3-navigationContainer-xcollapsed,
#typo3-navigationDummy {
background-color: #ebebeb;
-moz-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 22px #585858;
-ms-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 22px #585858;
-webkit-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 22px #585858;
box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 22px #585858;
-moz-box-shadow:
inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 27px #585858,
inset 0 49px #dadada;
-ms-box-shadow:
inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 27px #585858,
inset 0 49px #dadada;
-webkit-box-shadow:
inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 27px #585858,
inset 0 49px #dadada;
box-shadow:
inset -2px 0 1px rgba(0, 0, 0, 0.15),
inset 0 27px #585858,
inset 0 49px #dadada;
overflow: visible;
}
......
/* - - - - - - - - - - - - - - - - - - - - -
Docheader
/**
* Docheader
*/
- - - - - - - - - - - - - - - - - - - - - */
/* - - - - - - - - - - - - - - - - - - - - -
Record editing (alt_doc.php)
- - - - - - - - - - - - - - - - - - - - - */
div#typo3-docheader {
left: 0;
min-width: 260px;
top: 0;
z-index: 5;
.typo3-docheader-functions {
color: #dadada;
height: 27px;
line-height: 27px;
padding: 0 12px;
overflow: hidden;
}
#typo3-pagetree #typo3-docheader,
#typo3-alt-file-navframe-php #typo3-docheader {
min-width: 0;
}
div#typo3-docheader-row1 {
height: 22px;
padding-left: 12px;
padding-right: 12px;
}
div#typo3-docheader-row2 {
height: 21px;
padding-top: 6px;
padding-left: 12px;
padding-right: 12px;
.typo3-docheader-buttons {
color: #000;
height: 16px;
padding: 3px 12px;
overflow: hidden;
}
div.docheader-row2-left {
margin-top: -3px;
}
div.docheader-row2-left div.docheader-funcmenu {
#typo3-docheader .left {
float: left;
padding-right: 4px;
}
div.docheader-row2-left div.docheader-csh {
float: left;
padding-top: 3px;
#typo3-docheader .right {
float: right;
}
div#typo3-docheader div.buttonsleft {
/** Extra margin 6px added to it-icon margin, doubled spacing = 12px */
#typo3-docheader .left .buttongroup {
float: left;
margin: 0 5px 0 0;
margin-right: 6px;
}
div#typo3-docheader div.buttonsright {
float: right;
margin: 0 0 0 5px;
#typo3-docheader .t3-icon {
margin-bottom: 3px;
}
div#typo3-docheader-row1 img,
div#typo3-docheader-row1 input,
div#typo3-docheader-row1 span.t3-icon {
margin: 2px 3px 0;
vertical-align: top;
#typo3-docheader .left .t3-icon {
margin-right: 6px;
}
div#typo3-docheader img.typo3-csh-icon {
margin: 2px 2px 0 2px;
#typo3-docheader .right .t3-icon {
margin-left: 6px;
}
div#typo3-docheader-row2 img {
margin-top: -1px !important;
#typo3-docheader .left select {
margin-right: 12px;
}
div#typo3-docheader select {
margin: 2px 0 0;
}
div#typo3-docheader div.docheader-row2-left {
float: left;
}
/**
* Fail-safe for non-core legacy extensions
* @deprecated with TYPO3 version 6.0, will be removed in 6.2
*/
div#typo3-docheader div.docheader-row2-right {
float: right;
}
/** Behave like .typo3-docheader-functions */
#typo3-docheader-row2 {
color: #dadada;
height: 27px;
line-height: 27px;
padding: 0 12px;
overflow: hidden;
div#typo3-docbody {
bottom: 0;
overflow: auto;
/** Fake box width to 100%, excluding the padding */
position: absolute;
top: 49px;
width: 100%;
z-index: 2;
}
div#typo3-inner-docbody {
padding: 15px 10px;
}
/* Fix for IE 7 */
* + html div#typo3-inner-docbody {
width: 95%;
top: 0;
left: 0;
right: 0;
width: auto;
}
* html div#typo3-docbody {
height: 90%;
padding-bottom: 0;
padding-top: 0;
top: 51px;
}
/** Behave like .typo3-docheader-buttons */
#typo3-docheader-row1 {
color: #000;
height: 16px;
padding: 3px 12px;
overflow: hidden;
* html div#typo3-docbody table.typo3-TCEforms {
margin-top: 20px;
margin-top: 27px;
}
div#typo3-docheader div.buttonsleft div.buttongroup {
#typo3-docheader .docheader-row2-left,
#typo3-docheader .buttonsleft {
float: left;
height: 20px;
margin-right: 5px;
padding-right: 20px;
}
div#typo3-docheader div.buttonsright div.buttongroup {
float: left;
height: 20px;
margin-left: 5px;
padding-left: 20px;
}
#typo3-docheader .docheader-row2-right,
#typo3-docheader .buttonsright {
float: right;
}
\ No newline at end of file
......@@ -36,7 +36,20 @@ Pagetree
#typo3-pagetree .x-toolbar,
.typo3-pagetree-topPanel-item .x-toolbar {
padding-bottom: 0;
padding: 0;
}
#typo3-pagetree .x-panel-tbar .x-toolbar {
padding-top: 7px;
height: 20px;
}
#typo3-pagetree .x-toolbar-ct {
height: 20px;
}
#typo3-pagetree-topPanel-item-newNode.x-toolbar {
padding-top: 2px;
}
#typo3-pagetree ul.x-tree-root-ct {
......@@ -107,29 +120,30 @@ Pagetree
}
.typo3-pagetree-topPanel-item {
padding: 5px 3px 0 3px;
padding: 0 3px 0 3px;
height: 22px;
}
#typo3-pagetree-topPanel-filterWrap {
padding-top: 3px;
height: 24px;
height: 22px;
}
#typo3-pagetree-topPanel-filter {
height: 16px;
height: 15px;
width: 98% !important;
margin-top: 1px;
padding: 1px 0 1px 2px;
}
#typo3-pagetree-topPanel-filterWrap .t3-icon-input-clear {
right: 2%;
right: 2px;
}
#typo3-pagetree .typo3-pagetree-topPanel-button {
margin-right: 1px;
margin-top: -2px;
padding: 2px 3px;
margin-bottom: -2px;
padding: 2px 3px 4px 3px;
}
#typo3-pagetree-topPanel-defaultPanel {
......@@ -207,4 +221,4 @@ Pagetree
.typo3-pagetree-deletionDropZone-restoreText {
display: inline-block;
padding: 4px 4px 4px 18px;
}
}
\ No newline at end of file
......@@ -524,3 +524,7 @@ img.t3-tceforms-sysfile-imagepreview {
margin-right: 10px;
margin-bottom: 10px;
}
* html div#typo3-docbody table.typo3-TCEforms {
margin-top: 20px;
}
\ No newline at end of file
......@@ -121,10 +121,12 @@ ul.tree div.treeLinkItem span.dragIcon {
#treeFilterBox {
display: none;
height: 23px;
height: 25px;
position: absolute;
top: 22px;
width: 280px;
top: 49px;
left: 0;
right: 0;
width: auto;
z-index: 3;
}
......@@ -148,4 +150,4 @@ ul.tree div.treeLinkItem span.dragIcon {
#typo3-pagetree #typo3-docheader img,
#typo3-alt-file-navframe-php #typo3-docheader img {
margin: 2px;
}
}
\ No newline at end of file