Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

classic Classic list List threaded Threaded
7 messages Options
Reply | Threaded
Open this post in threaded view
|

Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

WillP-2
The decorator qx.ui.decoration.Rounded does not resolve themed colours in Internet Explorer. The code below illustrates this - in FireFox the border is (correctly) the same colour all the way around but in Internet Explorer the top and bottom borders are black.
FireFox 3.0.1
Internet Explorer 6.0

In the "mshtml" specific render method of qx.ui.decoration.Rounded it calls _resolveColor

var fillColor = this._resolveColor(backgroundColor || this.getBackgroundColor()) || "white";
for the background fill color but the use of _resolveColor is missing for the border colours and it just uses the values from
this.getColorLeft()
this.getColorTop()
... etc.

This works if the values are actual colour specifications but not for theme colour aliases.

I also notice that in IE (v6 - I haven't tried with v7) the rounded borders are drawn with some pixel colour blending at the edges which can make them appear a little fuzzy and they are also sometimes wider than specified in the code. In the example the top and left borders are actually drawn as three pixels wide and on all sides only one pixel width is the colour actually requested, whereas in FireFox all the borders are exactly two pixels wide and "cleanly" drawn in the required colour. I guess this may be due to the browsers' different rendering algorithms.

    main : function()
    {
      // Call super class
      this.base(arguments);

      var container1 = new qx.ui.container.Composite(new qx.ui.layout.VBox());

      // Create button
      var button1 = new qx.ui.form.Button("First Button", "sample/test.png");

      var dec = new qx.ui.decoration.Rounded();
      dec.setColorTop("border-focused-light-shadow");
      dec.setColorBottom("border-focused-light-shadow");
      dec.setColorLeft("#A5BDDE");
      dec.setColorRight("#A5BDDE");
      dec.setWidth(2);
      dec.setRadius(4);
		
      button1.setDecorator(dec);

      container1.add(button1);

      // Add button to document with coordinates
      this.getRoot().add(container1, {
        left : 50,
        top : 50
      });

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
I hope this is useful.

Will.


View this message in context: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1
Sent from the qooxdoo-devel mailing list archive at Nabble.com.

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

Sebastian Werner
Hi Will,

thank you for your feedback. The rounded border decorator (there are still other classes to produce rounded borders in qooxdoo 0.8) was removed because of the too irregular rendering result. It was still not enough to fulfill our needs. And as there are better alternatives for qooxdoo users, we thought this class is better removed from the qooxdoo mainline for the moment.

Still thanks for your feedback. Keep it coming.

Cheers,
Sebastian


Am 08.08.2008 um 18:11 schrieb WillP:

The decorator qx.ui.decoration.Rounded does not resolve themed colours in Internet Explorer. The code below illustrates this - in FireFox the border is (correctly) the same colour all the way around but in Internet Explorer the top and bottom borders are black.
FireFox 3.0.1
Internet Explorer 6.0

In the "mshtml" specific render method of qx.ui.decoration.Rounded it calls _resolveColor

var fillColor = this._resolveColor(backgroundColor || this.getBackgroundColor()) || "white";
for the background fill color but the use of _resolveColor is missing for the border colours and it just uses the values from
this.getColorLeft()
this.getColorTop()
... etc.

This works if the values are actual colour specifications but not for theme colour aliases.

I also notice that in IE (v6 - I haven't tried with v7) the rounded borders are drawn with some pixel colour blending at the edges which can make them appear a little fuzzy and they are also sometimes wider than specified in the code. In the example the top and left borders are actually drawn as three pixels wide and on all sides only one pixel width is the colour actually requested, whereas in FireFox all the borders are exactly two pixels wide and "cleanly" drawn in the required colour. I guess this may be due to the browsers' different rendering algorithms.

    main : function()
    {
      // Call super class
      this.base(arguments);

      var container1 = new qx.ui.container.Composite(new qx.ui.layout.VBox());

      // Create button
      var button1 = new qx.ui.form.Button("First Button", "sample/test.png");

      var dec = new qx.ui.decoration.Rounded();
      dec.setColorTop("border-focused-light-shadow");
      dec.setColorBottom("border-focused-light-shadow");
      dec.setColorLeft("#A5BDDE");
      dec.setColorRight("#A5BDDE");
      dec.setWidth(2);
      dec.setRadius(4);
		
      button1.setDecorator(dec);

      container1.add(button1);

      // Add button to document with coordinates
      this.getRoot().add(container1, {
        left : 50,
        top : 50
      });

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
I hope this is useful.

Will.


View this message in context: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1
Sent from the qooxdoo-devel mailing list archive at Nabble.com.
-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

Paul Morel

It looks like IE 6 has some other issues with the new Modern theme.  The
tabs, window shadows, and other appearances are drawing with the incorrect
colors.

http://www.nabble.com/file/p18951812/qx_tab_ie6.jpg 

I am also seeing issues with the demo browser rendering the selected item in
the demo window.  After double clicking the item in the left pane, the code
and html loads but nothing is rendered.  It all works very nicely in Firefox
v2 though :)

-Paul
--
View this message in context: http://www.nabble.com/Rounded-border-colours-in-Internet-Explorer---qooxdoo-0.8-beta1-tp18894747p18951812.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

Sebastian Werner
Hi Paul.

These issues should have been fixed recently in SVN. For the weekly on  
Friday the demos will be uploaded again. Maybe you have verify that it  
is fixed then.

Thanks for the report.

Sebastian



Am 12.08.2008 um 22:14 schrieb Paul Morel:

>
> It looks like IE 6 has some other issues with the new Modern theme.  
> The
> tabs, window shadows, and other appearances are drawing with the  
> incorrect
> colors.
>
> http://www.nabble.com/file/p18951812/qx_tab_ie6.jpg
>
> I am also seeing issues with the demo browser rendering the selected  
> item in
> the demo window.  After double clicking the item in the left pane,  
> the code
> and html loads but nothing is rendered.  It all works very nicely in  
> Firefox
> v2 though :)
>
> -Paul
> --
> View this message in context: http://www.nabble.com/Rounded-border-colours-in-Internet-Explorer---qooxdoo-0.8-beta1-tp18894747p18951812.html
> Sent from the qooxdoo-devel mailing list archive at Nabble.com.
>
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's  
> challenge
> Build the coolest Linux based applications with Moblin SDK & win  
> great prizes
> Grand prize is a trip for two to an Open Source event anywhere in  
> the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

WillP-2
In reply to this post by Sebastian Werner
I have tried using the Grid decorator to achieve rounded corners now that the Rounded decorator has been removed and there are still some problems in Internet Explorer 6.0 - it does not render the bottom border. I have altered the demo program to show the problem. I used this set of 3x3 images to make the border.

Here are the results

FireFox 3.0.1
Internet Explorer 6.0
    main : function()
    {
      // Call super class
      this.base(arguments);

      var container1 = new qx.ui.container.Composite(new qx.ui.layout.VBox());

      // Create button
      var button1 = new qx.ui.form.Button("First Button", "sample/test.png");

      var dec = new qx.ui.decoration.Grid();
      dec.setBaseImage("sample/border1.gif");
      dec.setInsets([3,3,3,3]);
		
      button1.setDecorator(dec);

      container1.add(button1);

      // Add button to document with coordinates
      this.getRoot().add(container1, {
        left : 50,
        top : 50
      });

      // Add an event listener
      button1.addListener("execute", function(e) {
        alert("Hello World!");
      });
    }
It's a shame you had to remove the Rounded decorator as it seemed to work really well in FireFox and served as a convenient way to grab some images for use in an alternative Grid decorator.

I'm not obsessed by rounded borders and I could live with square corners if there is no alternative but I hope the Grid decorator won't also be removed.

Will.

Sebastian Werner wrote:
Hi Will, thank you for your feedback. The rounded border decorator (there are still other classes to produce rounded borders in qooxdoo 0.8) was removed because of the too irregular rendering result. It was still not enough to fulfill our needs. And as there are better alternatives for qooxdoo users, we thought this class is better removed from the qooxdoo mainline for the moment. Still thanks for your feedback. Keep it coming. Cheers, Sebastian


View this message in context: Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1
Sent from the qooxdoo-devel mailing list archive at Nabble.com.

-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

Sebastian Werner
The Grid decorator has got a few improvements yesterday. Maybe you can
try it again with the latest trunk or wait until the rc1 next week.

Cheers,
Sebastian


WillP schrieb:

> I have tried using the Grid decorator to achieve rounded corners now
> that the Rounded decorator has been removed and there are still some
> problems in Internet Explorer 6.0 - it does not render the bottom
> border. I have altered the demo program to show the problem. I used this
> set of 3x3 images to make the border.
>
>
>
>
>
> Here are the results
>
> FireFox 3.0.1
> Internet Explorer 6.0
>
>     main : function()
>     {
>       // Call super class
>       this.base(arguments);
>
>       var container1 = new qx.ui.container.Composite(new qx.ui.layout.VBox());
>
>       // Create button
>       var button1 = new qx.ui.form.Button("First Button", "sample/test.png");
>
>       var dec = new qx.ui.decoration.Grid();
>       dec.setBaseImage("sample/border1.gif");
>       dec.setInsets([3,3,3,3]);
>
>       button1.setDecorator(dec);
>
>       container1.add(button1);
>
>       // Add button to document with coordinates
>       this.getRoot().add(container1, {
>         left : 50,
>         top : 50
>       });
>
>       // Add an event listener
>       button1.addListener("execute", function(e) {
>         alert("Hello World!");
>       });
>     }
>
> It's a shame you had to remove the Rounded decorator as it seemed to
> work really well in FireFox and served as a convenient way to grab some
> images for use in an alternative Grid decorator.
>
> I'm not obsessed by rounded borders and I could live with square corners
> if there is no alternative but I hope the Grid decorator won't also be
> removed.
>
> Will.
>
>     Sebastian Werner wrote:
>     Hi Will, thank you for your feedback. The rounded border decorator
>     (there are still other classes to produce rounded borders in qooxdoo
>     0.8) was removed because of the too irregular rendering result. It
>     was still not enough to fulfill our needs. And as there are better
>     alternatives for qooxdoo users, we thought this class is better
>     removed from the qooxdoo mainline for the moment. Still thanks for
>     your feedback. Keep it coming. Cheers, Sebastian
>
>
> ------------------------------------------------------------------------
> View this message in context: Re: Rounded border colours in Internet
> Explorer - qooxdoo 0.8 beta1
> <http://www.nabble.com/Rounded-border-colours-in-Internet-Explorer---qooxdoo-0.8-beta1-tp18894747p18960533.html>
> Sent from the qooxdoo-devel mailing list archive
> <http://www.nabble.com/qooxdoo-devel-f3822.html> at Nabble.com.
>
>
> ------------------------------------------------------------------------
>
> -------------------------------------------------------------------------
> This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
> Build the coolest Linux based applications with Moblin SDK & win great prizes
> Grand prize is a trip for two to an Open Source event anywhere in the world
> http://moblin-contest.org/redirect.php?banner_id=100&url=/
>
>
> ------------------------------------------------------------------------
>
> _______________________________________________
> qooxdoo-devel mailing list
> [hidden email]
> https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: Rounded border colours in Internet Explorer - qooxdoo 0.8 beta1

Fabian Jakobs
Administrator
In reply to this post by Paul Morel
Hi Paul,

> It looks like IE 6 has some other issues with the new Modern theme.  The
> tabs, window shadows, and other appearances are drawing with the incorrect
> colors.
>
> http://www.nabble.com/file/p18951812/qx_tab_ie6.jpg 
>
> I am also seeing issues with the demo browser rendering the selected item in
> the demo window.  After double clicking the item in the left pane, the code
> and html loads but nothing is rendered.  It all works very nicely in Firefox
> v2 though :)
>
> -Paul
>  
We had a regression in the image rendering. The transparent PNG support
for IE6 was temporarily disabled. Sebastian is currently working on this
issue.

Best Fabian

--
Fabian Jakobs
JavaScript Framework Developer

1&1 Internet AG
Brauerstra├če 48
76135 Karlsruhe

Amtsgericht Montabaur HRB 6484

Vorstand: Henning Ahlert, Ralph Dommermuth, Matthias Ehrlich, Thomas Gottschlich, Matthias Greve, Robert Hoffmann, Markus Huhn, Oliver Mauss, Achim Weiss
Aufsichtsratsvorsitzender: Michael Scheeren


-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel