evalica/xwiki-platform — comment on commit be3d0a9b74888e443492453a929942b2d0d8de06
File:  line 0
By marta-:

Hi Caty,

First of all, the skin is going to be very attractive with these changes, I really like the new look.

Unfortunately, to make sure gradients are available in all popular browsers, you had to introduce a lot of (almost) copy/pasted code, and this scares me a bit from the maintainability perspective. Since we'll probably be using gradient-based styling quite often from now on, it would be nice to have a clean, simple and (most importantly) easily maintainable way to set a gradient, cross browser, without having to write all that code each time. With this in mind. I propose the following improvements to your work:

- In macros.vm, declare the following velocity macros :

```velovity
#macro (css3_backgroundIconAndLinearGradient $icon $gradientData)
#set ($browserVariants = ['-moz-', '-webkit-', '-o-', '-ms-', ''])
#if ($gradientData.angle)
#set ($position = "$!{gradientData.angle}")
#elseif ($gradientData.to)
#set ($position = "$!{gradientData.to}")
#end
#foreach ($colorEntry in $gradientData.colors)
#set ($colors = "$!{colors}, $!{colorEntry.color} $!{colorEntry.position}")
#end
#if ("$!{colors}" != '' && "$!{position}" == '')
#set ($colors = $colors.substring(2))
#end
#foreach ($bvar in $browserVariants)
background-image:#if ("$!{icon}" != '') $icon,#end ${bvar}linear-gradient($!{position}$!{colors});
#end
#end
##
#macro (css3_backgroundLinearGradient $gradientData)
#css3_backgroundIconAndLinearGradient ('' $gradientData)
#end
```
(please feel free to choose better names for the macros, this is just what I came up with from the top of my head and they're pretty "verbose").

- In the CSS file you would then write something like:

```css
.admin-menu .group.readOnly {
#css3_backgroundIconAndLinearGradient($readOnlyIcon, {
'angle': '90deg',
'colors': [
{'color': $theme.pageContentBackgroundColor, 'position': '0%'},
{'color': $theme.buttonSecondaryBackgroundColor, 'position': '100%'}
]
})
}
```

or

```css
textarea, select {
#css3_backgroundLinearGradient({
'angle': '90deg',
'colors': [
{'color': $theme.pageContentBackgroundColor, 'position': '0%'},
{'color': $theme.pageBackgroundColor, 'position': '1px'},
{'color': $theme.pageContentBackgroundColor, 'position': '8px'}
]
})
}
```
Note that these macros do not deal with older webkit versions and MSIE v.6-9 filters, because, to my knowledge, they work somewhat differently (they have some limitations) and should probably be written separately.

We could make similar macros to deal with other css3 properties (such as border-radius) and to use them until browsers come to a consensus.