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

[Dennis Grant]

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 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.vtigercrm.com/pipermail/vtigercrm-developers/attachments/20061116/84365744/attachment-0004.html