ICEfaces
  1. ICEfaces
  2. ICE-9296

Showcase - Numerous Demo panels do not respect the selected ACE Theme styling

          Details

          • Type: Bug Bug
          • Status: Closed
          • Priority: Minor Minor
          • Resolution: Fixed
          • Affects Version/s: 3.2
          • Fix Version/s: 4.2
          • Component/s: Sample Apps
          • Labels:
            None
          • Environment:
            ICEfaces 3.x, ICEfaces Showcase sample application.
          • Assignee Priority:
            P2

            Description

            When viewing the ICEfaces Showcase sample application and selecting various ACE ThemeRoller-based themes via the included ace:themeSelector, it becomes apparent that not all the demo panels are respecting the selected theme styling, although many/most do.

            This results in some panel labels, text, etc. not fitting in with the rest of the page and in some cases being very low contrast or even invisible.

            The offending Showcase demo pages should be updated to respect the selected theme styling to make all the ACE demos consistent.

            Themes that really highlight the problem panels included those with dark background colors, such as Le Frog or UI Darkness.

            A comprehensive survey of problem panels must be completed, but ones that are known to have issues include:

            - ace:accordion Overview
            - autoCompleteEntry Overview
            - ace:comboBox Overview
            - ace:confirmationDialog Display Effects

            Numerous others are likely to exist and must be identified and corrected as part of this JIRA.

              Activity

              Ascending order - Click to sort in descending order
              Ken Fyten created issue -
              Hide
              Permalink
              Ken Fyten added a comment -

              Attached screenshots of noted offending demo pages.

              Show
              Ken Fyten added a comment - Attached screenshots of noted offending demo pages.
              Ken Fyten made changes -
              Field Original Value New Value
              Attachment Screen Shot 2013-05-27 at 11.45.49 AM.png [ 15983 ]
              Attachment Screen Shot 2013-05-27 at 11.45.27 AM.png [ 15984 ]
              Attachment Screen Shot 2013-05-27 at 11.45.13 AM.png [ 15985 ]
              Attachment Screen Shot 2013-05-27 at 11.45.05 AM.png [ 15986 ]
              Ken Fyten made changes -
              Assignee Arturo Zambrano [ artzambrano ]
              Priority Major [ 3 ] Minor [ 4 ]
              Assignee Priority P3 [ 10012 ]
              Hide
              Permalink
              Arturo Zambrano added a comment -

              Two root causes of this issue have been identified:

              • Some demos use h:outputLabel, while others use the 'label' attributes within the components. The markup originated from the 'label' attributes correctly applies the theme classes, while the markup originated from h:outputLabel doesn't contain any theme classes AND it inherits CSS styling from rime.css (i.e. the compat rime theme). This theme contains some styling applied to the 'body' and 'table' elements on the page. Notably, the text color is hard-coded to be black. This affects all ACE demos. Removing rime.css from the page solves the problem (however that's not the ideal solution).
              • The background color of the 'instance' panel component, which contains the core of each example, is hard-coded in demo_template.css (#F1F1F1), so it doesn't follow the theme colors. So, white text is hard to read in them.
              Show
              Arturo Zambrano added a comment - Two root causes of this issue have been identified: Some demos use h:outputLabel, while others use the 'label' attributes within the components. The markup originated from the 'label' attributes correctly applies the theme classes, while the markup originated from h:outputLabel doesn't contain any theme classes AND it inherits CSS styling from rime.css (i.e. the compat rime theme). This theme contains some styling applied to the 'body' and 'table' elements on the page. Notably, the text color is hard-coded to be black. This affects all ACE demos. Removing rime.css from the page solves the problem (however that's not the ideal solution). The background color of the 'instance' panel component, which contains the core of each example, is hard-coded in demo_template.css (#F1F1F1), so it doesn't follow the theme colors. So, white text is hard to read in them.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #35882 Tue Jun 04 14:37:34 MDT 2013 art.zambrano ICE-9296 changed 'instance' panel from h:panelGroup to ace:panel; removed hard-coded background color from such panel
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/ice.samples.showcase/demo_template.css
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/templates/content-template.xhtml
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #35973 Wed Jun 05 19:04:03 MDT 2013 art.zambrano ICE-9296 changed background color of source viewer to white, regardless of theme
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/templates/content-template.xhtml
              Hide
              Permalink
              Arturo Zambrano added a comment -
              • Changed 'instance' panel from h:panelGroup to ace:panel and removed the fixed background-color (#F1F1F1), so that the panel follows the theme colors.
              • Changed the background of the source code viewer to white, regardless of the theme being used.
              Show
              Arturo Zambrano added a comment - Changed 'instance' panel from h:panelGroup to ace:panel and removed the fixed background-color (#F1F1F1), so that the panel follows the theme colors. Changed the background of the source code viewer to white, regardless of the theme being used.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #36024 Thu Jun 06 17:08:14 MDT 2013 nils.lundquist ICE-9296 - Reduce size to accomidate for h:panel to ace:panel change.
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/list/listBlockComplex.xhtml
              Hide
              Permalink
              Ken Fyten added a comment -

              QA reports many remaining issues:

              Fonts and labels seem to fit appropriately but there still are alot of issues with contrast. The worst parts are select box inputs in Chrome (bgcolor does not change in input box), some select box options with dark backgrounds render dark text (Ex. autoCompleteEntry Custom Facet). Themes such as dot-luv, dark-hive, ui-darkness are unreadable in some components. Please let me know if this did not answer the question.

              Show
              Ken Fyten added a comment - QA reports many remaining issues: Fonts and labels seem to fit appropriately but there still are alot of issues with contrast. The worst parts are select box inputs in Chrome (bgcolor does not change in input box), some select box options with dark backgrounds render dark text (Ex. autoCompleteEntry Custom Facet). Themes such as dot-luv, dark-hive, ui-darkness are unreadable in some components. Please let me know if this did not answer the question.
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #36115 Tue Jun 11 10:12:33 MDT 2013 art.zambrano ICE-9296 adjusted menu layout sizes to fit in the panel
              Files Changed
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/menu/menuType.xhtml
              Commit graph MODIFY /icefaces3/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/ice.samples.showcase/showcase_styles.css
              Hide
              Permalink
              Arturo Zambrano added a comment -

              The cause of that is what I mention in the first bullet point of my first comment. The compat rime theme is loaded in every ACE demo, and it is affecting font colors. We had agreed that this will be solved once compat and ACE are completely separate.

              Show
              Arturo Zambrano added a comment - The cause of that is what I mention in the first bullet point of my first comment. The compat rime theme is loaded in every ACE demo, and it is affecting font colors. We had agreed that this will be solved once compat and ACE are completely separate.
              Ken Fyten made changes -
              Fix Version/s 4.0 [ 11382 ]
              Fix Version/s 4.0.BETA [ 10770 ]
              Ken Fyten made changes -
              Fix Version/s 4.1 [ 11375 ]
              Fix Version/s 4.0 [ 11382 ]
              Ken Fyten made changes -
              Assignee Arturo Zambrano [ artzambrano ]
              Assignee Priority P3 [ 10012 ]
              Fix Version/s 4.2 [ 12870 ]
              Fix Version/s 4.1 [ 11375 ]
              Ken Fyten made changes -
              Assignee Carmen Cristurean [ ccristurean ]
              Carmen Cristurean made changes -
              Attachment image1.PNG [ 22380 ]
              Attachment image2.PNG [ 22381 ]
              Hide
              Permalink
              Ken Fyten added a comment -

              Assigned to Art to correct the final 2 issues:

              Issues found when using darker themes (dark-hive, dot-luv, vader):

              1. radio buttons and checkbox buttons are not visible on the black background, (image1 attached).
              2. ace:list Selection (Compact): white text is not visible on the rendered selections (image2 attached).
              Show
              Ken Fyten added a comment - Assigned to Art to correct the final 2 issues: Issues found when using darker themes (dark-hive, dot-luv, vader): radio buttons and checkbox buttons are not visible on the black background, (image1 attached). ace:list Selection (Compact): white text is not visible on the rendered selections (image2 attached).
              Ken Fyten made changes -
              Assignee Carmen Cristurean [ ccristurean ] Arturo Zambrano [ artzambrano ]
              Assignee Priority P2 [ 10011 ]
              Hide
              Permalink
              Arturo Zambrano added a comment -

              r50530: added ui-widget-content style class to button elements in order to display buttons correctly when using dark themes
              r50531: removed white background from inline styling, in order to make text inside box look correctly when using dark themes

              Show
              Arturo Zambrano added a comment - r50530: added ui-widget-content style class to button elements in order to display buttons correctly when using dark themes r50531: removed white background from inline styling, in order to make text inside box look correctly when using dark themes
              Arturo Zambrano made changes -
              Status Open [ 1 ] Resolved [ 5 ]
              Resolution Fixed [ 1 ]
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #50530 Mon Feb 13 14:36:45 MST 2017 art.zambrano ICE-9296 added ui-widget-content style class to button elements in order to display buttons correctly when using dark themes
              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/checkboxbuttons/CheckboxButtonsRenderer.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/src/org/icefaces/ace/component/radiobuttons/RadioButtonsRenderer.java
              Repository Revision Date User Message
              ICEsoft Public SVN Repository #50531 Mon Feb 13 14:38:18 MST 2017 art.zambrano ICE-9296 removed white background from inline styling, in order to make text inside box look correctly when using dark themes
              Files Changed
              Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/list/listSelectionMini.xhtml
              Ken Fyten made changes -
              Status Resolved [ 5 ] Closed [ 6 ]

                People

                • Assignee:
                  Arturo Zambrano
                  Reporter:
                  Ken Fyten
                • Votes:
                  0 Vote for this issue
                  Watchers:
                  3 Start watching this issue

                  Dates

                  • Created:
                    Updated:
                    Resolved: