Changeset 24686

Timestamp:

07/12/2013 08:34:14 PM (13 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:

• wp-admin/css/wp-admin.css (modified) (1 diff)
• wp-admin/js/revisions.js (modified) (3 diffs)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/wp-admin/css/wp-admin.css

@@ -3711 +3711 @@
         padding: 4px;
         display: none;
+        opacity: 0;
+        -webkit-transition: left 15ms;
+        -moz-transition:    left 15ms;
+        -ms-transition:     left 15ms;
+        -o-transition:      left 15ms;
+        transition:         left 15ms;
 }
 

trunk/wp-admin/js/revisions.js

@@ -598 +598 @@
 
                 toggleVisibility: function( options ) {
-                        options = options || {};
-                        var visible = this.visible();
-                        if ( visible ) { // Immediate show
-                                this.$el.fadeIn( 200 );
-                        } else if ( options.immediate ) { // Immediate fade out
-                                this.$el.fadeOut( 200 );
-                        } else { // Wait a bit, make sure we're really done, then fade it out
-                                _.delay( function( view ) {
-                                        if ( ! view.visible() )
-                                                view.toggleVisibility({ immediate: true });
-                                }, 500, this );
-                        }
+                        if ( this.visible() )
+                                this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
+                        else
+                                this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
+                        return;
                 },
 
@@ -699 +692 @@
 
                 events: {
-                        'mousemove'  : 'mouseMove',
-                        'mouseleave' : 'mouseLeave',
-                        'mouseenter' : 'mouseEnter'
+                        'mousemove' : 'mouseMove'
                 },
 
                 initialize: function() {
-                        _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove' );
+                        _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
                         this.listenTo( this.model, 'update:slider', this.applySliderSettings );
                 },
@@ -715 +706 @@
                                 stop:  this.stop
                         }) );
+
+                        this.$el.hoverIntent({
+                                over: this.mouseEnter,
+                                out: this.mouseLeave,
+                                timeout: 800
+                        });
 
                         this.applySliderSettings();

trunk/wp-includes/script-loader.php

@@ -277 +277 @@
         $scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 );
 
-        $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider' ), false, 1 );
+        $scripts->add( 'revisions', "/wp-admin/js/revisions$suffix.js", array( 'wp-backbone', 'jquery-ui-slider', 'hoverIntent' ), false, 1 );
 
         $scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );