dom objekte reduziert, spacer entfernt, rendering auf 150ms beschleunigt
authorSven Schöling <s.schoeling@linet-services.de>
Tue, 4 Sep 2012 12:11:20 +0000 (14:11 +0200)
committerSven Schöling <s.schoeling@linet-services.de>
Wed, 17 Oct 2012 13:53:19 +0000 (15:53 +0200)
bin/mozilla/menu.pl
css/lx-office-erp/menu.css
templates/webpages/menu/menu.html

index eb71707..fd66bfa 100644 (file)
@@ -103,7 +103,7 @@ sub section_menu {
     my $menuitem   = $menu->{$item};
     my $label      = apply { s/.*--// } $item;
     my $ml         = apply { s/--.*// } $item;
-    my $spacer     = $nbsp x (($item =~ s/--/--/g) * 2);
+    my $spacer     = "spacer" . (0 + $item =~ s/--/--/g);
     my $label_icon = $level . "--" . $label . ".png";
 
     next if $level && $item ne "$level--$label";
@@ -132,6 +132,7 @@ sub section_menu {
         label    => $label,
         height   => 24,
         class    => 'menu',
+        spacer   => $spacer,
         subitems => section_menu($menu, $item)
       );
     } elsif ($menuitem->{submenu}) {
@@ -165,7 +166,7 @@ sub make_item {
 
   return {
     %params,
-    chunks => [ multiline($params{label}) ],
+#    chunks => [ multiline($params{label}) ],
   };
 }
 
@@ -206,7 +207,7 @@ sub make_image {
     src     => $icon_found ? _icon_path($icon, $size) : "image/unterpunkt.png",
     alt     => $params{label},
     width   => $icon_found ? $size : 24,
-    height  => $size,
+    height  => $icon_found ? $size : 15,
   }
 }
 
index e57a6e3..b81f422 100644 (file)
@@ -291,15 +291,19 @@ div#menuv4 li li li li:hover ul
 /* End of non-anchor hover selectors */
 
 
-#html-menu { float:left; white-space: nowrap; }
+#html-menu { float:left; }
 #html-menu tr { vertical-align: top; }
-#html-menu div.menuitem { padding: 2px 4px 1px 4px; }
+#html-menu div.menuitem { padding: 2px 0px 2px 0px; white-space: nowrap; }
 #html-menu div.submenu { font-weight: bold }
-#html-menu img { vertical-align: middle; visibility:hidden; border: 0; }
-#html-menu div.menuitemchunk:first-child img { visibility:visible }
+#html-menu img { vertical-align: middle; border: 0; }
 #html-menu a { vertical-align: top }
 #html-menu .item span.menu-spacer { display: inline-block; width: 24px }
-#html-menu .menu span.menu-spacer { display: inline-block; width: 32px }
-#html-menu div.menu div.menuitemchunk { color:blue;}
-#html-menu div.menu div.menuitemchunk:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
+#html-menu .menu span.menu-spacer { display: inline-block; width: 28px }
+#html-menu div.menu span.menuitemchunk { color:blue; }
+#html-menu div.menu span.menuitemchunk:hover { color:blue; background-color: lemonchiffon; cursor: pointer; }
+#html-menu span.menuitemchunk { white-space: normal; }
+#html-menu .spacer0 { position:relative; left: 2px }
+#html-menu .spacer1 { position:relative; left: 6px }
+#html-menu .spacer2 { position:relative; left: 12px }
+
 
index 0a36471..ce9cb28 100644 (file)
@@ -2,7 +2,7 @@
 <body class="menu">
 
 <div id='html-menu'>
-  [% INCLUDE sections %]
+  [% PROCESS sections %]
 </div>
 <script type='text/javascript'>
   $(function(){
 </html>
 [%- BLOCK sections %]
 [%- FOREACH item IN sections %]
- <div class='menu-multiline'>
- [% SET menuouterloopcount = loop.count %]
-  <div id='menuitem[% menulevel %]_[% menuouterloopcount %]' class='menuitem [% item.class %] hover'>
-   [%- FOREACH chunk IN item.chunks %]
-   <div class='menuitemchunk hover'>[% PROCESS item %]</div>
-   [%- END %]
-  </div>
-   [%- IF item.subitems.size %]
-   <div id='menuitem[% menulevel %]_[% loop.count %]_submenu' class='menu-submenu[% menulevel %]'>
-   [% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %]
-   </div>
-  [%- END %]
- </div>
-[%- END %]
-[%- END  %]
-[%- BLOCK item %]
-  [% item.spacer %]
+ <div id='menuitem[% menulevel %]_[% loop.count %]' class='menuitem menuitemchunk [% item.spacer %] [% item.class %] hover'>
   [%- IF item.href %]
-    [% L.link(item.href, L.html_tag('span', L.img_tag(item.img), class='menu-spacer') _ chunk, class='menu-link', target=item.target) %]
+     <a href="[% item.href | html %]" class='menu-link' target='[% item.target %]'><span class="menuitemicon menu-spacer">[% L.img_tag(item.img) %]</span><span class='menuitemchunk hover'>[% item.label %]</span></a>
   [%- ELSE %]
-    [% L.html_tag('span', L.img_tag(item.img), class='menu-spacer') _ chunk %]
+   <span class="menuitemicon menu-spacer">[% L.img_tag(item.img) %]</span><span class='menuitemchunk hover'>[% item.label %]</span>
   [%- END %]
+ </div>
+ [%- IF item.subitems.size %]
+  <div id='menuitem[% menulevel %]_[% loop.count %]_submenu' class='menu-submenu[% menulevel %]'>
+   [% INCLUDE sections sections=item.subitems, menulevel= menulevel _ '_' _ loop.count %]
+  </div>
+ [%- END %]
 [%- END %]
+[%- END  %]