Ticket #25821: 25821.5.patch

src/wp-admin/css/wp-admin.css

@@ -10218 +10218 @@
 
 #available-widgets .widget .widget-description {
         display: block;
-padding: 10px 16px;
-font-size: 12px;
+        padding: 10px 16px;
+        font-size: 12px;
 }
 
 /* Inactive Sidebars */
@@ -10524 +10524 @@
 }
 
 
-/* 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,
@@ -10552 +10552 @@
 #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 {
         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 li:focus {
+        background: rgba(255,255,255,0.7);
 }
 
-#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 select {
-        width: 100%;
-        margin-bottom: 20px;
-        -webkit-box-sizing: border-box;
-        -moz-box-sizing: border-box;
-        box-sizing: border-box;
+#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 .sidebar-radios {
-        text-align: left;
-        margin: 0 20px 20px 20px;
-}
-
-#widgets-chooser .sidebar-radios li {
-        margin-top: 15px;
-}
-
-#widgets-chooser .sidebar-radios label {
-        font-size: 15px;
-}
-
-#widgets-chooser .sidebar-radios input {
-        margin-right: 10px;
-}
-
 #widgets-chooser .widgets-chooser-actions {
         clear: both;
+        padding: 10px 0 12px 0;
         text-align: center;
 }
 

src/wp-admin/js/widgets.js

@@ -204 +204 @@
                                 $( '#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', function() {
+                                        selectSidebar.find('.widgets-chooser-selected').removeClass( 'widgets-chooser-selected' );
+                                        $(this).addClass( 'widgets-chooser-selected' );
+                                } )
                         }
                 });
 
@@ -225 +230 @@
                                 $target.addClass( 'widgets-chooser-selected' );
                         }
                 });
+
+                $(document).keypress(function(e) {
+                        if ( chooser.is( ':visible' ) ) {
+                                if(e.which == 13) {
+                                        $( '.widgets-chooser-actions .button-primary' ).click();
+                                }
+                        }
+                });
         },
 
         saveOrder : function(sb) {
@@ -344 +357 @@
                         sidebarId = chooser.find( '.widgets-chooser-selected' ).data('sidebarId'),
                         sidebar = $( '#' + sidebarId );
 
+                widget.find( '#widgets-chooser' ).remove();
+
                 if ( 'multi' === add ) {
                         widget.html(
                                 widget.html().replace( /<[^<>]+>/g, function(m) {

src/wp-admin/widgets.php

@@ -407 +407 @@
 </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-secondary"><?php _e( 'Cancel' ); ?></button>
                 <button class="button-primary"><?php _e( 'Add Widget' ); ?></button>
-                <button class="button-secondary"><?php _e( 'Cancel' ); ?></button>
         </div>
 </div>