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,754
    Vote Rating
    828
    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,754
    Vote Rating
    828
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi