Make WebSection_viewNavigationWidget generate a dynamic tree for listing...

Make WebSection_viewNavigationWidget generate a dynamic tree for listing sections and documents (limited to a depth of 3 by default). I have change CSS for rendering the navigation menu for 3 level of depth. If we want infini depth we must change the system of rendering, moving from css to javascript.

git-svn-id: https://svn.erp5.org/repos/public/erp5/trunk@26407 20353a03-c40f-0410-a6d1-a30d3c3de9de

bt5/erp5_web_multiflex5_theme/SkinTemplateItem/portal_skins/erp5_web_multiflex5_theme/WebSection_viewNavigationWidget.xml

@@ -57,24 +57,27 @@
 </tal:block>\n
 \n
 <tal:block tal:define="current_web_site python:request.get(\'current_web_site\', here);\n
-                       menu_item_list python:current_web_site.WebSection_getSiteMapTree(depth=2)">\n
-\n
-<ul tal:repeat="menu_item menu_item_list">\n
-  <li tal:condition="menu_item/subsection"><a href="#" tal:attributes="href menu_item/url"\n
-          tal:content="menu_item/translated_title">Drop-down Menu<!--[if IE 7]><!--></a><!--<![endif]-->\n
-    <!--[if lte IE 6]><table><tr><td><![endif]-->\n
-    <ul>\n
-      <li tal:repeat="sub_item menu_item/subsection">\n
-        <a href="#" tal:attributes="href sub_item/url" tal:content="sub_item/translated_title">Menu subitem 1</a>\n
-      </li>\n
-    </ul>\n
-    <!--[if lte IE 6]></td></tr></table></a><![endif]-->\n
-  </li>\n
-  <li tal:condition="not:menu_item/subsection"><a href="#" tal:attributes="href menu_item/url" \n
-          tal:content="menu_item/translated_title">Overview</a></li>\n
-</ul>\n
-\n
-</tal:block>
+                       menu_item_list python:current_web_site.WebSection_getSiteMapTree(depth=3)">\n
+  <ul tal:repeat="menu_item menu_item_list">\n
+    <li tal:condition="python: menu_item is not None"><a href="#" tal:attributes="href menu_item/url"\n
+            tal:content="menu_item/translated_title">Drop-down Menu<!--[if IE 7]><!--></a><!--<![endif]-->\n
+      <!--[if lte IE 6]><table><tr><td><![endif]-->\n
+      <ul metal:define-macro="generateTree">\n
+        <li tal:repeat="item menu_item/subsection">\n
+          <a href="#" tal:attributes="href item/url" tal:content="item/translated_title">Menu subitem 1</a>\n
+          <tal:recurse define="menu_item item"\n
+                               condition="nocall: menu_item/subsection">\n
+            <metal:call use-macro="here/WebSection_viewNavigationWidget/macros/generateTree" />\n
+          </tal:recurse>\n
+        </li>\n
+      </ul>\n
+      <!--[if lte IE 6]></td></tr></table></a><![endif]-->\n
+    </li>\n
+    <li tal:condition="not:menu_item/subsection"><a href="#" tal:attributes="href menu_item/url" \n
+            tal:content="menu_item/translated_title">Overview</a></li>\n
+  </ul>\n
+</tal:block>\n
+
 
 ]]></string> </value>
         </item>

bt5/erp5_web_multiflex5_theme/SkinTemplateItem/portal_skins/erp5_web_multiflex5_theme/mf54_grid.css.xml

@@ -159,6 +159,11 @@
 .navbar ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; background-color:<tal:block tal:replace="secondary_color"/>;}\n
 .navbar ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px <tal:block tal:replace="menu_color"/>;}\n
 .navbar ul li ul {display:none; border:none;}\n
+.navbar ul li ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px <tal:block tal:replace="menu_color"/>;}\n
+.navbar ul li ul li ul {display:none; border:none;}\n
+.navbar ul li:hover ul li ul {display:none; border:none;}\n
+.navbar ul li ul li ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px <tal:block tal:replace="menu_color"/>;}\n
+\n
 \n
 /* SUBMENU (Non-IE6 hovering) */\n
 .navbar ul li:hover {position:relative;} /*Sylvain IE hack*/\n
@@ -166,6 +171,9 @@
 .navbar ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.0em; margin-top:0.1em; left:0; padding:0px 16px 0px 16px; border-top:solid 1px rgb(215,215,215);}\n
 .navbar ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-17px; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:<tal:block tal:replace="menu_color"/>; font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/\n
 .navbar ul li:hover ul li a:hover {background-color:<tal:block tal:replace="secondary_color"/>; text-decoration:none;} /*Color subcells hovering mode*/\n
+.navbar ul li:hover ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:-0.2em; left:11.4em; padding:0px 16px 0px 16px; border-top:solid 1px rgb(215,215,215);}\n
+.navbar ul li:hover ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-17px; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:<tal:block tal:replace="menu_color"/>; font-weight:normal; color:rgb(100,100,100);}\n
+.navbar ul li:hover ul li:hover ul li a:hover {background-color:<tal:block tal:replace="secondary_color"/>; text-decoration:none;} /*Color subcells hovering mode*/\n
 \n
 /* SUBMENU (IE6 hovering) */\n
 .navbar table {position:absolute; z-index:1000; top:0px; left:-1px; border-collapse:collapse;}\n
@@ -173,6 +181,10 @@
 .navbar ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.1em; t\\op:3.0em; left:0px; marg\\in-top:0.1em; border-top:solid 1px rgb(215,215,215); }\n
 .navbar ul li a:hover ul li a {white-space:normal; display:block; w\\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:<tal:block tal:replace="menu_color"/>; font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/\n
 .navbar ul li a:hover ul li a:hover {background-color:<tal:block tal:replace="secondary_color"/>; text-decoration:none;} /*Color subcells hovering mode*/\n
+.navbar ul li a:hover ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.1em; t\\op:3.0em; left:0px; marg\\in-top:0.1em; border-top:solid 1px rgb(215,215,215); }\n
+.navbar ul li a:hover ul li a:hover ul li a {white-space:normal; display:block; w\\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:<tal:block tal:replace="menu_color"/>; font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/\n
+.navbar ul li a:hover ul li a:hover ul li a:hover {background-color:<tal:block tal:replace="secondary_color"/>; text-decoration:none;} /*Color subcells hovering mode*/\n
+\n
 \n
 /************/\n
 /*  CONTENT */\n

bt5/erp5_web_multiflex5_theme/bt/revision

-63
\ No newline at end of file
+64
\ No newline at end of file