[/admin/plugins] Add real-time on keypress search

also, I reduced the size of the activity indicator

src/static/css/admin.css

@@ -86,9 +86,6 @@ input[type="button"].do-install, input[type="button"].do-uninstall {
   float: right;
   width: 100px;
 }
-input[type="button"]#do-search {
-  display: block;
-}
 input[type="text"] {
   border-radius: 3px;
   box-sizing: border-box;
@@ -117,41 +114,16 @@ td, th {
 .template {
   display: none;
 }
-.dialog {
-  display: none;
+#progress {
   position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 700px;
-  height: 500px;
-  margin-left: -350px;
-  margin-top: -250px;
-  border: 3px solid #999;
-  background: #eee;
+  bottom: 50px;
 }
-.dialog .title {
-  margin: 0;
-  padding: 2px;
-  border-bottom: 3px solid #999;
-  font-size: 24px;
-  line-height: 24px;
-  height: 24px;
-  overflow: hidden;
-}
-.dialog .title .close {
+#progress .historylink {
   float: right;
-  padding: 1px 10px;
 }
-.dialog .history {
-  background: #222;
-  color: #eee;
-  position: absolute;
-  top: 41px;
-  bottom: 10px;
-  left: 10px;
-  right: 10px;
-  padding: 2px;
-  overflow: auto;
+#progress .history {
+  white-space: pre;
+  font-family: monospace;
 }
 .settings {
   margin-top:10px;

src/static/js/admin/plugins.js

@@ -25,10 +25,6 @@ $(document).ready(function () {
   }
 
   function updateHandlers() {
-    $("#progress.dialog .close").unbind('click').click(function () {
-      $("#progress.dialog").hide();
-    });
-
     $("form").submit(function(){
       var query = $('.search-results').data('query');
       query.pattern = $("#search-query").val();
@@ -36,8 +32,8 @@ $(document).ready(function () {
       search();
       return false;
     });
-
-    $("#do-search").unbind('click').click(function () {
+    
+    $("#search-query").unbind('keyup').keyup(function () {
       var query = $('.search-results').data('query');
       query.pattern = $("#search-query").val();
       query.offset = 0;
@@ -72,37 +68,44 @@ $(document).ready(function () {
       }
       search();
     });
+    
+    $('#progress .showhistory').unbind('click').click(function() {
+        $("#progress .history").toggle()
+    });
   }
 
   updateHandlers();
 
   socket.on('progress', function (data) {
-    if (data.progress > 0 && $('#progress.dialog').data('progress') > data.progress) return;
+    if (data.progress > 0 && $('#progress').data('progress') > data.progress) return;
 
-    $("#progress.dialog .close").hide();
-    $("#progress.dialog").show();
+    $("#progress .history").hide();
+    $("#progress").show();
 
-    $('#progress.dialog').data('progress', data.progress);
+    $('#progress').data('progress', data.progress);
 
     var message = "Unknown status";
     if (data.message) {
       message = "<span class='status'>" + data.message.toString() + "</span>";
     }
     if (data.error) {
-      message = "<span class='error'>" + data.error.toString() + "<span>";            
+      data.progress = 1;
     }
-    $("#progress.dialog .message").html(message);
-    $("#progress.dialog .history").append("<div>" + message + "</div>");
+    
+    $("#progress .message").html(message);
+    $("#progress .history").append("<div>" + message + "</div>");
 
     if (data.progress >= 1) {
+      $("#progress").hide();
+      $("#progress .history").html('');
+      
       if (data.error) {
-        $("#progress.dialog .close").show();
-      } else {
+        alert('An error occurred: '+data.error+' -- the server log might know more...');
+      }else {
         if (doUpdate) {
           doUpdate = false;
           socket.emit("load");
         }
-        $("#progress.dialog").hide();
       }
     }
   });

src/templates/admin/plugins.html

@@ -18,12 +18,16 @@
         </div>
       <% } %>
 
-
        <div class="menu">
         <h1>Etherpad lite</h1> 
         <li><a href="plugins">Plugin manager</a> </li>
         <li><a href="settings">Settings</a> </li>
         <li><a href="plugins/info">Troubleshooting information</a> </li>
+        
+        <div id="progress">
+          <p><img src="../static/img/loading.gif" alt=""/>&nbsp;&nbsp;<span class="message"></span> <a class="showhistory" href="javascript:void(0)">(show&nbsp;progress)</a></p>
+          <div class="history"></div>
+        </div>
       </div>
 
       <div class="innerwrapper">
@@ -53,11 +57,12 @@
 
       <div class="paged listing search-results">
         <div class="separator"></div>
-        <h2>Search for plugins to install</h2>
+        
+        <h2>Available plugins</h2>
         <form>
-          <input type="text" name="search" placeholder="Search term" id="search-query">
-          <input type="button" value="Search" id="do-search">
+          <input type="text" name="search" placeholder="Search for plugins to install" id="search-query">
         </form>
+
         <table>
           <thead>
             <tr>
@@ -86,16 +91,7 @@
       </div>
       
       </div>
-
-      <div id="progress" class="dialog">
-        <h1 class="title">
-          Please wait: <span class="message"></span>
-        <input type="button" class="close" value="Close">
-        </h1>
-        <div class="history"></div>
-      </div>
     </div>
-    
     <div id="topborder"></div>
   </body>
 </html>