PDA

View Full Version : [OPEN] Howto: use custom pictos with Sencha Touch



themightychris
27 Oct 2012, 10:20 AM
This was a pain, and I drew from Steffen Hiller's blog post on this (http://www.senchatouchbits.com/9/adding-custom-embedded-inline-icons.html). Follow this procedure to use your own icon masks without having to add them to the SDK's pictos directory and keep everything CMD-friendly:

1) Add images_path setting after images_dir in MyApp/resources/sass/config.rb



# Require any additional compass plugins here.
images_dir = File.join(dir, "..", "images")
images_path = images_dir
output_style = :compressed
environment = :production


2) Define this new mixin that is a modified copy of pictos-iconmask -- I stashed mine in MyApp/resources/sass/mixins/_custom-iconmask.scss and then @import'd it, but you could drop it right in app.scss for simplicity


@mixin custom-iconmask($name) {
.x-tab .x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: inline-image('icons/' + $name + '.png');
}
}


3) Place your icons in MyApp/resources/images/icons/*.png

4) Use custom-iconmask just like you would use pictos-iconmask:


@include custom-iconmask('myapp-logo');



Sencha - please preconfigure compass for us so that inline-image() pulls from MyApp/resources/images out-of-the-box

dongryphon
28 Oct 2012, 4:56 PM
Thanks for the report! I have opened a bug in our bug tracker.

youdonotexist
4 Dec 2012, 2:04 PM
Make sure to add


-webkit-mask-repeat: no-repeat;

..to _custom-iconmask.scss


@mixin custom-iconmask($name) {
.x-tab .x-button-icon.#{$name},
.x-button .x-button-icon.x-icon-mask.#{$name} {
-webkit-mask-image: inline-image('icons/' + $name + '.png');
-webkit-mask-repeat: no-repeat;
}
}


if you don't want the icon to repeat vertically.

ericchaves
9 Jan 2013, 10:38 AM
I'm not a saas guy and I would like to ask if is it possible to have directories handled by this mixing/function?

For example, assuming the following directory structure



MyApp/resources/images/icons/myapp-logo.png
MyApp/resources/images/icons/icons_white/myapp-logo.png
MyApp/resources/images/icons/icons_gray/myapp-logo.png


I'd like to have the following calls working:



@include custom-iconmask('myapp-logo');
@include custom-iconmask('icons_white/myapp-logo');
@include custom-iconmask('icons_gray/mayapp-logo');

And then in my code to just reference it as



iconCls: 'myapp-logo';
iconCls: 'icons_white/myapp-logo';
iconCls: 'icons_gray/mayapp-logo';


Thanks!

farion
8 Apr 2013, 2:22 AM
Still not possible to use inline-image with sencha cmd 3.1.0.256.

Regards arion.

tatobari
9 Nov 2013, 12:44 PM
I lost a few minutes finding out these three facts. Thought I'd be helping other begginers by sharing this here.

- Since the icon is used as a mask, remember to set the container's background-color to something different from the parent's background-color.

- Size can be importante here. The property is -webkit-mask-size. Most of the times, the icon will be bigger than its container. In Sencha Touch 2.3.0, all Pictos Icons are 60x60.

- Last but not least, -webkit-mask-position. I've set it as default to:

-webkit-mask-position; center center.