Wie setze ich einen dreifarbigen Farbverlauf in einem qooxdoo Widgets Decorator?

Question

Ich möchte einen drei Farbverlauf in einem Qooxdoo Widgets Decorator setzen. Der entsprechende CSS ist

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 auf dieser Seite den Hover-Effekt in den Symbolen zu erreichen http://njdesktop.nagyervin.eu/

Was habe ich versucht, so weit:

in meiner theme.Color Datei ich drei definiert Farben

"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" 

aber qx.ui.decoration.MLinearBackgroundGradient hat Eigenschaften nur für Gradientenstart und Gradientenende. Nicht für die Mitte.

Ich habe auch versucht

"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%)" 

      } 

in den Stilen von theme.Decoration es direkt zu setzen, aber dies ist kein Gefälle überhaupt zu machen.

Die einzige Möglichkeit, die ich tun kann, ist mit setStyle() im Code, aber das bedeutet, ich muss mit Event-Listener Chaos und ich werde nicht nutzen die Decorator-Mechanismus. Plus es fühlt sich hässlich an.

Also wie kann ich drei Farben Dekorateur in der Decoration.js verwenden?

Answer 1

Wenn Sie keine Sorgen um die Abwärtskompatibilität mit älteren Browsern sind, dann sollten diese Arbeit:

Qooxdoo Playground Example

Vereinfacht gesagt, Sie zuerst eine Decorator Mixin erstellen, die eine Eigenschaft für Ihre App-Code erstellt die für den Zugriff auf mit Decorator Mechanismus.

In Ihrem Anwendungscode fügen Sie dann das neue Mixin in die Dekorationsklasse Ihrer App ein.

Führen Sie die generate.py-Quelle in Ihrer App aus. Setzen Sie dann Ihre Steuerelemente-Decorator-Eigenschaft entweder direkt oder über die Deko-Klasse und Ihr Set.