/admin/plugins: Show some text if nothing is display otherwise

3 files changed, 39 insertions, 7 deletions

diff --git a/src/static/css/admin.css b/src/static/css/admin.css
index c65aafd0..7a2e00f4 100644
--- a/src/static/css/admin.css
+++ b/src/static/css/admin.css
@@ -141,6 +141,15 @@ td, th {
   display: inline-block; /*make this fill the whole cell*/

 }

 

+.messages * {

+  text-align: center;

+  display: none;

+}

+

+.messages .fetching {

+  display: block;

+}

+

 .progress {

   position: absolute;

   top: 0; left: 0; bottom:0; right:0;

diff --git a/src/static/js/admin/plugins.js b/src/static/js/admin/plugins.js
index ed854b7d..f640ed83 100644
--- a/src/static/js/admin/plugins.js
+++ b/src/static/js/admin/plugins.js
@@ -87,6 +87,7 @@ $(document).ready(function () {
       $row.remove().appendTo('#installed-plugins')
       socket.emit("install", plugin);
       installed.progress.show(plugin, 'Installing')
+      $(".installed-results .nothing-installed").hide()
     });
 
     // uninstall
@@ -126,6 +127,8 @@ $(document).ready(function () {
 
   socket.on('results:search', function (data) {
     if(!data.results.length) search.end = true;
+    $(".search-results .nothing-found").hide()
+    $(".search-results .fetching").hide()
     
     console.log('got search results', data)
 
@@ -143,11 +146,18 @@ $(document).ready(function () {
     // re-render search results
     var searchWidget = $(".search-results");
     searchWidget.find(".results *").remove();
-    displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
+    if(search.results.length > 0) {
+      displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
+    }else {
+      $(".search-results .nothing-found").show()
+    }
     $('#search-progress').hide()
   });
 
   socket.on('results:installed', function (data) {
+    $(".installed-results .nothing-installed").hide()
+    $(".installed-results .fetching").hide()
+
     installed.list = data.installed
     sortPluginList(installed.list, 'name', /*ASC?*/true);
 
@@ -156,11 +166,16 @@ $(document).ready(function () {
       return plugin.name != 'ep_etherpad-lite'
     })
 
-    // remove all installed plugins (leave all plugins that are still being installed)
+    // remove all installed plugins (leave plugins that are still being installed)
     installed.list.forEach(function(plugin) {
       $('#installed-plugins .'+plugin.name).remove()
     })
-    displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
+
+    if(installed.list.length > 0) {
+      displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
+    }else {
+      $(".installed-results .nothing-installed").show()
+    }
   });
   
   socket.on('results:updatable', function(data) {
diff --git a/src/templates/admin/plugins.html b/src/templates/admin/plugins.html
index e9c34917..8ca24644 100644
--- a/src/templates/admin/plugins.html
+++ b/src/templates/admin/plugins.html
@@ -32,7 +32,7 @@
 

       <div class="innerwrapper">

         <h2>Installed plugins</h2>

-        <table>

+        <table class="installed-results">

           <thead>

             <tr>

               <th>Name</th>

@@ -56,6 +56,12 @@
           </tbody>

           <tbody id="installed-plugins">

           </tbody>

+          <tbody>

+              <tr><td></td><td class="messages">

+                <p class="nothing-installed">You haven't installed any plugins yet.</p>

+                <p class="fetching">Fetching installed plugins...</p>

+              </td><td></td></tr>

+            </tbody>

         </table>

 

         <div class="paged listing search-results">

@@ -91,9 +97,11 @@
             <tbody class="results">

             </tbody>

             <tbody>

-              <tr><td>

-                <div id="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>

-              </td></tr>

+              <tr><td></td><td class="messages">

+                <div class="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>

+                <p class="nothing-found">No plugins found.</p>

+                <p class="fetching">Fetching catalogue...</p>

+              </td><td></td></tr>

             </tbody>

           </table>

         </div>