New pointer styles. Arrows are currently optimized to point upward. props georgestephanis, chexee. see #18693.

git-svn-id: http://svn.automattic.com/wordpress/trunk@19269 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
koopersmith 2011-11-14 10:30:14 +00:00
parent a491abfbb2
commit 8740d2c65d
6 changed files with 123 additions and 111 deletions

View File

@ -1698,9 +1698,12 @@ function _wp_pointer_print_admin_bar() {
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
$('#wp-admin-bar-help').pointer({
$('#wpadminbar').pointer({
content: '<?php echo $pointer_content; ?>',
position: 'top',
position: {
edge: 'top',
align: 'center'
},
close: function() {
$.post( ajaxurl, {
pointer: 'wp330-admin-bar',

View File

@ -1 +1 @@
.wp-pointer-content{padding:0 15px;background:white;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.4);-webkit-box-shadow:5px 5px 25px rgba(0,0,0,0.5);box-shadow:5px 5px 25px rgba(0,0,0,0.5);}.wp-pointer-buttons{margin:0 -15px;padding:5px 10px;overflow:auto;background:#f5f5f5;border-top:1px solid #ddd;-webkit-border-bottom-right-radius:3px;-webkit-border-bottom-left-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none;}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0;}.wp-pointer-arrow{z-index:10;}.wp-pointer-arrow-inner{z-index:20;}.wp-pointer-left{margin-left:10px;}.wp-pointer-right{margin-left:-10px;}.wp-pointer-top{margin-top:10px;}.wp-pointer-bottom{margin-top:-10px;}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow,.wp-pointer-top .wp-pointer-arrow,.wp-pointer-bottom .wp-pointer-arrow{border:solid 10px transparent;}.wp-pointer-left .wp-pointer-arrow{border-right-color:#aaa;border-left-width:0;}.wp-pointer-right .wp-pointer-arrow{border-left-color:#aaa;border-right-width:0;}.wp-pointer-top .wp-pointer-arrow{border-top-width:0;}.wp-pointer-bottom .wp-pointer-arrow{border-top-color:#aaa;border-bottom-width:0;}.wp-pointer-left .wp-pointer-arrow-inner,.wp-pointer-right .wp-pointer-arrow-inner,.wp-pointer-top .wp-pointer-arrow-inner,.wp-pointer-bottom .wp-pointer-arrow-inner{border:solid 9px transparent;}.wp-pointer-left .wp-pointer-arrow-inner{border-right-color:#fff;border-left-width:0;top:-9px;left:2px;}.wp-pointer-right .wp-pointer-arrow-inner{border-left-color:#fff;border-right-width:0;top:-9px;right:2px;}.wp-pointer-top .wp-pointer-arrow-inner{border-bottom-color:#fff;border-top-width:0;top:2px;left:-9px;}.wp-pointer-bottom .wp-pointer-arrow-inner{border-top-color:#fff;border-bottom-width:0;bottom:2px;left:-9px;}
.wp-pointer-content{padding:0 0 10px;position:relative;font-size:13px;background:#fff;border-style:solid;border-width:1px;border-color:#dfdfdf;border-color:rgba(0,0,0,.125);-webkit-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.19);-moz-box-shadow:0 2px 4px rgba(0,0,0,.19);box-shadow:0 2px 4px rgba(0,0,0,.19);}.wp-pointer-content h3{position:relative;margin:0 0 5px;padding:15px 18px 14px 60px;line-height:1.4em;font-size:14px;color:#fff;border-radius:3px 3px 0 0;text-shadow:0 -1px 0 rgba(0,0,0,0.3);background-color:#8cc1e9;background-image:-webkit-linear-gradient(bottom,#72a7cf 0,#8cc1e9 100%);background-image:-moz-linear-gradient(bottom,#72a7cf 0,#8cc1e9 100%);background-image:-ms-linear-gradient(bottom,#72a7cf 0,#8cc1e9 100%);background-image:-o-linear-gradient(bottom,#72a7cf 0,#8cc1e9 100%);background-image:linear-gradient(bottom,#72a7cf 0,#8cc1e9 100%);}.wp-pointer-content h3:before{position:absolute;top:0;left:15px;content:' ';width:36px;height:100%;background:url('../images/icon-pointer-flag.png') 0 50% no-repeat;}.wp-pointer-content p{padding:0 15px;}.wp-pointer-buttons{margin:0;padding:5px 15px;overflow:auto;}.wp-pointer-buttons a{float:right;display:inline-block;text-decoration:none;}.wp-pointer-buttons a.close{padding-left:3px;position:relative;}.wp-pointer-buttons a.close:before{content:' ';width:10px;height:100%;position:absolute;left:-10px;background:url('../../wp-admin/images/xit.gif') 0 50% no-repeat;}.wp-pointer-buttons a.close:hover:before{background-position:100% 50%;}.wp-pointer-arrow,.wp-pointer-arrow-inner{position:absolute;width:0;height:0;}.wp-pointer-arrow{z-index:10;background:url('../images/arrow-pointer-blue.png') 0 0 no-repeat;}.wp-pointer-arrow-inner{z-index:20;}.wp-pointer-top,.wp-pointer-undefined{padding-top:13px;}.wp-pointer-bottom{padding-bottom:13px;}.wp-pointer-left{padding-left:13px;}.wp-pointer-right{padding-right:13px;}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-bottom .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{left:50px;width:30px;height:14px;}.wp-pointer-left .wp-pointer-arrow,.wp-pointer-right .wp-pointer-arrow{top:60px;width:14px;height:30px;}.wp-pointer-top .wp-pointer-arrow,.wp-pointer-undefined .wp-pointer-arrow{top:0;background-position:0 0;}.wp-pointer-bottom .wp-pointer-arrow{bottom:0;background-position:0 -46px;}.wp-pointer-left .wp-pointer-arrow{left:0;background-position:0 -15px;}.wp-pointer-right .wp-pointer-arrow{right:0;background-position:-16px -15px;}

View File

@ -1,28 +1,61 @@
.wp-pointer {
}
.wp-pointer-content {
padding: 0 15px;
background: white;
border: 1px solid #ccc;
padding: 0 0 10px;
position: relative;
font-size: 13px;
background: #fff;
border-style: solid;
border-width: 1px;
/* Fallback for non-rgba-compliant browsers */
border-color: #dfdfdf;
/* Use rgba to look better against non-white backgrounds. */
border-color: rgba(0,0,0,.125);
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 1px 1px 2px rgba( 0, 0, 0, 0.4 );
-webkit-box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,.19);
-moz-box-shadow: 0 2px 4px rgba(0,0,0,.19);
box-shadow: 0 2px 4px rgba(0,0,0,.19);
}
.wp-pointer-content h3 {
position: relative;
margin: 0 0 5px;
padding: 15px 18px 14px 60px;
line-height: 1.4em;
font-size: 14px;
color: #fff;
border-radius: 3px 3px 0 0;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
background-color: #8cc1e9;
background-image: -webkit-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(140,193,233) 100%);
background-image: -moz-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(140,193,233) 100%);
background-image: -ms-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(140,193,233) 100%);
background-image: -o-linear-gradient(bottom, rgb(114,167,207) 0%, rgb(140,193,233) 100%);
background-image: linear-gradient(bottom, rgb(114,167,207) 0%, rgb(140,193,233) 100%);
}
.wp-pointer-content h3:before {
position: absolute;
top: 0;
left: 15px;
content: ' ';
width: 36px;
height: 100%;
background: url('../images/icon-pointer-flag.png') 0 50% no-repeat;
}
.wp-pointer-content p {
padding: 0 15px;
}
.wp-pointer-buttons {
margin: 0 -15px;
padding: 5px 10px;
margin: 0;
padding: 5px 15px;
overflow: auto;
background: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.wp-pointer-buttons a {
@ -31,6 +64,24 @@
text-decoration: none;
}
.wp-pointer-buttons a.close {
padding-left:3px;
position: relative;
}
.wp-pointer-buttons a.close:before {
content: ' ';
width:10px;
height:100%;
position:absolute;
left:-10px;
background:url('../../wp-admin/images/xit.gif') 0 50% no-repeat;
}
.wp-pointer-buttons a.close:hover:before {
background-position:100% 50%;
}
/* The arrow base class must take up no space, even with transparent borders. */
.wp-pointer-arrow,
.wp-pointer-arrow-inner {
@ -41,86 +92,66 @@
.wp-pointer-arrow {
z-index: 10;
background:url('../images/arrow-pointer-blue.png') 0 0 no-repeat;
}
.wp-pointer-arrow-inner {
z-index: 20;
}
.wp-pointer-left {
margin-left: 10px;
}
.wp-pointer-right {
margin-left: -10px;
}
.wp-pointer-top {
margin-top: 10px;
/* Make Room for the Arrow! */
.wp-pointer-top,
.wp-pointer-undefined {
padding-top: 13px;
}
.wp-pointer-bottom {
margin-top: -10px;
padding-bottom: 13px;
}
.wp-pointer-left {
padding-left: 13px;
}
.wp-pointer-right {
padding-right: 13px;
}
/* Base Size & Positioning */
.wp-pointer-top .wp-pointer-arrow,
.wp-pointer-bottom .wp-pointer-arrow,
.wp-pointer-undefined .wp-pointer-arrow {
left: 50px;
width: 30px;
height: 14px;
}
.wp-pointer-left .wp-pointer-arrow,
.wp-pointer-right .wp-pointer-arrow,
.wp-pointer-right .wp-pointer-arrow {
top: 60px;
width: 14px;
height: 30px;
}
/* Arrow Sprite */
.wp-pointer-top .wp-pointer-arrow,
.wp-pointer-undefined .wp-pointer-arrow {
top: 0;
background-position: 0 0;
}
.wp-pointer-bottom .wp-pointer-arrow {
border: solid 10px transparent;
bottom: 0;
background-position: 0 -46px;
}
.wp-pointer-left .wp-pointer-arrow {
border-right-color: #aaa;
border-left-width: 0;
left: 0;
background-position: 0 -15px;
}
.wp-pointer-right .wp-pointer-arrow {
border-left-color: #aaa;
border-right-width: 0;
}
.wp-pointer-top .wp-pointer-arrow {
border-top-width: 0;
}
.wp-pointer-bottom .wp-pointer-arrow {
border-top-color: #aaa;
border-bottom-width: 0;
}
.wp-pointer-left .wp-pointer-arrow-inner,
.wp-pointer-right .wp-pointer-arrow-inner,
.wp-pointer-top .wp-pointer-arrow-inner,
.wp-pointer-bottom .wp-pointer-arrow-inner {
border: solid 9px transparent;
}
.wp-pointer-left .wp-pointer-arrow-inner {
border-right-color: #fff;
border-left-width: 0;
top: -9px;
left: 2px;
}
.wp-pointer-right .wp-pointer-arrow-inner {
border-left-color: #fff;
border-right-width: 0;
top: -9px;
right: 2px;
}
.wp-pointer-top .wp-pointer-arrow-inner {
border-bottom-color: #fff;
border-top-width: 0;
top: 2px;
left: -9px;
}
.wp-pointer-bottom .wp-pointer-arrow-inner {
border-top-color: #fff;
border-bottom-width: 0;
bottom: 2px;
left: -9px;
right:0;
background-position:-16px -15px;
}

View File

@ -8,13 +8,13 @@
$.widget("wp.pointer", {
options: {
pointerClass: 'wp-pointer',
pointerWidth: 400,
pointerWidth: 320,
content: function( respond, event, t ) {
return $(this).text();
},
buttons: function( event, t ) {
var close = ( wpPointerL10n ) ? wpPointerL10n.close : 'Close',
button = $('<a href="#">' + close + '</a>');
var close = ( wpPointerL10n ) ? wpPointerL10n.dismiss : 'Dismiss',
button = $('<a class="close" href="#">' + close + '</a>');
return button.bind( 'click.pointer', function() {
t.element.pointer('close');
@ -163,40 +163,18 @@
repoint: function() {
var o = this.options,
position,
at;
edge;
if ( o.disabled )
return;
// Generate arrow position from the box position.
position = $.extend( this._processPosition( o.position ), {
of: this.pointer,
offset: ''
});
// Swap at and my; we're positioning the arrow relative to the box.
at = position.at + '';
position.at = position.my;
position.my = at;
// Don't align the arrows exactly with the edge.
if ( position.align != 'center' ) {
position.offset = ( position.align == 'top' || position.align == 'left' ) ? 15 : -15;
if ( position.align == 'top' || position.align == 'bottom' )
position.offset = '0 ' + position.offset;
else
position.offset = position.offset + ' 0';
}
edge = ( typeof o.position == 'string' ) ? o.position : o.position.edge;
// Remove arrow classes.
this.pointer[0].className = this.pointer[0].className.replace( /wp-pointer-[^\s'"]*/, '' );
// Add arrow class.
this.pointer.addClass( 'wp-pointer-' + position.edge );
// Reposition arrow.
this.arrow.position( position );
this.pointer.addClass( 'wp-pointer-' + edge );
},
_processPosition: function( position ) {

View File

@ -1 +1 @@
(function(c){var a=0,b=9999;c.widget("wp.pointer",{options:{pointerClass:"wp-pointer",pointerWidth:400,content:function(f,e,d){return c(this).text()},buttons:function(f,e){var g=(wpPointerL10n)?wpPointerL10n.close:"Close",d=c('<a href="#">'+g+"</a>");return d.bind("click.pointer",function(){e.element.pointer("close")})},position:"top",show:function(e,d){d.pointer.show();d.opened()},hide:function(e,d){d.pointer.hide();d.closed()},document:document},_create:function(){var e,d;this.content=c('<div class="wp-pointer-content"></div>');this.arrow=c('<div class="wp-pointer-arrow"><div class="wp-pointer-arrow-inner"></div></div>');d=this.element.parents().add(this.element);e="absolute";if(d.filter(function(){return"fixed"===c(this).css("position")}).length){e="fixed"}this.pointer=c("<div />").append(this.content).append(this.arrow).attr("id","wp-pointer-"+a++).addClass(this.options.pointerClass).css({position:e,width:this.options.pointerWidth+"px",display:"none"}).appendTo(this.options.document.body)},_setOption:function(d,f){var g=this.options,e=this.pointer;if(d==="document"&&f!==g.document){e.detach().appendTo(f.body)}else{if(d==="pointerClass"){e.removeClass(g.pointerClass).addClass(f)}}c.Widget.prototype._setOption.apply(this,arguments);if(d==="position"){this.reposition()}else{if(d==="content"&&this.active){this.update()}}},destroy:function(){this.pointer.remove();c.Widget.prototype.destroy.call(this)},widget:function(){return this.pointer},update:function(g){var e=this,h=this.options,d=c.Deferred(),f;if(h.disabled){return}d.done(function(i){e._update(g,i)});if(typeof h.content==="string"){f=h.content}else{f=h.content.call(this.element[0],d.resolve,g,this._handoff())}if(f){d.resolve(f)}return d.promise()},_update:function(f,e){var d,g=this.options;if(!e){return}this.pointer.stop();this.content.html(e);d=g.buttons.call(this.element[0],f,this._handoff());if(d){d.wrap('<div class="wp-pointer-buttons" />').parent().appendTo(this.content)}this.reposition()},reposition:function(){var d;if(this.options.disabled){return}d=this._processPosition(this.options.position);this.pointer.css({top:0,left:0,zIndex:b++}).show().position(c.extend({of:this.element},d));this.repoint()},repoint:function(){var f=this.options,e,d;if(f.disabled){return}e=c.extend(this._processPosition(f.position),{of:this.pointer,offset:""});d=e.at+"";e.at=e.my;e.my=d;if(e.align!="center"){e.offset=(e.align=="top"||e.align=="left")?15:-15;if(e.align=="top"||e.align=="bottom"){e.offset="0 "+e.offset}else{e.offset=e.offset+" 0"}}this.pointer[0].className=this.pointer[0].className.replace(/wp-pointer-[^\s'"]*/,"");this.pointer.addClass("wp-pointer-"+e.edge);this.arrow.position(e)},_processPosition:function(e){var f={top:"bottom",bottom:"top",left:"right",right:"left"},d;if(typeof e=="string"){d={edge:e+""}}else{d=c.extend({},e)}if(!d.edge){return d}if(d.edge=="top"||d.edge=="bottom"){d.align=d.align||"left";d.at=d.at||d.align+" "+f[d.edge];d.my=d.my||d.align+" "+d.edge}else{d.align=d.align||"top";d.at=d.at||f[d.edge]+" "+d.align;d.my=d.my||d.edge+" "+d.align}return d},open:function(e){var d=this,f=this.options;if(this.active||f.disabled){return}this.update().done(function(){d._open(e)})},_open:function(e){var d=this,f=this.options;if(this.active||f.disabled){return}this.active=true;this._trigger("open",e,this._handoff());this._trigger("show",e,this._handoff({opened:function(){d._trigger("opened",e,d._handoff())}}))},close:function(e){if(!this.active||this.options.disabled){return}var d=this;this.active=false;this._trigger("close",e,this._handoff());this._trigger("hide",e,this._handoff({closed:function(){d._trigger("closed",e,d._handoff())}}))},sendToTop:function(d){if(this.active){this.pointer.css("z-index",b++)}},toggle:function(d){if(this.pointer.is(":hidden")){this.open(d)}else{this.close(d)}},_handoff:function(d){return c.extend({pointer:this.pointer,element:this.element},d)}})})(jQuery);
(function(c){var a=0,b=9999;c.widget("wp.pointer",{options:{pointerClass:"wp-pointer",pointerWidth:320,content:function(f,e,d){return c(this).text()},buttons:function(f,e){var g=(wpPointerL10n)?wpPointerL10n.dismiss:"Dismiss",d=c('<a class="close" href="#">'+g+"</a>");return d.bind("click.pointer",function(){e.element.pointer("close")})},position:"top",show:function(e,d){d.pointer.show();d.opened()},hide:function(e,d){d.pointer.hide();d.closed()},document:document},_create:function(){var e,d;this.content=c('<div class="wp-pointer-content"></div>');this.arrow=c('<div class="wp-pointer-arrow"><div class="wp-pointer-arrow-inner"></div></div>');d=this.element.parents().add(this.element);e="absolute";if(d.filter(function(){return"fixed"===c(this).css("position")}).length){e="fixed"}this.pointer=c("<div />").append(this.content).append(this.arrow).attr("id","wp-pointer-"+a++).addClass(this.options.pointerClass).css({position:e,width:this.options.pointerWidth+"px",display:"none"}).appendTo(this.options.document.body)},_setOption:function(d,f){var g=this.options,e=this.pointer;if(d==="document"&&f!==g.document){e.detach().appendTo(f.body)}else{if(d==="pointerClass"){e.removeClass(g.pointerClass).addClass(f)}}c.Widget.prototype._setOption.apply(this,arguments);if(d==="position"){this.reposition()}else{if(d==="content"&&this.active){this.update()}}},destroy:function(){this.pointer.remove();c.Widget.prototype.destroy.call(this)},widget:function(){return this.pointer},update:function(g){var e=this,h=this.options,d=c.Deferred(),f;if(h.disabled){return}d.done(function(i){e._update(g,i)});if(typeof h.content==="string"){f=h.content}else{f=h.content.call(this.element[0],d.resolve,g,this._handoff())}if(f){d.resolve(f)}return d.promise()},_update:function(f,e){var d,g=this.options;if(!e){return}this.pointer.stop();this.content.html(e);d=g.buttons.call(this.element[0],f,this._handoff());if(d){d.wrap('<div class="wp-pointer-buttons" />').parent().appendTo(this.content)}this.reposition()},reposition:function(){var d;if(this.options.disabled){return}d=this._processPosition(this.options.position);this.pointer.css({top:0,left:0,zIndex:b++}).show().position(c.extend({of:this.element},d));this.repoint()},repoint:function(){var e=this.options,d;if(e.disabled){return}d=(typeof e.position=="string")?e.position:e.position.edge;this.pointer[0].className=this.pointer[0].className.replace(/wp-pointer-[^\s'"]*/,"");this.pointer.addClass("wp-pointer-"+d)},_processPosition:function(e){var f={top:"bottom",bottom:"top",left:"right",right:"left"},d;if(typeof e=="string"){d={edge:e+""}}else{d=c.extend({},e)}if(!d.edge){return d}if(d.edge=="top"||d.edge=="bottom"){d.align=d.align||"left";d.at=d.at||d.align+" "+f[d.edge];d.my=d.my||d.align+" "+d.edge}else{d.align=d.align||"top";d.at=d.at||f[d.edge]+" "+d.align;d.my=d.my||d.edge+" "+d.align}return d},open:function(e){var d=this,f=this.options;if(this.active||f.disabled){return}this.update().done(function(){d._open(e)})},_open:function(e){var d=this,f=this.options;if(this.active||f.disabled){return}this.active=true;this._trigger("open",e,this._handoff());this._trigger("show",e,this._handoff({opened:function(){d._trigger("opened",e,d._handoff())}}))},close:function(e){if(!this.active||this.options.disabled){return}var d=this;this.active=false;this._trigger("close",e,this._handoff());this._trigger("hide",e,this._handoff({closed:function(){d._trigger("closed",e,d._handoff())}}))},sendToTop:function(d){if(this.active){this.pointer.css("z-index",b++)}},toggle:function(d){if(this.pointer.is(":hidden")){this.open(d)}else{this.close(d)}},_handoff:function(d){return c.extend({pointer:this.pointer,element:this.element},d)}})})(jQuery);

View File

@ -96,9 +96,9 @@ function wp_default_scripts( &$scripts ) {
'broken' => __('An unidentified error has occurred.')
) );
$scripts->add( 'wp-pointer', "/wp-includes/js/wp-pointer$suffix.js", array( 'jquery-ui-widget', 'jquery-ui-position' ), '20111017', 1 );
$scripts->add( 'wp-pointer', "/wp-includes/js/wp-pointer$suffix.js", array( 'jquery-ui-widget', 'jquery-ui-position' ), '20111114', 1 );
$scripts->localize( 'wp-pointer', 'wpPointerL10n', array(
'close' => __('Close'),
'dismiss' => __('Dismiss'),
) );
$scripts->add( 'autosave', "/wp-includes/js/autosave$suffix.js", array('schedule', 'wp-ajax-response'), '20111111', 1 );
@ -456,7 +456,7 @@ function wp_default_styles( &$styles ) {
$styles->add( 'admin-bar', "/wp-includes/css/admin-bar$suffix.css", array(), '20111111' );
$styles->add( 'wp-jquery-ui-dialog', "/wp-includes/css/jquery-ui-dialog$suffix.css", array(), '20111107' );
$styles->add( 'editor-buttons', "/wp-includes/css/editor-buttons$suffix.css", array(), '20111107' );
$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array(), '20111017' );
$styles->add( 'wp-pointer', "/wp-includes/css/wp-pointer$suffix.css", array(), '20111114' );
foreach ( $rtl_styles as $rtl_style ) {
$styles->add_data( $rtl_style, 'rtl', true );