Details

    • Type: New Feature New Feature
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: None
    • Fix Version/s: 4.0
    • Labels:
      None
    • Environment:
      Any
    • Assignee Priority:
      P1
    • Affects:
      Compatibility/Configuration

      Description

      Add the Font Awesome font and stylesheet to ACE, so that ACE and MOBI components can make use of its icons.
      1. 42894.PNG
        6 kB
      2. 43064.PNG
        15 kB
      3. group.PNG
        30 kB
      4. hover.png
        7 kB
      5. selected.PNG
        8 kB
      6. unselected.PNG
        8 kB

        Activity

        Arturo Zambrano created issue -
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #39847 Thu Jan 30 10:01:20 MST 2014 art.zambrano ICE-9807 added Font Awesome to ACE
        Files Changed
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/org.icefaces.component.icons/FontAwesome.otf
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/org.icefaces.component.icons/icons.css
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/org.icefaces.component.icons/fontawesome-webfont.ttf
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/org.icefaces.component.icons
        Commit graph DEL /icefaces4/trunk/icefaces/mobi/component/resources/org.icefaces.component.icons
        Arturo Zambrano made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Hide
        Arturo Zambrano added a comment -

        Committed new feature to trunk at revision 39847.

        Show
        Arturo Zambrano added a comment - Committed new feature to trunk at revision 39847.
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Hide
        Philip Breau added a comment - - edited

        Font awesome has been upgraded in ICEmobile to 4.x. The issue now is that Font Awesome in the Ace styles is the older version using the 'icon' prefix. The newer versions use the 'fa' prefix, which is being used in the ICEmobile components, such as the ViewManager. So the icons there are not showing up.

        Show
        Philip Breau added a comment - - edited Font awesome has been upgraded in ICEmobile to 4.x. The issue now is that Font Awesome in the Ace styles is the older version using the 'icon' prefix. The newer versions use the 'fa' prefix, which is being used in the ICEmobile components, such as the ViewManager. So the icons there are not showing up.
        Philip Breau made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Ken Fyten added a comment -

        Also note that the ace:radioButton and ace:checkboxbutton components should be modified to use the new font-awesome characters for default state icons.

        Suggested icons are:

        • checkbox off: fa-square-o
        • checkbox on: fa-check-square-o
        • radiobutton off: fa-circle-o
        • radiobutton on: fa-dot-circle-o
        Show
        Ken Fyten added a comment - Also note that the ace:radioButton and ace:checkboxbutton components should be modified to use the new font-awesome characters for default state icons. Suggested icons are: checkbox off: fa-square-o checkbox on: fa-check-square-o radiobutton off: fa-circle-o radiobutton on: fa-dot-circle-o
        Ken Fyten made changes -
        Fix Version/s 4.0 [ 11382 ]
        Assignee Priority P1 [ 10010 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43044 Wed Oct 15 19:18:31 MDT 2014 art.zambrano ICE-9807 added FontAwesome 4.2 to ACE
        Files Changed
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/fontawesome-webfont.svg
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/fontawesome-webfont.ttf
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/fontawesome-webfont.eot
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/font-awesome.css
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/FontAwesome.otf
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/build.xml
        Commit graph ADD /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/fontawesome/fontawesome-webfont.woff
        Hide
        Arturo Zambrano added a comment -

        r43044: added FontAwesome 4.2 to ACE

        Show
        Arturo Zambrano added a comment - r43044: added FontAwesome 4.2 to ACE
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43045 Wed Oct 15 19:34:02 MDT 2014 art.zambrano ICE-9807 added new FontAwesome icons to ace:checkboxButton and ace:radioButton
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/radiobutton/RadioButtonRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/checkboxbutton/CheckboxButtonMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/checkboxbutton/checkboxbutton.js
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/radiobutton/RadioButtonMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/checkboxbutton/CheckboxButtonRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/radiobutton/radiobutton.js
        Hide
        Arturo Zambrano added a comment -

        r43045: added new FontAwesome icons to ace:checkboxButton and ace:radioButton.

        Show
        Arturo Zambrano added a comment - r43045: added new FontAwesome icons to ace:checkboxButton and ace:radioButton.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Liana Munroe made changes -
        Attachment hover.png [ 17517 ]
        Attachment selected.PNG [ 17518 ]
        Attachment unselected.PNG [ 17519 ]
        Hide
        Liana Munroe added a comment -

        While running regressions to verify this JIRA I noticed that the showcase ace:checkboxButton > Custom Style demo has the following style issues (all browsers). The custom style seems to be over written by the font awesome style. Otherwise there have been no issues found.

        1.) Checkbox is selected. You can see the tiny white font awesome over top of the green checkmark. See selected.PNG

        2.) Checkbox is de-selected and in this case the mouse pointer is hovering over the checkbox. This is the only way to see the custom grey check-mark.
        See hover.png

        3.) Checkbox is de-selected. Mouse pointer is moved away from the checkbox. See unselected.PNG

        This is also an issue in the radioButton > Custom Style demo, though less noticeable because of the color scheme.

        Show
        Liana Munroe added a comment - While running regressions to verify this JIRA I noticed that the showcase ace:checkboxButton > Custom Style demo has the following style issues (all browsers). The custom style seems to be over written by the font awesome style. Otherwise there have been no issues found. 1.) Checkbox is selected. You can see the tiny white font awesome over top of the green checkmark. See selected.PNG 2.) Checkbox is de-selected and in this case the mouse pointer is hovering over the checkbox. This is the only way to see the custom grey check-mark. See hover.png 3.) Checkbox is de-selected. Mouse pointer is moved away from the checkbox. See unselected.PNG This is also an issue in the radioButton > Custom Style demo, though less noticeable because of the color scheme.
        Liana Munroe made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43048 Thu Oct 16 12:12:21 MDT 2014 art.zambrano ICE-9807 fixed ace:checkboxButton and ace:radioButton custom style demos to use the new FontAwesome CSS classes
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/radioButton/radiobuttoncustom.xhtml
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/checkboxButton/checkboxbuttoncustom.xhtml
        Hide
        Arturo Zambrano added a comment -

        r43048: fixed ace:checkboxButton and ace:radioButton custom style demos to use the new FontAwesome CSS classes.

        Show
        Arturo Zambrano added a comment - r43048: fixed ace:checkboxButton and ace:radioButton custom style demos to use the new FontAwesome CSS classes.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Affects Compatibility/Configuration [ 10002 ]
        Hide
        Ken Fyten added a comment -

        Re-open to include changes for MOBI comps as well.

        Show
        Ken Fyten added a comment - Re-open to include changes for MOBI comps as well.
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43059 Fri Oct 17 15:19:51 MDT 2014 art.zambrano ICE-9807 ace:checkboxButton styling improvements
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/checkboxbutton/checkboxbutton.js
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/checkboxbutton/CheckboxButtonRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/checkboxbutton/checkboxbutton.css
        Hide
        Arturo Zambrano added a comment - - edited

        r43059: committed ace:checkboxButton styling improvements.
        r43060: committed ace:radioButton styling improvements.

        Show
        Arturo Zambrano added a comment - - edited r43059: committed ace:checkboxButton styling improvements. r43060: committed ace:radioButton styling improvements.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43060 Fri Oct 17 15:33:30 MDT 2014 art.zambrano ICE-9807 ace:radioButton styling improvements
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/radiobutton/RadioButtonRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/radiobutton/radiobutton.css
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43064 Fri Oct 17 18:55:49 MDT 2014 art.zambrano ICE-9807 updated mobi components to use FontAwesome 4.2
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/viewmanager/ViewMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/viewmanager/ViewManagerMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/dataview/DataViewRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/datespinner/DateSpinnerRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/dataview/DataViewMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/timespinner/TimeSpinnerRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/timespinner/TimeSpinnerMeta.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/viewmanager/ViewRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/viewmanager/ViewManagerRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/mobi/component/src/org/icefaces/mobi/component/datespinner/DateSpinnerMeta.java
        Hide
        Liana Munroe added a comment -

        Tested with ICEfaces 4 trunk r43064. After the latest commits there are styling issues for checkboxButton and non-rendering issues with button group in the QA test applications.

        1.) checkboxButton in QA test apps show no style until it is hovered over, no style is retained after clicking.
        see screenshot 43064.PNG. To compare with an older revision see screenshot 42894.PNG

        2.) buttonGroup fails to render buttons when in h:dataTable, ace:dataTable or ui:repeat. See screenshot group.PNG

        Test apps located at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/buttonGroup
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/checkboxButton

        Show
        Liana Munroe added a comment - Tested with ICEfaces 4 trunk r43064. After the latest commits there are styling issues for checkboxButton and non-rendering issues with button group in the QA test applications. 1.) checkboxButton in QA test apps show no style until it is hovered over, no style is retained after clicking. see screenshot 43064.PNG. To compare with an older revision see screenshot 42894.PNG 2.) buttonGroup fails to render buttons when in h:dataTable, ace:dataTable or ui:repeat. See screenshot group.PNG Test apps located at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/buttonGroup http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/checkboxButton
        Liana Munroe made changes -
        Attachment 42894.PNG [ 17522 ]
        Attachment 43064.PNG [ 17523 ]
        Attachment group.PNG [ 17524 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43066 Mon Oct 20 11:33:28 MDT 2014 art.zambrano ICE-9807 updated mobile showcase page to use new FontAwesome icons
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/showcase-mobile.xhtml
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43067 Mon Oct 20 11:45:03 MDT 2014 art.zambrano ICE-9807 removed old FontAwesome
        Files Changed
        Commit graph DEL /icefaces4/trunk/icefaces/ace/component/resources/org.icefaces.component.icons
        Hide
        Arturo Zambrano added a comment -

        As for point 1 above, the active styling as well as the border were intentionally removed, as per Ken's request. So, this is expected.

        As for point 2, the buttons are actually rendered, but they aren't easily visible at first because those buttons use labels and because of the changes mentioned in the previous paragraph. We will find a way to avoid this situation.

        Basically, the changes made were thinking of the standard case where we render the checkbox icons. When using a label, it is only displayed when the button is checked. So when the button is not checked, it presents no visual cues. Some possible solutions would be to render the label with a lighter shade of gray when not checked, or the unchecked box icon.

        Show
        Arturo Zambrano added a comment - As for point 1 above, the active styling as well as the border were intentionally removed, as per Ken's request. So, this is expected. As for point 2, the buttons are actually rendered, but they aren't easily visible at first because those buttons use labels and because of the changes mentioned in the previous paragraph. We will find a way to avoid this situation. Basically, the changes made were thinking of the standard case where we render the checkbox icons. When using a label, it is only displayed when the button is checked. So when the button is not checked, it presents no visual cues. Some possible solutions would be to render the label with a lighter shade of gray when not checked, or the unchecked box icon.
        Hide
        Arturo Zambrano added a comment -

        Also updated mobi components to use new FontAwesome version, updated mobile showcase page to use new icon class names, and removed old FontAwesome at revision 43067.

        Show
        Arturo Zambrano added a comment - Also updated mobi components to use new FontAwesome version, updated mobile showcase page to use new icon class names, and removed old FontAwesome at revision 43067.
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43083 Wed Oct 22 15:05:33 MDT 2014 art.zambrano ICE-9807, ICE-10340 added ice-checkboxbutton-checked and ice-checkboxbutton-unchecked state CSS classes; adjusted paddings for checkbox labels; added opacity setting to labels of unchecked buttons
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/src/org/icefaces/ace/component/checkboxbutton/CheckboxButtonRenderer.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/checkboxbutton/checkboxbutton.css
        Hide
        Arturo Zambrano added a comment -

        r43083: added ice-checkboxbutton-checked and ice-checkboxbutton-unchecked state CSS classes; adjusted paddings for checkbox labels; added opacity setting to labels of unchecked buttons.

        Show
        Arturo Zambrano added a comment - r43083: added ice-checkboxbutton-checked and ice-checkboxbutton-unchecked state CSS classes; adjusted paddings for checkbox labels; added opacity setting to labels of unchecked buttons.
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #43085 Wed Oct 22 15:27:54 MDT 2014 art.zambrano ICE-9807, ICE-10340 ace:checkboxButton added dynamic change of CSS state classes in the client
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/checkboxbutton/checkboxbutton.js
        Hide
        Liana Munroe added a comment -

        Tested with r43088. Issue 1 is resolved however issue 2 still remains. Checkbox buttons inside a group are not visible when inside h:dataTable, ace:dataTable or ui:repeat.
        Test app located at:
        http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/buttonGroup

        Show
        Liana Munroe added a comment - Tested with r43088. Issue 1 is resolved however issue 2 still remains. Checkbox buttons inside a group are not visible when inside h:dataTable, ace:dataTable or ui:repeat. Test app located at: http://dev.icesoft.com/svn/repo/qa/trunk/Regression-Icefaces4/Sparkle/Nightly/buttonGroup
        Hide
        Arturo Zambrano added a comment -

        For this, you'll have to modify the test app, since it is programmed not to show any label when the button is unchecked. Just remove that condition or dynamically change the label when it's unchecked.

        Show
        Arturo Zambrano added a comment - For this, you'll have to modify the test app, since it is programmed not to show any label when the button is unchecked. Just remove that condition or dynamically change the label when it's unchecked.
        Hide
        Ken Fyten added a comment -

        Basically, the changes made were thinking of the standard case where we render the checkbox icons. When using a label, it is only displayed when the button is checked. So when the button is not checked, it presents no visual cues. Some possible solutions would be to render the label with a lighter shade of gray when not checked, or the unchecked box icon.

        Why wouldn't we want the label rendered all the time, not just when it's selected?

        Show
        Ken Fyten added a comment - Basically, the changes made were thinking of the standard case where we render the checkbox icons. When using a label, it is only displayed when the button is checked. So when the button is not checked, it presents no visual cues. Some possible solutions would be to render the label with a lighter shade of gray when not checked, or the unchecked box icon. Why wouldn't we want the label rendered all the time, not just when it's selected?
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Arturo Zambrano added a comment -

        Ok, this is actually not the case. That's what I thought when I used QA's app. The label is always rendered. What happens is that in the QA app, in a number of tests, the pages are programmed not to render any labels when the button is unchecked. See my previous comment.

        Show
        Arturo Zambrano added a comment - Ok, this is actually not the case. That's what I thought when I used QA's app. The label is always rendered. What happens is that in the QA app, in a number of tests, the pages are programmed not to render any labels when the button is unchecked. See my previous comment.
        Hide
        Liana Munroe added a comment -

        QA test applications now updated and buttons are now visible when in a non-selected state. Thanks Art.
        All issues verified ICEfaces 4 trunk r43088. Tomcat 7, IE, 11, FF 33, Chrome 38.

        Show
        Liana Munroe added a comment - QA test applications now updated and buttons are now visible when in a non-selected state. Thanks Art. All issues verified ICEfaces 4 trunk r43088. Tomcat 7, IE, 11, FF 33, Chrome 38.
        Ken Fyten made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: