From fdc08a857e041a044b9a6aac04cff171a42c2e6f Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Tue, 19 Nov 2013 18:02:14 +0000
Subject: [PATCH] Widgets: move the chooser inside the selected widget so it
 inherits the width, add some keyboard shortcuts: tab to select, enter to
 append and escape to cancel. Props shaunandrews, see #25821

git-svn-id: https://develop.svn.wordpress.org/trunk@26271 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/wp-admin.css | 63 ++++++++++++++++++++++-------------
 src/wp-admin/js/widgets.js    | 39 ++++++++++++++++------
 src/wp-admin/widgets.php      |  4 +--
 3 files changed, 70 insertions(+), 36 deletions(-)

diff --git a/src/wp-admin/css/wp-admin.css b/src/wp-admin/css/wp-admin.css
index 887dec58e0..d84d778061 100644
--- a/src/wp-admin/css/wp-admin.css
+++ b/src/wp-admin/css/wp-admin.css
@@ -10190,8 +10190,8 @@ div#widgets-left .widget-holder {
 
 #available-widgets .widget .widget-description {
 	display: block;
-padding: 10px 16px;
-font-size: 12px;
+	padding: 10px 16px;
+	font-size: 12px;
 }
 
 /* Inactive Sidebars */
@@ -10495,10 +10495,10 @@ div#widgets-right .widgets-sortables:before {
 }
 
 
-/* Widgets Area Chooser merge */
+/* Widgets Area Chooser */
 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
-	transition: opacity 0.2s ease-in-out;
+	transition: opacity 0.1s linear;
 }
 
 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
@@ -10523,56 +10523,71 @@ div#widgets-right .widgets-sortables:before {
 #widgets-chooser {
 	clear: both;
 	display: none;
-	margin: auto;
-	padding-bottom: 10px;
 	max-width: 400px;
 }
 
 #widgets-chooser h3 {
-	font-size: 14px;
-	margin: 15px 0;
+	font-size: 12px;
+	padding: 15px 0 12px 35px;
+	margin: 0;
+	border-top: 1px solid #ccc;
+	background: rgba(0,0,0,0.6);
+	color: #fff;
 }
 
 #widgets-chooser ul.widgets-chooser-sidebars {
-	margin: 0 0 20px 0;
+	margin: 0;
 	list-style-type: none;
+	max-height: 300px;
+	overflow: auto;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li {
+#widgets-chooser li {
 	padding: 10px 15px 10px 35px;
 	background: #fff;
-	border: 1px solid #ccc;
-	border-bottom: none;
+	border-bottom: 1px solid #ccc;
 	margin: 0;
 	cursor: pointer;
+	outline: none;
+	position: relative;
+	transition: background: 0.2s ease-in-out;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li:hover {
+#widgets-chooser li:hover,
+#widgets-chooser li:focus {
 	background: rgba(255,255,255,0.7);
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected {
-	background: #1075a0;
-	color: #fff;
-	position: relative;
-}
-
-#widgets-chooser ul.widgets-chooser-sidebars li.widgets-chooser-selected:before {
+#widgets-chooser li:focus:before {
 	content: '\f147';
 	display: block;
 	-webkit-font-smoothing: antialiased;
 	font: normal 26px/1 'dashicons';
+	color: #999;
 	position: absolute;
 	top: 7px;
 	left: 5px;
 }
 
-#widgets-chooser ul.widgets-chooser-sidebars li:last-child {
-	border-bottom: 1px solid #ccc;
+#widgets-chooser li.widgets-chooser-selected {
+	background: #1075a0;
+	color: #fff;
+}
+
+#widgets-chooser li.widgets-chooser-selected:before,
+#widgets-chooser li.widgets-chooser-selected:focus:before {
+	content: '\f147';
+	display: block;
+	-webkit-font-smoothing: antialiased;
+	font: normal 26px/1 'dashicons';
+	color: #fff;
+	position: absolute;
+	top: 7px;
+	left: 5px;
 }
 
 #widgets-chooser .widgets-chooser-actions {
-	clear: both;
+	padding: 10px 0 12px 0;
 	text-align: center;
 }
 
@@ -12368,4 +12383,4 @@ li#wp-admin-bar-toggle-button {
 		height: 100%;
 		z-index: 400;
 	}
-}
\ No newline at end of file
+}
diff --git a/src/wp-admin/js/widgets.js b/src/wp-admin/js/widgets.js
index 5a37a5fd80..6beba69ebc 100644
--- a/src/wp-admin/js/widgets.js
+++ b/src/wp-admin/js/widgets.js
@@ -204,10 +204,15 @@ wpWidgets = {
 				$( '#widgets-left' ).addClass( 'chooser' );
 				widget.addClass( 'widget-in-question' );
 
-				widget.after( chooser );
-				chooser.slideDown( 200, function() {
+				widget.find( '.widget-description' ).after( chooser );
+				chooser.slideDown( 300, function() {
 					selectSidebar.find('.widgets-chooser-selected').focus();
 				});
+
+				selectSidebar.find( 'li' ).on( 'focusin.widgets-chooser', function() {
+					selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
+					$(this).addClass( 'widgets-chooser-selected' );
+				} )
 			}
 		});
 
@@ -220,9 +225,18 @@ wpWidgets = {
 				self.closeChooser();
 			} else if ( $target.hasClass('button-secondary') ) {
 				self.closeChooser();
-			} else if ( $target.is('.widgets-chooser-sidebars li') ) {
-				chooser.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
-				$target.addClass( 'widgets-chooser-selected' );
+			}
+		}).on( 'keyup.widgets-chooser', function( event ) {
+			if ( event.which === $.ui.keyCode.ENTER ) {
+				if ( $( event.target ).hasClass('button-secondary') ) {
+					// Close instead of adding when pressing Enter on the Cancel button
+					self.closeChooser();
+				} else {
+					self.addWidget( chooser );
+					self.closeChooser();
+				}
+			} else if ( event.which === $.ui.keyCode.ESCAPE ) {
+				self.closeChooser();
 			}
 		});
 	},
@@ -337,13 +351,18 @@ wpWidgets = {
 	},
 
 	addWidget: function( chooser ) {
-		var widget = $('#available-widgets').find('.widget-in-question').clone(),
-			widgetId = widget.attr('id'),
-			add = widget.find( 'input.add_new' ).val(),
-			n = widget.find( 'input.multi_number' ).val(),
+		var widget, widgetId, add, n,
 			sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
 			sidebar = $( '#' + sidebarId );
 
+		// Move the chooser out of the widget
+		$('#wpbody-content').append( chooser );
+
+		widget = $('#available-widgets').find('.widget-in-question').clone();
+		widgetId = widget.attr('id');
+		add = widget.find( 'input.add_new' ).val();
+		n = widget.find( 'input.multi_number' ).val();
+
 		if ( 'multi' === add ) {
 			widget.html(
 				widget.html().replace( /<[^<>]+>/g, function(m) {
@@ -391,7 +410,7 @@ wpWidgets = {
 
 	clearWidgetSelection: function() {
 		$( '#widgets-left' ).removeClass( 'chooser' );
-		$( '#available-widgets' ).find( '.widget-in-question' ).removeClass( 'widget-in-question' );
+		$( '.widget-in-question' ).removeClass( 'widget-in-question' );
 	}
 };
 
diff --git a/src/wp-admin/widgets.php b/src/wp-admin/widgets.php
index 2622bc80bd..93c92c76c4 100644
--- a/src/wp-admin/widgets.php
+++ b/src/wp-admin/widgets.php
@@ -407,11 +407,11 @@ foreach ( $wp_registered_sidebars as $sidebar => $registered_sidebar ) {
 </div>
 
 <div id="widgets-chooser">
-	<h3><?php _e( 'Choose an area to place this widget&hellip;' ); ?></h3>
+	<h3><?php _e( 'Choose a sidebar:' ); ?></h3>
 	<ul class="widgets-chooser-sidebars"></ul>
 	<div class="widgets-chooser-actions">
-		<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
 		<button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
+		<button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
 	</div>
 </div>