How to set a three color gradient in a qooxdoo widgets decorator? -
i want set 3 color gradient in qooxdoo widgets decorator. relevant css
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 achieve hover effect in icons in page http://njdesktop.nagyervin.eu/
what tried far:
in theme.color file defined 3 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 gradient start , gradient end. not middle.
i tried set directly in 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 doesn't render gradient @ all.
the way can using setstyle() in code means have mess event listeners , won't taking advantage of decorator mechanism. plus feels ugly.
so how can use 3 colors decorator in decoration.js?
if not worried backward compatibility older browsers should work:
put simply, first create decorator mixin creates property app code access using decorator mechanism.
within application code include new mixin app's decorator class.
run generate.py source on app. set controls decorator property either directly or via decoration class , set.
Comments
Post a Comment