OFBiz
  1. OFBiz
  2. OFBIZ-241

CSS Layout and Other Cleanups in the Manager Applications

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Duplicate
    • Affects Version/s: Trunk
    • Fix Version/s: None
    • Component/s: framework
    • Labels:
      None

      Description

      Copy of http://jira.undersunconsulting.com/browse/OFBIZ-202 from David Jones

      =======================================================

      The purpose of this task is to improve the current CSS based layout, and separate it from the ecommerce application so they do not interfere with eachother. There are some issues with the layout, and lots of room for improvement including in some cases chaging table-based layouts to CSS based, and making styles and HTML structure cleaner and more flexible. This is not meant to be nearly as aggessive an effort as in ecommerce, and is meant more for general improvements and not to facilitate extremely flexible customization and such as is the case in ecommerce.

      I would like to propose the removal of all redundant style info... for example, nearly all <div class="tabletext"> wrappers can be removed, the exception being where they are used like <p>s - the default text style can be set on body; all "inputBox", "selectBox", "smallSubmit" styles can be removed - can style input elements globally; remove embedded style="margin: 0" on forms, style forms globally; change <div class="head1|head2|head3"> to <h1|h2|h3>, etc. (Just the ones off the top of my head, I'm sure there are more.)

      I would be happy to help with this, but due to the large number of files affected, it will probably need to be coordinated with any other css work.

      I agree with this approach Joe. It is much more flexible and will reduce the HTML size a fair bit, and with proper labelling of different areas it can be very flexible too. This is what I've done with the ofbiz.org home page.

      You're right about this requiring a lot of changes in lots of different files. I'm not sure what the best way to manage this is, but to get it started it is probably best to choose 2-3 "proof of concept" pages and get those cleaned up, and then solicit help with others based on those.

      Of course, chances are no one except the core group will help anyway, but I always find it entertaining to try...

      I would be willing to help as well, if you like. I have converted my ecommerce site already to css (www.heatwithsolar.com). Since my goal is to use OFBiz on my site, I have a strong desire to retain CSS level 1 capability. I have no real need to go to a higher standard of CSS yet until it is supported by more browsers.

      As soon as I get an SVN up and running well, I'll likely start working on this anyways. Just let me know. stephen.cumminger@heatwithsolar.com

      1. content.menu-widget.patch
        8 kB
        Mike Wong
      2. content.menu-widget.patch
        2 kB
        Mike Wong
      3. manufacturing.remove.tabButton.patch
        15 kB
        Mike Wong
      4. marketing.menu-widget.patch
        5 kB
        Mike Wong
      5. order.remove.tabButton.patch
        15 kB
        Mike Wong
      6. style-info.txt
        3 kB
        Joe Eckard

        Issue Links

          Activity

          Hide
          Joe Eckard added a comment -

          I've just attached a file containing an up-to-date list of the IDs and classes used in the ofbiz ftl files. In the past I've used this list to help clean up / reorganize the ofbiz manager application templates - hopefully this will be helpful for someone working on this issue. The series of commands that generates this list is:

          find . -name ".ftl" | xargs perl -ne "if (/ (id|class)=['\"]([0-9A-Za-z-_]+)['\"]*/)

          {print ((\$1 eq \"id\") ? '#' : '.');print \"\$2\n\";}

          " | sort | uniq -c

          Unfortunately this will miss the ones defined in widgets and those that have bits of freemarker (for example, class="$

          {class}

          ", class="<#if ..."), but it should catch most of them.

          Show
          Joe Eckard added a comment - I've just attached a file containing an up-to-date list of the IDs and classes used in the ofbiz ftl files. In the past I've used this list to help clean up / reorganize the ofbiz manager application templates - hopefully this will be helpful for someone working on this issue. The series of commands that generates this list is: find . -name " .ftl" | xargs perl -ne "if (/ (id|class)= ['\"] ( [0-9A-Za-z-_] +) ['\"] */) {print ((\$1 eq \"id\") ? '#' : '.');print \"\$2\n\";} " | sort | uniq -c Unfortunately this will miss the ones defined in widgets and those that have bits of freemarker (for example, class="$ {class} ", class="<#if ..."), but it should catch most of them.
          Hide
          Adrian Crum added a comment -

          OFBIZ-633 is the "sandbox" issue where the "proof of concept" ideas go.

          Show
          Adrian Crum added a comment - OFBIZ-633 is the "sandbox" issue where the "proof of concept" ideas go.
          Hide
          Adrian Crum added a comment -

          I believe the best way to coordinate this is to have someone take each component and make all of the necessary cahnges to that component.

          The drawback to the way this got started is that different contributors are overlapping each other's work. Instead of having one contributor making one type of change to multiple components, have that contributor make all of the suggested changes to a single component.

          Show
          Adrian Crum added a comment - I believe the best way to coordinate this is to have someone take each component and make all of the necessary cahnges to that component. The drawback to the way this got started is that different contributors are overlapping each other's work. Instead of having one contributor making one type of change to multiple components, have that contributor make all of the suggested changes to a single component.
          Hide
          Adrian Crum added a comment -

          David and Jacopo,

          If there are no objections, I'd like to use this issue as the "umbrella" issue for the UI Refactoring initiative - since it seems to be in that role anyway.

          Show
          Adrian Crum added a comment - David and Jacopo, If there are no objections, I'd like to use this issue as the "umbrella" issue for the UI Refactoring initiative - since it seems to be in that role anyway.
          Hide
          Adrian Crum added a comment -

          Menu Widget Refactor Guidelines

          This document describes the steps needed to refactor the back-office components to use the new menu widget. Steps are to be applied to the menu widget xml files.

          -----------------------------------------------------

          Delete references to the tabButton style.

          Change all

          default-selected-style="tabButtonSelected"

          to

          default-selected-style="selected".

          Delete orientation="horizontal" and orientation="vertical". The menu widget renders a simple unordered list, so the menus are vertical by default. Horizontal menus must be styled with a horizontal menu CSS style (see the maincss.css file). You can specify a horizontal menu style by using the menu-container-style property.

          Delete default-widget-style, default-tooltip-style.

          Example - before refactor:

          <menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="tabButtonSelected"
          default-title-style="tabButton" default-tooltip-style="tooltip" default-widget-style="tabButton"
          orientation="horizontal" type="simple">
          ...
          </menu>

          Example - after refactor:

          <menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="selected"
          type="simple" menu-container-style="button-bar button-style-1">
          ...
          </menu>

          Show
          Adrian Crum added a comment - Menu Widget Refactor Guidelines This document describes the steps needed to refactor the back-office components to use the new menu widget. Steps are to be applied to the menu widget xml files. ----------------------------------------------------- Delete references to the tabButton style. Change all default-selected-style="tabButtonSelected" to default-selected-style="selected". Delete orientation="horizontal" and orientation="vertical". The menu widget renders a simple unordered list, so the menus are vertical by default. Horizontal menus must be styled with a horizontal menu CSS style (see the maincss.css file). You can specify a horizontal menu style by using the menu-container-style property. Delete default-widget-style, default-tooltip-style. Example - before refactor: <menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="tabButtonSelected" default-title-style="tabButton" default-tooltip-style="tooltip" default-widget-style="tabButton" orientation="horizontal" type="simple"> ... </menu> Example - after refactor: <menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="selected" type="simple" menu-container-style="button-bar button-style-1"> ... </menu>
          Hide
          Adrian Crum added a comment -

          Misc UI Refactor Guidelines

          This document describes the steps needed to refactor the back-office components to eliminate embedded styling and make better use of CSS styling.

          The following CSS styles are deprecated and should be removed:

          inputBox - not needed
          selectBox - not needed
          textAreaBox - not needed
          tabletext - not needed
          sepbar - not needed
          viewManyTR1 - not needed
          treeitem - not needed

          The following CSS styles are deprecated and should be refactored/replaced. Each instance needs to be evaluated to determine the best way to refactor its usage.

          tableheadtext - If it's used in a <td> element, then use the basic-table CSS class on the table and the header-row CSS class on its enclosing <tr> element OR convert the <td> element to a <th> element. If it is being used without a table to make text bold, then use <b></b> instead.

          bothclear, endcolumns - Replace with clear.

          viewManyTR2 - Use the basic-table CSS class on the table and replace viewManyTR2 with alternate-row.

          col-right - Use one of the new container CSS styles, then change this to opposed.

          tabContainer - convert menu to new CSS style "button-bar" plus one of its decorators.

          tabButtonSelected - perform above step, then change this to selected.

          head1, head2, head3 - can be replaced with <h> elements in many, but not all cases.

          Example:

          <table width="100%" border="1" cellspacing="0" cellpadding="0">
          <tr>
          <td><div class="tableheadtext">Column 1 Header</div></td>
          ...
          </tr>
          </table>

          becomes

          <table class="basic-table dark-grid" cellspacing="0">
          <tr class="header-row">
          <td>Column 1 Header</td>
          ...
          </tr>
          </table>

          or

          <table class="basic-table dark-grid" cellspacing="0">
          <tr>
          <th>Column 1 Header</th>
          ...
          </tr>
          </table>

          Example:

          <div>
          <div class="tableheadtext">Some bold text</div>
          </div>

          becomes

          <div>
          <b>Some bold text</b>
          </div>

          Example:

          <div class="head1">Big bold text</div>

          becomes

          <h1>Big bold text</h1>

          Show
          Adrian Crum added a comment - Misc UI Refactor Guidelines This document describes the steps needed to refactor the back-office components to eliminate embedded styling and make better use of CSS styling. The following CSS styles are deprecated and should be removed: inputBox - not needed selectBox - not needed textAreaBox - not needed tabletext - not needed sepbar - not needed viewManyTR1 - not needed treeitem - not needed The following CSS styles are deprecated and should be refactored/replaced. Each instance needs to be evaluated to determine the best way to refactor its usage. tableheadtext - If it's used in a <td> element, then use the basic-table CSS class on the table and the header-row CSS class on its enclosing <tr> element OR convert the <td> element to a <th> element. If it is being used without a table to make text bold, then use <b></b> instead. bothclear, endcolumns - Replace with clear. viewManyTR2 - Use the basic-table CSS class on the table and replace viewManyTR2 with alternate-row. col-right - Use one of the new container CSS styles, then change this to opposed. tabContainer - convert menu to new CSS style "button-bar" plus one of its decorators. tabButtonSelected - perform above step, then change this to selected. head1, head2, head3 - can be replaced with <h> elements in many, but not all cases. Example: <table width="100%" border="1" cellspacing="0" cellpadding="0"> <tr> <td><div class="tableheadtext">Column 1 Header</div></td> ... </tr> </table> becomes <table class="basic-table dark-grid" cellspacing="0"> <tr class="header-row"> <td>Column 1 Header</td> ... </tr> </table> or <table class="basic-table dark-grid" cellspacing="0"> <tr> <th>Column 1 Header</th> ... </tr> </table> Example: <div> <div class="tableheadtext">Some bold text</div> </div> becomes <div> <b>Some bold text</b> </div> Example: <div class="head1">Big bold text</div> becomes <h1>Big bold text</h1>
          Hide
          Si Chen added a comment -

          Would you mind putting the deprecated styles into a file somewhere?

          Show
          Si Chen added a comment - Would you mind putting the deprecated styles into a file somewhere?
          Show
          Adrian Crum added a comment - Si, http://docs.ofbiz.org/display/OFBIZ/Back+Office+Applications+UI+Refactor
          Hide
          Jacopo Cappellato added a comment -

          Adrian,

          thanks for your notes, they are really helpful.
          One question:
          what is the best way to style the following labels in screen widgets?

          <container>
          <label style="head1">$

          {uiLabelMap.ManufacturingManageCostComponentCalc}

          </label>
          </container>

          Thanks

          Show
          Jacopo Cappellato added a comment - Adrian, thanks for your notes, they are really helpful. One question: what is the best way to style the following labels in screen widgets? <container> <label style="head1">$ {uiLabelMap.ManufacturingManageCostComponentCalc} </label> </container> Thanks
          Hide
          Adrian Crum added a comment -

          Jacopo,

          As far as I know, that is the only way to style bits of text in the screen widget. I have some proposals in mind that I will be presenting to the dev ml soon which will address things like that.

          Show
          Adrian Crum added a comment - Jacopo, As far as I know, that is the only way to style bits of text in the screen widget. I have some proposals in mind that I will be presenting to the dev ml soon which will address things like that.
          Hide
          Mike Wong added a comment -

          Hi,

          After playing with ofbiz about a year, I think it is time to start doing something for ofbiz.

          I'm planning to spend an hour each day for this task.

          After exploring a bit on the JIRA I think I'm able to help a bit on this ticket.

          Can anyone point me a way to start?

          Thanks
          Mike

          Show
          Mike Wong added a comment - Hi, After playing with ofbiz about a year, I think it is time to start doing something for ofbiz. I'm planning to spend an hour each day for this task. After exploring a bit on the JIRA I think I'm able to help a bit on this ticket. Can anyone point me a way to start? Thanks Mike
          Hide
          Jacques Le Roux added a comment -
          Show
          Jacques Le Roux added a comment - PLease see link http://docs.ofbiz.org/display/OFBIZ/Back+Office+Applications+UI+Refactor (was in a comment above ;o)
          Hide
          Mike Wong added a comment -

          Change default-selected-style="tabButtonSelected" to default-selected-style="selected"

          Delete orientation="horizontal" and orientation="vertical"

          Delete default-widget-style, default-tooltip-style

          For content manager

          Show
          Mike Wong added a comment - Change default-selected-style="tabButtonSelected" to default-selected-style="selected" Delete orientation="horizontal" and orientation="vertical" Delete default-widget-style, default-tooltip-style For content manager
          Hide
          Mike Wong added a comment -

          Change default-selected-style="tabButtonSelected" to default-selected-style="selected"

          Delete orientation="horizontal" and orientation="vertical"

          Delete default-widget-style, default-tooltip-style

          For order manager

          Show
          Mike Wong added a comment - Change default-selected-style="tabButtonSelected" to default-selected-style="selected" Delete orientation="horizontal" and orientation="vertical" Delete default-widget-style, default-tooltip-style For order manager
          Hide
          Mike Wong added a comment -

          Change default-selected-style="tabButtonSelected" to default-selected-style="selected"

          Delete orientation="horizontal" and orientation="vertical"

          Delete default-widget-style, default-tooltip-style

          For catalog manager

          Show
          Mike Wong added a comment - Change default-selected-style="tabButtonSelected" to default-selected-style="selected" Delete orientation="horizontal" and orientation="vertical" Delete default-widget-style, default-tooltip-style For catalog manager
          Hide
          Mike Wong added a comment -

          Remove embedded styling - inputBox

          For workeffort manager

          Show
          Mike Wong added a comment - Remove embedded styling - inputBox For workeffort manager
          Hide
          Mike Wong added a comment -

          Hi Jacques,

          Thanks for the link.

          I've attached 4 patch files please see am I done it correctly.

          Thanks
          Mike

          Show
          Mike Wong added a comment - Hi Jacques, Thanks for the link. I've attached 4 patch files please see am I done it correctly. Thanks Mike
          Hide
          Adrian Crum added a comment -

          Mike,

          Thank you very much for the patches. I am reviewing them now.

          Show
          Adrian Crum added a comment - Mike, Thank you very much for the patches. I am reviewing them now.
          Hide
          Adrian Crum added a comment -

          Mike,

          default-selected-style="selected" only works with the newer CSS styles, so you'll also need to specify the correct menu container style, like this:

          menu-container-style="button-bar tab-bar"

          Check out the menus in PartyMenus.xml, MarketingMenus.xml, and product/widget/facility/Menus.xml.

          Also, take a few minutes to understand the new styles in maincss.css. The concept is to start with a basic horizontal menu style (button-bar) and decorate it with a particular look (button-style-1, button-style-2, tab-bar).

          Some of the tasks in this issue are simple search-and-replace operations. Menu widgets is not one of them. You'll have to take a little time to evaluate how the original menu operates, select the correct new style to replace it, and then test the change to make sure it still operates the same.

          I can't commit your patches in their current form.

          Show
          Adrian Crum added a comment - Mike, default-selected-style="selected" only works with the newer CSS styles, so you'll also need to specify the correct menu container style, like this: menu-container-style="button-bar tab-bar" Check out the menus in PartyMenus.xml, MarketingMenus.xml, and product/widget/facility/Menus.xml. Also, take a few minutes to understand the new styles in maincss.css. The concept is to start with a basic horizontal menu style (button-bar) and decorate it with a particular look (button-style-1, button-style-2, tab-bar). Some of the tasks in this issue are simple search-and-replace operations. Menu widgets is not one of them. You'll have to take a little time to evaluate how the original menu operates, select the correct new style to replace it, and then test the change to make sure it still operates the same. I can't commit your patches in their current form.
          Hide
          Adrian Crum added a comment -

          Mike,

          In your workeffort patch, ALL default-xxx-style attributes can be removed from form widgets. The form widget defaults to the form-widget CSS style if none is specified. It also defaults to the "tooltip" tooltip style.

          Don't be discouraged - you're on the right track. You just need to put a little more thought into your changes.

          Show
          Adrian Crum added a comment - Mike, In your workeffort patch, ALL default-xxx-style attributes can be removed from form widgets. The form widget defaults to the form-widget CSS style if none is specified. It also defaults to the "tooltip" tooltip style. Don't be discouraged - you're on the right track. You just need to put a little more thought into your changes.
          Hide
          Mike Wong added a comment -

          Remove default-title-style="tabButton"

          replace it with
          menu-container-style="button-bar tab-bar"
          or
          menu-container-style="button-bar button-style-2"

          Add back default-selected-style="selected" for some menu

          In the "CompDocMenus.xml" file, I found no screens widget or ftl file is using the the "find" menu, so I can't see the visual different.

          Show
          Mike Wong added a comment - Remove default-title-style="tabButton" replace it with menu-container-style="button-bar tab-bar" or menu-container-style="button-bar button-style-2" Add back default-selected-style="selected" for some menu In the "CompDocMenus.xml" file, I found no screens widget or ftl file is using the the "find" menu, so I can't see the visual different.
          Hide
          Mike Wong added a comment -

          Adrian,

          Thanks for reviewing the patch files and the info.

          I've re-work on the "content" menu widget files, please check and see am I do things right this time.

          Thanks
          Mike

          Show
          Mike Wong added a comment - Adrian, Thanks for reviewing the patch files and the info. I've re-work on the "content" menu widget files, please check and see am I do things right this time. Thanks Mike
          Hide
          Adrian Crum added a comment -

          Mike,

          Your latest patch was perfect. Committed to SVN, rev 565951.

          Show
          Adrian Crum added a comment - Mike, Your latest patch was perfect. Committed to SVN, rev 565951.
          Hide
          Mike Wong added a comment -

          Adrian,

          Thanks, so I'll work on the other manager applications.

          Show
          Mike Wong added a comment - Adrian, Thanks, so I'll work on the other manager applications.
          Hide
          Mike Wong added a comment -

          Replace all "tabButton" style with "button-bar button-style-1" style

          Show
          Mike Wong added a comment - Replace all "tabButton" style with "button-bar button-style-1" style
          Hide
          Mike Wong added a comment -

          Added menu-container-style="button-bar button-style-1" and default-selected-style="selected"

          Show
          Mike Wong added a comment - Added menu-container-style="button-bar button-style-1" and default-selected-style="selected"
          Hide
          Mike Wong added a comment -

          Replace all "tabButton" style with "button-bar button-style-1"

          Show
          Mike Wong added a comment - Replace all "tabButton" style with "button-bar button-style-1"
          Hide
          Marco Risaliti added a comment -

          What did you think if I close this issue as duplicate of OFBIZ-1364.
          I will handle and remove the deprecated style on this issue.

          Thanks
          Marco

          Show
          Marco Risaliti added a comment - What did you think if I close this issue as duplicate of OFBIZ-1364 . I will handle and remove the deprecated style on this issue. Thanks Marco
          Hide
          Jacques Le Roux added a comment -

          Up to you Marco

          Show
          Jacques Le Roux added a comment - Up to you Marco
          Hide
          Marco Risaliti added a comment -

          It will be handle by the issue OFBIZ-1364 so for the moment I will close it, feel free to reopen it.

          Thanks
          Marco

          Show
          Marco Risaliti added a comment - It will be handle by the issue OFBIZ-1364 so for the moment I will close it, feel free to reopen it. Thanks Marco

            People

            • Assignee:
              Unassigned
              Reporter:
              Marco Risaliti
            • Votes:
              4 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:
                Resolved:

                Development