Allow the dashboard widgets to be arranged in up to four columns. The number of columns can be selected from the Screen Options tab.

git-svn-id: http://svn.automattic.com/wordpress/trunk@10641 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/admin-ajax.php

@@ -949,32 +949,63 @@ case 'autosave-generate-nonces' :
 break;
 case 'closed-postboxes' :
 	check_ajax_referer( 'closedpostboxes', 'closedpostboxesnonce' );
-	$closed = isset( $_POST['closed'] )? $_POST['closed'] : '';
+	$closed = isset( $_POST['closed'] ) ? $_POST['closed'] : '';
 	$closed = explode( ',', $_POST['closed'] );
-	$hidden = isset( $_POST['hidden'] )? $_POST['hidden'] : '';
+	$hidden = isset( $_POST['hidden'] ) ? $_POST['hidden'] : '';
 	$hidden = explode( ',', $_POST['hidden'] );
-	$page = isset( $_POST['page'] )? $_POST['page'] : '';
+	$page = isset( $_POST['page'] ) ? $_POST['page'] : '';
-	if ( !preg_match( '/^[a-z-_]+$/', $page ) ) {
+
+	if ( !preg_match( '/^[a-z_-]+$/', $page ) )
 		die(-1);
-	}
+
-	$current_user = wp_get_current_user();
+	if ( ! $user = wp_get_current_user() )
+		die(-1);
+
 	if ( is_array($closed) )
-		update_usermeta($current_user->ID, 'closedpostboxes_'.$page, $closed);
+		update_usermeta($user->ID, 'closedpostboxes_'.$page, $closed);
+
 	if ( is_array($hidden) )
-		update_usermeta($current_user->ID, 'meta-box-hidden_'.$page, $hidden);
+		update_usermeta($user->ID, 'meta-box-hidden_'.$page, $hidden);
-break;
+
+	die('1');
+	break;
 case 'hidden-columns' :
 	check_ajax_referer( 'hiddencolumns', 'hiddencolumnsnonce' );
-	$hidden = isset( $_POST['hidden'] )? $_POST['hidden'] : '';
+	$hidden = isset( $_POST['hidden'] ) ? $_POST['hidden'] : '';
 	$hidden = explode( ',', $_POST['hidden'] );
-	$page = isset( $_POST['page'] )? $_POST['page'] : '';
+	$page = isset( $_POST['page'] ) ? $_POST['page'] : '';
-	if ( !preg_match( '/^[a-z_-]+$/', $page ) ) {
+
+	if ( !preg_match( '/^[a-z_-]+$/', $page ) )
 		die(-1);
-	}
+
-	$current_user = wp_get_current_user();
+	if ( ! $user = wp_get_current_user() )
+		die(-1);
+
 	if ( is_array($hidden) )
-		update_usermeta($current_user->ID, "manage-$page-columns-hidden", $hidden);
+		update_usermeta($user->ID, "manage-$page-columns-hidden", $hidden);
-break;
+
+	die('1');
+	break;
+case 'meta-box-order':
+	check_ajax_referer( 'meta-box-order' );
+	$order = isset( $_POST['order'] ) ? (array) $_POST['order'] : false;
+	$page_columns = isset( $_POST['page_columns'] ) ? (int) $_POST['page_columns'] : 0;
+	$page = isset( $_POST['page'] ) ? $_POST['page'] : '';
+
+	if ( !preg_match( '/^[a-z_-]+$/', $page ) )
+		die(-1);
+
+	if ( ! $user = wp_get_current_user() )
+		die(-1);
+
+	if ( $order )
+		update_user_option($user->ID, "meta-box-order_$page", $order);
+
+	if ( $page_columns )
+		update_usermeta($user->ID, "screen_layout_$page", $page_columns);
+
+	die('1');
+	break;
 case 'get-permalink':
 	check_ajax_referer( 'getpermalink', 'getpermalinknonce' );
 	$post_id = isset($_POST['post_id'])? intval($_POST['post_id']) : 0;
@@ -1106,11 +1137,6 @@ case 'inline-save-tax':
 
 	exit;
 	break;
-case 'meta-box-order':
-	check_ajax_referer( 'meta-box-order' );
-	update_user_option( $GLOBALS['current_user']->ID, "meta-box-order_$_POST[page]", $_POST['order'] );
-	die('1');
-	break;
 case 'find_posts':
 	check_ajax_referer( 'find-posts' );
 

