<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta content="text/html;charset=UTF-8" http-equiv="Content-Type"></head><body >
<br>Hi Niel,<br>
<br>
Thanks for your effort in resolving the UI issue we'll test your files
in out test bed and check-in into the 5.0.3 repo if everything is fine,
else we'll get back to you if we face any issue.<br>
<br>
Regards,<br>
Philip<br><br><br><br>---- On Mon, 13 Nov 2006 <b>Neil Temperley <neil.temperley@exemail.com.au></b> wrote ---- <br><br><blockquote style="border-left: 1px solid rgb(160, 154, 255); margin: 0pt 0pt 0pt 0.8ex; padding-left: 1ex;"><div>
Dear vtiger developers,<br><br>please find attached a gzipped tar file of changes I'm suggesting to the<br>vtiger user interface to cope with the problem that long item problems do<br>not wrap correctly and resizing the browser window doesn't help. See<br>ticket my #2564 and others. I've made these corrections to SVN 9765.<br><br>In particular my aim was to make all "Detail Views" format well; wrapping<br>correctly when the user chooses to alter the width of his or her browser<br>window. In particular I wanted to ensure that fields such as Comments,<br>Notes, Description, Terms & Conditions, Mailing Street and Multi-select<br>Combo Boxes worked correctly with long items regardless of window width.<br>Also, I've ensured that these wide items (including Contact Image (i.e.<br>Photo)) now span multiple columns to provide a neater layout.<br><br>With these changes, the user has significant control over column width's and<br>layout in Detail Views by altering the two classes in the style.css file<br>".dvtCellLabel" and ".dvtCellInfo". Both of these now have a width setting<br>that you can play with. You can choose values that give you column<br>proportions pretty similar to vtiger's existing proportions, or you can<br>choose values that enable more data to be fitted to the screen.<br><br>Unfortunately, to implement these changes many files were affected because<br>these two CSS style classes .dvtCellLabel and .dvtCellInfo are used in lots<br>of places such as Change Password and Data Migration. This means that I've<br>ended up tweaking (and fixing some bugs in) lots of tables. Where<br>reasonable I've tried to replace the use of these with the more generic<br>.cellLabel and .cellInfo.<br><br>Some of the "tables" affected are as follows.<br><br>1) All "Detail Views". A Detail View shows the details for one item, e.g.<br>a Contact, a Quote etc. Detail Views are found in Contacts, Leads,<br>Potentials, Accounts, Notes, User and all the items under the Inventory tab,<br>e.g. Quotes and Invoices. <br><br>2) The Advance Filter tables used in Custom View and Reporting. These now<br>resize well and can accept long "OR" combinations of search strings.<br><br>3) Odd places (which in my mind do not really constitute a Detail View) such<br>as Change Password, Convert Lead, Calendar and Data Migration.<br><br>Files most affected are:<br>DetailViewUI.tpl, DetailView.tpl, DisplayFields.tpl and style.css of course.<br><br><br>How to proceed.<br><br>1) Untar the archive files into your vtigercrm root directory on top of a<br>SVN 9765 version.<br><br>2) Log-on to vtiger using the *** Blue Lagoon Theme ***. I've only giving<br>you a new style.css for Blue Lagoon (any other theme will look a mess with<br>no word wrapping)!!!!<br><br>3) Edit a Contact and create lots of long entries in every field you can!<br><br>4) Now resize your browser window and check that everything wraps neatly.<br><br>5) If you want to play with the layout: in themes, open<br>bluelagoon/style.css, search for .dvtCellLabel, and read my notes.<br>For experts, you may want to copy bluelagoon/style-developer.css to<br>bluelagoon/style.css. This will give you a fairly ugly colour scheme but<br>will clearly show the places that have been affected by my changes.<br><br>6) Note I reformatted the indentation of portions of the code in these files<br>where I thought indentation was poor or hard to follow.<br><br><br>Some of the things that I have learnt through this process.<br><br>1) There are multiple style classes used in vtiger and some have been used<br>inconsistently.<br>One problem is that there is no clear definition of what constitutes a<br>Detail View. This is causing confusion. For example there are multiple<br>styles defining the same heading of different tables both using Detail View<br>style classes, e.g. .detailedViewHeader and .dvInnerHeader.<br><br>I'd like to suggest that we restrict Detail View tables to those having four<br>columns: Label, Data, Label, Data. The headings for many different types<br>of tables are substantially identical. Rather than create new style for<br>every situation or table, it is probably best to minimise the number of<br>styles and use generic names such as .headingLevel2 or .selectBox where<br>possible.<br><br>2) Note that HTML statements such as <table class='small'> or <tr<br>class='small'> don't seem to propagate the font style down to cell level.<br>I'm not sure why not.<br><br>3) Note also that an HTML statement like:<br><td align="left" class="txtBox"> <br>may not do what you want since the class setting always takes precedence<br>over the "align". The better choice is this <br><td style="text-align:left;" class="txtBox"> <br>which will always work.<br><br>4) One nowrap type item in a table cell can turn off wrapping for the<br>**whole column** of data and ruin the layout. Avoid using nowrap!<br><br>5) I couldn't resize images since the HTML sizing seems to be stored with<br>the link information for the image. Photos are too large by default.<br><br>6) I don't think &nbsp; codes are required in empty data cells. In the past<br>they used to be required to ensure a cell would display properly. If you<br>need to include one, put it **after** the data not in front so that the<br>alignment of the data is not disturbed (assuming the data is left aligned),<br>e.g. <td>{$data}&nbsp;</td> NOT <td>&nbsp;{$data}</td>.<br><br><br>Please let me know if you find any formatting disasters as a result of these<br>changes. I've tried this with Firefox 1.5 and IE 6.0.<br><br>I tried hard to be neat and careful. I spent a reasonable time<br>reformatting. (Yes, I spent way way too long on this :-))<br><br>Best regards,<br>Neil<br><br>Neil Temperley<br>Skype: neil.temperley <br>_______________________________________________<br>Reach hundreds of potential candidates - <a href="http://jobs.vtiger.com">http://jobs.vtiger.com</a> <br>
</div>
</blockquote></body></html>