Details
-
Type:
Bug
-
Status: Closed
-
Priority:
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.
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
- All
- Comments
- History
- Activity
- Remote Attachments
- Subversion
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.
- 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.
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.
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.
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).
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).
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
Attached screenshots of noted offending demo pages.