Anonymous | Login
Project:
RSS
  
News | My View | View Issues | Roadmap | Summary

View Issue Details[ Jump to Notes ] [ Issue History ] [ Print ]
ID
0004433
TypeCategorySeverityReproducibilityDate SubmittedLast Update
feature request[Openbravo ERP] B. User interfaceminoralways2008-07-17 13:082012-02-15 19:16
ReporterrafarodaView Statuspublic 
Assigned Torgoris 
PrioritynormalResolutionfixedFixed in Version
StatusclosedFix in branchpiFixed in SCM revisionOB3
ProjectionnoneETAnoneTarget Version
OSLinux 32 bitDatabasePostgreSQLJava version1.5
OS VersionUbuntu 7.10Database version8.3Ant version1.7
Product VersionpiSCM revision 
Review Assigned To
Web browser
ModulesCore
Regression level
Regression date
Regression introduced in release
Regression introduced by commit
Triggers an Emergency PackNo
Summary

0004433: Replace tables by DIVs where it is beneficial

DescriptionOpenbravo ERP uses tables in places where divs + css would be much more efficient since they would display a much cleaner code.

Tables are specially annoying in manual windows for the following elements:
* Report filters entry layout
* Error/Success message panel [1]
* Info/Help panel [2]
* Date field [3]
* Buttons [4]

Even if report UI pattern will be, someday, put inside Application Dictionary [5], it is important that Openbravo ERP generates a code as clean, simple and readable as possible.

[1] Current table structure for Error/Success messages panel: http://wiki.openbravo.com/wiki/Openbravo_Messages_Style_Guide#How_to_implement_it [^]

[2] Current table structure for Info/Help messages panel:

<table cellspacing="0" cellpadding="0" class="Popup_ContentPane_InfoBar">
                      <tr>
                        <td class="Popup_InfoBar_Icon_cell"><IMG src="../../../../../web/images/blank.gif" border="0" class="Popup_InfoBar_Icon_info" /></td>
                        <td class="Popup_InfoBar_text_table">
                          <table>
                            <tr>
                             <td class="Popup_InfoBar_text" id="helpDiscard"><SPAN id="paramDescription"> </SPAN></td>
                            </tr>
                          </table>
                        </td>
                      </tr>
                    </table>

[3] Current table structure for a date field:

<TD class="TextBox_btn_ContentCell">
             <TABLE border="0" cellspacing="0" cellpadding="0" summary="" style="padding-top: 0px;">
               <TR>
                 <TD class="TextBox_ContentCell">
                   <INPUT dojotype="openbravo:DateTextbox" greaterthan="paramDateFrom" displayformat="xx" saveformat="yy" class="TextBox_btn_OneCell_width required" required="true" type="text" name="inpReportDateTo" id="paramDateTo" size="10" maxlength="10" value="" onkeyup="auto_complete_date(this.textbox, this.displayFormat);return true;"></INPUT><SCRIPT>djConfig.searchIds.push("paramDateTo");</SCRIPT>
                      </TD>
                      <TD class="FieldButton_ContentCell">
                        <a class="FieldButtonLink" href="#" onfocus="setWindowElementFocus(this); window.status='xx'; return true;" onblur="window.status=''; return true;" onkeypress="this.className='FieldButtonLink_active'; return true;" onkeyup="this.className='FieldButtonLink_focus'; return true;">
                        <table class="FieldButton" onclick="showCalendar('frmMain.inpReportDateTo', document.frmMain.inpReportDateTo.value, false);return false;" onmouseout="this.className='FieldButton';window.status='';return true;" onmouseover="this.className='FieldButton_hover';window.status='Show calendar';return true;" onmousedown="this.className='FieldButton_active';return true;" onmouseup="this.className='FieldButton';return true;">
                        <TR>
    
                          <TD class="FieldButton_bg">
                            <IMG alt="Calendar" class="FieldButton_Icon FieldButton_Icon_Calendar" title="Calendar" src="../../../../../web/images/blank.gif" border="0"></IMG>
                          </TD>
                        </TR>
                      </TABLE>
                      </a>
                      </TD>
                    </TR>
                  </TABLE>
                </TD>

[4] Current structure for a button:

<td class="Button_LeftAlign_ContentCell">
              <div>
                <a class="ButtonLink" href="#" onfocus="setWindowElementFocus(this); window.status='Process'; return true;" onblur="window.status=''; return true;" onkeypress="this.className='ButtonLink_active'; return true;" onkeyup="this.className='ButtonLink_focus'; return true;" onclick="submitCommandForm('SAVE', true);return false;" id="buttonProcess">
                <table class="Button" onmouseout="this.className='Button';window.status='';return true;" onmouseover="this.className='Button_hover';window.status='Process';return true;" onmousedown="this.className='Button_active';return true;" onmouseup="this.className='Button';return true;">
                  <tr>
                    <td class="Button_left"><img class="Button_Icon Button_Icon_process" alt="Process" title="Process" src="../web/images/blank.gif" border="0" /></td>
                    <td class="Button_text Button_width">Process</td>
                    <td class="Button_right"></td>
                  </tr>
                </table>
                </a>
              </div>
            </td>

[5] https://issues.openbravo.com/view.php?id=4194 [^]
Steps To ReproduceGo to 'Sales Management || Analysis Tools || Sales Dimensional Report', right click on HTML and select 'This Frame > View Frame Source'.
TagsPerformance, ReleaseCandidate, ToBeReviewed
Attached Files

- Relationships [ Relation Graph ] [ Dependency Graph ]
blocks feature request 0006445 closedrgoris Project XL - umbrella 

-  Notes
(0008321)
iperdomo (reporter)
2008-07-17 13:27

 Tables should not be used to layout the interface, but to list items/results.

http://www.w3.org/2002/03/csslayout-howto [^]
(0025779)
rafaroda (developer)
2010-03-29 15:23

 See current UI components HTML code http://wiki.openbravo.com/wiki/ERP/2.50/Developers_Guide/Concepts/UI/Look_and_feel [^]

- Issue History
Date Modified Username Field Change
2008-07-17 13:08 rafaroda New Issue
2008-07-17 13:08 rafaroda Assigned To => cromero
2008-07-17 13:09 rafaroda sf_bug_id 0 => 2020506
2008-07-17 13:27 iperdomo Note Added: 0008321
2008-11-10 13:10 cromero Assigned To cromero => pjuvara
2008-11-16 15:26 pjuvara Status new => acknowledged
2008-11-16 15:26 pjuvara Tag Attached: Performance
2008-11-16 15:27 pjuvara Tag Attached: ReleaseCandidate
2008-11-16 15:27 pjuvara Tag Attached: ToBeReviewed
2008-12-10 10:53 pjuvara Assigned To pjuvara => rgoris
2009-04-08 11:44 rafaroda Relationship added blocks 0006445
2010-03-11 10:30 rafaroda Issue Monitored: rafaroda
2010-03-29 15:23 rafaroda Note Added: 0025779
2012-02-15 19:16 rgoris Status acknowledged => scheduled
2012-02-15 19:16 rgoris fix_in_branch => pi
2012-02-15 19:16 rgoris Status scheduled => resolved
2012-02-15 19:16 rgoris Fixed in SCM revision => OB3
2012-02-15 19:16 rgoris Resolution open => fixed
2012-02-15 19:16 rgoris Status resolved => closed

Copyright © 2000 - 2009 MantisBT Group
Powered by Mantis Bugtracker