Opened 8 years ago

Closed 8 years ago

#14531 closed enhancement (fixed)

Claro: use CSS gradients rather than images

Reported by: bill Owned by: bill
Priority: high Milestone: 1.8
Component: Dijit Version: 1.7.1
Keywords: Cc:
Blocked By: Blocking:

Description

Use CSS gradients in Claro, rather than images, to achieve gradient backgrounds.

See http://webdesignerwall.com/tutorials/cross-browser-css-gradient and http://www.colorzilla.com/gradient-editor/

Claro is currently using images to achieve gradients. This has two issues:

  1. heavyweight, especially for mobile
  2. makes theme customization difficult, since some of the images contain colors, and need to be edited directly

There are admittedly a number of issues with using CSS gradients:

  1. IE only supports simple gradients whereas widgets like Button currently have a more complicated gradient.
  2. IE8 problems with gradients and table borders
  3. Firefox and Webkit can't do transitions on CSS gradients

Still, it may be possible to work around these and achieve reasonable fidelity to the original claro theme, plus improvement on IE6/7 since they currently show no gradients at all.

Attachments (1)

gradients1.patch (20.1 KB) - added by bill 8 years ago.
Attempted patch for Buttons, TextBox-ish widgets, and Calendar. Stuck on IE8 for Calendar and ComboButtons: either borders disappear, or can't click ComboButton's down arrow.

Download all attachments as: .zip

Change History (28)

Changed 8 years ago by bill

Attachment: gradients1.patch added

Attempted patch for Buttons, TextBox-ish widgets, and Calendar. Stuck on IE8 for Calendar and ComboButtons: either borders disappear, or can't click ComboButton's down arrow.

comment:1 Changed 8 years ago by bill

In [27465]:

Switch Button widgets to use CSS gradients where possible, and a colorless gradient image otherwise.

Mozilla, webkit, and opera are using CSS gradients.

For IE7 - IE9, still using background-image, due to problems with filter:progid:DXImageTransform.Microsoft.gradient on IE8 for ComboButton (because its a <table>). But modified the background image to not contain any color. Checking in button.svg file as source to generate that background-image (button.png).

For IE6, still using plain background-color. We could instead use filter:progid:DXImageTransform.Microsoft.gradient if we wanted IE6 to look better.

Decided against using the base64 embedded SVG image on IE9, since the text is quite long, and also had problems getting the image to match it's size to the Button.

Refs #14531.

comment:2 Changed 8 years ago by bill

In [27466]:

upgrade to recent version of less, refs #14531 !strict.

comment:3 Changed 8 years ago by bill

In [27468]:

sync button.css with button.less, refs #14531.

comment:4 Changed 8 years ago by bill

In [27469]:

Replace the gradient image file for hovered TextBoxes with a CSS gradient setting. I could leave the background-image for the benefit of IE7-9, but since this effect is so subtle I don't think it's worth the extra CSS. Refs #14531.

comment:5 Changed 8 years ago by bill

In [27470]:

sync css files with less files, refs #14531.

comment:6 Changed 8 years ago by bill

In [27471]:

add .linear-gradient() mixin for spitting out the necessary browser-specific linear-gradient variants, refs #14531.

comment:7 Changed 8 years ago by bill

In [27472]:

When possible, use CSS3 gradients for Calendar.domNode background. For IE, fallback to using background-image, like before.

Removed gradient background for Calendar dates since it didn't seem to have any visible effect, especially after [23283]. This allowed simplifying the sprite calendarContainerImages.png into a single gradient file calendar.png. Also reduced that file to 1px width, which made it much smaller.

For the drop-down month menu, using filter on IE and CSS gradients on other browsers.

Note that I didn't use an IE filter for Calendar.domNode on IE because:

  1. on IE8 the filter makes the table's border disappear
  2. on IE9 the background-color overrides the filter
  3. the claro gradient for Calendar is more complex than IE's filter feature can support.

Refs #14531.

comment:8 Changed 8 years ago by bill

In [27473]:

reduce image width to 1px for smaller file size, refs #14531.

comment:9 Changed 8 years ago by bill

In [27474]:

simpler mixin for generating alpha-white gradient, refs #14531.

comment:10 Changed 8 years ago by bill

In [27476]:

Convert Menus, including ComboBox drop down menu, to use CSS gradients when possible. Fallback to image file on IE since IE's filter won't work on MenuItem, since it's a <tr>.

Refs #14531.

comment:11 Changed 8 years ago by bill

In [27477]:

height of button probably shouldn't affect the height of the thin white strip at the top of the button, refs #14531.

comment:12 Changed 8 years ago by bill

In [27478]:

Make common CSS gradients and fallback images for the standard gradient (light to dark), and the standard gradient for active buttons/etc. (light to dark but with a thin gray shadow at the top).

