Added feature #13899: Add Viewport layout to BE (thanks to Stefan Galinski)
authorSteffen Kamper <info@sk-typo3.de>
Tue, 30 Mar 2010 21:19:30 +0000 (21:19 +0000)
committerSteffen Kamper <info@sk-typo3.de>
Tue, 30 Mar 2010 21:19:30 +0000 (21:19 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@7225 709f56b5-9817-0410-a4d7-c38de5d9e867

ChangeLog
typo3/alt_intro.php
typo3/backend.php
typo3/classes/class.modulemenu.php
typo3/css/backend-scaffolding.css
typo3/css/backend-style.css
typo3/js/extjs/backendsizemanager.js [new file with mode: 0644]
typo3/js/sizemanager.js [deleted file]
typo3/stylesheet.css

index af07e3f..9a7a780 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-03-26  Steffen Kamper  <info@sk-typo3.de>
+
+       * Added feature #13899: Add Viewport layout to BE (thanks to Stefan Galinski)
+
 2010-03-30  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Follow-up to feature #13954: htmlArea RTE: Extjize TYPO3 link, image and user elements dialogue windows
index cda8a0f..d6d0191 100644 (file)
@@ -109,6 +109,7 @@ class SC_alt_intro {
                $this->content.= $TBE_TEMPLATE->startPage('About modules');
 
                $this->content .= '
+                       <div id="typo3-alt-intro-php-sub">
                        <h1>TYPO3 '.TYPO3_version.'<br />'.$LANG->getLL('introtext').'</h1>
 
                        <p>'.t3lib_BEfunc::TYPO3_copyRightNotice().'</p>';
@@ -126,7 +127,7 @@ class SC_alt_intro {
 
                        // end text: 'Features may vary depending on your website and permissions'
                $this->content.='<p class="c-features"><em>('.$LANG->getLL('endText').')</em></p>';
-               $this->content .= '<br />';
+               $this->content .= '<br /></div>';
 
                        // End page
                $this->content.= $TBE_TEMPLATE->endPage();
index 56e5f4f..3bbd8f9 100644 (file)
@@ -97,7 +97,7 @@ class TYPO3backend {
                        'contrib/swfupload/plugins/swfupload.queue.js',
                        'md5.js',
                        'js/common.js',
-                       'js/sizemanager.js',
+                       'js/extjs/backendsizemanager.js',
                        'js/toolbarmanager.js',
                        'js/modulemenu.js',
                        'js/iecompatibility.js',
@@ -109,6 +109,8 @@ class TYPO3backend {
                $this->jsFilesAfterInline = array(
                        'js/backend.js',
                        'js/loginrefresh.js',
+                       'js/extjs/viewport.js',
+                       'js/extjs/viewportConfiguration.js',
                );
                        // add default BE css
                $this->css      = '';
@@ -171,13 +173,7 @@ class TYPO3backend {
 
                if ($this->menuWidth != $this->menuWidthDefault) {
                        $this->css .= '
-                               #typo3-logo,
-                               #typo3-side-menu {
-                                       width: ' . ($this->menuWidth - 1) . 'px;
-                               }
-
-                               #typo3-top,
-                               #typo3-content {
+                               #typo3-top {
                                        margin-left: ' . $this->menuWidth . 'px;
                                }
                        ';
@@ -186,17 +182,17 @@ class TYPO3backend {
                        // create backend scaffolding
                $backendScaffolding = '
        <div id="typo3-backend">
-               <div id="typo3-top-container">
+               <div id="typo3-top-container" class="x-hide-display">
                        <div id="typo3-logo">'.$logo->render().'</div>
-                       <div id="typo3-top" class="typo3-top-toolbar">'
-                               .$this->renderToolbar()
-                       .'</div>
+                       <div id="typo3-top" class="typo3-top-toolbar">' .
+                               $this->renderToolbar() .
+                       '</div>
                </div>
                <div id="typo3-main-container">
-                       <div id="typo3-side-menu">
-                               '.$menu.'
-                       </div>
-                       <div id="typo3-content">
+                       <div id="typo3-side-menu" class="x-hide-display">' .
+                               $menu .
+                       '</div>
+                       <div id="typo3-content" class="x-hide-display">
                                <iframe src="alt_intro.php" name="content" id="content" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto"></iframe>
                        </div>
                </div>
@@ -215,13 +211,19 @@ class TYPO3backend {
                        // register the extDirect API providers
                        // Note: we need to iterate thru the object, because the addProvider method
                        // does this only with multiple arguments
-               $pageRenderer->addExtOnReadyCode(
-                       'for (var api in Ext.app.ExtDirectAPI) {
+               $pageRenderer->addExtOnReadyCode('
+                       for (var api in Ext.app.ExtDirectAPI) {
                                Ext.Direct.addProvider(Ext.app.ExtDirectAPI[api]);
                        }',
                        TRUE
                );
 
+                       // initiates the ExtJS based backend viewport
+               $pageRenderer->addExtOnReadyCode('
+                       TYPO3.Backend = new TYPO3.Viewport(TYPO3.Viewport.configuration);',
+                       TRUE
+               );
+
                        // remove duplicate entries
                $this->jsFiles = array_unique($this->jsFiles);
 
@@ -374,6 +376,7 @@ class TYPO3backend {
                        'workspaceFrontendPreviewEnabled' => $GLOBALS['BE_USER']->workspace != 0 && !$GLOBALS['BE_USER']->user['workspace_preview'] ? 0 : 1,
                        'veriCode' => $GLOBALS['BE_USER']->veriCode(),
                        'denyFileTypes' => PHP_EXTENSIONS_DEFAULT,
+                       'moduleMenuWidth' => $this->menuWidth - 1,
                        'showRefreshLoginPopup' => isset($GLOBALS['TYPO3_CONF_VARS']['BE']['showRefreshLoginPopup']) ? intval($GLOBALS['TYPO3_CONF_VARS']['BE']['showRefreshLoginPopup']) : FALSE,
                );
                $t3LLLcore = array(
@@ -459,7 +462,6 @@ class TYPO3backend {
        var TS = new typoSetup();
 
        var currentModuleLoaded = "";
-       var goToModule = ' . $goToModuleSwitch . ';
 
        /**
         * Frameset Module object
@@ -477,7 +479,11 @@ class TYPO3backend {
        }
        var fsMod = new fsModules();' . $moduleFramesHelper . ';';
 
-
+                       // add goToModule code
+               $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer();
+               $pageRenderer->addExtOnReadyCode('
+                       top.goToModule = ' . $goToModuleSwitch . ';
+               ');
 
                        // Check editing of page:
                $this->handlePageEditing();
@@ -558,7 +564,8 @@ class TYPO3backend {
 
                $moduleParameters = t3lib_div::_GET('modParams');
                if($startModule) {
-                       $this->js .= '
+                       $pageRenderer = $GLOBALS['TBE_TEMPLATE']->getPageRenderer();
+                       $pageRenderer->addExtOnReadyCode('
                        // start in module:
                function startInModule(modName, cMR_flag, addGetVars)   {
                        Event.observe(document, \'dom:loaded\', function() {
@@ -567,7 +574,7 @@ class TYPO3backend {
                }
 
                startInModule(\''.$startModule.'\', false, '.t3lib_div::quoteJSvalue($moduleParameters).');
-                       ';
+                       ');
                }
        }
 
index d4603f7..ff83eff 100644 (file)
@@ -515,10 +515,10 @@ class ModuleMenu {
                                        top.content.nav_frame.location = top.getModuleUrl(top.TS.PATH_typo3 + navFrames[mainModName]);
                                }
                        } else {
-                               $("content").src = top.TS.PATH_typo3 + modScriptURL;
+                               TYPO3.Backend.loadModule(mainModName, modName, top.getModuleUrl(modScriptURL));
                        }
                } else if (modScriptURL) {
-                       $("content").src = top.getModuleUrl(top.TS.PATH_typo3 + modScriptURL + additionalGetVariables);
+                       TYPO3.Backend.loadModule(mainModName, modName, top.getModuleUrl(modScriptURL + additionalGetVariables));
                }
                currentModuleLoaded = modName;
                top.fsMod.currentMainLoaded = mainModName;
index 134ed97..4bc5d35 100644 (file)
@@ -19,20 +19,19 @@ TYPO3 backend scaffolding
 - - - - - - - - - - - - - - - - - - - - - */
 
 body#typo3-backend-php {
-       margin: 0px;
-       padding: 0px;
+       margin: 0;
+       padding: 0;
 }
 
-#typo3-backend {
-       width: 100%;
-}
-
-#typo3-logo,
-#typo3-side-menu {
+#typo3-logo {
        float: left;
        width: 159px;
 }
 
+#typo3-toolbar div {
+       overflow: visible !important;
+}
+
 #typo3-top-container {
        height: 25px;
 }
@@ -41,28 +40,16 @@ body#typo3-backend-php {
        clear: both;
 }
 
-#typo3-top,
-#typo3-content {
+#typo3-top {
        margin-left: 160px;
 }
 
-#typo3-side-menu {
-       overflow: auto;
-}
-
 iframe {
-       width: 99.9%;
+       width: 100%;
 }
 
-#typo3-content,
-#typo3-main-container,
-#typo3-main-container * iframe {
-       height: 660px;
-       z-index: 1;
+#typo3-side-menu,
+iframe {
+       height: 100%;
+       overflow: auto;
 }
-
-
-
-
-
-
index 07df36e..a23ca4e 100644 (file)
@@ -13,10 +13,6 @@ Description : styles for the TYPO3 backend
 
 /* ----- Basics ----- */
 
-#typo3-backend {
-       /* background-color: #fff; */
-}
-
 #typo3-top-container {
        background-image: url(../gfx/bar.png);
 }
