PDA

View Full Version : All Picto icons available on Toolbar?



Bucs
26 Jan 2011, 12:57 PM
I am playing around with the available iconCls values as buttons for a toolbar but it seems like not all of them render properly, in fact, most don't. I get weird gray blanks where the icon is, as if it cannot find the image in question. Is it that most of the icons in the Picto directory simply don't have iconCls classes setup and we have to do that manually? I tried that and still the same result.

So this works fine:


{
iconCls: 'action', <--- Works fine (first icon in Picto dir)...and so do say 'compose', and 'more'
iconMask: true,
ui: 'plain',
handler: this.tapHandler
}


But this does not work, get blank gray box where icon should be:


{
iconCls: 'note1', <--- gives blank where icon should be, same with many others, yet all are pngs in the same directory as the ones that work.
iconMask: true,
ui: 'plain',
handler: this.tapHandler
}


Love to know what the issue is here as we will eventually need to make our own as well. Is there a guide on this somewhere that I'm missing?

Thanks....

Bucs
26 Jan 2011, 1:23 PM
I got it, I was missing the quotes around the PNG in my iconCls CSS declaration.

So the above works with the following CSS class declared (after Sencha css):


.x-tab img.showStack,.x-button img.x-icon-mask.showStack{-webkit-mask-image:url('/images/showStack.png')}

gcallaghan
26 Jan 2011, 1:27 PM
You need to enable the picto icons you want. You can do this by

move all wanted files from resources/themes/images/default/pictos up to default/ and regenerate the css file
add the icons to your application.scss file and regenerate the css files




@include pictos-iconmask('search');
@include pictos-iconmask('home');
@include pictos-iconmask('doc2');
@include pictos-iconmask('list');
@include pictos-iconmask('tag');
@include pictos-iconmask('user_list');
@include pictos-iconmask('user_list2');
@include pictos-iconmask('user_remove2');
@include pictos-iconmask('video');
@include pictos-iconmask('help_black');
@include pictos-iconmask('arrow_right');
@include pictos-iconmask('right2');


see http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/

Bucs
26 Jan 2011, 1:30 PM
Geez, thanks @gcallaghan. How are we supposed to know these things? :) Is there a theme-ing doc somewhere that explains all this? And I have yet to regen the CSS...how is that done?

Thanks again!

gcallaghan
26 Jan 2011, 1:33 PM
How are we supposed to know these things? Is there a theme-ing doc somewhere that explains all this? And I have yet to regen the CSS...how is that done?
I realized this as I hit submit, so I updated my earlier post to include a reference to the theming doc.

Bucs
26 Jan 2011, 1:34 PM
Awesome, thanks again!

AndreaCammarata
26 Jan 2011, 1:34 PM
You can take a look at this Sencha blog article

http://www.sencha.com/blog/2010/12/17/an-introduction-to-theming-sencha-touch/

or watch this video

http://vimeo.com/17879651

Hope this helps.

gcallaghan
26 Jan 2011, 1:42 PM
@andreacammarata

or watch this video

http://vimeo.com/17879651

good call on the video, I hadn't seen that yet.

AndreaCammarata
26 Jan 2011, 1:47 PM
@andreacammarata


good call on the video, I hadn't seen that yet.

Finally Sencha open conference videos to everyone.
So you can see a lot of new video at the following link

http://www.sencha.com/conference/sessions/videos.php