Changeset 36295

Timestamp:

01/14/2016 04:12:16 AM (9 years ago)

Author:

johnbillion

Message:

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

Location:

trunk/src

Files:

• wp-admin/css/common.css (modified) (1 diff)
• wp-admin/css/dashboard.css (modified) (3 diffs)
• wp-admin/js/postbox.js (modified) (1 diff)
• wp-includes/script-loader.php (modified) (1 diff)

trunk/src/wp-admin/css/common.css

@@ -1844 +1844 @@
     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;
 }
 

trunk/src/wp-admin/css/dashboard.css

@@ -992 +992 @@
     }
 
+    #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%;
@@ -1012 +1017 @@
         display: none;
     }
+
+    .metabox-holder .postbox-container .empty-container:after {
+        display: block;
+    }
 }
 
@@ -1033 +1042 @@
         height: 0;
         min-height: 0;
+    }
+
+    #dashboard-widgets #postbox-container-4 .empty-container:after {
+        display: none;
+    }
+
+    .metabox-holder .postbox-container .empty-container:after {
+        display: block;
     }
 }

trunk/src/wp-admin/js/postbox.js

@@ -198 +198 @@
                 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);
+                }
             });
 

trunk/src/wp-includes/script-loader.php

@@ -496 +496 @@
 
         $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 );