Refs #14531.

comment:13 Changed 8 years ago by bill

In [27479]:

Roll IE6 handling into the .standard-gradient() and .active-gradient() mixins. Refs #14531.

comment:14 Changed 8 years ago by bill

In [27522]:

Fix off-by-one error causing bottom tabs to look wrong (ie, not the mirror image of top tabs), thanks Jason, refs #14531.

comment:15 Changed 8 years ago by bill

In [27524]:

Convert TabContainer to use CSS gradients when possible, and to fallback to images on IE7-9. Unfortunately this is introducing more images on IE since it's no longer using sprites. Also, nested tabs not yet converted since it's unclear what their intended look and feel is.

The tab CSS is overcomplicated for historical reasons. Seems like at least .dijitTabInnerDiv and .dijitTabContent could be combined into a single node. May do that in a subsequent checkin.

Refs #14531.

comment:16 Changed 8 years ago by bill

In [27570]:

Code BorderContainer's splitter's hover gradient as a CSS gradient, rather than an image file. Note that although the previous gradient had a fixed width, this new CSS gradient adjusts to the width of the splitter.

Not leaving backup image files for IE since:

  • the gradient is subtle
  • the previous images contained blue, thus making claro hard to customize


Refs #14531.

comment:17 Changed 8 years ago by bill

In [27571]:

Following pattern for other widgets of putting the image path in the file where the CSS gradient is specified. Because if a designer ever wanted to update them, they should be updated together.

Refs #14531.

comment:18 Changed 8 years ago by bill

In [27572]:

Convert Slider to use CSS gradients rather than background images.

There were inconsistencies between horizontal and vertical sliders that I normalized:

  • Fixed the border coloring for the vertical hovered/active slider to match the border coloring of the horizontal hovered/active slider. This is the part of the bar with no fill; it should have a dark blue border when the slider is hovered or focused.
  • Standardized both horizontal and vertical sliders to get a light inset shadow on focus, rather than the previous behavior where vertical sliders got a dark shadow and horizontal sliders got nothing.

Note that although the previous CSS specified a gradient for both the blue part of the slider bar and the "remainder" (aka the white part), AFAICT the second gradient was having no effect -- the bar was pure white -- so I removed it. Perhaps that was just there for the shadow effect mentioned above.

Also note that the sliderThumbs.png still contain blue, so it still needs to be modified manually if the theme is modified.

Since the gradient is subtle, and also since the old image file contained blue -- making it hard to customize claro -- didn't bother to provide backup gradient image for IE.

Refs #14531.

comment:19 Changed 8 years ago by bill

In [27573]:

Convert ProgressBar to use CSS gradients rather than background images, falling back to an image for IE.

Note that although the previous CSS specified a gradient for both the filled part of the progress bar and the empty part (aka the white part), AFAICT the second gradient was having no effect -- it's pure white -- so I removed it.

Refs #14531.

comment:20 Changed 8 years ago by bill

In [27574]:

Convert Tooltip to use CSS gradient rather than background image in order to get the blue shading at the bottom of tooltips.

Removed image completely, because it contained blue, which made claro hard to customize. Therefore, no gradient on IE. But the gradient effect for tooltips is subtle, so the change probably won't be noticed.

Refs #14531.

comment:21 Changed 8 years ago by bill

In [27576]:

Give depressed (aka active) buttons inset shadow, like other depressed controls have, ex: up/down arrows on Spinner. (Done according to mail conversation with Jason.)

Also, making checked ToggleButtons look depressed in all cases, not just for StackContainer.

Refs #14531.

comment:22 Changed 8 years ago by bill

In [27577]:

Refactor so that IE10+ will use CSS gradient instead of keeping using image. Refs #14531.

comment:23 Changed 8 years ago by bill

In [27578]:

Fix comment and check in generated files missed in earlier checkins. Refs #14531.

comment:24 Changed 8 years ago by bill

In [27579]:

Remove no longer used variable, refs #14531.

comment:25 Changed 8 years ago by bill

In [27580]:

remove unneeded setting, refs #14531.

comment:26 Changed 8 years ago by bill

In [27581]:

comment out W3C linear-gradient rule until they finalize the standard, refs #14531

comment:27 Changed 8 years ago by bill

Resolution: fixed
Status: newclosed
Type: defectenhancement

Barring any unknown errors, this is finished. All the gradients have been converted to CSS gradients, with the more important ones having fallback images so that IE still looks good. All the fallback images are now gradient transparency white images, with no blue, so they should work with any theme color.

Customizing a theme still requires modifying some of the icon files in an image editor (photoshop / gimp / etc.), including:

  • checkbox and radio buttons
  • calendar arrow icons
  • slider handles
  • etc.
Note: See TracTickets for help on using tickets.