1. #1
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      1  

    Default Custom theme for Ext.tip.ToolTip

    Custom theme for Ext.tip.ToolTip


    I am working on a custom theme for a ToolTip. Since the existing qtip mixin function does not support any params, I added the following UI function into my theme file substituting variables for params:

    Code:
    //define a helper for customizing tips
    @mixin extjs-tip-ui(
        $ui,
        
        $border-radius: $tip-border-radius,
        
        $border-width: $tip-border-width,
                
        $border-color: $tip-border-color,
        
        $background-color: $tip-background-color,
        
        $background-gradient: $tip-background-gradient,
        
        $body-color: $tip-body-color,
        
        $body-font-size: $tip-body-font-size,
        
        $body-font-weight: $tip-body-font-weight,
        
        $body-link-color: $tip-body-link-color,
    
    
        $body-padding: $tip-body-padding,
        
        $header-color: $tip-header-color,
        
        $header-font-size: $tip-header-font-size,
        
        $header-font-weight: $tip-header-font-weight,
    
    
        $header-padding: $tip-header-padding,
        
        $anchor-border-width: 5px,
        
        $anchor-border-color: $tip-border-color,
        
        $anchor-width: 10px,
        
        $anchor-height: 10px
    ) {
        .#{$prefix}tip-#{$ui} {
            position: absolute;
            overflow: visible; /*pointer needs to be able to stick out*/
            border-color: $border-color;
    
    
            .#{$prefix}tip-header {
                .#{$prefix}box-item {
                    padding: $header-padding;
                }
    
    
                .#{$prefix}tool {
                    padding: 0px 1px 0 0 !important;
                }
            }
        }
        
        @include x-frame(
            $cls: 'tip',
            $ui: $ui,
            $border-radius: $border-radius,
            $border-width: $border-width,
            $background-color: $background-color,
            $background-gradient: $background-gradient,
            $table: true
        );
        
        .#{$prefix}tip-header-text-#{$ui} {
            @include no-select;
    
    
            color: $header-color;
            font-size: $header-font-size;
            font-weight: $header-font-weight;
        }
    
    
        .#{$prefix}tip-header-draggable-#{$ui} {
            .#{$prefix}tip-header-text {
                cursor: move;
            }
        }
    
    
        // Tip is a Panel. It uses dock layout. Body style must be the same
        .#{$prefix}tip-body-#{$ui},
        .#{$prefix}form-invalid-tip-body-#{$ui} {
            overflow: hidden;
            position: relative;
            padding: $body-padding;
        }
    
    
        .#{$prefix}tip-header-#{$ui},
        .#{$prefix}tip-body-#{$ui},
        .#{$prefix}form-invalid-tip-body-#{$ui} {
            color: $body-color;
            font-size: $body-font-size;
            font-weight: $body-font-weight;
            a {
                color: $body-link-color;
            }
        }
        
        //nesting for customizing the anchor since the anchorEl does not get the UI class explicitly
        .#{$prefix}border-box .#{$prefix}tip-#{$ui} .#{$prefix}tip-anchor {
            width: $anchor-width;
            height: $anchor-height;
        }
        
        .#{$prefix}tip-#{$ui} {
            .#{$prefix}tip-anchor {
                position: absolute;
        
                overflow: hidden;
        
                height: 0;
                width: 0;
        
                border-style: solid;
                border-width: $anchor-border-width;
                border-color: $anchor-border-color;
        
                zoom: 1;
            }
            
            .#{$prefix}tip-anchor-top {
                border-top-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent;
        
                @if $include_ie {
                    _border-top-color: pink;
                    _border-left-color: pink;
                    _border-right-color: pink;
                    _filter: chroma(color=pink);
                }
            }
        
            .#{$prefix}tip-anchor-bottom {
                border-bottom-color: transparent;
                border-left-color: transparent;
                border-right-color: transparent;
                
                @if $include_ie {
                    _border-bottom-color: pink;
                    _border-left-color: pink;
                    _border-right-color: pink;
                    _filter: chroma(color=pink);
                }
            }
            
            .#{$prefix}tip-anchor-left {
                border-top-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
                
                @if $include-ie {
                    _border-top-color: pink;
                    _border-bottom-color: pink;
                    _border-left-color: pink;
                    _filter: chroma(color=pink);
                }
            }
            
            .#{$prefix}tip-anchor-right {
                border-top-color: transparent;
                border-bottom-color: transparent;
                border-right-color: transparent;
                
                @if $include-ie {
                    _border-top-color: pink;
                    _border-bottom-color: pink;
                    _border-right-color: pink;
                    _filter: chroma(color=pink);
                }
            }
        }
        
        //TODO: error qtip
    };
    With this UI function, I am able to create a custom UI definition, such as:
    Code:
    @include extjs-tip-ui(
        $ui: 'my-tip',
        //$border-radius: 30px,
        $border-width: 2px,
        $border-color: orange,
        $background-color: yellow,
        $background-gradient: color-stops(yellow, orange),
        $header-padding: 3px 5px 0,
        $anchor-border-width: 10px,
        $anchor-border-color: orange,
        $anchor-width: 20px,
        $anchor-height: 20px
    );
    All of this works great for browsers that support gradients. However, I also need to support legacy browsers like IE and so I'm using the following manifest:
    Code:
    Ext.onReady(function() {
        Ext.manifest = {
            widgets: [{
                xtype: 'widget.tooltip',
                ui: 'my-tip'
            }]
        };
    });
    The problems:
    • the images being generated do not match the names referenced in the CSS theme. File names are "tip-default-corners.gif" and "tip-default-sides.gif" but the CSS has "...tip-my-tip-corners.gif" and "...tip-my-tip-sides.gif"
    • the "tip-default-sides.gif" image is 0 bytes and the "tip-default-corners.gif" is all white.
    P.S. I did not include it here in my manifest but I have a custom UI definition for a button, which works perfectly for legacy browsers.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    Is this using the slicer? What Ext JS 4 version?
    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
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Yes, I'm using the slicer. My command (paths have been simplified):
    Code:
    sencha slice theme -v -d ...\ext -c ...\theme.css -o ...\custom -m ...\manifest.js
    * Ext 4.1.0
    * SenchaSDKTools-2.0.0-beta3

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    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


    to my knowledge, slicer is not 100% fixed
    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Mar 2008
    Location
    Phoenix, AZ
    Posts
    627
    Vote Rating
    10
    zombeerose will become famous soon enough zombeerose will become famous soon enough

      0  

    Default


    Can it be?
    Is the source for ext-theme available anywhere? I am assuming that is the slicing binary.

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Montréal, Canada
    Posts
    220
    Vote Rating
    5
    Christiand is on a distinguished road

      0  

    Default


    thanks for this post, really helpful

Thread Participants: 2