Add a JS quick filter to the add content modal dialog

this is nice, why not review it and add?

I forgot that you had already done this @das-peter, thanks for the bump @kopeboy.
I'm going to try this patch out for real this time.

A suggestion:

+++ b/js/panels-base.js
@@ -13,6 +13,45 @@
+    // Use timeout to reduce the iteration over the DOM tree.
+    input_field.on('keyup.AddContentModalQuickFilter', jQuery.proxy(function(e){
+      var filter = $(this).data.panelsAddContentModalQuickFilter;
+      if (filter.keyupTimeout) {
+        window.clearTimeout(filter.timeout);
+        filter.keyupTimeout = false;
+      }
+      // If there's only one item left and enter is hit select it right away.
+      if (e.keyCode == 13 && $('.panels-add-content-modal .panels-section-columns .content-type-button:visible').length == 1) {
+        $('.panels-add-content-modal .panels-section-columns .content-type-button:visible a').trigger('click');
+      }
+      else {
+        filter.keyupTimeout = window.setTimeout(jQuery.proxy(filter.filter, this), 200);
+      }
+    }, input_field));
+    input_field.focus();

I believe I was told when working on this in D8 that we can use debounce for this performance issue.
https://www.drupal.org/node/1919470#comment-7555491
https://www.drupal.org/node/1889394

This doesn't exist in D7, but maybe it can provide some inspiration and maybe add to ctools even?

This thing is working like a charm!

Thanks, just some CSS/JS suggestions, I'll gladdly roll them into a patch if you are ok with them @das-peter.

1. +++ b/css/panels_dnd.css
   @@ -305,11 +305,23 @@ a.close img {
   +.panels-section-columns-quickfilter input {
   +  border: 1px solid #5B5B5B;
   +}
   

   Maybe put .form-text on the field? Then there is less specific styles to override?

2. +++ b/templates/panels-add-content-modal.tpl.php
   @@ -26,6 +26,12 @@
   +      <?php print t('Quick-Filter'); ?>: <input type="text" name="quickfilter"/>
   

   Maybe want to container-inline here and put a label for="quick-filter"

3. +++ b/templates/panels-add-content-modal.tpl.php
   @@ -26,6 +26,12 @@
   +      <script language="JavaScript" type="text/javascript">
   

   Doesn't need the language attribute.

Re-rolling the patch with three changes.

1. Recommendations from @joelpittet
2. Slight visual touch up for equal padding
3. Changing the js .on to .bind because .on doesn't work with jQuery 1.5 out of the box.

Fixed the label to be inline.

Wrong patch.

Beauty thanks @jerrylow, this is a nice addition, don't want to nitpick further, this is RTBC.

Just re-iterating my points:

1. +++ b/css/panels_dnd.css
   @@ -305,11 +305,28 @@ a.close img {
   +.panels-section-columns-quickfilter label {
   +  display: inline-block;
   +}
   

   container-inline?

2. +++ b/css/panels_dnd.css
   @@ -305,11 +305,28 @@ a.close img {
   +.panels-section-columns-quickfilter .form-text {
   +  background: #FFFFFF;
   +  border: 1px solid #5B5B5B;
   +}
   

   Maybe let the .form-text styles form the admin theme deal with the bg colors and border?

@joelpittet good point, I had something oddly different because of the admin theme I was using. Cleaned it up against bartik.

Thanks @jerrylow, still RTBC:)

Gave it a quick try and seemed to work nicely.

I created a related ticket that from my perspective would really greatly improve the add dialog, it might be more complex to implement though :)
#2479777: Allow to globally search within the add content modal dialog

Looks and works great! Fixed.

Neat feature!

However, it caused a JS error when using with Panels IPE. I opened a new issue at #2505641: Panels base JS needs to be added for Panels IPE.