Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2025-02-22 15:31:42 +01:00
Code Issues Projects Releases Wiki Activity

Revisions: more graceful tooltips

Browse Source 
* 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.

git-svn-id: http://core.svn.wordpress.org/trunk@24686 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2013-07-12 20:34:14 +00:00
parent 769e3e9b5d
commit 4f1f7ee3f2
3 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
wp-admin/css/wp-admin.css
View File

@ -3710,6 +3710,12 @@ table.diff .diff-addedline ins {
min-width: 130px; min-width: 130px;
padding: 4px; padding: 4px;
display: none; display: none;
opacity: 0;
-webkit-transition: left 15ms;
-moz-transition: left 15ms;
-ms-transition: left 15ms;
-o-transition: left 15ms;
transition: left 15ms;
} }
.comparing-two-revisions .revisions-tooltip { .comparing-two-revisions .revisions-tooltip {

29
wp-admin/js/revisions.js
View File

@ -597,18 +597,11 @@ window.wp = window.wp || {};
}, },
toggleVisibility: function( options ) { toggleVisibility: function( options ) {
options = options || {}; if ( this.visible() )
var visible = this.visible(); this.$el.stop().show().fadeTo( 100 - this.el.style.opacity * 100, 1 );
if ( visible ) { // Immediate show else
this.$el.fadeIn( 200 ); this.$el.stop().fadeTo( this.el.style.opacity * 300, 0, function(){ $(this).hide(); } );
} else if ( options.immediate ) { // Immediate fade out return;
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 );
}
}, },
render: function() { render: function() {
@ -698,13 +691,11 @@ window.wp = window.wp || {};
className: 'wp-slider', className: 'wp-slider',
events: { events: {
'mousemove' : 'mouseMove', 'mousemove' : 'mouseMove'
'mouseleave' : 'mouseLeave',
'mouseenter' : 'mouseEnter'
}, },
initialize: function() { initialize: function() {
_.bindAll( this, 'start', 'slide', 'stop', 'mouseMove' ); _.bindAll( this, 'start', 'slide', 'stop', 'mouseMove', 'mouseEnter', 'mouseLeave' );
this.listenTo( this.model, 'update:slider', this.applySliderSettings ); this.listenTo( this.model, 'update:slider', this.applySliderSettings );
}, },
@ -715,6 +706,12 @@ window.wp = window.wp || {};
stop: this.stop stop: this.stop
}) ); }) );
this.$el.hoverIntent({
over: this.mouseEnter,
out: this.mouseLeave,
timeout: 800
});
this.applySliderSettings(); this.applySliderSettings();
}, },

2
wp-includes/script-loader.php
View File

@ -276,7 +276,7 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'wp-backbone', "/wp-includes/js/wp-backbone$suffix.js", array('backbone', 'wp-util'), false, 1 ); $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 ); $scripts->add( 'imgareaselect', "/wp-includes/js/imgareaselect/jquery.imgareaselect$suffix.js", array('jquery'), '0.9.8', 1 );