added feature #7367: Make the tree collapsable
authorIngo Renner <ingo.renner@typo3.org>
Sun, 3 Feb 2008 17:11:53 +0000 (17:11 +0000)
committerIngo Renner <ingo.renner@typo3.org>
Sun, 3 Feb 2008 17:11:53 +0000 (17:11 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@3039 709f56b5-9817-0410-a4d7-c38de5d9e867

12 files changed:
ChangeLog
typo3/alt_mod_frameset.php
typo3/border.html
typo3/css/backend-scaffolding.css
typo3/css/modulemenu.css
typo3/gfx/border_collapse.gif [new file with mode: 0644]
typo3/gfx/border_expand.gif [new file with mode: 0644]
typo3/sysext/t3skin/border.html [deleted file]
typo3/sysext/t3skin/ext_tables.php
typo3/sysext/t3skin/noborder.html [deleted file]
typo3/sysext/t3skin/stylesheets/backend-scaffolding.css [deleted file]
typo3/sysext/t3skin/stylesheets/modulemenu.css

index 84304a8..1649bb8 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -17,6 +17,7 @@
         * added feature #7282: Show Realname of BE-User if available and link it to edit, credits Steffen Kamper
         * fixed alignment of user name and icon in the toolbar
         * adjusted non-t3skin module menu width to fit the wider div
+        * added feature #7367: Make the tree collapsable
 
 2008-02-02  Benjamin Mack  <mack@xnos.org>
 
index 199e291..ba14184 100755 (executable)
@@ -119,7 +119,7 @@ class SC_alt_mod_frameset {
 
                if ($this->resizable)   {
                        $this->content.= '
-       <frameset cols="'.$width.',*"'.$onLoadHandler.'>
+       <frameset id="typo3-content-frameset" cols="'.$width.',*"'.$onLoadHandler.'>
                <frame name="nav_frame" src="'.$URL_nav.'" marginwidth="0" marginheight="0" scrolling="auto" />
                <frame name="list_frame" src="'.$URL_list.'" marginwidth="0" marginheight="0" scrolling="auto" />
        </frameset>
@@ -129,7 +129,7 @@ class SC_alt_mod_frameset {
                } else {
                        $this->content.= '
 
-       <frameset cols="'.$width.',8,*" framespacing="0" frameborder="0" border="0"'.$onLoadHandler.'>
+       <frameset id="typo3-content-frameset" cols="'.$width.',8,*" framespacing="0" frameborder="0" border="0"'.$onLoadHandler.'>
                <frame name="nav_frame" src="'.$URL_nav.'" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" noresize="noresize" />
                <frame name="border_frame" src="'.(isset($GLOBALS['TBE_STYLES']['border']) ? $GLOBALS['TBE_STYLES']['border'] : 'border.html').'" marginwidth="0" marginheight="0" frameborder="0" scrolling="no" noresize="noresize" />
                <frame name="list_frame" src="'.$URL_list.'" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" noresize="noresize" />
index 0e2cf13..fedde11 100755 (executable)
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html
      PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
@@ -6,7 +5,85 @@
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Border between Navigation and List frame in TYPO3</title>
+
+               <style type="text/css">
+                       /*<![CDATA[*/
+
+                       body {
+                               background-color: #edeeee;
+                       }
+
+                       #toggle-tree {
+                               height: 500px;
+                               cursor: pointer;
+                               border-right: 1px solid #ddd;
+                       }
+
+                       .collapsed {
+                               background-image: url("gfx/border_expand.gif");
+                               background-repeat: no-repeat;
+                               background-position: 1px 250px;
+                       }
+
+                       .expanded {
+                               background-image: url("gfx/border_collapse.gif");
+                               background-repeat: no-repeat;
+                               background-position: 0px 250px;
+                               border-left: 1px solid #ddd;
+                       }
+
+                       /*]]>*/
+               </style>
+
+               <script type="text/javascript" src="contrib/prototype/prototype.js"></script>
+               <script type="text/javascript">
+                       /*<![CDATA[*/
+
+                               var origColumns = 0;
+                               var frameSet = null;
+                               var collapseState = 'expanded';
+
+                               Event.observe(document, 'dom:loaded', function() {
+                                       $('toggle-tree').observe('click', toggleTree);
+
+                                       frameSet = parent.document.body;
+                                       origColumns = Element.readAttribute(frameSet, 'cols');
+                               });
+
+                               Event.observe(window, 'load', resizeBorder);
+                               Event.observe(window, 'resize', resizeBorder);
+
+                               function toggleTree() {
+                                       var columns = origColumns.split(',');
+
+                                       if(collapseState == 'expanded') {
+                                               columns[0] = '0';
+                                               Element.writeAttribute(frameSet, 'cols', columns.join(','));
+
+                                               $('toggle-tree').removeClassName('expanded');
+                                               $('toggle-tree').addClassName('collapsed');
+                                               collapseState = 'collapsed';
+                                       } else {
+                                               Element.writeAttribute(frameSet, 'cols', origColumns);
+
+                                               $('toggle-tree').removeClassName('collapsed');
+                                               $('toggle-tree').addClassName('expanded');
+                                               collapseState = 'expanded';
+                                       }
+                               }
+
+                               function resizeBorder() {
+                                       var documentHeight = document.viewport.getHeight();
+
+                                       $('toggle-tree').setStyle({
+                                               height: documentHeight + 'px'
+                                       });
+                               }
+
+                       /*]]>*/
+               </script>
        </head>
-       <body background="gfx/border_back.gif">
+       <body>
+               <div id="toggle-tree" class="expanded">&nbsp;</div>
        </body>
-</html>
+</html>
\ No newline at end of file
index 971c297..134ed97 100644 (file)
@@ -30,7 +30,7 @@ body#typo3-backend-php {
 #typo3-logo,
 #typo3-side-menu {
        float: left;
-       width: 160px;
+       width: 159px;
 }
 
 #typo3-top-container {
index b8c084f..fee3bb2 100644 (file)
@@ -17,6 +17,10 @@ TYPO3 backend menu - vertical
 
 - - - - - - - - - - - - - - - - - - - - - */
 
+#typo3-side-menu {
+       border-right: 1px solid #ddd;
+}
+
 #typo3-menu,
 #typo3-menu ul {
        list-style: none;
diff --git a/typo3/gfx/border_collapse.gif b/typo3/gfx/border_collapse.gif
new file mode 100644 (file)
index 0000000..197d5b5
Binary files /dev/null and b/typo3/gfx/border_collapse.gif differ
diff --git a/typo3/gfx/border_expand.gif b/typo3/gfx/border_expand.gif
new file mode 100644 (file)
index 0000000..16e2187
Binary files /dev/null and b/typo3/gfx/border_expand.gif differ
diff --git a/typo3/sysext/t3skin/border.html b/typo3/sysext/t3skin/border.html
deleted file mode 100644 (file)
index 6cb57a6..0000000
+++ /dev/null
@@ -1,12 +0,0 @@
-<!DOCTYPE html
-     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
-       <head>
-               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-               <title>Border between Navigation and List frame in TYPO3</title>
-       </head>
-       <body background="icons/gfx/border_back.gif">
-
-       </body>
-</html>
index 16ecacf..f2231eb 100644 (file)
@@ -79,7 +79,6 @@ if (TYPO3_MODE=='BE') {
        $TBE_STYLES['styleSheetFile_post'] = $temp_eP.'stylesheets/stylesheet_post.css';                                                                // Additional stylesheet. Set AFTER any in-document styles
        #       $TBE_STYLES['inDocStyles_TBEstyle'] = '* {text-align: right;}';                                                                         // Additional default in-document styles.
        $TBE_STYLES['stylesheets']['modulemenu']          = $temp_eP.'stylesheets/modulemenu.css';
-       $TBE_STYLES['stylesheets']['backend-scaffolding'] = $temp_eP.'stylesheets/backend-scaffolding.css';
        $TBE_STYLES['stylesheets']['backend-style']       = $temp_eP.'stylesheets/backend-style.css';
 
        // Alternative dimensions for frameset sizes:
@@ -89,8 +88,6 @@ if (TYPO3_MODE=='BE') {
        $TBE_STYLES['dims']['selMenuFrame']=200;                // Width of the selector box menu frame
        $TBE_STYLES['dims']['navFrameWidth']=260;               // Default navigation frame width
 
-       $TBE_STYLES['border'] = $temp_eP.'noborder.html';
-
        // Setting roll-over background color for click menus:
        // Notice, this line uses the the 'scriptIDindex' feature to override another value in this array (namely $TBE_STYLES['mainColors']['bgColor5']), for a specific script "typo3/alt_clickmenu.php"
        $TBE_STYLES['scriptIDindex']['typo3/alt_clickmenu.php']['mainColors']['bgColor5']='#F8F9FB';
diff --git a/typo3/sysext/t3skin/noborder.html b/typo3/sysext/t3skin/noborder.html
deleted file mode 100644 (file)
index a483219..0000000
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE html
-     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html>
-       <head>
-               <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-               <title>Border between Navigation and List frame in TYPO3</title>
-       </head>
-       <body style="background-color:#EFEFF4;">
-       
-       </body>
-</html>
diff --git a/typo3/sysext/t3skin/stylesheets/backend-scaffolding.css b/typo3/sysext/t3skin/stylesheets/backend-scaffolding.css
deleted file mode 100644 (file)
index 68ac390..0000000
+++ /dev/null
@@ -1,24 +0,0 @@
-/* - - - - - - - - - - - - - - - - - - - - -
-
-Title  : TYPO3 backend styles
-Author : Ingo Renner <ingo@typo3.org>
-URL    : http://typo3.org
-
-Description : styles the TYPO3 backend, should only contain layout styles, no colors or border or so
-
-
-       $Id$
-
-- - - - - - - - - - - - - - - - - - - - - */
-
-
-/* - - - - - - - - - - - - - - - - - - - - -
-
-TYPO3 backend scaffolding
-
-- - - - - - - - - - - - - - - - - - - - - */
-
-#typo3-logo,
-#typo3-side-menu {
-       width: 159px;
-}
\ No newline at end of file
index 43c91f0..73cffda 100644 (file)
@@ -18,7 +18,6 @@ TYPO3 backend menu - vertical
 - - - - - - - - - - - - - - - - - - - - - */
 
 #typo3-side-menu {
-       border-right: 1px solid #ddd;
        background: #edeeee;
 }