From 2e6fb68b2a27a65434cca35d8dec9ec1860a1156 Mon Sep 17 00:00:00 2001 From: John Blackbourn Date: Thu, 14 Jan 2016 04:12:16 +0000 Subject: [PATCH] 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 --- src/wp-admin/css/common.css | 17 +++++++++++++++++ src/wp-admin/css/dashboard.css | 17 +++++++++++++++++ src/wp-admin/js/postbox.js | 7 +++++-- src/wp-includes/script-loader.php | 3 +++ 4 files changed, 42 insertions(+), 2 deletions(-) diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 561e610da9..e340632b52 100644 --- a/src/wp-admin/css/common.css +++ b/src/wp-admin/css/common.css @@ -1843,6 +1843,23 @@ html.wp-toolbar { .metabox-holder .postbox-container .empty-container { border: 3px dashed #b4b9be; 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, diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css index def7c4516f..bca7f66653 100644 --- a/src/wp-admin/css/dashboard.css +++ b/src/wp-admin/css/dashboard.css @@ -991,6 +991,11 @@ a.rsswidget { 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 { width: 100%; } @@ -1011,6 +1016,10 @@ a.rsswidget { .columns-prefs .columns-prefs-4 { display: none; } + + .metabox-holder .postbox-container .empty-container:after { + display: block; + } } /* three columns on the dash */ @@ -1033,6 +1042,14 @@ a.rsswidget { 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) { diff --git a/src/wp-admin/js/postbox.js b/src/wp-admin/js/postbox.js index 9d7a938d8a..37b26b8642 100644 --- a/src/wp-admin/js/postbox.js +++ b/src/wp-admin/js/postbox.js @@ -197,10 +197,13 @@ var postboxes; $( '#dashboard-widgets .meta-box-sortables:visible' ).each( function() { var t = $(this); - if ( visible == 1 || t.children('.postbox:visible').length ) + if ( visible == 1 || t.children('.postbox:visible').length ) { t.removeClass('empty-container'); - else + } + else { t.addClass('empty-container'); + t.attr('data-emptyString', postBoxL10n.postBoxEmptyString); + } }); if ( side.length ) { diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 0308807914..5401bc488d 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -495,6 +495,9 @@ function wp_default_scripts( &$scripts ) { $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 ); + 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 ); did_action( 'init' ) && $scripts->localize( 'tags-box', 'tagsBoxL10n', array(