Results 1 to 7 of 7

Thread: How do I change the default disclosure icon

  1. #1
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default Answered: How do I change the default disclosure icon

    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

  2. Try this:

    Code:
        .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==');
        }

  3. #2
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Omaha, NE
    Posts
    631
    Answers
    10
    Vote Rating
    42
      0  

    Default

    Try this:

    Code:
        .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==');
        }

  4. #3
    Sencha User
    Join Date
    Aug 2011
    Posts
    5
    Vote Rating
    0
      0  

    Default

    That seems to do the trick. Thanks.

  5. #4
    Sencha User
    Join Date
    May 2011
    Posts
    28
    Vote Rating
    0
      0  

    Default

    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?

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Answers
    4
    Vote Rating
    0
      0  

    Exclamation

    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?

  7. #6
    Sencha Premium User NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    538
    Vote Rating
    2
      0  

    Default

    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
    Noah
    Front-End Developer
    Norfolk Southern

  8. #7
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,357
    Answers
    3997
    Vote Rating
    1501
      0  

    Default

    Quote Originally Posted by NoahK17 View Post
    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 SASS variable
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •