Widgets UI styling, see #9511

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

wp-admin/css/colors-classic.css

@@ -426,7 +426,6 @@ a.page-numbers {
 	border-bottom-color: #b8d3e2;
 }
 
-div#available-widgets-filter,
 .commentlist li {
 	border-bottom-color: #ccc;
 }
@@ -608,6 +607,7 @@ input.readonly, textarea.readonly {
 }
 
 .widget,
+#widget-list .widget-top,
 .postbox,
 #titlediv,
 #poststuff .postarea,
@@ -980,7 +980,7 @@ abbr.required,
 #editorcontainer,
 #post-status-info,
 #titlediv #title,
-.editwidget .widget-control {
+.editwidget .widget-inside {
 	border-color: #dfdfdf;
 }
 
@@ -1604,11 +1604,32 @@ fieldset.inline-edit-col-right .inline-edit-col {
 	border-bottom-color: #ccc;
 }
 
-div.widgets-holder-wrap {
+div.widgets-sortables,
-    background-color: #f1f1f1;
+#widgets-left .inactive {
+	background-color: #f1f1f1;
     border-color: #ddd;
 }
 
+#available-widgets .widget-holder {
+    background-color: #fff;
+    border-color: #ddd;
+}
+
+#widgets-left h3.sidebar-name {
+	background-color: #aaa;
+	background-image: url(../images/ed-bg-vs.gif);
+	text-shadow: #FFFFFF 0 -1px 0;
+	border-color: #dfdfdf;
+}
+
+#widgets-right h3.sidebar-name {
+	background-image: url(../images/fav.png);
+	text-shadow: #3f3f3f 0 -1px 0;
+	background-color: #636363;
+	border-color: #636363;
+	color: #fff;
+}
+
 .sidebar-name:hover {
 	color: #d54e21;
 }

wp-admin/css/colors-fresh.css

@@ -2,6 +2,26 @@ html {
 	background-color: #f9f9f9;
 }
 
+* html input,
+* html .widget {
+    border-color: #dfdfdf;
+}
+
+textarea,
+input,
+select {
+	border-color: #DFDFDF;
+}
+
+kbd,
+code {
+	background: #eaeaea;
+}
+
+input[readonly] {
+	background-color: #eee;
+}
+
 .find-box-search {
 	border-color: #dfdfdf;
 	background-color: #f1f1f1;
@@ -29,10 +49,6 @@ body > #upload-menu {
 	border-bottom-color: #fff;
 }
 
-kbd, code {
-	background: #eaeaea;
-}
-
 #postcustomstuff table,
 #your-profile fieldset,
 #rightnow,
@@ -402,7 +418,6 @@ a.page-numbers {
 	border-bottom-color: #B8D3E2;
 }
 
-div#available-widgets-filter,
 .commentlist li {
 	border-bottom-color: #ccc;
 }
@@ -605,6 +620,7 @@ input.readonly, textarea.readonly {
 }
 
 .widget,
+#widget-list .widget-top,
 .postbox,
 #titlediv,
 #poststuff .postarea,
@@ -947,7 +963,7 @@ abbr.required,
 #editorcontainer,
 #post-status-info,
 #titlediv #title,
-.editwidget .widget-control {
+.editwidget .widget-inside {
 	border-color: #dfdfdf;
 }
 
@@ -1549,10 +1565,6 @@ fieldset.inline-edit-col-right .inline-edit-col {
 	background-position:0 -27px;
 }
 
-input[readonly] {
-	background-color: #eee;
-}
-
 .popular-tags,
 .feature-filter {
 	background-color: #FFFFFF;
@@ -1567,22 +1579,32 @@ input[readonly] {
 	border-bottom-color: #ccc;
 }
 
-div.widgets-holder-wrap {
+div.widgets-sortables,
-    background-color: #F1F1F1;
+#widgets-left .inactive {
-    border-color: #DDDDDD;
+	background-color: #f1f1f1;
+    border-color: #ddd;
+}
+
+#available-widgets .widget-holder {
+    background-color: #fff;
+    border-color: #ddd;
+}
+
+#widgets-left h3.sidebar-name {
+	background-color: #aaa;
+	background-image: url(../images/ed-bg.gif);
+	text-shadow: #FFFFFF 0 -1px 0;
+	border-color: #dfdfdf;
+}
+
+#widgets-right h3.sidebar-name {
+	background-image: url(../images/fav.png);
+	text-shadow: #3f3f3f 0 -1px 0;
+	background-color: #636363;
+	border-color: #636363;
+	color: #fff;
 }
 
 .sidebar-name:hover {
 	color: #d54e21;
 }
-
-textarea,
-input,
-select {
-	border-color: #DFDFDF;
-}
-
-* html input,
-* html .widget {
-    border-color: #dfdfdf;
-}

wp-admin/css/widgets.css

@@ -1,3 +1,8 @@
+html,
+body {
+	min-width: 950px;
+}
+
 /* 2 column liquid layout */
 div.widget-liquid-left {
 	float: left;
@@ -7,57 +12,142 @@ div.widget-liquid-left {
 }
 
 div#widgets-left {
-	margin-right: 335px;
+	margin-left: 5px;
+	margin-right: 325px;
+}
+
+div#widgets-right {
+	width: 285px;
+	margin: 0 auto;
 }
 
 div.widget-liquid-right {
 	float: right;
 	clear: right;
-	width: 320px;
+	width: 300px;
 }
 
-.widgets-sortables li {
+.widget-liquid-right .widget,
-	width: 300px;
+#wp_inactive_widgets .widget {
-	margin: 15px 0 18px;
+	width: 250px;
+	margin: 0 auto 20px;
 	position: relative;
 }
 
-#widgets-left .widgets-sortables li,
+#wp_inactive_widgets .widget {
-#widgets-left #widget-list li {
+	margin: 0 10px 20px;
 	float: left;
-	margin: 0 15px 18px 3px;
-	width: 300px;
 }
 
-.widget-placeholder {
+.widget-liquid-right .sidebar-name {
-	border-width: 1px;
+	width: 256px;
-	border-style: dashed;
-	margin-bottom: 20px;
-	height: 25px;
-	width: 298px;
 }
 
-div.widgets-holder-wrap {
+h3.sidebar-name {
-    padding: 8px 8px 0;
+	background-repeat: repeat-x;
-    margin: 12px 0;
+	background-position: 0 0;
+	margin: 0;
+	cursor: pointer;
+	font-size: 13px;
+	padding: 5px 12px;
 	border-width: 1px;
 	border-style: solid;
-    -moz-border-radius: 6px;
+	-moz-border-radius-topleft: 8px;
+	-moz-border-radius-topright: 8px;
+	-webkit-border-top-right-radius: 8px;
+	-webkit-border-top-left-radius: 8px;
+	-khtml-border-top-right-radius: 8px;
+	-khtml-border-top-left-radius: 8px;
+	border-top-right-radius: 8px;
+	border-top-left-radius: 8px;
+}
+
+.js .closed h3.sidebar-name {
+	-moz-border-radius-bottomleft: 8px;
+	-moz-border-radius-bottomright: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-webkit-border-bottom-left-radius: 8px;
+	-khtml-border-bottom-right-radius: 8px;
+	-khtml-border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+.widget-liquid-right .widgets-sortables,
+#widgets-left .widget-holder {
+	border-width: 0 1px 1px;
+	border-style: none solid solid;
+    -moz-border-radius-bottomleft: 8px;
+	-moz-border-radius-bottomright: 8px;
+	-webkit-border-bottom-right-radius: 8px;
+	-webkit-border-bottom-left-radius: 8px;
+	-khtml-border-bottom-right-radius: 8px;
+	-khtml-border-bottom-left-radius: 8px;
+	border-bottom-right-radius: 8px;
+	border-bottom-left-radius: 8px;
+}
+
+.js .closed .widgets-sortables,
+.js .closed .widget-holder {
+	display: none;
+}
+
+.widget-liquid-right .widgets-sortables {
+	padding: 15px 0 0;
+	width: 280px;
+}
+
+#available-widgets .widget-holder {
+	padding: 15px 5px 0;
+}
+
+#wp_inactive_widgets {
+	padding: 5px 5px 0;
+}
+
+#widget-list .widget {
+	width: 250px;
+	margin: 0 10px 15px;
+	border: 0 none;
+	float: left;
+}
+
+#widget-list .widget-description {
+	padding: 5px 8px;
+}
+
+#widget-list .widget-top {
+	border-width: 1px;
+	border-style: solid;
+	-moz-border-radius: 6px;
 	-khtml-border-radius: 6px;
 	-webkit-border-radius: 6px;
 	border-radius: 6px;
 }
 
+.widget-placeholder {
+	border-width: 1px;
+	border-style: dashed;
+	margin: 0 auto 20px;
+	height: 26px;
+	width: 250px;
+}
+
+#wp_inactive_widgets .widget-placeholder {
+	margin: 0 10px 20px;
+	float: left;
+}
+
+div.widgets-holder-wrap {
+	padding: 0;
+	margin: 10px 0 20px;
+}
+
 #widgets-left #available-widgets {
     background-color: transparent;
     border: 0 none;
 }
 
-div#available-widgets-filter {
-	border-bottom-width: 1px;
-	border-bottom-style: solid;
-}
-
 ul#widget-list {
 	list-style: none;
 	margin: 0;
@@ -72,7 +162,6 @@ ul#widget-list {
 }
 
 .widget-top .widget-title {
-	margin-right: 30px;
 	padding: 7px 9px;
 }
 
@@ -80,34 +169,37 @@ ul#widget-list {
 	float: right;
 }
 
-.widget-title-action a {
+a.widget-action {
     display: block;
     width: 24px;
     height: 26px;
 }
 
-.widget-top:hover .widget-title-action a {
+#available-widgets a.widget-action {
-    background: url("../images/menu-bits.gif") no-repeat scroll 0 -110px;
-}
-
-.widget .widget-inside {
-	padding: 15px;
-	font-size: 11px;
 	display: none;
 }
 
-.widget-control, 
+.widget-top:hover a.widget-action {
+    background: url("../images/menu-bits.gif") no-repeat scroll 0 -110px;
+}
+
+.widget .widget-inside,
+.widget .widget-description {
+	padding: 15px;
+	font-size: 11px;
+	line-height: 16px;
+}
+
+.widget-inside, 
 .widget-description {
 	display: none;
 }
 
-#available-widgets .widget-description,
+#available-widgets .widget-description {
-.widget-liquid-right .widget-control,
-#wp_inactive_widgets .widget-control {
 	display: block;
 }
 
-.widget .widget-control p {
+.widget .widget-inside p {
 	margin: 0 0 1em;
 	padding: 0;
 }
@@ -117,14 +209,8 @@ ul#widget-list {
 	line-height: 1;
 }
 
-.sidebar-name {
-    margin: 0 0 12px;
-    padding: 6px;
-    cursor: pointer;
-}
-
 .widgets-sortables {
-    min-height: 50px;
+    min-height: 90px;
 }
 
 .widget-control-actions {
@@ -148,11 +234,36 @@ div#sidebar-info {
 }
 
 .widget-control-edit {
-	font-size: 10px;
+	display: block;
+	font-size: 11px;
 	font-weight: normal;
+	line-height: 24px;
+	padding: 0 8px 0 0;
 }
 
-.editwidget .widget-control {
+a.widget-control-edit {
+	text-decoration: none;
+}
+
+.widget-control-edit .add,
+.widget-control-edit .edit {
+	display: none;
+}
+
+#available-widgets .widget-control-edit .add {
+	display: block;
+}
+
+#widgets-right .widget-control-edit .edit,
+#wp_inactive_widgets .widget-control-edit .edit {
+	display: block;
+}
+
+.editwidget {
+	margin: 0 auto 15px;
+}
+
+.editwidget .widget-inside {
 	display: block;
 	border-width: 1px;
 	border-style: solid;
@@ -163,22 +274,14 @@ div#sidebar-info {
 	border-radius: 6px;
 }
 
-.widget-position table {
+#widgets-left p.description {
-	width: 100%;
+	margin: 5px 15px 8px;
-	margin-top: 12px;
 }
 
-.widget-position table td {
+.widget-position {
-	height: 3em;
+	margin-top: 8px;
-	line-height: 3em;
-	vertical-align: middle;
 }
 
-#wp_inactive_widgets .sidebar-name {
+.inactive {
-	margin: 0;
+	padding-top: 2px;
-	padding: 2px 0;
-}
-
-#wp_inactive_widgets p.description {
-	margin: 0 0 15px;
 }

wp-admin/includes/widgets.php

@@ -19,23 +19,24 @@
 function wp_list_widgets() {
 	global $wp_registered_widgets, $sidebars_widgets, $wp_registered_widget_controls;
 
-	$no_widgets_shown = true;
+	$done = array();
-	$already_shown = array(); ?>
+	$sort = array_keys($wp_registered_widgets);
+	natcasesort($sort); ?>
 
-	<ul id="widget-list">
+	<div class="widget-holder">
+	<div id="widget-list">
 <?php
-	foreach ( $wp_registered_widgets as $name => $widget ) {
+	foreach ( $sort as $val ) {
-		if ( in_array( $widget['callback'], $already_shown ) ) // We already showed this multi-widget
+		$widget = $wp_registered_widgets[$val];
+		if ( in_array( $widget['callback'], $done, true ) ) // We already showed this multi-widget
 			continue;
 
 		$sidebar = is_active_widget( $widget['callback'], $widget['id'] );
+		$done[] = $widget['callback'];
 
 		if ( ! isset( $widget['params'][0] ) )
 			$widget['params'][0] = array();
 
-		$already_shown[] = $widget['callback'];
-		$no_widgets_shown = false;
-
 		$args = array( 'widget_id' => $widget['id'], 'widget_name' => $widget['name'], '_display' => 'template' );
 
 		if ( isset($wp_registered_widget_controls[$widget['id']]['id_base']) && isset($widget['params'][0]['number']) ) {
@@ -51,11 +52,10 @@ function wp_list_widgets() {
 
 		$args = wp_list_widget_controls_dynamic_sidebar( array( 0 => $args, 1 => $widget['params'][0] ) );
 		call_user_func_array( 'wp_widget_control', $args );
-	}
+	} ?>
-
+	</div>
-	if ( $no_widgets_shown )
+	<br class='clear' />
-	  echo '<li>' . __( 'No matching widgets' ) . "</li>\n"; ?>
+	</div>
-	</ul>
 <?php
 }
 
@@ -66,15 +66,12 @@ function wp_list_widgets() {
  *
  * @param string $sidebar
  */
-function wp_list_widget_controls( $sidebar, $hide = false ) {
+function wp_list_widget_controls( $sidebar ) {
 	add_filter( 'dynamic_sidebar_params', 'wp_list_widget_controls_dynamic_sidebar' );
-?>
 
-	<ul class="widgets-sortables<?php echo $hide ? ' hide-if-js' : ''; ?>">
+	echo "\t<div id='$sidebar' class='widgets-sortables'>\n";
-	<?php dynamic_sidebar( $sidebar ); ?>
+	dynamic_sidebar( $sidebar );
-	</ul>
+	echo "\t</div>\n";
-
-<?php
 }
 
 /**
@@ -94,8 +91,8 @@ function wp_list_widget_controls_dynamic_sidebar( $params ) {
 	$id = isset($params[0]['_temp_id']) ? $params[0]['_temp_id'] : $widget_id;
 	$hidden = isset($params[0]['_hide']) ? ' style="display:none;"' : '';
 
-	$params[0]['before_widget'] = "<li id='widget-${i}_$id' class='widget'$hidden>";
+	$params[0]['before_widget'] = "<div id='widget-${i}_$id' class='widget'$hidden>";
-	$params[0]['after_widget'] = "</li>";
+	$params[0]['after_widget'] = "</div>";
 	$params[0]['before_title'] = "%BEG_OF_TITLE%"; // deprecated
 	$params[0]['after_title'] = "%END_OF_TITLE%"; // deprecated
 	if ( is_callable( $wp_registered_widgets[$widget_id]['callback'] ) ) {
@@ -171,14 +168,14 @@ function wp_widget_control( $sidebar_args ) {
 	echo $sidebar_args['before_widget']; ?>
 	<div class="widget-top">
 	<div class="widget-title-action">
-		<a class="widget-action widget-control-edit" href="<?php echo clean_url( add_query_arg( $query_arg ) ); ?>"></a>
+		<a class="widget-action hide-if-no-js" href="#available-widgets"></a>
+		<a class="widget-control-edit hide-if-js" href="<?php echo clean_url( add_query_arg( $query_arg ) ); ?>"><span class="edit"><?php _e('Edit'); ?></span><span class="add"><?php _e('Add'); ?></span></a>
 	</div>
 	<div class="widget-title"><h4><?php echo $widget_title ?></h4></div>
 	</div>
 
 	<div class="widget-inside">
 	<form action="" method="post">
-	<div class="widget-control">
 <?php
 	if ( isset($control['callback']) )
 		$has_form = call_user_func_array( $control['callback'], $control['params'] );
@@ -200,13 +197,12 @@ function wp_widget_control( $sidebar_args ) {
 <?php		} ?>
 		<br class="clear" />
 	</div>
-	</div>
 	</form>
+	</div>
 
 	<div class="widget-description">
 <?php echo ( $widget_description = wp_widget_description($widget_id) ) ? "$widget_description\n" : "$widget_title\n"; ?>
 	</div>
-	</div>
 <?php
 	echo $sidebar_args['after_widget'];
 	return $sidebar_args;

wp-admin/js/widgets.dev.js

@@ -4,17 +4,31 @@ var wpWidgets;
 
 wpWidgets = {
 	init : function() {
-        var rem;
+        var rem, hr = $('#available-widgets .widget-holder').height(), firstsb = $('#widgets-right .widgets-holder-wrap .widgets-sortables:first'), hl = firstsb.height();
-		$('h3.sidebar-name').click(function(){
+
+		$('#widgets-right h3.sidebar-name').click(function(){
             var c = $(this).siblings('.widgets-sortables');
 			if ( c.is(':visible') ) {
 				c.hide().sortable('disable');
+				$(this).parent().addClass('closed');
 			} else {
 				c.show().sortable('enable').sortable('refresh');
+				$(this).parent().removeClass('closed');
 			}
-			$(this).siblings('#widget-list').toggle();
         });
-        this.addEvents();
+        
+        $('#widgets-left h3.sidebar-name').click(function(){
+			if ( $(this).siblings('.widget-holder').is(':visible') ) {
+				$(this).parent().addClass('closed');
+			} else {
+				$(this).parent().removeClass('closed');
+			}
+        });
+        
+		if ( hr > hl )
+        	firstsb.css('minHeight', hr + 'px');
+		
+		this.addEvents();
         $('.widget-error').parents('.widget').find('a.widget-action').click();
 
         $('#widget-list .widget').draggable({
@@ -23,8 +37,9 @@ wpWidgets = {
 			distance: 2,
 			helper: 'clone',
 			zIndex: 5,
-			start: function() {
+			start: function(e,ui) {
 				wpWidgets.fixWebkit(1);
+				ui.helper.find('.widget-description').hide();
 			},
 			stop: function(e,ui) {
 				if ( rem )
@@ -48,7 +63,7 @@ wpWidgets = {
 				ui.item.css({'marginLeft':'','width':''});
 			},
 			stop: function(e,ui) {
-				var add = ui.item.find('input.add_new').val(), n = ui.item.find('input.multi_number').val(), id = ui.item.attr('id'), sb = $(this).parent().attr('id');
+				var add = ui.item.find('input.add_new').val(), n = ui.item.find('input.multi_number').val(), id = ui.item.attr('id'), sb = $(this).attr('id');
 				ui.item.css({'marginLeft':'','width':''});
 
 				if ( add ) {
@@ -56,10 +71,10 @@ wpWidgets = {
 						ui.item.html( ui.item.html().replace(/<[^<>]+>/g, function(m){ return m.replace(/__i__/g, n); }) );
 						ui.item.attr( 'id', id.replace(/__i__/g, n) );
 						n++;
-						$('li#' + id).find('input.multi_number').val(n);
+						$('div#' + id).find('input.multi_number').val(n);
 					} else if ( 'single' == add ) {
 						ui.item.attr( 'id', 'new-' + id );
-						rem = 'li#' + id;
+						rem = 'div#' + id;
 					}
 					wpWidgets.addEvents(ui.item);
 					wpWidgets.save( ui.item.find('form').serializeArray(), sb, 0, 0 );
@@ -78,7 +93,7 @@ wpWidgets = {
 	},
 
 	saveOrder : function(sb) {
-		$('#' + sb + ' .ajax-feedback').css('visibility', 'visible');
+		$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
 
 		var a = {
 			action: 'widgets-order',
@@ -87,7 +102,7 @@ wpWidgets = {
 		};
 
 		$('.widgets-sortables').each( function() {
-			a['sidebars[' + $(this).parent().attr('id') + ']'] = $(this).sortable('toArray').join(',');
+			a['sidebars[' + $(this).attr('id') + ']'] = $(this).sortable('toArray').join(',');
 		});
 
 		$.post( ajaxurl, a, function() {
@@ -96,7 +111,7 @@ wpWidgets = {
 	},
 
 	save : function(data, sb, del, t) {
-		$('#' + sb + ' .ajax-feedback').css('visibility', 'visible');
+		$('#' + sb).parents('.widgets-holder-wrap').find('.ajax-feedback').css('visibility', 'visible');
 
 		var a = {
 			action: 'save-widget',
@@ -116,16 +131,16 @@ wpWidgets = {
 				return;
 
 			if ( del ) {
-				$(t).parents('li.widget').slideUp('normal', function(){ $(this).remove(); });
+				$(t).parents('.widget').slideUp('normal', function(){ $(this).remove(); });
 				if ( !a.widget_number ) {
 					id = a['widget-id'];
 					$('#available-widgets .widget-id').each(function(){
 						if ( $(this).val() == id )
-							$(this).parents('li.widget').show();
+							$(this).parents('.widget').show();
 					});
 				}
 			} else {
-				$(t).parents('.widget-inside').slideUp('normal', function(){ $(this).parents('li.widget').css({'width':'','marginLeft':''}); });
+				$(t).parents('.widget-inside').slideUp('normal', function(){ $(this).parents('.widget').css({'width':'','marginLeft':''}); });
 			}
 		});
 	},
@@ -143,10 +158,10 @@ wpWidgets = {
 		$('a.widget-action', sc).click(function(){
             var w = parseInt( $(this).parents('.widget').find('.widget-width').val(), 10 ), css = {}, inside = $(this).parents('.widget-top').siblings('.widget-inside');
 			if ( inside.is(':hidden') ) {
-				if ( w > 270 && inside.parents('.widgets-sortables').length ) {
+				if ( w > 250 && inside.parents('.widgets-sortables').length ) {
 					css['width'] = w + 30 + 'px';
 					if ( inside.parents('.widget-liquid-right').length )
-						css['marginLeft'] = 270 - w + 'px';
+						css['marginLeft'] = 234 - w + 'px';
 					inside.parents('.widget').css(css);
 				}
 				inside.slideDown('normal');
@@ -156,11 +171,11 @@ wpWidgets = {
             return false;
         });
         $('.widget-control-save', sc).click(function(){
-			wpWidgets.save( $(this).parents('form').serializeArray(), $(this).parents('.widgets-holder-wrap').attr('id'), 0, this );
+			wpWidgets.save( $(this).parents('form').serializeArray(), $(this).parents('.widgets-sortables').attr('id'), 0, this );
 			return false;
 		});
 		$('.widget-control-remove', sc).click(function(){
-			wpWidgets.save( $(this).parents('form').serializeArray(), $(this).parents('.widgets-holder-wrap').attr('id'), 1, this );
+			wpWidgets.save( $(this).parents('form').serializeArray(), $(this).parents('.widgets-sortables').attr('id'), 1, this );
 			return false;
 		});
 	}

wp-admin/js/widgets.js

@@ -1 +1 @@
-var wpWidgets;(function(a){wpWidgets={init:function(){var b;a("h3.sidebar-name").click(function(){var d=a(this).siblings(".widgets-sortables");if(d.is(":visible")){d.hide().sortable("disable")}else{d.show().sortable("enable").sortable("refresh")}a(this).siblings("#widget-list").toggle()});this.addEvents();a(".widget-error").parents(".widget").find("a.widget-action").click();a("#widget-list .widget").draggable({connectToSortable:".widgets-sortables",handle:".widget-title",distance:2,helper:"clone",zIndex:5,start:function(){wpWidgets.fixWebkit(1)},stop:function(d,c){if(b){a(b).hide()}b="";wpWidgets.fixWebkit()}});a(".widgets-sortables").sortable({placeholder:"widget-placeholder",connectWith:".widgets-sortables",items:".widget",handle:".widget-title",cursor:"move",distance:2,opacity:0.65,start:function(d,c){wpWidgets.fixWebkit(1);c.item.find(".widget-inside").hide();c.item.css({marginLeft:"",width:""})},stop:function(f,c){var d=c.item.find("input.add_new").val(),i=c.item.find("input.multi_number").val(),h=c.item.attr("id"),g=a(this).parent().attr("id");c.item.css({marginLeft:"",width:""});if(d){if("multi"==d){c.item.html(c.item.html().replace(/<[^<>]+>/g,function(e){return e.replace(/__i__/g,i)}));c.item.attr("id",h.replace(/__i__/g,i));i++;a("li#"+h).find("input.multi_number").val(i)}else{if("single"==d){c.item.attr("id","new-"+h);b="li#"+h}}wpWidgets.addEvents(c.item);wpWidgets.save(c.item.find("form").serializeArray(),g,0,0);c.item.find("input.add_new").val("");c.item.find("a.widget-action").click()}wpWidgets.saveOrder(g);wpWidgets.fixWebkit()},receive:function(d,c){if(!a(this).is(":visible")){a(this).sortable("cancel")}}}).not(":visible").sortable("disable")},saveOrder:function(c){a("#"+c+" .ajax-feedback").css("visibility","visible");var b={action:"widgets-order",savewidgets:a("#_wpnonce_widgets").val(),sidebars:[]};a(".widgets-sortables").each(function(){b["sidebars["+a(this).parent().attr("id")+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b,function(){a(".ajax-feedback").css("visibility","hidden")})},save:function(e,f,c,d){a("#"+f+" .ajax-feedback").css("visibility","visible");var b={action:"save-widget",savewidgets:a("#_wpnonce_widgets").val(),sidebar:f};if(c){b.delete_widget=1}a.map(e,function(h,g){b[h.name]=h.value});a.post(ajaxurl,b,function(g){var h;a(".ajax-feedback").css("visibility","hidden");if(!d){return}if(c){a(d).parents("li.widget").slideUp("normal",function(){a(this).remove()});if(!b.widget_number){h=b["widget-id"];a("#available-widgets .widget-id").each(function(){if(a(this).val()==h){a(this).parents("li.widget").show()}})}}else{a(d).parents(".widget-inside").slideUp("normal",function(){a(this).parents("li.widget").css({width:"",marginLeft:""})})}})},fixWebkit:function(b){b=b?"none":"";a("body").css({WebkitUserSelect:b,KhtmlUserSelect:b})},addEvents:function(b){b=b||document;a("a.widget-action",b).click(function(){var d=parseInt(a(this).parents(".widget").find(".widget-width").val(),10),e={},c=a(this).parents(".widget-top").siblings(".widget-inside");if(c.is(":hidden")){if(d>270&&c.parents(".widgets-sortables").length){e.width=d+30+"px";if(c.parents(".widget-liquid-right").length){e.marginLeft=270-d+"px"}c.parents(".widget").css(e)}c.slideDown("normal")}else{c.slideUp("normal",function(){c.parents(".widget").css({width:"",marginLeft:""})})}return false});a(".widget-control-save",b).click(function(){wpWidgets.save(a(this).parents("form").serializeArray(),a(this).parents(".widgets-holder-wrap").attr("id"),0,this);return false});a(".widget-control-remove",b).click(function(){wpWidgets.save(a(this).parents("form").serializeArray(),a(this).parents(".widgets-holder-wrap").attr("id"),1,this);return false})}};a(document).ready(function(){wpWidgets.init()})})(jQuery);
+var wpWidgets;(function(a){wpWidgets={init:function(){var e,d=a("#available-widgets .widget-holder").height(),c=a("#widgets-right .widgets-holder-wrap .widgets-sortables:first"),b=c.height();a("#widgets-right h3.sidebar-name").click(function(){var f=a(this).siblings(".widgets-sortables");if(f.is(":visible")){f.hide().sortable("disable");a(this).parent().addClass("closed")}else{f.show().sortable("enable").sortable("refresh");a(this).parent().removeClass("closed")}});a("#widgets-left h3.sidebar-name").click(function(){if(a(this).siblings(".widget-holder").is(":visible")){a(this).parent().addClass("closed")}else{a(this).parent().removeClass("closed")}});if(d>b){c.css("minHeight",d+"px")}this.addEvents();a(".widget-error").parents(".widget").find("a.widget-action").click();a("#widget-list .widget").draggable({connectToSortable:".widgets-sortables",handle:".widget-title",distance:2,helper:"clone",zIndex:5,start:function(g,f){wpWidgets.fixWebkit(1);f.helper.find(".widget-description").hide()},stop:function(g,f){if(e){a(e).hide()}e="";wpWidgets.fixWebkit()}});a(".widgets-sortables").sortable({placeholder:"widget-placeholder",connectWith:".widgets-sortables",items:".widget",handle:".widget-title",cursor:"move",distance:2,opacity:0.65,start:function(g,f){wpWidgets.fixWebkit(1);f.item.find(".widget-inside").hide();f.item.css({marginLeft:"",width:""})},stop:function(h,f){var g=f.item.find("input.add_new").val(),k=f.item.find("input.multi_number").val(),j=f.item.attr("id"),i=a(this).attr("id");f.item.css({marginLeft:"",width:""});if(g){if("multi"==g){f.item.html(f.item.html().replace(/<[^<>]+>/g,function(l){return l.replace(/__i__/g,k)}));f.item.attr("id",j.replace(/__i__/g,k));k++;a("div#"+j).find("input.multi_number").val(k)}else{if("single"==g){f.item.attr("id","new-"+j);e="div#"+j}}wpWidgets.addEvents(f.item);wpWidgets.save(f.item.find("form").serializeArray(),i,0,0);f.item.find("input.add_new").val("");f.item.find("a.widget-action").click()}wpWidgets.saveOrder(i);wpWidgets.fixWebkit()},receive:function(g,f){if(!a(this).is(":visible")){a(this).sortable("cancel")}}}).not(":visible").sortable("disable")},saveOrder:function(c){a("#"+c).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"widgets-order",savewidgets:a("#_wpnonce_widgets").val(),sidebars:[]};a(".widgets-sortables").each(function(){b["sidebars["+a(this).attr("id")+"]"]=a(this).sortable("toArray").join(",")});a.post(ajaxurl,b,function(){a(".ajax-feedback").css("visibility","hidden")})},save:function(e,f,c,d){a("#"+f).parents(".widgets-holder-wrap").find(".ajax-feedback").css("visibility","visible");var b={action:"save-widget",savewidgets:a("#_wpnonce_widgets").val(),sidebar:f};if(c){b.delete_widget=1}a.map(e,function(h,g){b[h.name]=h.value});a.post(ajaxurl,b,function(g){var h;a(".ajax-feedback").css("visibility","hidden");if(!d){return}if(c){a(d).parents(".widget").slideUp("normal",function(){a(this).remove()});if(!b.widget_number){h=b["widget-id"];a("#available-widgets .widget-id").each(function(){if(a(this).val()==h){a(this).parents(".widget").show()}})}}else{a(d).parents(".widget-inside").slideUp("normal",function(){a(this).parents(".widget").css({width:"",marginLeft:""})})}})},fixWebkit:function(b){b=b?"none":"";a("body").css({WebkitUserSelect:b,KhtmlUserSelect:b})},addEvents:function(b){b=b||document;a("a.widget-action",b).click(function(){var d=parseInt(a(this).parents(".widget").find(".widget-width").val(),10),e={},c=a(this).parents(".widget-top").siblings(".widget-inside");if(c.is(":hidden")){if(d>250&&c.parents(".widgets-sortables").length){e.width=d+30+"px";if(c.parents(".widget-liquid-right").length){e.marginLeft=234-d+"px"}c.parents(".widget").css(e)}c.slideDown("normal")}else{c.slideUp("normal",function(){c.parents(".widget").css({width:"",marginLeft:""})})}return false});a(".widget-control-save",b).click(function(){wpWidgets.save(a(this).parents("form").serializeArray(),a(this).parents(".widgets-sortables").attr("id"),0,this);return false});a(".widget-control-remove",b).click(function(){wpWidgets.save(a(this).parents("form").serializeArray(),a(this).parents(".widgets-sortables").attr("id"),1,this);return false})}};a(document).ready(function(){wpWidgets.init()})})(jQuery);

wp-admin/widgets.php

@@ -255,10 +255,11 @@ if ( isset($_GET['editwidget']) && $_GET['editwidget'] ) {
 		<h3><?php printf( __( 'Widget %s' ), wp_specialchars( strip_tags($control['name']) ) ); ?></h3>
 
 		<form action="widgets.php" method="post">
-		<div class="widget-control">
+		<div class="widget-inside">
 <?php	call_user_func_array( $control_callback, $control['params'] ); ?>
 		</div>
 
+		<p class="describe"><?php _e('Select both the sidebar for this widget and the position of the widget in that sidebar.'); ?></p>
 		<div class="widget-position">
 		<table class="widefat"><thead><tr><th><?php _e('Sidebar'); ?></th><th><?php _e('Position'); ?></th></tr></thead><tbody>
 <?php	foreach ( $wp_registered_sidebars as $sbname => $sbvalue ) {
@@ -299,6 +300,7 @@ if ( isset($_GET['editwidget']) && $_GET['editwidget'] ) {
 		<input type="hidden" name="id_base" class="id_base" value="<?php echo attr($id_base); ?>" />
 		<input type="hidden" name="multi_number" class="multi_number" value="<?php echo attr($multi_number); ?>" />
 <?php	wp_nonce_field("save-delete-widget-$widget_id"); ?>
+		<br class="clear" />
 		</div>
 		</form>
 		</div>
@@ -341,31 +343,36 @@ require_once( 'admin-header.php' ); ?>
 		<br class="clear" />
 	</div>
 
-	<div id="wp_inactive_widgets" class="widgets-holder-wrap">
+	<div class="widgets-holder-wrap">
 		<h3 class="sidebar-name"><?php _e('Inactive Widgets'); ?>
 		<span><img src="images/wpspin.gif" class="ajax-feedback" title="" alt="" /></span></h3>
-		<p class="description"><?php _e('Drag widgets here to remove them from the web site but keep their settings.'); ?></p>
+		<div class="widget-holder inactive">
+		<p class="description"><?php _e('Drag widgets here to remove them from the sidebar but keep their settings.'); ?></p>
 		<?php wp_list_widget_controls('wp_inactive_widgets'); ?>
 		<br class="clear" />
+		</div>
 	</div>
 </div>
 </div>
 
 <div class="widget-liquid-right">
+<div id="widgets-right">
 <?php
 $i = 0;
 foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
 	if ( 'wp_inactive_widgets' == $sidebar )
-		continue; ?>
+		continue;
-	<div id="<?php echo attr( $sidebar ); ?>" class="widgets-holder-wrap">
+	$closed = $i ? ' closed' : ''; ?>
+	<div class="widgets-holder-wrap<?php echo $closed; ?>">
 	<h3 class="sidebar-name"><?php echo wp_specialchars( $registered_sidebar['name'] ); ?>
 	<span><img src="images/wpspin.gif" class="ajax-feedback" title="" alt="" /></span></h3>
-	<?php wp_list_widget_controls( $sidebar, $i ); // Show the control forms for each of the widgets in this sidebar ?>
+	<?php wp_list_widget_controls( $sidebar ); // Show the control forms for each of the widgets in this sidebar ?>
 	</div>
 <?php
 	$i++;
 } ?>
 </div>
+</div>
 <form action="" method="post">
 <?php wp_nonce_field( 'save-sidebar-widgets', '_wpnonce_widgets', false ); ?>
 </form>

wp-includes/default-widgets.php

@@ -576,7 +576,7 @@ class WP_Widget_Recent_Posts extends WP_Widget {
 
 		<p><label for="<?php echo $this->get_field_id('number'); ?>">
 		<?php _e('Number of posts to show:'); ?>
-		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" /></label>
+		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></label>
 		<br /><small><?php _e('(at most 15)'); ?></small></p>
 <?php
 	}
@@ -663,7 +663,7 @@ class WP_Widget_Recent_Comments extends WP_Widget {
 
 		<p><label for="<?php echo $this->get_field_id('number'); ?>">
 		<?php _e('Number of comments to show:'); ?>
-		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" /></label>
+		<input id="<?php echo $this->get_field_id('number'); ?>" name="<?php echo $this->get_field_name('number'); ?>" type="text" value="<?php echo $number; ?>" size="3" /></label>
 		<br /><small><?php _e('(at most 15)'); ?></small></p>
 <?php
 	}

wp-includes/script-loader.php

@@ -330,7 +330,7 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox' ), '20090114' );
 		$scripts->add_data( 'media-upload', 'group', 1 );
 
-		$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable' ), '20090426' );
+		$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable' ), '20090502' );
 		$scripts->add_data( 'admin-widgets', 'group', 1 );
 
 		$scripts->add( 'word-count', "/wp-admin/js/word-count$suffix.js", array( 'jquery' ), '20090422' );
@@ -424,7 +424,7 @@ function wp_default_styles( &$styles ) {
 	$styles->add( 'ie', '/wp-admin/css/ie.css', array(), '20090415' );
 	$styles->add_data( 'ie', 'conditional', 'lte IE 7' );
 
-	$styles->add( 'colors', true, array(), '20090419' ); // Register "meta" stylesheet for admin colors
+	$styles->add( 'colors', true, array(), '20090502' ); // Register "meta" stylesheet for admin colors
 	$styles->add( 'colors-fresh', '/wp-admin/css/colors-fresh.css', array(), '20081210'); // for login.php.  Is there a better way?
 	$styles->add_data( 'colors-fresh', 'rtl', true );
 	$styles->add( 'colors-classic', '/wp-admin/css/colors-classic.css', array(), '20081210');
@@ -432,7 +432,7 @@ function wp_default_styles( &$styles ) {
 
 	$styles->add( 'global', '/wp-admin/css/global.css', array(), '20090415' );
 	$styles->add( 'media', '/wp-admin/css/media.css', array(), '20090325' );
-	$styles->add( 'widgets', '/wp-admin/css/widgets.css', array(), '20090419' );
+	$styles->add( 'widgets', '/wp-admin/css/widgets.css', array(), '20090502' );
 	$styles->add( 'dashboard', '/wp-admin/css/dashboard.css', array(), '20090305' );
 	$styles->add( 'install', '/wp-admin/css/install.css', array(), '20081210' );
 	$styles->add( 'theme-editor', '/wp-admin/css/theme-editor.css', array(), '20081210' );

wp-includes/widgets.php

@@ -823,16 +823,18 @@ function is_active_widget($callback = false, $widget_id = false, $id_base = fals
 
 	$sidebars_widgets = wp_get_sidebars_widgets(false);
 
-	if ( is_array($sidebars_widgets) ) foreach ( $sidebars_widgets as $sidebar => $widgets )
+	if ( is_array($sidebars_widgets) ) {
-		if ( 'wp_inactive_widgets' == $sidebar )
+		foreach ( $sidebars_widgets as $sidebar => $widgets ) {
-			continue;
+			if ( is_array($widgets) ) {
-
+				foreach ( $widgets as $widget ) {
-		if ( is_array($widgets) ) foreach ( $widgets as $widget )
+					if ( ( $callback && isset($wp_registered_widgets[$widget]['callback']) && $wp_registered_widgets[$widget]['callback'] == $callback ) || ( $id_base && preg_replace( '/-[0-9]+$/', '', $widget ) == $id_base ) ) {
-			if ( ( $callback && isset($wp_registered_widgets[$widget]['callback']) && $wp_registered_widgets[$widget]['callback'] == $callback ) || ( $id_base && preg_replace( '/-[0-9]+$/', '', $widget ) == $id_base ) ) {
+						if ( !$widget_id || $widget_id == $wp_registered_widgets[$widget]['id'] )
-				if ( !$widget_id || $widget_id == $wp_registered_widgets[$widget]['id'] )
+							return $sidebar;
-					return $sidebar;
+					}
+				}
 			}
-
+		}
+	}
 	return false;
 }