6.0.0-beta1
7/28/25

[#902] Menu Fix
Summary Menu Fix
Queue Horde Base
Queue Version 3.0-RC2
Type Bug
State Resolved
Priority 2. Medium
Owners Horde Developers (at)
Requester lee (at) disinfo (dot) com
Created 11/26/2004 (7549 days ago)
Due
Updated 12/04/2004 (7541 days ago)
Assigned 12/02/2004 (7543 days ago)
Resolved 12/04/2004 (7541 days ago)
Github Issue Link
Github Pull Request
Milestone
Patch No

History
12/04/2004 11:02:57 PM Chuck Hagenbuch Comment #13
State ⇒ Resolved
Reply to this comment
Lee may submit some additional patches but this is certainly no longer a bug.
12/02/2004 08:10:23 PM Chuck Hagenbuch Comment #12
State ⇒ Feedback
Reply to this comment
If you submit a patch against HEAD that doesn't have width: width 
(double specification) , touches the fewest possible lines, and has 
cleaner width determination code, I'll look at it. The PDF looks nice 
enough to make me reconsider a bit.
12/02/2004 06:00:17 PM Jan Schneider Comment #11 Reply to this comment
The difference to these applications is that you can easily resize the 
menu in these applications; in Horde you need to go to the options and 
change it from there, trying as long until all folders appear.
12/02/2004 05:49:50 PM lee (at) disinfo (dot) com Comment #10
New Attachment: Picture 1.pdf Download
Reply to this comment
Of course in the end its up to you, but it seems to me like if we can 
definitively improve the usability of imp/horde, even just slightly, 
with just a few lines of code thats already written, why not do it? 
While my coding abilities are passable, my area of expertise is much 
closer to UI design as it relates to usability. In this case i really 
believe there is a good reason that almost every desktop mail client 
(Mac Mail, Outlook etc..) horizontally truncate the folder list with 
ellipses, as opposed letting it run off to the right with horizontal 
scroll bars. When a user sees text cut off, they get an implicit sense 
of something being broken. The ellipses say "there is more to these 
names, and its not broken, but you have set the frame set to something 
that needs to truncate teh text. Aesthetically, maintaining a 
consistent spacial border improves overall look. If i had a spare 
week, id spend the time writing truncation/ellipses code in javascript 
that would extend this to mozilla as well as IE.



Anyway, thats my 2cents. I wont bring it up again, its up to you.
12/02/2004 03:09:20 PM Chuck Hagenbuch Comment #9 Reply to this comment
I'm happy with things are now in CVS - some cleanups and tweaks with 
what I applied. Nothing wraps to a new line, and that's the important 
part. Scrollbars are okay on the menu frame, since they ensure that 
everything can be seen, and people can adjust their sidebar width in 
their preferences anyway.
12/02/2004 03:30:18 AM lee (at) disinfo (dot) com Comment #8 Reply to this comment
diff -u it is!



The width stuff is essential for two things in Internet Explorer:



1) With the diff you applied there are no ellipses. The width stuff 
forces the div to end and create the ellipses. This makes things much 
cleaner looking.



2) With the diff you applied, the text in the menu forces the left 
menu page to extend as far to the right as the text will take it. This 
can create a long horizontal scroller in the left menu frame. With teh 
width stuff in tact, this doesnt happen, again making things look much 
cleaner.



If you want to see this in action, try applying your modified diff vs. 
the original i submitted with an account with a multi-level folder 
tree (particularly if there are some long folder names) in Internet 
Explorer. You'll see a pretty significant difference (i just tried it 
on my local install to confirm this).
12/02/2004 02:40:51 AM Chuck Hagenbuch Comment #7
State ⇒ Resolved
Reply to this comment
You should look into cvs diff -u :) But the general idea looks good; 
I've committed the patch minus the width specifications, which don't 
seem necessary to me.
12/01/2004 08:15:48 PM lee (at) disinfo (dot) com Comment #6 Reply to this comment
I dont know how to make a combined patch, but here are the individual 
patches in one file. I removed the commented stuff, and rebuilt the 
patch off a 100% stock download, so it should apply without warnings.
12/01/2004 08:14:43 PM   New Attachment: diff_total.lee Download
 
12/01/2004 04:26:41 PM Jan Schneider Comment #5
State ⇒ Feedback
Reply to this comment
Can please upload a clean unified patch? This patch didn't apply 
cleanly, there is a stray "alert" in there and some outcommented code.
11/29/2004 12:13:14 AM Jan Schneider Comment #4 Reply to this comment
I didn't try the patch, but the description sounds okay.
11/26/2004 11:00:04 PM Chuck Hagenbuch Priority ⇒ 2. Medium
 
11/26/2004 10:59:43 PM Chuck Hagenbuch Comment #3
Assigned to Horde DevelopersHorde Developers
State ⇒ Assigned
Reply to this comment
I think I'm fine with this change - what do other folks think?
11/26/2004 05:56:45 AM lee (at) disinfo (dot) com Comment #2 Reply to this comment
think i reversed the diff, lets try this again:



1) diff templates/portal/sidebar.inc.orig templates/portal/sidebar.inc.new



1,2c1,2

< <div id="expandedSidebar">

<  <div id="menu">

---

[Show Quoted Text - 10 lines]
22d21

<  </div>

24,26c23,24

<  <!--a75c305b1c0a6022--><table cellspacing="0" width="100%">

<   <tr>

<    <td valign="top" id="sidebarPanel" width="100%" colspan="2">

---
</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;">
28,31c26

<    </td>

<    <td>&nbsp;</td>

<   </tr>

<  </table>

---
</div>
2) diff templates/javascript/tree.js.orig templates/javascript/tree.js.new



165c165

<     var line = '<div style="height:20px; clear:both"' + className + '>';

---
     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 + '>';
175,176c175,176

<             style = 'float:left;';

<             if (this.header[column] && this.header[column]['width']) {

---
             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']) {
178c178

<             }

---
             }*/
262d261

<     alert(line);

475c474

<         document.body.style.marginRight = '15px';

---
         document.body.style.marginRight = '0px';
11/26/2004 05:53:01 AM lee (at) disinfo (dot) com Comment #1
Priority ⇒ 3. High
Type ⇒ Bug
Summary ⇒ Menu Fix
Queue ⇒ Horde Base
State ⇒ Unconfirmed
Reply to this comment
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;">

---
  <!--a75c305b1c0a6022--><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)

Saved Queries