Hastymail2

Hastymail2 is an Open Source IMAP webmail client written in PHP. Our focus is compliance, usability, security, and speed.

Hastymail 2

avatar
Two more UI nitpicks

Jason: Thanks so much for the ongoing development and support of HM...it really is a great product and I feel like a schnook for pointing out niggling UI issues <g>...but what doesn't kill us makes us stronger right?

Two things I noticed after upgrading to rc8...not sure if they were always there but they seem to be more noticeable now. My typical config is Chrome on Win 7 btw.

1) status updates in hidden div: Having the status updates appear in a hidden div that changes I'm guessing from "block" to "hidden" and back at the top of the page makes the rest of the content below it shift vertically.

For example if you view a message and then click the "delete and go to inbox" at the upper right, you see a message at the inbox "message deleted" for a couple seconds at the top of the page.

Frequently I'm trying to click on a button or message and the content suddenly shifts up as I click, so I end up clicking the wrong message or button...it seems that the delay-before-hide is synchronized with my visual processing so the page always shifts before a mouse click <g>.

I don't know if this is the behavior on all the themes or not...I just tried it on the default and "aqua" themes (I usually just use the default theme), but it seems like the message behavior is consistent for all status messages?

It seems like leaving sufficient space and just using an inline div instead of the block in CSS would be better?

2) On the default theme, in the "options", each setting has an "onmouseover" that changes the CSS to highlight the option, usually with a different background + border. On the options with the longest text (like "open a popup window when a new message arrives"), the additional width of the div forces elements in the second column (the drop-downs and checkboxes) to wrap, changing the lineheights of the elements above that row, and forcing it down the page below the mouse cursor...kind of hard to explain...but it makes the page "shift" rapidly up and down in a disorienting way. 

This occurs on both IE8 and Chrome btw. Also, on both that setting and the one above it ("play a sound when a message arrives"), the description text says "could not find that setting"--but only in IE8, not in Chrome!

In my personal web-design experience, I've had this occur time and again in cross-browser CSS-related effects, and in the end I stay away from CSS effects that change any padding or margins explicitly or implicitly (like adding a border, or changing text from 'normal' to 'bold', etc.).

I realize these are minor UI issues, but anything that makes text shift on screen abruptly is always disconcerting. I think you've mentioned before that browser-specific formatting is a real bear, and I can relate!

Thanks again for all your hard work on HM2...other than very minor issues it is working great!

Reply /Quote
avatar
Two more UI nitpicks

The status updates that you are referring to can be reverted to the older style by disabling the js_notice plugin in your config. I would have used a more inline approach but I had trouble making it fit well so I tried to do something similar to the way firefox notifies you about blocking pop ups or saving a password.

The js_help plugin that adds the mouse over help to the options page changes the text to bold and adds a border, which I believe is the reason you are experiencing the page "shifting. You can alter this by editing hastymail2/plugins/js_help/work.php lines 64 - 66.

I will see what I can do to address both of these issues in future releases of each plugin. Thanks for the feedback,
Jason

Reply /Quote
avatar
re: UI Nitpicks

Thanks Jason, I'll try disabling for now...perhaps the notification could be moved to the bottom of the navbar right above the content pane? Then at least the button positions would not change when you're trying to read-deletenext, read-deletenext?

Is this something I could "fiddle" with from the source to try to find an alternate method? I doubt if I have the capability to make a contribution but I would try if possible. 

Reply /Quote
avatar
re: UI Nitpicks

The js_notices plugin is integrated with the themes so you could use the css entry called #js_notices in each themes main.css file to alter the layout of the notice. If you were using the default theme you would edit:

hastymail2/themes/default/css/main.css

Near the bottom you will find the #js_notices entry that defines the style for the notice div.

Hope that helps,
Jason

Reply /Quote
avatar
Re: Two more UI nitpicks

Both of these issues have been addressed in the current SVN (as of revision 1293).

Thanks for the feedback,
Jason

Reply /Quote
Get Hastymail at SourceForge.net. Fast, secure and Free Open Source software downloads