Administration: Add a "Drag boxes here" message to empty dashboard meta boxes so it's clear to users that it's possible to drag meta boxes into empty spaces.

Props xavortm
Fixes #26399


git-svn-id: https://develop.svn.wordpress.org/trunk@36295 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
John Blackbourn 2016-01-14 04:12:16 +00:00
parent a22e4be31d
commit 2e6fb68b2a
4 changed files with 42 additions and 2 deletions

View File

@ -1843,6 +1843,23 @@ html.wp-toolbar {
.metabox-holder .postbox-container .empty-container { .metabox-holder .postbox-container .empty-container {
border: 3px dashed #b4b9be; border: 3px dashed #b4b9be;
height: 250px; height: 250px;
position: relative;
}
.metabox-holder .postbox-container .empty-container:after {
content: attr(data-emptystring);
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 1em;
width: 200px;
text-align: center;
color: #ccc;
font-size:18px;
display: none;
} }
.metabox-holder.columns-1 .postbox-container .empty-container, .metabox-holder.columns-1 .postbox-container .empty-container,

View File

@ -991,6 +991,11 @@ a.rsswidget {
min-height: 0; min-height: 0;
} }
#dashboard-widgets #postbox-container-3 .empty-container:after,
#dashboard-widgets #postbox-container-4 .empty-container:after {
display: none;
}
#wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container { #wpbody #wpbody-content #dashboard-widgets.columns-1 .postbox-container {
width: 100%; width: 100%;
} }
@ -1011,6 +1016,10 @@ a.rsswidget {
.columns-prefs .columns-prefs-4 { .columns-prefs .columns-prefs-4 {
display: none; display: none;
} }
.metabox-holder .postbox-container .empty-container:after {
display: block;
}
} }
/* three columns on the dash */ /* three columns on the dash */
@ -1033,6 +1042,14 @@ a.rsswidget {
height: 0; height: 0;
min-height: 0; min-height: 0;
} }
#dashboard-widgets #postbox-container-4 .empty-container:after {
display: none;
}
.metabox-holder .postbox-container .empty-container:after {
display: block;
}
} }
@media screen and (max-width: 870px) { @media screen and (max-width: 870px) {

View File

@ -197,10 +197,13 @@ var postboxes;
$( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() { $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() {
var t = $(this); var t = $(this);
if ( visible == 1 || t.children('.postbox:visible').length ) if ( visible == 1 || t.children('.postbox:visible').length ) {
t.removeClass('empty-container'); t.removeClass('empty-container');
else }
else {
t.addClass('empty-container'); t.addClass('empty-container');
t.attr('data-emptyString', postBoxL10n.postBoxEmptyString);
}
}); });
if ( side.length ) { if ( side.length ) {

View File

@ -495,6 +495,9 @@ function wp_default_scripts( &$scripts ) {
$scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array('jquery'), false, 1 ); $scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", array('jquery'), false, 1 );
$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), false, 1 ); $scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), false, 1 );
did_action( 'init' ) && $scripts->localize( 'postbox', 'postBoxL10n', array(
'postBoxEmptyString' => __( 'Drag boxes here' ),
) );
$scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 ); $scripts->add( 'tags-box', "/wp-admin/js/tags-box$suffix.js", array( 'jquery', 'suggest' ), false, 1 );
did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array( did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(