PDA

View Full Version : App that shows all Sencha toolbar icons



jep
16 Sep 2011, 7:49 AM
I made this little app to show me all the possible icons I can use for toolbars. Not all of the icons are in the default CSS, so you have to add them yourself. This app shows the icons and lets you click it to find the name of the style and the CSS text you'll need to include. I tend to use it in Chrome while developing, so it might not work as well on a phone/tablet.

Note that it doesn't know which ones are already added in the default CSS. So try the name first (as your iconCls property). If it doesn't load, then add the CSS.

You'll also probably need to change the directory for Sencha Touch to where it is on your system.


http://img101.imageshack.us/img101/107/screenhv.gif

Edit: Added ST 2.0 RC code from user Tap Into Apps. Also included bug fix thanks to Tap Into Apps.

jep
20 Sep 2011, 9:30 AM
Noticed I had screwed up something that made the CSS text incorrect. Fixed it and replaced icons.zip.

pmarsilio
20 Sep 2011, 11:40 PM
Very nice.
thanks for sharing it.

andrea.hussey
5 Oct 2011, 11:07 AM
Is there an easy way to add additional icons to this app? I've been looking around and haven't had much luck. I want to add a facebook icon. Is there anything special I would have to do to add the icon? I did the base64 conversion and copied that in.

jep
5 Oct 2011, 11:28 AM
If you've already got the base64, you should be able to add it pretty easily. Just put this in icon.css:



.x-tab img.facebook, .x-button img.facebook { -webkit-mask-image: url('data:image/png;base64,BASE64CODEGOESHERE'); }


Make sure you change that png to whatever is the appropriate format. Then add 'facebook' to the end of the icons array in icons.html and I think you should be set.

I'm going to assume that the facebook icon you have is in the same mask style that the sencha icons are.

andrea.hussey
6 Oct 2011, 9:50 AM
No luck. All I get is a white box instead of the icon.

jep
6 Oct 2011, 11:11 AM
Upload the icon you're trying to use here.

andrea.hussey
6 Oct 2011, 12:25 PM
Here's the icon.

jep
6 Oct 2011, 12:29 PM
That's not at all like the same style as the sencha icons. Look at the ones in the resources\themes\images\default\pictos folder. They're 60x60x24bpp PNG files. This one is a 38x38x24bpp JPG. I would first try to isolate the problem by using the exact same format as Sencha already does.

andrea.hussey
6 Oct 2011, 12:30 PM
I also tried this icon as well

jep
6 Oct 2011, 12:30 PM
Same comments apply to this one.

wilzdezign
6 Oct 2011, 4:26 PM
Ya.. I think it needs to be PNG so it can use it as a mask. try making it 64x64 as a PNG

relson
14 Feb 2012, 2:29 PM
Very Helpful, thanks

Tap Into Apps
8 Mar 2012, 3:38 PM
I've just quickly updated this code to work with ST2 Final. I just dropped the items into a folder in the examples folder of the ST2 download and it runs from there.

Hope this helps!

jep
8 Mar 2012, 3:50 PM
Awesome, thanks for that! Was just thinking the other day how I needed to do that. Saved me some time.

By the way, my original code as well as your update has a bug I haven't had time to track down. Sometimes, the CSS box doesn't have the right item for what you click on. For example, if you click on the big quote that's the first icon on the left far down the list, it says:



quote1
.x-button-icon.quote2 { -webkit-mask-image: [...]


It should be quote1 on both. I can't remember if it loads the right image mask, either. It's easy to work around but it's something that should be fixed at some point. Probably just some stupid indexing problem, but like I said, no time to fix yet. Just a heads-up.

Tap Into Apps
8 Mar 2012, 3:58 PM
Ah, well I never noticed that! Found the issue, it was due to the list of items containing:
'power socket',

and its probably the space that broke it as none of the others have a space(makes sense come to think of it), however as there isn't an item in the css for it I have removed it and all works fine. If you have an icon for that then let me know and i'll add it in, otherwise i'll just upload the updated zip.

jep
8 Mar 2012, 4:13 PM
Ahh! Thanks for tracking that down. Naughty sencha have a "power socket.png" file in there. None of the other files have spaces. So that broke the perl script I wrote to generate out the CSS.

To fix it, change "power socket" in the html file to "power_socket". Then put this in the CSS:

For ST 1.1.1:


.x-tab img.power_socket, .x-button img.power_socket { -webkit-mask-image: url('data:image/png;base64,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'); }


For 2 RC:


.x-button-icon.power_socket { -webkit-mask-image: url('data:image/png;base64,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'); }

jep
8 Mar 2012, 4:27 PM
Fixed the code in both and included your 2.0 version. The zip files in the first post now reflect that. Didn't bother updating the screenshot, though. :D

Thanks again for your help.

jeffyt
16 Mar 2012, 10:41 AM
Thanks for creating this...very helpful.