Changeset 24686

Timestamp:

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