Custom theme for Ext.tip.ToolTip

[zombeerose]

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:

//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:

@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:

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.

[mitchellsimoens]

Is this using the slicer? What Ext JS 4 version?

[zombeerose]

Yes, I'm using the slicer. My command (paths have been simplified):

sencha slice theme -v -d ...\ext -c ...\theme.css -o ...\custom -m ...\manifest.js

* Ext 4.1.0
* SenchaSDKTools-2.0.0-beta3

[mitchellsimoens]

to my knowledge, slicer is not 100% fixed

[zombeerose]

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

[Christiand]

thanks for this post, really helpful