Added feature #16032: Overwork tree frame design (Thanks to Lars Zimmermann)
authorSteffen Gebert <steffen.gebert@typo3.org>
Wed, 10 Nov 2010 22:09:31 +0000 (22:09 +0000)
committerSteffen Gebert <steffen.gebert@typo3.org>
Wed, 10 Nov 2010 22:09:31 +0000 (22:09 +0000)
git-svn-id: https://svn.typo3.org/TYPO3v4/Core/trunk@9327 709f56b5-9817-0410-a4d7-c38de5d9e867

19 files changed:
ChangeLog
typo3/class.alt_menu_functions.inc
typo3/class.db_list.inc
typo3/js/extjs/viewport.js
typo3/js/extjs/viewportConfiguration.js
typo3/sysext/t3skin/extjs/images/layout/mini-bottom.gif
typo3/sysext/t3skin/extjs/images/layout/mini-left.gif
typo3/sysext/t3skin/extjs/images/layout/mini-right.gif
typo3/sysext/t3skin/extjs/images/layout/mini-top.gif
typo3/sysext/t3skin/extjs/xtheme-t3skin.css
typo3/sysext/t3skin/stylesheets/ie6/element_tree.css [new file with mode: 0644]
typo3/sysext/t3skin/stylesheets/structure/element_docheader.css
typo3/sysext/t3skin/stylesheets/structure/element_tree.css
typo3/sysext/t3skin/stylesheets/structure/module_menu.css
typo3/sysext/t3skin/stylesheets/visual/element_docheader.css
typo3/sysext/t3skin/stylesheets/visual/element_tree.css
typo3/sysext/t3skin/stylesheets/visual/main_body.css
typo3/sysext/t3skin/stylesheets/visual/module_menu.css
typo3/sysext/t3skin/stylesheets/visual/viewport.css [deleted file]

index 56a51b7..0648314 100755 (executable)
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,3 +1,7 @@
+2010-11-10  Steffen Gebert  <steffen@steffen-gebert.de>
+
+       * Added feature #16032: Overwork tree frame design (Thanks to Lars Zimmermann)
+
 2010-11-10  Stanislas Rolland  <typo3@sjbr.ca>
 
        * Added feature #8349: htmlArea RTE: Clean paste feature with three options
index f9665df..07b1621 100644 (file)
@@ -225,7 +225,7 @@ class alt_menu_functions {
 
                                // Code for "About modules"
                        $descrCode.='
-                                               <tr class="c-mainitem bgColor4">
+                                               <tr class="c-mainitem">
                                                        <td colspan="3">'.$imageCode.$label.'</td>
                                                </tr>';
 
index 38c9473..8c3d75d 100644 (file)
@@ -333,7 +333,7 @@ class recordList extends t3lib_recordList {
                                <!--
                                        Search box:
                                -->
-                               <table border="0" cellpadding="0" cellspacing="0" class="bgColor4" id="typo3-dblist-search">
+                               <table border="0" cellpadding="0" cellspacing="0" id="typo3-dblist-search">
                                        <tr>
                                                <td><label for="search_field">' . $GLOBALS['LANG']->sL('LLL:EXT:lang/locallang_core.php:labels.enterSearchString', 1) . '</label><input type="text" name="search_field" id="search_field" value="' . htmlspecialchars($this->searchString) . '"' . $GLOBALS['TBE_TEMPLATE']->formWidth(10) . ' /></td>
                                                <td>' . $lMenu . '</td>
index 29868be..71430a8 100644 (file)
@@ -94,11 +94,6 @@ TYPO3.Viewport = Ext.extend(Ext.Viewport, {
                
                var moduleMenu = this.initialConfig.items[1];
                moduleMenu.width = TYPO3.configuration.moduleMenuWidth;
-               if (!TYPO3.configuration.moduleMenuSplit) {
-                       moduleMenu.split = false;
-                       moduleMenu.collapsible = false;
-                       moduleMenu.collapseMode = null
-               }
 
                // call parent constructor
                TYPO3.Viewport.superclass.initComponent.apply(this, arguments);
@@ -108,6 +103,27 @@ TYPO3.Viewport = Ext.extend(Ext.Viewport, {
                this.Topbar = Ext.getCmp('typo3-topbar');
                this.ModuleMenuContainer = Ext.getCmp('typo3-module-menu');
                this.DebugConsole = Ext.getCmp('typo3-debug-console');
+
+               // place a wrapper-div inside the split bar,
+               // this enables us to set width of the split bar to 0 to make it invisible
+               Ext.getCmp('typo3-viewport').on(
+                       'afterRender',
+                       function(el) {
+                               Ext.each([
+                                       'typo3-navigationContainer-xsplit',
+                                       'typo3-module-menu-xsplit'
+                                       ], function(value) {
+                                       var splitbar = Ext.get(value);
+                                       var button = splitbar.first();
+                                       var wrapper = splitbar.createChild({
+                                               cls: 'x-layout-mini-wrapper'
+                                       });
+                                       if (button !== null) {
+                                               wrapper.appendChild(button);
+                                       }
+                               });
+                       }
+               );
        },
 
        /**
index 55eebd5..8b217ae 100644 (file)
@@ -47,8 +47,8 @@ TYPO3.Viewport.configuration = {
                layout: 'fit',
                region: 'west',
                id: 'typo3-module-menu',
-               collapsible: true,
-               collapseMode: 'mini',
+               collapsible: false,
+               collapseMode: null,
                floatable: true,
                hideCollapseTool: true,
                split: true,
@@ -99,4 +99,4 @@ TYPO3.Viewport.configuration = {
                id: 'typo3-debug-console',
                border: false
        }]
-};
\ No newline at end of file
+};
index c18f9e3..fda3c29 100644 (file)
Binary files a/typo3/sysext/t3skin/extjs/images/layout/mini-bottom.gif and b/typo3/sysext/t3skin/extjs/images/layout/mini-bottom.gif differ
index 99f7993..d4f8c1c 100644 (file)
Binary files a/typo3/sysext/t3skin/extjs/images/layout/mini-left.gif and b/typo3/sysext/t3skin/extjs/images/layout/mini-left.gif differ
index 5b13c5a..70b5bd1 100644 (file)
Binary files a/typo3/sysext/t3skin/extjs/images/layout/mini-right.gif and b/typo3/sysext/t3skin/extjs/images/layout/mini-right.gif differ
index a4ca2bb..8bf1e1a 100644 (file)
Binary files a/typo3/sysext/t3skin/extjs/images/layout/mini-top.gif and b/typo3/sysext/t3skin/extjs/images/layout/mini-top.gif differ
index 3b44376..8aa8362 100644 (file)
@@ -2021,6 +2021,14 @@ body.x-body-masked .x-window-plain .x-window-mc {
        background-color:#e6e6e6;
 }
 
+.x-layout-mini {
+       opacity: 0.6;
+}
+
+.x-layout-mini:hover {
+       opacity: 0.8;
+}
+
 .x-layout-split-west .x-layout-mini {
        background-image:url(images/layout/mini-left.gif);
 }
@@ -2164,9 +2172,70 @@ body.x-body-masked .x-window-plain .x-window-mc {
        color: #606060;
 }
 
-/* Pagetree */
-.x-layout-split {
-       background-color: #dadada;
+/* Tree frame split bar */
+#typo3-module-menu-xsplit,
+#typo3-navigationContainer-xsplit {
+       width: 0;
+}
+
+/* Collapse icon */
+#typo3-module-menu-xsplit .x-layout-mini-west,
+#typo3-module-menu-xcollapsed .x-layout-mini-west,
+#typo3-navigationContainer-xsplit .x-layout-mini-west,
+#typo3-navigationContainer-xcollapsed .x-layout-mini-west {
+       background-position: center;
+       background-repeat: no-repeat;
+       display: none;
+       left: 0px;
+       padding: 5px 0;
+       position: absolute;
+}
+
+/* Only show collapse icon, when user hovers the split bar */
+#typo3-module-menu-xsplit:hover .x-layout-mini-west,
+#typo3-module-menu-xcollapsed:hover .x-layout-mini-west,
+#typo3-navigationContainer-xsplit:hover .x-layout-mini-west,
+#typo3-navigationContainer-xcollapsed:hover .x-layout-mini-west {
+       display: block;
+}
+
+#typo3-module-menu-xcollapsed:hover .x-layout-mini-west,
+#typo3-navigationContainer-xcollapsed:hover .x-layout-mini-west {
+       left: 5px;
+}
+
+/* Collapsed tree frame is not invisible, but 5px wide */
+#typo3-navigationContainer-xcollapsed {
+       background-color: #ebebeb;
+       -moz-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
+               inset 0 22px #585858,
+               inset 0 49px #dadada;
+       -ms-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
+               inset 0 22px #585858,
+               inset 0 49px #dadada;
+       -webkit-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
+               inset 0 22px #585858,
+               inset 0 49px #dadada;
+       box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15),
+               inset 0 22px #585858,
+               inset 0 49px #dadada;
+       overflow: visible;
+       width: 5px;
+}
+
+/**
+ * this is our invisible wrapper around the collapse button,
+ * which enables us to have kind of invisible splitbar
+ */
+.x-layout-mini-wrapper {
+       height: 100%;
+       left: 0;
+       position: absolute;
+       width: 1px;
+}
+
+.x-splitbar-proxy.x-splitbar-proxy-h {
+       width: 2px !important;
 }
 
 #widget-navigation-tree .x-panel-noborder .x-panel-body-noborder {
diff --git a/typo3/sysext/t3skin/stylesheets/ie6/element_tree.css b/typo3/sysext/t3skin/stylesheets/ie6/element_tree.css
new file mode 100644 (file)
index 0000000..bdd7811
--- /dev/null
@@ -0,0 +1,6 @@
+/* workaround for transparent border-color */
+ul.tree div.treeLinkItem {
+       border-bottom: 1px solid #ebebeb;
+       border-left: 1px solid #ebebeb;
+       border-top: 1px solid #ebebeb;
+}
\ No newline at end of file
index c5f50d8..a77a8cb 100644 (file)
@@ -17,7 +17,7 @@ div#typo3-docheader {
 
 #typo3-pagetree #typo3-docheader,
 #typo3-alt-file-navframe-php #typo3-docheader {
-       min-width: 0px;
+       min-width: 0;
 }
 
 div#typo3-docheader-row1 {
@@ -132,4 +132,4 @@ div#typo3-docheader div.buttonsright div.buttongroup {
        height: 20px;
        margin-left: 5px;
        padding-left: 20px;
-}
\ No newline at end of file
+}
index 560fb33..42d8dec 100644 (file)
@@ -86,7 +86,7 @@ ul.tree ul li {
 ul.tree div.treeLinkItem {
        display: block;
        height: 16px;
-       padding-left: 2px;
+       padding-right: 2px;
 }
 span.dragIcon {
        display: inline-block;
@@ -110,7 +110,7 @@ ul.tree div.treeLinkItem span.dragIcon {
 
 #treeFilterBox {
        display: none;
-       height: 27px;
+       height: 23px;
        position: absolute;
        top: 22px;
        width: 280px;
index 86cc981..e7ebf0d 100644 (file)
@@ -69,3 +69,7 @@ $Id$
 #typo3-menu div.collapsed {
        margin-left: 0px;
 }
+
+#typo3-module-menu #typo3-docheader {
+       min-width: 0;
+}
index d041085..95eb8c6 100644 (file)
@@ -40,4 +40,23 @@ div#typo3-docheader input {
 
 div#typo3-docheader-row2 div {
        line-height: normal;
+}
+
+/* customized docheader style for module menu and tree frames */
+#typo3-module-menu #typo3-docheader-row1,
+#typo3-pagetree #typo3-docheader-row1,
+#typo3-alt-file-navframe-php #typo3-docheader-row1 {
+       -moz-box-shadow: inset -2px 0 1px #414141;
+       -ms-box-shadow: inset -2px 0 1px #414141;
+       -webkit-box-shadow: inset -2px 0 1px #414141;
+       box-shadow: inset -2px 0 1px #414141;
+}
+
+#typo3-module-menu #typo3-docheader-row2,
+#typo3-pagetree #typo3-docheader-row2,
+#typo3-alt-file-navframe-php #typo3-docheader-row2 {
+       -moz-box-shadow: inset -2px 0 1px #b7b7b7;
+       -ms-box-shadow: inset -2px 0 1px #b7b7b7;
+       -webkit-box-shadow: inset -2px 0 1px #b7b7b7;
+       box-shadow: inset -2px 0 1px #b7b7b7;
 }
\ No newline at end of file
index 5128ab6..23e4b3d 100644 (file)
@@ -4,6 +4,19 @@ Tree
 $Id$
 - - - - - - - - - - - - - - - - - - - - - */
 
+body#typo3-pagetree,
+body#typo3-alt-file-navframe-php {
+       background: #ebebeb;
+}
+
+#typo3-pagetree #typo3-docbody,
+#typo3-alt-file-navframe-php #typo3-docbody {
+       -moz-box-shadow: inset -2px 0 1px #c4c4c4;
+       -ms-box-shadow: inset -2px 0 1px #c4c4c4;
+       -webkit-box-shadow: inset -2px 0 1px #c4c4c4;
+       box-shadow: inset -2px 0 1px #c4c4c4;
+}
+
 table#typo3-tree a {
        text-decoration: none;
 }
@@ -69,16 +82,25 @@ ul.tree ul li {
 }
 
 ul.tree ul li.expanded ul {
-       background: transparent url('../../icons/gfx/ol/line.gif') 2px top repeat-y;
+       background: transparent url('../../icons/gfx/ol/line.gif') 1px top repeat-y;
 }
 
 ul.tree ul li.last > ul {
        background: none;
 }
 
+ul.tree div.treeLinkItem {
+       border-bottom: 1px solid transparent;
+       border-left: 1px solid transparent;
+       border-top: 1px solid transparent;
+}
+
 ul.tree li.active > div.treeLinkItem,
 ul.tree ul li.active > div.treeLinkItem {
-       background-color: #d8d8d8;
+       background-color: #f8f8f8;
+       border-bottom: 1px solid #d7d7d7;
+       border-left: 1px solid #d7d7d7;
+       border-top: 1px solid #d7d7d7;
 }
 
 ul.tree li.active span a,
@@ -102,7 +124,6 @@ ul.tree ul li.active ul span a {
        background-image: url('../../icons/gfx/filter_bg.gif');
        background-repeat: no-repeat;
        background-position: 0 -2px;
-       background-color: #f2f2f2;
        border-bottom: 1px solid #dadada;
 }
 
index 7667cae..671896a 100644 (file)
@@ -6,5 +6,5 @@ $Id$
 
 /* Set default values for bodytags: */
 body {
-       background-color: #f1f1f1;
+       background-color: #f8f8f8;
 }
\ No newline at end of file
index 03c20b0..7fe0730 100644 (file)
@@ -6,21 +6,19 @@ $Id$
 
 #typo3-module-menu {
        background: #dddddd;
-       background-image: url('../../images/backgrounds/module-menu-right.gif');
-       background-position: right top;
-       background-repeat: repeat-y;
+       background-image: -moz-linear-gradient(top, #bdbdbd, 100px #dddddd);
+       background-image: -webkit-gradient(linear, 0 0, 0 25%, color-stop(0, #bdbdbd), color-stop(1, #dddddd));
+       background-image: linear-gradient(top, #bdbdbd, 100px #dddddd);
+       -moz-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
+       -ms-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
+       -webkit-box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
+       box-shadow: inset -2px 0 1px rgba(0, 0, 0, 0.15);
 }
 
 #typo3-module-menu .x-panel-body {
        background-color: transparent;
 }
 
-#typo3-side-menu {
-       background-image: url('../../images/backgrounds/module-menu-top.png');
-       background-position: right top;
-       background-repeat: no-repeat;
-}
-
 #typo3-menu,
 #typo3-menu ul {
        list-style: none;
@@ -28,6 +26,7 @@ $Id$
 
 #typo3-menu a {
        color: #1e2121;
+       outline: 0;
 }
 
 #typo3-menu > li {
@@ -44,7 +43,7 @@ $Id$
 #typo3-menu li.menuSection li a:hover,
 #typo3-menu li.menuSection li.hover a,
 #typo3-menu li.highlighted a {
-       background-color: #f1f1f1;
+       background-color: #ebebeb;
        border-top: 1px solid #b8b8b8;
        border-bottom: 1px solid #b8b8b8;
 }
diff --git a/typo3/sysext/t3skin/stylesheets/visual/viewport.css b/typo3/sysext/t3skin/stylesheets/visual/viewport.css
deleted file mode 100644 (file)
index d6285ee..0000000
+++ /dev/null
@@ -1,11 +0,0 @@
-/* - - - - - - - - - - - - - - - - - - - - -
-TYPO3 viewport
-
-$Id$
-- - - - - - - - - - - - - - - - - - - - - */
-
-
-#typo3-navigationContainer-xsplit,
-#typo3-navigationContainer-xcollapsed {
-       border-top: 22px solid #585858;
-}
\ No newline at end of file