PDA

View Full Version : [FIXED][3.0RC1/1.1/2] Buttons btn.gif "Uglied" between 3.0 Dev Preview and 3.0 RCx



MD
16 Apr 2009, 3:12 PM
Undoubtedly, others have likely also noticed this -- it appears that the btn.gif has gotten "uglied" somewhere along the line between the initial 3.0 Dev preview back in April, 2008 and the current 3.0 RC1/1.1/2. The graphic that ships with RC1/1.1/2 has chopped corners where they were once nicely anti-aliased, the top and bottom edges have been darkened, and the bottom edge is now inexplicably a completely different shade that comes off looking more like an error in positioning.

I've attached a little snap with the points of comparison between the two.

3.0 RC2 Buttons Example (http://extjs.com/deploy/ext-3.0-rc2/examples/button/buttons.html) vs. 3.0 Dev Preview Buttons Example (http://extjs.com/playpen/ext-3.0-dev/examples/button/buttons.html)

3.0 RC2's btn.gif (http://extjs.com/deploy/ext-3.0-rc2/resources/images/default/button/btn.gif) vs. 3.0 Dev Preview's btn.gif (http://extjs.com/playpen/ext-3.0-dev/resources/images/default/button/btn.gif)

MD

syscobra
16 Apr 2009, 3:26 PM
I can see in your gif files in the dev btn.gif its small one between parts of the button.
312 pixel's height.
the new one have 4312 of height.
What this mean? this mean they changed the button gifs to implement a really big button (or i mean a very big sized button) so you can use the button in any size. with the dev gifs maybe if you put a button of 200px height it would get very ugly and miss the graphic.

I don't know if i explained myself but in short ways:

I don't had access to early versions, but as i know something about css i think they changed the button to get any size and in the change they missed the corner great looking of the dev version you are showing.

syscobra
16 Apr 2009, 3:54 PM
Ok, i look at the 2 files you post here, and i found there was a problem with the new one.

So here is why:

The corners sprite looks like that 1600% amplified:
http://ideashs.com/extjs/btnfix.jpg

As you see the first one has some light gray in the corners that the 3.0 released didn't have.
So i modified it and get it as the dev one but with the size of the new 3.0RC01 gif file.

Download the file here (http://ideashs.com/extjs/btn.gif)... (Click save as) and put it in the proyect you are using to see if it gets better now. (didn't have time to test it myself)

Please let me know if it worked for you.

Thanks.

P.D. : Update just put the file on my download of 3.0RC1 and it worked. its too tiny but it looks better.

MD
16 Apr 2009, 6:54 PM
Javier, thanks for also taking a look at it. Good eye -- I hadn't even noticed the difference on the inside of the corner sections. Yeah, the sprite's height has (assumedly) been changed in 3.0 to accommodate greater flexibility in the height of a button's contents (small/medium/large icons, etc.).

I've now also noticed the visual change in Toolbar buttons between 2.2.1 and 3.0 RC1. IMHO, in 2.2.1 they look great, but in 3.0 RC1 the down state looks too dark and flat, while the hover state seems too light and has an awkward almost cyanish tone.

I'm not sure what the rationale was behind changing all those. And yes, before it's suggested, I know I could do my own theme/fix specific sprites to my liking, but surely I'm not the only one who thinks the current iteration of buttons look "ugh". I know it's a nit-picky thing, and I feel like somewhat of a for fussing over it, but I think it'd be a nice move to correct it in SVN so that everybody else doesn't end up having to doctor those sprites as well. :s

MD

syscobra
16 Apr 2009, 7:09 PM
Ok i investigated with firebug and that is because the new toolbar button's are using the same button graphic i just changed. so the toolbar has the same old backgroung image and the new button was made with the new sprite. Maybe is because of the group buttons stuff that you can make the toolbar with buttons of any height and all that.
This is not too easy to fix because i would need to change the background and then we will get more problems (the toggled button will look more dark).
The other solution is to change the color of the button sprite to match the toolbar, but you will have to change the group too or something like that. dunno. maybe is not too much (the problem) for all that work :P

mystix
25 Apr 2009, 11:59 PM
Ok i investigated with firebug and that is because the new toolbar button's are using the same button graphic i just changed. so the toolbar has the same old backgroung image and the new button was made with the new sprite. Maybe is because of the group buttons stuff that you can make the toolbar with buttons of any height and all that.
This is not too easy to fix because i would need to change the background and then we will get more problems (the toggled button will look more dark).
The other solution is to change the color of the button sprite to match the toolbar, but you will have to change the group too or something like that. dunno. maybe is not too much (the problem) for all that work :P

if you haven't already done so, could one of you report this in the 3.x Bugs forum with a link back to this discussion? that should help keep things on the radar.

MD
2 Jun 2009, 9:27 PM
As the 3.0 final release date nears, I figured I should give this one a bump. Really hope to see this dealt with before release. :s

MD

evant
2 Jun 2009, 10:49 PM
To clarify, if you switch back to the old gif does everything look fine? I had a quick look and I wasn't really able to tell the difference except for the menu at the bottom example.

MD
3 Jun 2009, 9:56 AM
Hi Evan,

Yes, it would effectively be corrected and look as it should by switching back to the old btn.gif from 3.0-dev (formerly at http://extjs.com/playpen/ext-3.0-dev/resources/images/default/button/btn.gif but has since disappered). The only additional step it would require is that the old dev sprite needs its bottom portion(s) extended to match the height of btn.gif in 3.0-RCx (height was extended in the RC's to accomodate taller buttons I assume). It's literally a 5 minute job in Photoshop for whomever handles doing Ext's graphics.

Out of my bug reports, feature requests, etc., this is the one thing where I'm down on my hands and knees begging to have fixed.

MD

MD
3 Jun 2009, 6:59 PM
I found a copy of the dev btn.gif that I'd saved, and have updated it accordingly. The btn.gif in the attachment serves as a drop-in replacement for the existing one in resources/images/default/button/ in 3.0-RCx. I wasn't able to do a version for the images/gray them as I couldn't tell what adjustments were made to it in the original -- I know, however, that it wasn't just a desaturation.

Regretfully, I was too late on supplying this as I see it missed the boat for RC2. I really do hope it can be checked into SVN before final release.

MD

mprice
10 Jun 2009, 9:12 AM
I would like to bump this defect. I too would really like to see this resolved before final release. Seems simple since the correct image was supplied by MD.

evant
15 Jun 2009, 6:49 AM
The older image has been added. So far I haven't noticed anything strange so I'll mark this as fixed.

mschwartz
15 Jun 2009, 6:54 AM
FWIW, I never liked the buttons in toolbars. They don't look like buttons unless you hover over them. Not so enlightened users may not realize they're buttons at all.

Could be solved by using the current hover image as the base image and modifying the hover image so it looks depressed. To me, the hover image currently looks like the button is standing out from the toolbar, since the background gets lighter. To make it look depressed on hover, the background should get darker.

Like the tabs look when inactive (dark) vs active (bright)


$.02

mjlecomte
15 Jun 2009, 9:29 AM
FWIW, I never liked the buttons in toolbars. They don't look like buttons unless you hover over them. Not so enlightened users may not realize they're buttons at all.

Could be solved by using the current hover image as the base image and modifying the hover image so it looks depressed. To me, the hover image currently looks like the button is standing out from the toolbar, since the background gets lighter. To make it look depressed on hover, the background should get darker.

Like the tabs look when inactive (dark) vs active (bright)


$.02

http://extjs.com/forum/showthread.php?t=50603

mschwartz
15 Jun 2009, 9:33 AM
http://extjs.com/forum/showthread.php?t=50603

Nice!

Any way to have a hover animation, too?

mystix
15 Jun 2009, 9:49 AM
i've been using @exo's css overrides for the 2.x branch and they work just fine for me (against the 2.x branch only):


.x-toolbar .x-toolbar-standardBtn .x-btn-left{background: url(../images/default/button/btn-sprite.gif) no-repeat 0 0;}
.x-toolbar .x-toolbar-standardBtn .x-btn-center{background: url(../images/default/button/btn-sprite.gif) repeat-x 0 -42px; text-align: center;}
.x-toolbar .x-toolbar-standardBtn .x-btn-right{background: url(../images/default/button/btn-sprite.gif) no-repeat 0 -21px;}
.x-toolbar .x-toolbar-standardBtn .x-btn-over .x-btn-left{background: url(../images/default/button/btn-sprite.gif) no-repeat 0 -63px;}
.x-toolbar .x-toolbar-standardBtn .x-btn-over .x-btn-center{background: url(../images/default/button/btn-sprite.gif) repeat-x 0 -105px;}
.x-toolbar .x-toolbar-standardBtn .x-btn-over .x-btn-right{background: url(../images/default/button/btn-sprite.gif) no-repeat 0 -84px;}
.x-toolbar .x-toolbar-standardBtn .x-btn-click .x-btn-center,.x-btn-menu-active .x-btn-center{background-position:0 -126px;}

hover effects included :)

mschwartz
15 Jun 2009, 9:50 AM
3.0 branch styles?

mystix
15 Jun 2009, 9:53 AM
3.0 branch styles?

err no. i'm using it against the 2.x branch only, sorry.
updated my post above to include that information.

thought it might be somewhat useful in creating a 3.x equivalent.

MD
5 Jul 2009, 10:02 AM
In RC3, while the btn.gif in the default theme has been corrected, the btn.gif in the gray theme is still the old ugly non-anti-aliased one :(. Please address this easy fix before 3.0 final.