From 670980920d384b283134fb3830cb8ba6919cc64a Mon Sep 17 00:00:00 2001 From: azaozz Date: Fri, 29 Jul 2011 22:57:30 +0000 Subject: [PATCH] Admin bar: use jQuery if loaded to improve UX, fixes #18299 git-svn-id: http://svn.automattic.com/wordpress/trunk@18488 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-includes/class-wp-admin-bar.php | 2 +- wp-includes/css/admin-bar.css | 2 +- wp-includes/css/admin-bar.dev.css | 2 +- wp-includes/js/admin-bar.dev.js | 284 ++++++++++++++++------------- wp-includes/js/admin-bar.js | 2 +- 5 files changed, 157 insertions(+), 135 deletions(-) diff --git a/wp-includes/class-wp-admin-bar.php b/wp-includes/class-wp-admin-bar.php index 7db0fa22ba..af5a25c9c0 100644 --- a/wp-includes/class-wp-admin-bar.php +++ b/wp-includes/class-wp-admin-bar.php @@ -89,7 +89,7 @@ class WP_Admin_Bar { function render() { ?> -
+
    menu as $id => $menu_item ) : ?> diff --git a/wp-includes/css/admin-bar.css b/wp-includes/css/admin-bar.css index d98ef3a989..bda5973016 100644 --- a/wp-includes/css/admin-bar.css +++ b/wp-includes/css/admin-bar.css @@ -1 +1 @@ -#wpadminbar *{height:auto;width:auto;margin:0;padding:0;position:static;text-transform:none;letter-spacing:normal;line-height:1;font:normal 13px/28px Arial,Helvetica,sans-serif;color:#ddd;text-shadow:#555 0 -1px 0;}#wpadminbar :before,#wpadminbar :after{content:normal;}#wpadminbar a,#wpadminbar a:hover,#wpadminbar a img,#wpadminbar a img:hover{outline:none;border:none;text-decoration:none;background:none;}#wpadminbar{direction:ltr;background-color:#777;background-image:-moz-linear-gradient(bottom,#666,#7f7f7f);background-image:-webkit-gradient(linear,left bottom,left top,from(#666),to(#7f7f7f));color:#ddd;font:normal 12px/28px Arial,Helvetica,sans-serif;height:28px;position:fixed;top:0;left:0;width:100%;z-index:99999;min-width:960px;}#wpadminbar ul,#wpadminbar ul li{background:none;list-style:none;margin:0;padding:0;position:relative;z-index:99999;}#wpadminbar .quicklinks ul{text-align:left;}#wpadminbar .quicklinks ul li{float:left;}#wpadminbar .quicklinks>ul>li>a{border-right:1px solid #686868;border-left:1px solid #808080;}#wpadminbar .quicklinks>ul>li:last-child>a{border-right:none;}#wpadminbar .quicklinks>ul>li:hover>a{border-left-color:#707070;}#wpadminbar .quicklinks a,#wpadminbar .shortlink-input{height:28px;display:block;padding:0 .85em;margin:0;}#wpadminbar .quicklinks a>span{line-height:28px;}#wpadminbar .quicklinks .menupop ul,#wpadminbar .shortlink-input{-moz-box-shadow:0 4px 8px rgba(0,0,0,0.1);-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.1);box-shadow:0 4px 8px rgba(0,0,0,0.1);background:#fff;background:rgba(255,255,255,0.97);display:none;position:absolute;border:1px solid #dfdfdf;border-top:none;float:none;}#wpadminbar .selected .shortlink-input{display:block;}#wpadminbar .quicklinks .menupop ul li{float:none;}#wpadminbar .quicklinks .menupop ul li a strong{font-weight:bold;}#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a span,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .shortlink-input{color:#555;text-shadow:none;white-space:nowrap;min-width:140px;}#wpadminbar .shortlink-input{width:200px;}#wpadminbar .quicklinks .menupop ul li:hover>a,#wpadminbar .quicklinks .menupop ul li:hover>a span,#wpadminbar .quicklinks .menupop ul li:hover>a strong{color:#fff;text-shadow:#666 0 -1px 0;}#wpadminbar .quicklinks li:hover>ul,#wpadminbar .quicklinks li.hover>ul{display:block;}#wpadminbar .quicklinks .menupop li:hover>ul,#wpadminbar .quicklinks .menupop li.hover>ul{margin-left:100%;margin-top:-28px;}#wpadminbar .quicklinks li:hover,#wpadminbar .quicklinks .selected{background:#555;background:-moz-linear-gradient(bottom,#555,#3e3e3e);background:-webkit-gradient(linear,left bottom,left top,from(#555),to(#3e3e3e));}#wpadminbar .quicklinks .menupop li:hover{background:#888;background:-moz-linear-gradient(bottom,#888,#9d9d9d);background:-webkit-gradient(linear,left bottom,left top,from(#888),to(#9d9d9d));}#wpadminbar .quicklinks .menupop a>span{display:inline;background:url(../images/admin-bar-sprite.png?d=11122010) right -58px no-repeat;padding-right:.8em;}#wpadminbar .quicklinks .menupop ul li a>span{display:block;background:url(../images/admin-bar-sprite.png?d=11122010) right -29px no-repeat;padding-right:1.5em;}#wpadminbar .quicklinks a span#ab-awaiting-mod,#wpadminbar .quicklinks a span#ab-updates{background:#eee;color:#333;text-shadow:none;display:inline;padding:2px 5px;font-size:10px;font-weight:bold;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}#wpadminbar .quicklinks a:hover span#ab-awaiting-mod,#wpadminbar .quicklinks a:hover span#ab-updates{background:#fff;color:#000;}#wpadminbar .quicklinks li#wp-admin-bar-my-account>a{border-left:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a{border-left:none;background:url(../images/admin-bar-sprite.png?d=11122010) top left no-repeat;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a img{width:16px;height:16px;display:inline;border:1px solid #999;vertical-align:middle;margin:-2px 23px 0 -5px;padding:0;background:#eee;float:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul{left:30px;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul ul{left:0;}#wpadminbar .quicklinks .menupop li a img.blavatar{vertical-align:middle;margin:0 8px 0 0;padding:0;}#wpadminbar #adminbarsearch{float:right;height:18px;padding:3px;margin:0;}#wpadminbar #adminbarsearch .adminbar-input{width:140px;height:auto;float:left;font:12px Arial,Helvetica,sans-serif;color:#555;text-shadow:0 1px 0 #fff;border:1px solid #626262;padding:2px 3px;margin:0 3px 0 0;background:#ddd;-moz-box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-box-shadow:inset 2px 2px 1px #cdcdcd;box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-border-radius:0;-khtml-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;outline:none;}#wpadminbar #adminbarsearch .adminbar-button{font:bold 12px Arial,Helvetica,sans-serif;color:#444;text-shadow:0 1px 0 #eee;cursor:pointer;float:left;background:#aaa;background:-moz-linear-gradient(bottom,#aaa,#cecece);background:-webkit-gradient(linear,left bottom,left top,from(#aaa),to(#cecece));-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #626262;padding:2px 13px;margin:0;width:auto;height:auto;}#wpadminbar #adminbarsearch .adminbar-button:active{background:#a0a0a0;background:-moz-linear-gradient(bottom,#a0a0a0,#c1c1c1);background:-webkit-gradient(linear,left bottom,left top,from(#a0a0a0),to(#c1c1c1));-moz-box-shadow:inset 1px 1px 1px #9b9b9b;-webkit-box-shadow:inset 1px 1px 1px #9b9b9b;box-shadow:inset 1px 1px 1px #9b9b9b;}#wpadminbar #adminbarsearch .adminbar-button:hover{color:#000;}#wpadminbar #adminbarsearch .adminbar-button::-moz-focus-inner{border:none;}* html #wpadminbar{overflow:hidden;position:absolute;}* html #wpadminbar .quicklinks ul li a{float:left;}* html #wpadminbar .menupop a span{background-image:none;} \ No newline at end of file +#wpadminbar *{height:auto;width:auto;margin:0;padding:0;position:static;text-transform:none;letter-spacing:normal;line-height:1;font:normal 13px/28px Arial,Helvetica,sans-serif;color:#ddd;text-shadow:#555 0 -1px 0;}#wpadminbar :before,#wpadminbar :after{content:normal;}#wpadminbar a,#wpadminbar a:hover,#wpadminbar a img,#wpadminbar a img:hover{outline:none;border:none;text-decoration:none;background:none;}#wpadminbar{direction:ltr;background-color:#777;background-image:-moz-linear-gradient(bottom,#666,#7f7f7f);background-image:-webkit-gradient(linear,left bottom,left top,from(#666),to(#7f7f7f));color:#ddd;font:normal 12px/28px Arial,Helvetica,sans-serif;height:28px;position:fixed;top:0;left:0;width:100%;z-index:99999;min-width:960px;}#wpadminbar ul,#wpadminbar ul li{background:none;list-style:none;margin:0;padding:0;position:relative;z-index:99999;}#wpadminbar .quicklinks ul{text-align:left;}#wpadminbar .quicklinks ul li{float:left;}#wpadminbar .quicklinks>ul>li>a{border-right:1px solid #686868;border-left:1px solid #808080;}#wpadminbar .quicklinks>ul>li:last-child>a{border-right:none;}#wpadminbar .quicklinks>ul>li:hover>a{border-left-color:#707070;}#wpadminbar .quicklinks a,#wpadminbar .shortlink-input{height:28px;display:block;padding:0 .85em;margin:0;}#wpadminbar .quicklinks a>span{line-height:28px;}#wpadminbar .quicklinks .menupop ul,#wpadminbar .shortlink-input{-moz-box-shadow:0 4px 8px rgba(0,0,0,0.1);-webkit-box-shadow:0 4px 8px rgba(0,0,0,0.1);box-shadow:0 4px 8px rgba(0,0,0,0.1);background:#fff;background:rgba(255,255,255,0.97);display:none;position:absolute;border:1px solid #dfdfdf;border-top:none;float:none;}#wpadminbar .selected .shortlink-input{display:block;}#wpadminbar .quicklinks .menupop ul li{float:none;}#wpadminbar .quicklinks .menupop ul li a strong{font-weight:bold;}#wpadminbar .quicklinks .menupop ul li a,#wpadminbar .quicklinks .menupop ul li a span,#wpadminbar .quicklinks .menupop ul li a strong,#wpadminbar .shortlink-input{color:#555;text-shadow:none;white-space:nowrap;min-width:140px;}#wpadminbar .shortlink-input{width:200px;}#wpadminbar .quicklinks .menupop ul li:hover>a,#wpadminbar .quicklinks .menupop ul li:hover>a span,#wpadminbar .quicklinks .menupop ul li:hover>a strong{color:#fff;text-shadow:#666 0 -1px 0;}#wpadminbar.nojq .quicklinks li:hover>ul,#wpadminbar .quicklinks li.hover>ul{display:block;}#wpadminbar .quicklinks .menupop li:hover>ul,#wpadminbar .quicklinks .menupop li.hover>ul{margin-left:100%;margin-top:-28px;}#wpadminbar .quicklinks li:hover,#wpadminbar .quicklinks .selected{background:#555;background:-moz-linear-gradient(bottom,#555,#3e3e3e);background:-webkit-gradient(linear,left bottom,left top,from(#555),to(#3e3e3e));}#wpadminbar .quicklinks .menupop li:hover{background:#888;background:-moz-linear-gradient(bottom,#888,#9d9d9d);background:-webkit-gradient(linear,left bottom,left top,from(#888),to(#9d9d9d));}#wpadminbar .quicklinks .menupop a>span{display:inline;background:url(../images/admin-bar-sprite.png?d=11122010) right -58px no-repeat;padding-right:.8em;}#wpadminbar .quicklinks .menupop ul li a>span{display:block;background:url(../images/admin-bar-sprite.png?d=11122010) right -29px no-repeat;padding-right:1.5em;}#wpadminbar .quicklinks a span#ab-awaiting-mod,#wpadminbar .quicklinks a span#ab-updates{background:#eee;color:#333;text-shadow:none;display:inline;padding:2px 5px;font-size:10px;font-weight:bold;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}#wpadminbar .quicklinks a:hover span#ab-awaiting-mod,#wpadminbar .quicklinks a:hover span#ab-updates{background:#fff;color:#000;}#wpadminbar .quicklinks li#wp-admin-bar-my-account>a{border-left:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a{border-left:none;background:url(../images/admin-bar-sprite.png?d=11122010) top left no-repeat;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar>a img{width:16px;height:16px;display:inline;border:1px solid #999;vertical-align:middle;margin:-2px 23px 0 -5px;padding:0;background:#eee;float:none;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul{left:30px;}#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul ul{left:0;}#wpadminbar .quicklinks .menupop li a img.blavatar{vertical-align:middle;margin:0 8px 0 0;padding:0;}#wpadminbar #adminbarsearch{float:right;height:18px;padding:3px;margin:0;}#wpadminbar #adminbarsearch .adminbar-input{width:140px;height:auto;float:left;font:12px Arial,Helvetica,sans-serif;color:#555;text-shadow:0 1px 0 #fff;border:1px solid #626262;padding:2px 3px;margin:0 3px 0 0;background:#ddd;-moz-box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-box-shadow:inset 2px 2px 1px #cdcdcd;box-shadow:inset 2px 2px 1px #cdcdcd;-webkit-border-radius:0;-khtml-border-radius:0;-moz-border-radius:0;border-radius:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;outline:none;}#wpadminbar #adminbarsearch .adminbar-button{font:bold 12px Arial,Helvetica,sans-serif;color:#444;text-shadow:0 1px 0 #eee;cursor:pointer;float:left;background:#aaa;background:-moz-linear-gradient(bottom,#aaa,#cecece);background:-webkit-gradient(linear,left bottom,left top,from(#aaa),to(#cecece));-webkit-border-radius:10px;-khtml-border-radius:10px;-moz-border-radius:10px;border-radius:10px;border:1px solid #626262;padding:2px 13px;margin:0;width:auto;height:auto;}#wpadminbar #adminbarsearch .adminbar-button:active{background:#a0a0a0;background:-moz-linear-gradient(bottom,#a0a0a0,#c1c1c1);background:-webkit-gradient(linear,left bottom,left top,from(#a0a0a0),to(#c1c1c1));-moz-box-shadow:inset 1px 1px 1px #9b9b9b;-webkit-box-shadow:inset 1px 1px 1px #9b9b9b;box-shadow:inset 1px 1px 1px #9b9b9b;}#wpadminbar #adminbarsearch .adminbar-button:hover{color:#000;}#wpadminbar #adminbarsearch .adminbar-button::-moz-focus-inner{border:none;}* html #wpadminbar{overflow:hidden;position:absolute;}* html #wpadminbar .quicklinks ul li a{float:left;}* html #wpadminbar .menupop a span{background-image:none;} \ No newline at end of file diff --git a/wp-includes/css/admin-bar.dev.css b/wp-includes/css/admin-bar.dev.css index e94d80e26b..32e2845a23 100644 --- a/wp-includes/css/admin-bar.dev.css +++ b/wp-includes/css/admin-bar.dev.css @@ -133,7 +133,7 @@ text-shadow: #666 0px -1px 0px; } -#wpadminbar .quicklinks li:hover > ul, +#wpadminbar.nojq .quicklinks li:hover > ul, #wpadminbar .quicklinks li.hover > ul { display: block; } diff --git a/wp-includes/js/admin-bar.dev.js b/wp-includes/js/admin-bar.dev.js index cf13ca7271..76d89c3065 100644 --- a/wp-includes/js/admin-bar.dev.js +++ b/wp-includes/js/admin-bar.dev.js @@ -1,140 +1,162 @@ -(function(d, w) { - var addEvent = function( obj, type, fn ) { - if (obj.addEventListener) - obj.addEventListener(type, fn, false); - else if (obj.attachEvent) - obj.attachEvent('on' + type, function() { return fn.call(obj, window.event);}); - }, +// use jQuery and hoverIntent if loaded +if ( typeof(jQuery) != 'undefined' ) { + if ( typeof(jQuery.fn.hoverIntent) == 'undefined' ) + (function(a){a.fn.hoverIntent=function(l,j){var m={sensitivity:7,interval:100,timeout:0};m=a.extend(m,j?{over:l,out:j}:l);var o,n,h,d;var e=function(f){o=f.pageX;n=f.pageY};var c=function(g,f){f.hoverIntent_t=clearTimeout(f.hoverIntent_t);if((Math.abs(h-o)+Math.abs(d-n))