wp-admin/includes/dashboard.php

@@ -143,24 +143,52 @@ function _wp_dashboard_control_callback( $dashboard, $meta_box ) {
  * @since unknown
  */
 function wp_dashboard() {
-	echo "<div id='dashboard-widgets' class='metabox-holder'>\n\n";
+	global $screen_layout_columns;
 
-	echo "<div id='side-info-column' class='inner-sidebar'>\n\n";
+	$hide2 = $hide3 = $hide4 = '';
-	$class = do_meta_boxes( 'dashboard', 'side', '' ) ? ' class="has-sidebar"' : '';
+	switch ( $screen_layout_columns ) {
-	echo "</div>\n\n";
+		case 4:
-
+			$width = 'width:24.5%;';
-	echo "<div id='post-body'$class>\n\n";
+			break;
-	echo "<div id='dashboard-widgets-main-content' class='has-sidebar-content'>\n\n";
+		case 3:
+			$width = 'width:32.67%;';
+			$hide4 = 'display:none;';
+			break;
+		case 2:
+			$width = 'width:49%;';
+			$hide3 = $hide4 = 'display:none;';
+			break;
+		default:
+			$width = 'width:98%;';
+			$hide2 = $hide3 = $hide4 = 'display:none;';
+	}
+?>
+<div id='dashboard-widgets' class='metabox-holder'>
+<?php
+	echo "\t<div class='postbox-container' style='$width'>\n";
 	do_meta_boxes( 'dashboard', 'normal', '' );
-	echo "</div>\n\n";
-	echo "</div>\n\n";
 	
-	echo "<form style='display: none' method='get' action=''>\n<p>\n";
+	echo "\t</div><div class='postbox-container' style='{$hide2}$width'>\n";
+	do_meta_boxes( 'dashboard', 'side', '' );
+
+	echo "\t</div><div class='postbox-container' style='{$hide3}$width'>\n";
+	do_meta_boxes( 'dashboard', 'column3', '' );
+
+	echo "\t</div><div class='postbox-container' style='{$hide4}$width'>\n";
+	do_meta_boxes( 'dashboard', 'column4', '' );
+?>
+</div></div>
+
+<form style='display: none' method='get' action=''>
+	<p>
+<?php
 	wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
 	wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
-	echo "</p>\n</form>\n";
+?>
+	</p>
+</form>
 
-	echo "</div>";
+<?php
 }
 
 /* Dashboard Widgets */

wp-admin/includes/template.php

@@ -3300,6 +3300,7 @@ function screen_meta($screen) {
 ?>
 	<br class="clear" />
 	</div></form>
+<?php echo screen_layout($screen); ?>
 </div>
 
 <?php
@@ -3310,29 +3311,38 @@ function screen_meta($screen) {
 	if ( !isset($_wp_contextual_help) )
 		$_wp_contextual_help = array();
 
+	switch ( $screen ) {
+		case 'post':
 			if ( !isset($_wp_contextual_help['post']) ) {
 				$help = drag_drop_help();
 				$help .= '<p>' . __('<a href="http://codex.wordpress.org/Writing_Posts" target="_blank">Writing Posts</a>') . '</p>';
 				$_wp_contextual_help['post'] = $help;
 			}
-
+			break;
+		case 'page':
 			if ( !isset($_wp_contextual_help['page']) ) {
 				$help = drag_drop_help();
 				$_wp_contextual_help['page'] = $help;
 			}
-
+			break;
+		case 'dashboard':
 			if ( !isset($_wp_contextual_help['dashboard']) ) {
-		$help = drag_drop_help();
+				$help = '<p>' . __('The modules on this screen can be arranged in several columns. You can select the number of columns from the Screen Options tab.') . "</p>\n";
+				$help .= drag_drop_help();
 				$_wp_contextual_help['dashboard'] = $help;
 			}
-
+			break;
+		case 'link':
 			if ( !isset($_wp_contextual_help['link']) ) {
 				$help = drag_drop_help();
 				$_wp_contextual_help['link'] = $help;
 			}
-
+			break;
+		case 'options-general':
 			if ( !isset($_wp_contextual_help['options-general']) )
 				$_wp_contextual_help['options-general'] =  __('<a href="http://codex.wordpress.org/Settings_General_SubPanel" target="_blank">General Settings</a>');
+			break;
+	}
 
 	$_wp_contextual_help = apply_filters('contextual_help_list', $_wp_contextual_help, $screen);
 	?>
@@ -3398,6 +3408,36 @@ function drag_drop_help() {
 ';
 }
 
+
+function screen_layout($screen) {
+	global $screen_layout_columns;
+
+	if ( 'dashboard' == $screen ) {
+		$screen_layout_columns = get_user_option('screen_layout_dashboard');
+		$num = 4;
+/* add to the write pages?
+	} elseif ( in_array( $screen, array('post', 'page', 'link') ) ) {
+		$screen_layout_columns = get_user_option('screen_layout_write');
+		$num = 2;
+*/
+	} else {
+		$screen_layout_columns = 0;
+		return '';
+	}
+	
+	if ( ! $screen_layout_columns )
+			$screen_layout_columns = 2;
+
+	$i = 1;
+	$return = '<h5>' . __('Screen Layout') . "</h5>\n<div class='columns-prefs'>" . __('Number of Columns:') . "\n";
+	while ( $i <= $num ) {
+		$return .= "<label><input type='radio' name='screen_columns' value='$i'" . ( ($screen_layout_columns == $i) ? " checked='checked'" : "" ) . " /> $i</label>\n";
+		++$i;
+	}
+	$return .= "</div>\n";
+	return $return;
+}
+
 function screen_icon($name = '') {
 	global $parent_file, $hook_suffix;
 

wp-admin/js/postbox.dev.js

@@ -26,11 +26,51 @@ var postboxes;
 				postboxes.save_state(page);
 			} );
 			
+			$('.columns-prefs input[type="radio"]').click(function(){
+				var num = $(this).val(), i, el;
+				
+				if ( num ) {
+					for ( i = 4; ( i > num && i > 1 ); i-- ) {
+						$('#' + colname(i-1) + '-sortables').append($('#' + colname(i) + '-sortables').children('.postbox'));
+						$('#' + colname(i) + '-sortables').parent().hide();
+					}
+					for ( i = 1; i <= num; i++ ) {
+						el = $('#' + colname(i) + '-sortables')
+						if ( el.parent().is(':hidden') )
+							el.addClass('temp-border').parent().show();
+					}
+				}
+				$('.postbox-container:visible').css('width', 98/num + '%');
+				postboxes.save_order(page);
+			});
+			
+			function colname(n) {
+				switch (n) {
+					case 1:
+						return 'normal';
+						break
+					case 2:
+						return 'side';
+						break
+					case 3:
+						return 'column3';
+						break
+					case 4:
+						return 'column4';
+						break
+					default:
+						return '';
+				}
+			}
+
 			this.expandSidebar();
 			this.init(page,args);
 		},
 
 		expandSidebar : function(doIt) {
+			if ( ! $('#side-info-column').length )
+				return;
+			
 			if ( doIt || $('#side-sortables > .postbox:visible').length ) {
 				if ( ! $('#post-body').hasClass('has-sidebar') ) {
 					$('#post-body').addClass('has-sidebar');
@@ -46,6 +86,8 @@ var postboxes;
 		},
 
 		init : function(page, args) {
+			var fixed = $('#dashboard-widgets').length;
+			
 			$.extend( this, args || {} );
 			$('#wpbody-content').css('overflow','hidden');
 			$('.meta-box-sortables').sortable( {
@@ -57,6 +99,9 @@ var postboxes;
 				tolerance: 'pointer',
 				toleranceMove: 'tolerance',
 				sort: function(e,ui) {
+					if ( fixed )
+						return;
+
 					if ( $(document).width() - e.clientX < 300 ) {
 						if ( ! $('#post-body').hasClass('has-sidebar') ) {
 							var pos = $('#side-sortables').offset();
@@ -67,18 +112,10 @@ var postboxes;
 						}
 					}
 				},
-				stop: function() {
+				stop: function(e,ui) {
-					var postVars = {
+					postboxes.save_order(page);
-						action: 'meta-box-order',
+					ui.item.parent().removeClass('temp-border');
-						_ajax_nonce: $('#meta-box-order-nonce').val(),
-						page: page
-					}
-					$('.meta-box-sortables').each( function() {
-						postVars["order[" + this.id.split('-')[0] + "]"] = $(this).sortable( 'toArray' ).join(',');
-					} );
-					$.post( postboxL10n.requestFile, postVars, function() {
 					postboxes.expandSidebar();
-					} );
 				}
 			} );
 		},
@@ -96,6 +133,20 @@ var postboxes;
 			postboxes.expandSidebar();
 		},
 		
+		save_order : function(page) {
+			var postVars, page_columns = $('.columns-prefs input:checked').val() || 0;
+			postVars = {
+				action: 'meta-box-order',
+				_ajax_nonce: $('#meta-box-order-nonce').val(),
+				page_columns: page_columns,
+				page: page
+			}
+			$('.meta-box-sortables').each( function() {
+				postVars["order[" + this.id.split('-')[0] + "]"] = $(this).sortable( 'toArray' ).join(',');
+			} );
+			$.post( postboxL10n.requestFile, postVars );
+		},
+
 		/* Callbacks */
 		pbshow : false,
 

wp-admin/js/postbox.js

@@ -1 +1 @@
-var postboxes;(function(a){postboxes={add_postbox_toggles:function(c,b){a(".postbox h3, .postbox .handlediv").click(function(){a(a(this).parent().get(0)).toggleClass("closed");postboxes.save_state(c)});a(".postbox h3 a").click(function(d){d.stopPropagation()});a(".hide-postbox-tog").click(function(){var d=jQuery(this).val();if(jQuery(this).attr("checked")){jQuery("#"+d).show();if(a.isFunction(postboxes.pbshow)){postboxes.pbshow(d)}}else{jQuery("#"+d).hide();if(a.isFunction(postboxes.pbhide)){postboxes.pbhide(d)}}postboxes.save_state(c)});this.expandSidebar();this.init(c,b)},expandSidebar:function(b){if(b||a("#side-sortables > .postbox:visible").length){if(!a("#post-body").hasClass("has-sidebar")){a("#post-body").addClass("has-sidebar");var c=Math.min(a("#post-body").height(),300);a("#side-sortables").css({minHeight:c+"px",height:"auto"})}}else{a("#post-body").removeClass("has-sidebar");a("#side-sortables").css({minHeight:"0"});if(a.browser.msie&&a.browser.version.charAt(0)==7){a("#side-sortables").css({height:"0"})}}},init:function(c,b){a.extend(this,b||{});a("#wpbody-content").css("overflow","hidden");a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:[".meta-box-sortables"],items:"> .postbox",handle:".hndle",distance:2,tolerance:"pointer",toleranceMove:"tolerance",sort:function(f,d){if(a(document).width()-f.clientX<300){if(!a("#post-body").hasClass("has-sidebar")){var g=a("#side-sortables").offset();a("#side-sortables").append(d.item);a(d.placeholder).css({top:g.top,left:g.left}).width(a(d.item).width());postboxes.expandSidebar(1)}}},stop:function(){var d={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page:c};a(".meta-box-sortables").each(function(){d["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")});a.post(postboxL10n.requestFile,d,function(){postboxes.expandSidebar()})}})},save_state:function(d){var b=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),c=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(postboxL10n.requestFile,{action:"closed-postboxes",closed:b,hidden:c,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:d});postboxes.expandSidebar()},pbshow:false,pbhide:false}}(jQuery));
+var postboxes;(function(a){postboxes={add_postbox_toggles:function(c,b){a(".postbox h3, .postbox .handlediv").click(function(){a(a(this).parent().get(0)).toggleClass("closed");postboxes.save_state(c)});a(".postbox h3 a").click(function(f){f.stopPropagation()});a(".hide-postbox-tog").click(function(){var e=jQuery(this).val();if(jQuery(this).attr("checked")){jQuery("#"+e).show();if(a.isFunction(postboxes.pbshow)){postboxes.pbshow(e)}}else{jQuery("#"+e).hide();if(a.isFunction(postboxes.pbhide)){postboxes.pbhide(e)}}postboxes.save_state(c)});a('.columns-prefs input[type="radio"]').click(function(){var e=a(this).val(),f,g;if(e){for(f=4;(f>e&&f>1);f--){a("#"+d(f-1)+"-sortables").append(a("#"+d(f)+"-sortables").children(".postbox"));a("#"+d(f)+"-sortables").parent().hide()}for(f=1;f<=e;f++){g=a("#"+d(f)+"-sortables");if(g.parent().is(":hidden")){g.addClass("temp-border").parent().show()}}}a(".postbox-container:visible").css("width",98/e+"%");postboxes.save_order(c)});function d(e){switch(e){case 1:return"normal";break;case 2:return"side";break;case 3:return"column3";break;case 4:return"column4";break;default:return""}}this.expandSidebar();this.init(c,b)},expandSidebar:function(b){if(!a("#side-info-column").length){return}if(b||a("#side-sortables > .postbox:visible").length){if(!a("#post-body").hasClass("has-sidebar")){a("#post-body").addClass("has-sidebar");var c=Math.min(a("#post-body").height(),300);a("#side-sortables").css({minHeight:c+"px",height:"auto"})}}else{a("#post-body").removeClass("has-sidebar");a("#side-sortables").css({minHeight:"0"});if(a.browser.msie&&a.browser.version.charAt(0)==7){a("#side-sortables").css({height:"0"})}}},init:function(d,b){var c=a("#dashboard-widgets").length;a.extend(this,b||{});a("#wpbody-content").css("overflow","hidden");a(".meta-box-sortables").sortable({placeholder:"sortable-placeholder",connectWith:[".meta-box-sortables"],items:"> .postbox",handle:".hndle",distance:2,tolerance:"pointer",toleranceMove:"tolerance",sort:function(g,f){if(c){return}if(a(document).width()-g.clientX<300){if(!a("#post-body").hasClass("has-sidebar")){var h=a("#side-sortables").offset();a("#side-sortables").append(f.item);a(f.placeholder).css({top:h.top,left:h.left}).width(a(f.item).width());postboxes.expandSidebar(1)}}},stop:function(g,f){postboxes.save_order(d);f.item.parent().removeClass("temp-border");postboxes.expandSidebar()}})},save_state:function(d){var b=a(".postbox").filter(".closed").map(function(){return this.id}).get().join(","),c=a(".postbox").filter(":hidden").map(function(){return this.id}).get().join(",");a.post(postboxL10n.requestFile,{action:"closed-postboxes",closed:b,hidden:c,closedpostboxesnonce:jQuery("#closedpostboxesnonce").val(),page:d});postboxes.expandSidebar()},save_order:function(c){var b,d=a(".columns-prefs input:checked").val()||0;b={action:"meta-box-order",_ajax_nonce:a("#meta-box-order-nonce").val(),page_columns:d,page:c};a(".meta-box-sortables").each(function(){b["order["+this.id.split("-")[0]+"]"]=a(this).sortable("toArray").join(",")});a.post(postboxL10n.requestFile,b)},pbshow:false,pbhide:false}}(jQuery));

