Make WordPress Core

Changeset 24686


Ignore:
Timestamp:
07/12/2013 08:34:14 PM (9 years ago)
Author:
markjaquith
Message:

Revisions: more graceful tooltips

  • Use hoverIntent to prevent inadvertent display and provide more forgiving exploration.
  • Nice interruptable fading animation.
  • Subtle CSS transition when moving the tooltip side-to-side.

Fixes #24734. See #24425.

Location:
trunk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-admin/css/wp-admin.css

    r24680 r24686  
    37113711    padding: 4px;
    37123712    display: none;
     3713    opacity: 0;
     3714    -webkit-transition: left 15ms;
     3715    -moz-transition:    left 15ms;
     3716    -ms-transition:     left 15ms;
     3717    -o-transition:      left 15ms;
     3718    transition:         left 15ms;
    37133719}
    37143720
  • trunk/wp-admin/js/revisions.js

    r24679 r24686  
    598598
    599599        toggleVisibility: function( options ) {
    600             options = options || {};
    601             var visible = this.visible();
    602             if ( visible ) { // Immediate show
    603                 this.$el.fadeIn( 200 );
    604             } else if ( options.immediate ) { // Immediate fade out
    605                 this.$el.fadeOut( 200 );
    606             } else { // Wait a bit, make sure we're really done, then fade it out
    607                 _.delay( function( view ) {
    608                     if ( ! view.visible() )
    609                         view.toggleVisibility({ immediate: true });
    610                 }, 500, this );
    611             }
     600            if ( this.visible() )
     601                this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
     602            else
     603                this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
     604            return;
    612605        },
    613606
     
    699692
    700693        events: {
    701             'mousemove'  : 'mouseMove',
    702             'mouseleave' : 'mouseLeave',
    703             'mouseenter' : 'mouseEnter'
     694            'mousemove' : 'mouseMove'
    704695        },
    705696
    706697        initialize: function() {
    707             _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove' );
     698            _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
    708699            this.listenTo( this.model, 'update:slider', this.applySliderSettings );
    709700        },
     
    715706                stop:  this.stop
    716707            }) );
     708
     709            this.$el.hoverIntent({
     710                over: this.mouseEnter,
     711                out: this.mouseLeave,
     712                timeout: 800
     713            });
    717714
    718715            this.applySliderSettings();
  • trunk/wp-includes/script-loader.php

    r24652 r24686  
    277277    $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
    278278
    279     $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider' ), false, 1 );
     279    $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider', 'hoverIntent' ), false, 1 );
    280280
    281281    $scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );
Note: See TracChangeset for help on using the changeset viewer.