[Vtigercrm-developers] Files to fix word wrapping of long items and general column layout

[neil.temperley at exemail.com.au]

Hi Dennis,

Basically what I did was reduce the number of hard wired overrides to the
default style to a minimum and I also eliminated nowraps.  A nowrap on one
cell will often affect a whole column.

Since a 4 column "Detail View" is a standard table layout, I was able to
move the column width info into style.css.  This gives a knowledgable user
nice control over the relative column widths of a "Detail View" by
tweaking column width settings.

But the biggest gain is that all columns resize correctly to the window
width of the user's browser.  This is really nice.  Any user can resize
the window to suit their preference and the columns self adjust and wrap
accordingly.

Since the browser does the wrapping work it works with AJAX (and
multibyte) without additional coding.

Finally I was able to maximise the space for Notes and Descriptions etc by
getting them to span the full row.


BTW, several months back I helped implement code to force a wrap of
Multi-select combo box lists in Smarty, but this (as you know) required a
matching JavaScript fix for AJAX as well.  I always felt this was a
kludge; a hardwired column width that ignores the users browser window
should be avoided if possible.  With the new files I removed the 'kludge'.

regards,
Neil

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