@@ -39,6 +35,7 @@ Description : styles for the TYPO3 backend
        list-style: none;
        margin: 0px;
        padding: 0px;
+       z-index: 200;
 }
 
 #typo3-toolbar li {
@@ -63,6 +60,8 @@ Description : styles for the TYPO3 backend
 
 .toolbar-item-menu {
        top: 25px;
+       z-index: 100;
+       position: absolute;
 }
 
 #typo3-toolbar .no-separator {
diff --git a/typo3/js/extjs/backendsizemanager.js b/typo3/js/extjs/backendsizemanager.js
new file mode 100644 (file)
index 0000000..15e4c70
--- /dev/null
@@ -0,0 +1,50 @@
+/***************************************************************\r
+*  Copyright notice\r
+*\r
+*  (c) 2010 Stefan Galinski <stefan.galinski@gmail.com>\r
+*  All rights reserved\r
+*\r
+*  This script is part of the TYPO3 project. The TYPO3 project is\r
+*  free software; you can redistribute it and/or modify\r
+*  it under the terms of the GNU General Public License as published by\r
+*  the Free Software Foundation; either version 2 of the License, or\r
+*  (at your option) any later version.\r
+*\r
+*  The GNU General Public License can be found at\r
+*  http://www.gnu.org/copyleft/gpl.html.\r
+*  A copy is found in the textfile GPL.txt and important notices to the license\r
+*  from the author is found in LICENSE.txt distributed with these scripts.\r
+*\r
+*\r
+*  This script is distributed in the hope that it will be useful,\r
+*  but WITHOUT ANY WARRANTY; without even the implied warranty of\r
+*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\r
+*  GNU General Public License for more details.\r
+*\r
+*  This copyright notice MUST APPEAR in all copies of the script!\r
+***************************************************************/\r
+\r
+/**\r
+ * Set's the height of the backend in relation to the visible area. This resizes\r
+ * the module menu and the content of the TYPO3 viewport e.g. if you open firebug that\r
+ * itself takes some height from the bottom.\r
+ *\r
+ * @author Stefan Galinski <stefan.galinski@gmail.com>\r
+ */\r
+TYPO3.BackendSizeManager = function() {\r
+       var resizeBackend = function() {\r
+               var viewportHeight = document.viewport.getHeight();\r
+               var topHeight = Ext.get('typo3-toolbar').getHeight();\r
+               var styles = {\r
+                       height: (viewportHeight - topHeight) + 'px'\r
+               }\r
+\r
+               Ext.get('typo3-side-menu').setStyle(styles);\r
+               Ext.get('content').setStyle(styles);\r
+       }\r
+\r
+       Ext.EventManager.on(window, 'resize', resizeBackend);\r
+       Ext.onReady(function() {\r
+               resizeBackend();\r
+       });\r
+}();\r
diff --git a/typo3/js/sizemanager.js b/typo3/js/sizemanager.js
deleted file mode 100644 (file)
index ca9703c..0000000
+++ /dev/null
@@ -1,58 +0,0 @@
-/***************************************************************
-*  Copyright notice
-*
-*  (c) 2007-2009 Ingo Renner <ingo@typo3.org>
-*  All rights reserved
-*
-*  This script is part of the TYPO3 project. The TYPO3 project is
-*  free software; you can redistribute it and/or modify
-*  it under the terms of the GNU General Public License as published by
-*  the Free Software Foundation; either version 2 of the License, or
-*  (at your option) any later version.
-*
-*  The GNU General Public License can be found at
-*  http://www.gnu.org/copyleft/gpl.html.
-*  A copy is found in the textfile GPL.txt and important notices to the license
-*  from the author is found in LICENSE.txt distributed with these scripts.
-*
-*
-*  This script is distributed in the hope that it will be useful,
-*  but WITHOUT ANY WARRANTY; without even the implied warranty of
-*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-*  GNU General Public License for more details.
-*
-*  This copyright notice MUST APPEAR in all copies of the script!
-***************************************************************/
-
-
-var SizeManager = Class.create({
-
-       /**
-        * registers for resize event listener and executes on DOM ready
-        */
-       initialize: function() {
-               Event.observe(window, 'resize', this.resizeBackend);
-               Event.observe(window, 'load', this.resizeBackend);
-       },
-
-       /**
-        * resizes the divs in the TYPO3 backend to fit a resized window
-        */
-       resizeBackend: function() {
-               var viewportHeight  = document.viewport.getHeight();
-               var topHeight       = $('typo3-top-container').getHeight();
-               var containerHeight = viewportHeight - topHeight;
-
-               $('typo3-main-container').setStyle({height: containerHeight+'px'});
-
-               $('typo3-side-menu').setStyle({height: containerHeight+'px'});
-
-               $('typo3-content').setStyle({height: containerHeight+'px'});
-               $('content').setStyle({height: containerHeight+'px'});
-       }
-
-});
-
-var TYPO3BackendSizeManager = new SizeManager();
-
-
index 7b93087..d96b777 100644 (file)
@@ -187,6 +187,7 @@ body#typo3-alt-palette-php {
        background-color: #9BA1A8;
 }
 
+body#typo3-alt-intro-php,
 body#typo3-alt-doc-php,
 body#typo3-alt-file-navframe-php,
 body#typo3-db-list-php,
@@ -713,8 +714,13 @@ Help > About modules (alt_intro.php)
 - - - - - - - - - - - - - - - - - - - - - */
 
 div.typo3-alt-intro-php {
-       width: 600px;
+       height: 100%;
+       overflow: auto;
+}
+
+#typo3-alt-intro-php-sub {
        margin-left: 10px;
+       width: 600px;
 }
 
 table#typo3-about-modules {