PDA

View Full Version : How do I change the default disclosure icon



JoeKueser
20 Aug 2011, 9:34 AM
I would like to change the disclosure icon in the list to look more like the default iPhone disclosure icon. I've looked over the theming documentation and can't figure out how to do this.

Looking at the existing default theme, it looks like the "right" way would be to give my theme a name, assign it to $theme_name, and put my icon in the right place and it will just work, but this does not appear to be the case (unless I am creating my theme incorrectly).

Let's pretend I have a theme called "mytheme". I created a scss file called "mytheme.scss". I copied the contents of the apple.scss file, because I want it mostly based on that. At the top of the file, I added "$theme_name='mytheme'", and I created a directory "resources/themes/images/mytheme" and added a "disclosure.png" file there. No workie.

So I big-hammered it and just created a css class .x-list-disclosure in my css and pointed it to the image I created. It showed my disclosure, but it was overlaid with the default.

So could anyone please tell me the right way to do this? I'm going to be overriding quite a few of the default icons, and I would love to get it right.

Thanks!

Joe

estesbubba
22 Aug 2011, 1:21 PM
Try this:


.x-list-disclosure { width: 12px;
height: 1.5em;
margin: 0 0 0 .5em;
-webkit-mask: none;
-webkit-mask-box-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAYAAAC58NwRAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjbQg61aAAAAc0lEQVQ4T2NgGGagtLS0DoSJ8hZIYVlZ2X8QJkoTUFELTAOILikpqSZoE7ma2tFsqiDGJtI0FRYWSgOd9xYpEJ4AxYSw2gRVfBtNsQqdFdvb27MA3XyEKGfA3AZ0uwpQ0xMQBrEJBiVIAUgh0YqJMpEuigDEnX39an6ddgAAAABJRU5ErkJggg==');
}

JoeKueser
22 Aug 2011, 1:37 PM
That seems to do the trick. Thanks.

chearner
26 Sep 2011, 10:11 AM
Edit: this is a better solution, using pictos...
...if someone could fix the path to use a var and also how to auto base64 encode it, not sure how you would do that.

.x-list .x-list-disclosure {
-webkit-mask: none;
-webkit-mask-image: url('../../lib/touch/resources/themes/images/default/pictos/arrow_right.png') !important;
-webkit-mask-size: 24px 24px;
width: 24px;
height: 24px;
}


Did I miss something in this answer...how would you use a custom pictos icon or any new image I come up with to replace the disclosure icon?

robl
28 Oct 2011, 6:35 PM
I want to do the same but the icon is showing up as one solid color circle. I suspect it has something to do with the mask. What should I be looking at?

NoahK17
15 May 2018, 6:06 AM
For ExtJS 6.x, the solution is as follows:

.x-tool-type-disclosure:before {
content: 'help_outline';
}

Where you can change the content value to anything listed here: https://www.w3schools.com/icons/google_icons_action.asp

mitchellsimoens
15 May 2018, 7:52 AM
For ExtJS 6.x, the solution is as follows:

.x-tool-type-disclosure:before {
content: 'help_outline';
}

Where you can change the content value to anything listed here: https://www.w3schools.com/icons/google_icons_action.asp

Or use the $tool-disclosure-icon (http://docs.sencha.com/extjs/6.5.3/modern/Ext.Tool.html#css_var-S-$tool-disclosure-icon) SASS variable