[Tickets #902] NEW: Menu Fix

[bugs at bugs.horde.org]

DO NOT REPLY TO THIS MESSAGE. THIS EMAIL ADDRESS IS NOT MONITORED.

Ticket URL: http://bugs.horde.org/ticket/?id=902
-----------------------------------------------------------------------
 Ticket     | 902
 Created By | lee at disinfo.com
 Summary    | Menu Fix
 Queue      | Horde Base
 Version    | 3.0-RC2
 State      | Unconfirmed
 Priority   | 3. High
 Type       | Bug
 Owners     | 
-----------------------------------------------------------------------


lee at disinfo.com (2004-11-25 21:53) wrote:

in RC1 the menu list scrolled off the screen to the right cutting things off
(when the foldernames were more than x chars long), creating a long bottom
scroll bar. RC2 remedied this problem, but caused folder names to wrap to a
new line below their icon (firefox/mozilla) - which looks much worse.

Using some fun CSS properties and a little tweaking of the code ive fixed
the problem. In the code below the folder names do not wrap, they just get
cut off when the frame ends, they also dont cause the whole frame to expand
right the length of the longest menu item. In IE things are a little cooler,
the folder names actually get elipsed (i.e. longfoldernamehere becomes
longfoldernameh... right before the frame's right barrier. 

Tested in mozilla and IE, looks alot better than before to me.

Here are the two diff files (not at an expert in submitting diffs, i just
made them running the straight old diff command with teh two files as
arguments). If you need a different format diff let me know.

1) HORDE: TEMPLATES/PORTAL/SIDEBAR.INC:

1,2c1,2
< <div id="expandedSidebar" style="width: width:<?php if
($GLOBALS['browser']->hasQuirk('scrollbar_in_way')) { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-35) : 133; } else { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-50) : 150; } ?>; overflow: hidden;
padding: 0; margin: 0;">
<  <div id="menu" style="width: width:<?php if
($GLOBALS['browser']->hasQuirk('scrollbar_in_way')) { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-35) : 133; } else { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-50) : 150; } ?>; overflow: hidden;
padding: 0; margin: 0;">
---
> <div id="expandedSidebar">
>  <div id="menu">
21a22
>  </div>
23,24c24,26
< </div> 
< <div id="sidebarPanel" style="overflow: hidden; width: width:<?php if
($GLOBALS['browser']->hasQuirk('scrollbar_in_way')) { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-35) : 133; } else { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-50) : 150; } ?>; text-overflow:ellipsis;
white-space:nowrap;">
---
>  <table cellspacing="0" width="100%">
>   <tr>
>    <td valign="top" id="sidebarPanel" width="100%" colspan="2">
26c28,31
< </div>
---
>    </td>
>    <td>&nbsp;</td>
>   </tr>
>  </table>


2) TEMPLATES/JAVASCRIPT/TREE.JS:

165c165
<     var line = '<div style="height:20px; clear:both;
text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:<?php if
($GLOBALS['browser']->hasQuirk('scrollbar_in_way')) { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-35) : 133; } else { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-50) : 150; } ?>;' + className + '>';
---
>     var line = '<div style="height:20px; clear:both"' + className + '>';
175,176c175,176
<             style = 'float:left; text-overflow:ellipsis; overflow:hidden;
white-space:nowrap; width:<?php if
($GLOBALS['browser']->hasQuirk('scrollbar_in_way')) { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-35) : 133; } else { echo isset($prefs) ?
($prefs->getValue('sidebar_width')-50) : 150; } ?>;';
<             /*if (this.header[column] && this.header[column]['width']) {
---
>             style = 'float:left;';
>             if (this.header[column] && this.header[column]['width']) {
178c178
<             }*/
---
>             }
261a262
>     alert(line);
474c475
<         document.body.style.marginRight = '0px';
---
>         document.body.style.marginRight = '15px';

2)