[jira] Created: (OFBIZ-892) Refactor UI elements in the Common component

[Nicolas Malin (Jira)]

Refactor UI elements in the Common component
--------------------------------------------

                 Key: OFBIZ-892
                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
             Project: OFBiz (The Open for Business Project)
          Issue Type: Improvement
          Components: framework
            Reporter: Adrian Crum
            Priority: Minor




--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Adrian Crum updated OFBIZ-892:
------------------------------

    Attachment: common.patch

Eliminated deprecated CSS styles and embedded styling.

The masthead (header) has been converted to an unordered list.

Header.ftl modified to follow w3.org bidi guidelines.

Minor changes to the Global Decorator to removed unnecessary markup.

language.ftl unchanged - used by eCommerce. Since eCommerce's style sheet hasn't been updated, changing it will break the layout.

appbar.ftl is in a separate patch. See attachment notes.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>            Priority: Minor
>         Attachments: common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Adrian Crum updated OFBIZ-892:
------------------------------

    Attachment: appbar.patch

Refactored main application tab bar in appbar.patch.

There are a few of problems with the current main app bar - it's composed of complicated nested divs - causing excessive markup and making it difficult to style, it does not reverse direction well, and it has poor accessibility. I converted the main app bar to a simple unordered list and styled it as a plain tab bar. If anyone would like to restyle it, they are welcome to do so.

I kept this as a separate patch because I'm sure there will be discussion about this one.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jacopo Cappellato reassigned OFBIZ-892:
---------------------------------------

    Assignee: Jacopo Cappellato

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jacopo Cappellato resolved OFBIZ-892.
-------------------------------------

    Resolution: Fixed

Adrian,

all your patches are in with rev. 528925 and 528927.
In rev 528926 I've added a separator to the main app bar.

To All; this is the commit log for rev. 528927:

"Applied patch from Adian Crum (OFBIZ-892) to refactor the layout of the main application bar: it now uses the same style of the other menu bars and so it is simpler and less graphically rich.
This is a Commit-Then-Review approach: if you don't like it I'll revert this change."

Your feedback would be great

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488926 ]

Jacques Le Roux commented on OFBIZ-892:
---------------------------------------

Jacopo, Adrian,

What is the plus for the new app bar ? I greatly prefered the previous. So I propose a vote on user ML. My vote will be -1 for this feature, except of course if you can produce very good arguments :o)

Jacques

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488928 ]

Jacques Le Roux commented on OFBIZ-892:
---------------------------------------

Adrian,

Sorry was too quick,  did not read your comment above https://issues.apache.org/jira/browse/OFBIZ-892#action_12488905. My opinion is that this patch should not be commited (reverted for now then) before any styling is done around it. Would that be difficult ?

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488938 ]

Adrian Crum commented on OFBIZ-892:
-----------------------------------

Jacopo,

Thank you for making this two separate commits.

Jacques,

I don't understand your question. Are you asking if styling the main app bar would be difficult? If so, then the answer is no.

Styling <ul> elements is very easy and they are very flexible. Using CSS alone, the horizontal tab bar can be easily converted to a vertical menu, for example.

I welcome others to experiment with the main-navigation style and come up with something everyone likes.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488945 ]

Jacques Le Roux commented on OFBIZ-892:
---------------------------------------

Adrian,

Do you mean that we may be able to reproduce easily the previous tabs look (or a better one) with CSS only ?

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488964 ]

Chris Howe commented on OFBIZ-892:
----------------------------------

There was some "niftyness" to the previous app bar, that can't be easily reproduced but you can come close...

http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners.shtml

In order to implement the above requires the following changes

currently the markup is...

<li><a>App Name</a></li>

the markup needs to be...

<li><a><span>App Name</span></a></li>

Then some playing with the CSS

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488981 ]

Adrian Crum commented on OFBIZ-892:
-----------------------------------

I disagree with the <span> remark. You already have a link within a list item, so there is no need for a span element.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488985 ]

Chris Howe commented on OFBIZ-892:
----------------------------------

That's simply the pattern that the link provides.  I'm sure there are a multitude of different ways of marking up the content in order to be able to style it flexibly.

As far as needing the <span> element, I think it's semantically correct to include it.  That aside, you may run into a problem if the <li> element has both the background-image and float set which is what would be necessary to implement the rounded corners with the current markup.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Adrian Crum updated OFBIZ-892:
------------------------------

    Attachment: chiseled.patch

Here's a patch to give the main app bar a chiseled look.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12488991 ]

Adrian Crum commented on OFBIZ-892:
-----------------------------------

The chiseled look looks even better if you change the main-navigation #a0a0a0 to #909090.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12489011 ]

Jacopo Cappellato commented on OFBIZ-892:
-----------------------------------------

Adrian,

I've applied your last patch, thanks.
Do you think it would be possible/simple to implement the sharp edges following the suggestions in Chris's link?
In that way I guess that Jacques' concerns will be addressed.

Jacopo

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12489136 ]

Adrian Crum commented on OFBIZ-892:
-----------------------------------

Jacopo,

Yes, the technique mentioned in Chris's link is easy to do. I might not be the best person to implement it. It's not that I don't want to, it's just that I'm not artistically inclined.  My hope was, with ALL of the new styles, that a graphics artist in the community would jump in and work on the new styles to make them "prettier."

If no one is interested in giving it a try, then I'll go ahead and style it. Again, it's not that I don't want to do it, but I would rather step aside and let someone more qualified do it.

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

    [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#action_12490250 ]

Jacques Le Roux commented on OFBIZ-892:
---------------------------------------

Andy made the job.

Thans Adrian, Jacopo and Chris for all the good work you are doing in OFBiz !

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.

[Nicolas Malin (Jira)]

     [ https://issues.apache.org/jira/browse/OFBIZ-892?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel ]

Jacopo Cappellato closed OFBIZ-892.
-----------------------------------

> Refactor UI elements in the Common component
> --------------------------------------------
>
>                 Key: OFBIZ-892
>                 URL: https://issues.apache.org/jira/browse/OFBIZ-892
>             Project: OFBiz (The Open for Business Project)
>          Issue Type: Improvement
>          Components: framework
>            Reporter: Adrian Crum
>         Assigned To: Jacopo Cappellato
>            Priority: Minor
>         Attachments: appbar.patch, chiseled.patch, common.patch
>
>

--
This message is automatically generated by JIRA.
-
You can reply to this email to add a comment to the issue online.