wp-admin/wp-admin.css

@@ -1320,7 +1320,7 @@ table.form-table td .updated {
 }
 
 /* Post Screen */
-#normal-sortables {
+#post-body-content #normal-sortables {
 	min-height: 50px;
 }
 
@@ -1539,6 +1539,10 @@ table.form-table td .updated {
 	font-weight: normal;
 }
 
+#dashboard-widgets .meta-box-sortables {
+	margin: 0 5px;
+}
+
 .meta-box-sortables .postbox .handlediv {
 	float: right;
 	width: 23px;
@@ -2968,3 +2972,20 @@ ol {
 	list-style-type: decimal;
 	margin-left: 2em;
 }
+
+.postbox-container {
+	float: left;
+	padding-right: 0.5%;
+}
+
+.postbox-container .meta-box-sortables {
+	min-height: 300px;
+}
+
+.temp-border {
+	border: 1px dotted #ccc;
+}
+
+.columns-prefs label {
+	padding: 0 5px;
+}

wp-includes/script-loader.php

@@ -245,7 +245,7 @@ function wp_default_scripts( &$scripts ) {
 
 		$scripts->add( 'xfn', "/wp-admin/js/xfn$suffix.js", false, '3517m' );
 
-		$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20090102' );
+		$scripts->add( 'postbox', "/wp-admin/js/postbox$suffix.js", array('jquery-ui-sortable'), '20090223' );
 		$scripts->add_data( 'postbox', 'group', 1 );
 		$scripts->localize( 'postbox', 'postboxL10n', array(
 			'requestFile' => admin_url('admin-ajax.php')