1. #1
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default Can't Get Toolbar Icon SIze to Work

    Can't Get Toolbar Icon SIze to Work


    Hello, all.

    I've searched around the web to find information about sizing toolbar button icons and can't find anything beyond the following SASS variable:

    Code:
    $toolbar-icon-size: .2em;
    But so far I am unable to get this to change the size of the icons. I did discover a configuration for buttons in Ext.JS called "scale," which serves my purpose, but it doesn't work in Sencha Touch even though some Ext.JS components carry over.

    Any thoughts on how to resize the icons? I'm using Sencha Touch 1.1.1.

    Thanks in advance for any help.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,677
    Vote Rating
    749
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    It looks like the SASS variable $toolbar-icon-size is used in the CSS selector:

    Code:
    .x-button.x-button-plain, x.toolbar .x-button.x-button-plain img
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    Portland, OR
    Posts
    133
    Vote Rating
    5
    markwyner is on a distinguished road

      0  

    Default


    That is correct. Except that the button generated doesn't include the class "x-button-plain" as you've noted which means the sass variable is ignored.

    My JS looks like this:

    Code:
    items: [{
    	icon: 'resources/themes/images/pocket-csi/icon-settings.png'
    },{
    	xtype: 'spacer'
    },{
    	icon: 'resources/themes/images/pocket-csi/icon-info.png'
    }]
    It doesn't matter if I use $toolbar-icon-size: 10px; or $toolbar-icon-size: 100px;. In either case the icons are the same size. This is because the CSS generated looks like this:

    Code:
    .x-button.x-button-plain img, .x-toolbar .x-button.x-button-plain img {
      -webkit-mask-size: 10px;
      width: 10px;
      height: 10px;
    }
    And the generated HTML looks like this:

    Code:
    <div id="ext-comp-1014" class="x-button x-button-normal x-iconalign-left">
    	<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url(resources/themes/images/pocket-csi/icon-settings.png)" id="ext-gen1011">
    </div>
    So the sass variable $toolbar-icon-size applies to a class that doesn't exist in the generated HTML. Am I missing something or is not not applying like it should?

    Thanks.

    P.S. I wanted to report this as a bug but wanted to make sure it was indeed a bug and not a misunderstanding of how to use this sass variable.
    -------------------------------------------
    Mark Wyner, Partner, Bunker
    http://bunkercollective.com/

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    1
    Vote Rating
    0
    UsernameIsValid is on a distinguished road

      0  

    Lightbulb Solution (or so I thought)

    Solution (or so I thought)


    edit: wrong thread, my solution is for scaling image buttons 8-|
    What works for me is adding a new class and defining it manually in the stylesheets like so:

    custom.sass:
    Code:
    // increase 'largebutton' size
    $large-button-size: 50px;
    
    .largebutton img.x-icon-mask {
        -webkit-mask-size: $large-button-size !important;
        width: $large-button-size;
        height: $large-button-size;
        margin: .4em auto .3em;
    }
    view.js
    Code:
    var dashboard = new Ext.Panel({
        layout: {
            type : 'vbox',
            pack : 'justify'
        },
        defaults: {
            layout: {
                type: 'hbox',
                pack: 'center'
            },
            flex: 1,
            width: '100%',
            defaults: {
                xtype: 'button',
                iconMask: true,
                iconAlign: 'top',
                iconCls: 'help',
                cls: 'largebutton',
                margin: '0 25 0 25',
                width: 150,
                height: 100
            }
        },
        items: [
            {
                items: [
                    {
                        text: 'Anfragen',
                        iconCls: 'note2'
                    },
                    {
                        text: 'F.A.Q.'
                    }
                ]
            },
            {
                items: [
                    {
                        text: 'Twitter',
                        iconCls: 'twitter2'
                    },
                    {
                        text: 'Facebook',
                        iconCls: 'user3'
                    }
                ]
            }
        ]
    });
    Attached Images

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar