CODEWITHSUNDEEP
qooxdoo
voger
voger

Reputation: 676

How to set a three color gradient in a qooxdoo widgets decorator?

I want to set a three color gradient in a qooxdoo widgets decorator. The relevant CSS is 

    linear-gradient(rgba(255,255,255,0.2) 0,
                    rgba(255,255,255,0.8) 30px,
                    rgba(255,255,255,0.6) 100%);

I wan't to achieve the hover effect in the icons in this page http://njdesktop.nagyervin.eu/

What I tried so far:

in my theme.Color file I defined three colors

 "desktop-icon-top": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.2)" : "white",
 "desktop-icon-middle": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.8)" : "white",
 "desktop-icon-end": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.6)" : "white"

but qx.ui.decoration.MLinearBackgroundGradient has properties only for gradient start and gradient end. Not for the middle.

I also tried to set it directly in the styles of theme.Decoration

"desktop-icon-hovered": {
            style: {
                radius: 5,
                width: 2,
                backgroundColor: "transparent",
                color: "white",
                // gradientStart: ["desktop-icon-middle", 30],
                // gradientEnd: ["desktop-icon-end", 70]
                backgroundImage: "linear-gradient(rgba(255,255,255,0.2) 0,rgba(255,255,255,0.8) 30px,rgba(255,255,255,0.6) 100%)"

            }

but this doesn't render a gradient at all.

The only way I can do this is by using setStyle() in code but this means I will have to mess with event listeners and I won't be taking advantage of the decorator mechanism. Plus it feels ugly.

So how can I use three colors decorator in the Decoration.js?

Upvotes: 0

Views: 164

Answers (1)

Chris Eskew
Chris Eskew

Reputation: 111

If you are not worried about backward compatibility with older browsers then this should work:

Qooxdoo Playground Example

Put simply, you first create a Decorator Mixin that creates a property for your app code to access using the decorator mechanism.

Within your Application code you then include the new Mixin into your app's decorator class.

Run the generate.py source on your app. Then set your controls decorator property either directly or via the Decoration class and your set.

Upvotes: 2

Related Questions