#1467 Resolve merge bugs and clean pluginInstalled.tpl

* Move the JS of the TPL file in plugin_installated.js

admin/themes/default/js/plugins_installated.js

@@ -84,7 +84,7 @@ function activatePlugin(id) {
             }
         }, 
         error: function (e) {
-            console.log(e);
+            console.log(e.responseText);
             $("#" + id + " .pluginNotif").stop(false, true);
             $("#" + id + " .PluginActionError label span:first").html(plugin_action_error);
             $("#" + id + " .PluginActionError").css("display", "flex");
@@ -423,4 +423,320 @@ $(document).ready(function () {
           ...jConfirm_confirm_options
         })
       })
-})
+})
+
+// TPL part :
+
+const queuedManager = jQuery.manageAjax.create("queued", {
+    queue: true,
+    maxRequests: 1,
+  });
+  
+const nb_plugins = jQuery("div.active").size();
+const done = 0;
+
+function showInactivePlugins () {
+  jQuery(".showInactivePlugins").fadeOut(
+    (complete = function () {
+      jQuery(".plugin-inactive").fadeIn();
+    })
+  );
+};
+
+function actualizeFilter() {
+  $("label[for='seeAll'] .filter-badge").html(nb_plugin.all);
+  $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
+  $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
+  $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
+  $(".filterLabel").show();
+  $(".pluginMiniBox").each(function () {
+    if (nb_plugin.active == 0) {
+      $("label[for='seeActive']").hide();
+      if ($("#seeActive").is(":checked")) {
+        $("#seeAll").trigger("click");
+      }
+    }
+    if (nb_plugin.inactive == 0) {
+      $("label[for='seeInactive']").hide();
+      if ($("#seeInactive").is(":checked")) {
+        $("#seeAll").trigger("click");
+      }
+    }
+    if (nb_plugin.other == 0) {
+      $("label[for='seeOther']").hide();
+      if ($("#seeOther").is(":checked")) {
+        $("#seeAll").trigger("click");
+      }
+    }
+  });
+}
+
+function performPluginDeactivate(id) {
+  queuedManager.add({
+    type: "GET",
+    dataType: "json",
+    url: "ws.php",
+    data: {
+      method: "pwg.plugins.performAction",
+      action: "deactivate",
+      plugin: id,
+      pwg_token: pwg_token,
+      format: "json",
+    },
+    success: function (data) {
+      if (data["stat"] == "ok")
+        jQuery("#" + id)
+          .removeClass("active")
+          .addClass("inactive");
+      done++;
+      if (done == nb_plugins) location.reload();
+    },
+  });
+}
+
+/* group action */
+
+jQuery(document).ready(function () {
+
+
+    jQuery(".pluginBox").each(function (index) {
+        $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
+        $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
+        $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
+
+        $(".filterLabel").show();
+        $(".pluginMiniBox").each(function () {
+            if (nb_plugin.active == 0) {
+                $("label[for='seeActive']").hide();
+                if ($("#seeActive").is(":checked")) {
+                $("#seeAll").trigger("click");
+                }
+            }
+            if (nb_plugin.inactive == 0) {
+                $("label[for='seeInactive']").hide();
+                if ($("#seeInactive").is(":checked")) {
+                $("#seeAll").trigger("click");
+                }
+            }
+            if (nb_plugin.other == 0) {
+                $("label[for='seeOther']").hide();
+                if ($("#seeOther").is(":checked")) {
+                $("#seeAll").trigger("click");
+                }
+            }
+        });
+    });
+
+    jQuery(".pluginBox").each(function (index) {
+        let myplugin = jQuery(this);
+        myplugin.find(".showOptions").click(function () {
+        myplugin.find(".PluginOptionsBlock").toggle();
+        });
+    });
+
+    jQuery("div.deactivate_all a").click(function () {
+        $.confirm({
+        title: deactivate_all_msg,
+        buttons: {
+            confirm: {
+            text: confirm_msg,
+            btnClass: "btn-red",
+            action: function () {
+                jQuery("div.active").each(function () {
+                performPluginDeactivate(jQuery(this).attr("id"));
+                });
+            },
+            },
+            cancel: {
+            text: cancel_msg,
+            },
+        },
+        ...jConfirm_confirm_options,
+        });
+    });
+
+    /* incompatible plugins */
+    jQuery.ajax({
+        method: "GET",
+        url: "admin.php",
+        data: { page: "plugins_installed", incompatible_plugins: true },
+        dataType: "json",
+        success: function (data) {
+        for (i = 0; i < data.length; i++) {
+            if (show_details)
+            jQuery("#" + data[i] + " .pluginName").prepend(
+                '<a class="warning" title="' + incompatible_msg + '"></a>'
+            );
+            else
+            jQuery("#" + data[i] + " .pluginName").prepend(
+                '<span class="warning" title="' + incompatible_msg + '"></span>'
+            );
+            jQuery("#" + data[i]).addClass("incompatible");
+            jQuery("#" + data[i] + " .activate").each(function () {
+            $(this).pwg_jconfirm_follow_href({
+                alert_title: incompatible_msg + activate_msg,
+                alert_confirm: confirm_msg,
+                alert_cancel: cancel_msg,
+            });
+            });
+        }
+        jQuery(".warning").tipTip({
+            delay: 0,
+            fadeIn: 200,
+            fadeOut: 200,
+            maxWidth: "250px",
+        });
+        },
+    });
+
+    jQuery(".fullInfo").tipTip({
+        delay: 500,
+        fadeIn: 200,
+        fadeOut: 200,
+        maxWidth: "300px",
+        keepAlive: false,
+    });
+
+    /*Add the filter research*/
+    document.onkeydown = function (e) {
+        if (e.keyCode == 58) {
+        jQuery(".pluginFilter input.search-input").focus();
+        return false;
+        }
+    };
+
+    jQuery(".pluginFilter input").on("input", function () {
+        let text = jQuery(this).val().toLowerCase();
+        var searchNumber = 0;
+
+        var searchActive = 0;
+        var searchInactive = 0;
+        var searchOther = 0;
+
+        $(".pluginBox").each(function () {
+        if (text == "") {
+            jQuery(".nbPluginsSearch").hide();
+            if ($("#seeAll").is(":checked")) {
+            jQuery(this).show();
+            }
+            if (
+            $("#seeActive").is(":checked") &&
+            jQuery(this).hasClass("plugin-active")
+            ) {
+            jQuery(this).show();
+            }
+            if (
+            $("#seeInactive").is(":checked") &&
+            jQuery(this).hasClass("plugin-inactive")
+            ) {
+            jQuery(this).show();
+            }
+            if (
+            $("#seeOther").is(":checked") &&
+            (jQuery(this).hasClass("plugin-merged") ||
+                jQuery(this).hasClass("plugin-missing"))
+            ) {
+            jQuery(this).show();
+            }
+
+            if ($(this).hasClass("plugin-active")) {
+            searchActive++;
+            }
+            if ($(this).hasClass("plugin-inactive")) {
+            searchInactive++;
+            }
+            if (
+            $(this).hasClass("plugin-merged") ||
+            $(this).hasClass("plugin-missing")
+            ) {
+            searchOther++;
+            }
+            searchNumber++;
+
+            nb_plugin.all = searchNumber;
+            nb_plugin.active = searchActive;
+            nb_plugin.inactive = searchInactive;
+            nb_plugin.other = searchOther;
+        } else {
+            let name = jQuery(this).find(".pluginName").text().toLowerCase();
+            jQuery(".nbPluginsSearch").show();
+            let description = jQuery(this).find(".pluginDesc").text().toLowerCase();
+            if (name.search(text) != -1 || description.search(text) != -1) {
+            searchNumber++;
+
+            if ($("#seeAll").is(":checked")) {
+                jQuery(this).show();
+            }
+            if (
+                $("#seeActive").is(":checked") &&
+                jQuery(this).hasClass("plugin-active")
+            ) {
+                jQuery(this).show();
+            }
+            if (
+                $("#seeInactive").is(":checked") &&
+                jQuery(this).hasClass("plugin-inactive")
+            ) {
+                jQuery(this).show();
+            }
+            if (
+                $("#seeOther").is(":checked") &&
+                (jQuery(this).hasClass("plugin-merged") ||
+                jQuery(this).hasClass("plugin-missing"))
+            ) {
+                jQuery(this).show();
+            }
+
+            if ($(this).hasClass("plugin-active")) {
+                searchActive++;
+            }
+            if ($(this).hasClass("plugin-inactive")) {
+                searchInactive++;
+            }
+            if (
+                $(this).hasClass("plugin-merged") ||
+                $(this).hasClass("plugin-missing")
+            ) {
+                searchOther++;
+            }
+
+            nb_plugin.all = searchNumber;
+            nb_plugin.active = searchActive;
+            nb_plugin.inactive = searchInactive;
+            nb_plugin.other = searchOther;
+            } else {
+            jQuery(this).hide();
+
+            nb_plugin.all = searchNumber;
+            nb_plugin.active = searchActive;
+            nb_plugin.inactive = searchInactive;
+            nb_plugin.other = searchOther;
+            }
+        }
+        });
+
+        actualizeFilter();
+
+        if (searchNumber == 0) {
+        jQuery(".nbPluginsSearch").html(nothing_found);
+        } else if (searchNumber == 1) {
+        jQuery(".nbPluginsSearch").html(plugin_found.replace("%s", searchNumber));
+        } else {
+        jQuery(".nbPluginsSearch").html(
+            x_plugins_found.replace("%s", searchNumber)
+        );
+        }
+    });
+
+    /* Show Inactive plugins or button to show them*/
+    jQuery(".showInactivePlugins button").on("click", showInactivePlugins);
+});
+
+$(document).mouseup(function (e) {
+  e.stopPropagation();
+  $(".pluginBox").each(function () {
+    if ($(this).find(".showOptions").has(e.target).length === 0) {
+      $(this).find(".PluginOptionsBlock").hide();
+    }
+  });
+});

admin/themes/default/template/plugins_installed.tpl

@@ -2,21 +2,21 @@
 {combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
 {combine_script id='jquery.cookie' path='themes/default/js/jquery.cookie.js' load='footer'}
 
-{footer_script require='jquery.ajaxmanager'}
+{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
+{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
+{combine_script id='tiptip' load='header' path='themes/default/js/plugins/jquery.tipTip.minified.js'}
+
+{combine_script id='pluginInstallated' load='footer' require='jquery.ajaxmanager' path='admin/themes/default/js/plugins_installated.js'}
+
+{footer_script}
 /* incompatible message */
 var incompatible_msg = '{'WARNING! This plugin does not seem to be compatible with this version of Piwigo.'|@translate|@escape:'javascript'}';
 var activate_msg = '\n{'Do you want to activate anyway?'|@translate|@escape:'javascript'}';
 var deactivate_all_msg = '{'Deactivate all'|@translate}';
 
-var showInactivePlugins = function() {
-    jQuery(".showInactivePlugins").fadeOut(complete=function(){
-          jQuery(".plugin-inactive").fadeIn();
-        })
-  }
-
 /* group action */
 const pwg_token = '{$PWG_TOKEN}';
-var nb_plugin = {
+const nb_plugin = {
   'all' : {$count_types_plugins["active"]} + {$count_types_plugins["inactive"]} + {$count_types_plugins["missing"]} + {$count_types_plugins["merged"]},
   'active' : {$count_types_plugins["active"]},
   'inactive' : {$count_types_plugins["inactive"]},
@@ -39,290 +39,10 @@ const nothing_found = '{'No plugins found'|@translate|@escape:'javascript'}';
 const x_plugins_found = '{'%s plugins found'|@translate|@escape:'javascript'}';
 const plugin_found = '{'%s plugin found'|@translate|@escape:'javascript'}';
 const isWebmaster = {$isWebmaster};
-{literal}
-var queuedManager = jQuery.manageAjax.create('queued', { 
-  queue: true,  
-  maxRequests: 1
-});
-var nb_plugins = jQuery('div.active').size();
-var done = 0;
-/* group action */
 
-jQuery(document).ready(function() {
-  jQuery('div.deactivate_all a').click(function() {
-    $.confirm({
-      title: deactivate_all_msg,
-      buttons: {
-        confirm: {
-          text: confirm_msg,
-          btnClass: 'btn-red',
-          action: function () {
-            jQuery('div.active').each(function() {
-              performPluginDeactivate(jQuery(this).attr('id'));
-            })
-          }
-        },
-        cancel: {
-          text: cancel_msg
-        }
-      },
-      ...jConfirm_confirm_options
-    });
-  });
-
-  function performPluginDeactivate(id) {
-    queuedManager.add({
-      type: 'GET',
-      dataType: 'json',
-      url: 'ws.php',
-      data: { method: 'pwg.plugins.performAction', action: 'deactivate', plugin: id, pwg_token: pwg_token, format: 'json' },
-      success: function(data) {
-        if (data['stat'] == 'ok') jQuery("#"+id).removeClass('active').addClass('inactive');
-        done++;
-        if (done == nb_plugins) location.reload();
-      }
-    });
-  };
-
-  /* incompatible plugins */
-  jQuery(document).ready(function() {
-    jQuery.ajax({
-      method: 'GET',
-      url: 'admin.php',
-      data: { page: 'plugins_installed', incompatible_plugins: true },
-      dataType: 'json',
-      success: function(data) {
-        for (i=0;i<data.length;i++) {
-          {/literal}
-          {if $show_details}
-            jQuery('#'+data[i]+' .pluginName').prepend('<a class="warning" title="'+incompatible_msg+'"></a>')
-          {else}
-            jQuery('#'+data[i]+' .pluginName').prepend('<span class="warning" title="'+incompatible_msg+'"></span>')
-          {/if}
-          {literal}
-          jQuery('#'+data[i]).addClass('incompatible');
-          jQuery('#'+data[i]+' .activate').each(function () {
-            $(this).pwg_jconfirm_follow_href({
-              alert_title: incompatible_msg + activate_msg,
-              alert_confirm: confirm_msg,
-              alert_cancel: cancel_msg
-            });
-          });
-        }
-        jQuery('.warning').tipTip({
-          'delay' : 0,
-          'fadeIn' : 200,
-          'fadeOut' : 200,
-          'maxWidth':'250px'
-        });
-      }
-    });
-  });
-  jQuery('.fullInfo').tipTip({
-    'delay' : 500,
-    'fadeIn' : 200,
-    'fadeOut' : 200,
-    'maxWidth':'300px',
-    'keepAlive':false,
-  });
-
-  /*Add the filter research*/
-  jQuery( document ).ready(function () {
-    document.onkeydown = function(e) {
-      if (e.keyCode == 58) {
-        jQuery(".pluginFilter input.search-input").focus();
-        return false;
-      }
-    }
-
-    jQuery(".pluginFilter input").on("input", function() {
-      let text = jQuery(this).val().toLowerCase();
-      var searchNumber = 0;
-
-      var searchActive = 0;
-      var searchInactive = 0;
-      var searchOther = 0;
-      
-        $(".pluginBox").each(function() {
-          if (text == "") {
-            jQuery(".nbPluginsSearch").hide();
-            if ($("#seeAll").is(":checked")) {
-              jQuery(this).show();
-            }
-            if ($("#seeActive").is(":checked") && jQuery(this).hasClass("plugin-active")) {
-              jQuery(this).show();
-            }
-            if ($("#seeInactive").is(":checked") && jQuery(this).hasClass("plugin-inactive")) {
-              jQuery(this).show();
-            }
-            if ($("#seeOther").is(":checked") && (jQuery(this).hasClass("plugin-merged") || jQuery(this).hasClass("plugin-missing"))) {
-              jQuery(this).show();
-            }
-
-            if ($(this).hasClass("plugin-active")) {
-              searchActive++;
-            }
-            if ($(this).hasClass("plugin-inactive")) {
-              searchInactive++;
-            }
-            if (($(this).hasClass("plugin-merged") || $(this).hasClass("plugin-missing"))) {
-              searchOther++;
-            }
-            searchNumber++
-
-            nb_plugin.all = searchNumber;
-            nb_plugin.active = searchActive;
-            nb_plugin.inactive = searchInactive;
-            nb_plugin.other = searchOther;
-
-          } else {
-            let name = jQuery(this).find(".pluginName").text().toLowerCase();
-            jQuery(".nbPluginsSearch").show();
-            let description = jQuery(this).find(".pluginDesc").text().toLowerCase();
-            if (name.search(text) != -1 || description.search(text) != -1){
-              searchNumber++;
-
-              if ($("#seeAll").is(":checked")) {
-                jQuery(this).show();
-              }
-              if ($("#seeActive").is(":checked") && jQuery(this).hasClass("plugin-active")) {
-                jQuery(this).show();
-              }
-              if ($("#seeInactive").is(":checked") && jQuery(this).hasClass("plugin-inactive")) {
-                jQuery(this).show();
-              }
-              if ($("#seeOther").is(":checked") && (jQuery(this).hasClass("plugin-merged") || jQuery(this).hasClass("plugin-missing"))) {
-                jQuery(this).show();
-              }
-
-              if ($(this).hasClass("plugin-active")) {
-                searchActive++;
-              }
-              if ($(this).hasClass("plugin-inactive")) {
-                searchInactive++;
-              }
-              if (($(this).hasClass("plugin-merged") || $(this).hasClass("plugin-missing"))) {
-                searchOther++;
-              }
-
-              nb_plugin.all = searchNumber;
-              nb_plugin.active = searchActive;
-              nb_plugin.inactive = searchInactive;
-              nb_plugin.other = searchOther;
-            } else {
-              jQuery(this).hide();
-
-              nb_plugin.all = searchNumber;
-              nb_plugin.active = searchActive;
-              nb_plugin.inactive = searchInactive;
-              nb_plugin.other = searchOther;
-            }
-          }
-        })
-
-      actualizeFilter();
-        
-      if (searchNumber == 0) {
-        jQuery(".nbPluginsSearch").html(nothing_found);
-      } else if (searchNumber == 1) {
-        jQuery(".nbPluginsSearch").html(plugin_found.replace("%s", searchNumber));
-      } else {
-        jQuery(".nbPluginsSearch").html(x_plugins_found.replace("%s", searchNumber));
-      }
-    });
-  });
-
-  /* Show Inactive plugins or button to show them*/
-  jQuery( document ).ready(function () {
-    jQuery(".showInactivePlugins button").on('click', showInactivePlugins)
-  });
-});
-
-$(document).mouseup(function (e) {
-  e.stopPropagation();
-  $(".pluginBox").each(function() {  
-    if ($(this).find(".showOptions").has(e.target).length === 0) {
-      $(this).find(".PluginOptionsBlock").hide();
-    }
-  })
-});
-
-function actualizeFilter() {
-    $("label[for='seeAll'] .filter-badge").html(nb_plugin.all);
-    $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
-    $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
-    $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
-    //console.log(nb_plugin)
-    $(".filterLabel").show();
-    $(".pluginMiniBox").each(function () {
-        if (nb_plugin.active == 0) {
-            $("label[for='seeActive']").hide();
-            if ($("#seeActive").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-        if (nb_plugin.inactive == 0) {
-            $("label[for='seeInactive']").hide();
-            if ($("#seeInactive").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-        if (nb_plugin.other == 0) {
-            $("label[for='seeOther']").hide();
-            if ($("#seeOther").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-    })
-}
-
-jQuery(".pluginBox").each(function(index){
-
-    $("label[for='seeActive'] .filter-badge").html(nb_plugin.active);
-    $("label[for='seeInactive'] .filter-badge").html(nb_plugin.inactive);
-    $("label[for='seeOther'] .filter-badge").html(nb_plugin.other);
-
-    //console.log(nb_plugin)
-
-    $(".filterLabel").show();
-    $(".pluginMiniBox").each(function () {
-        if (nb_plugin.active == 0) {
-            $("label[for='seeActive']").hide();
-            if ($("#seeActive").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-        if (nb_plugin.inactive == 0) {
-            $("label[for='seeInactive']").hide();
-            if ($("#seeInactive").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-        if (nb_plugin.other == 0) {
-            $("label[for='seeOther']").hide();
-            if ($("#seeOther").is(":checked")) {
-              $("#seeAll").trigger("click")
-            }
-        }
-    })
-}
-
-jQuery(".pluginMiniBox").each(function(index){
-  let myplugin = jQuery(this);
-  myplugin.find(".showOptions").click(function(){
-    myplugin.find(".PluginOptionsBlock").toggle();
-  });
-})
-
-{/literal}
+const show_details = {if $show_details} true {else} false {/if};
 {/footer_script}
 
-{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
-{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
-{combine_script id='tiptip' load='header' path='themes/default/js/plugins/jquery.tipTip.minified.js'}
-
-{combine_script id='pluginInstallated' load='footer' path='admin/themes/default/js/plugins_installated.js'}
-
 <div class="titrePage">
   <h2>{'Plugins'|@translate}</h2>
 </div>
@@ -332,28 +52,23 @@ jQuery(".pluginMiniBox").each(function(index){
 {assign var='field_name' value='null'} {* <!-- 'counter' for fieldset management --> *}
 {counter start=0 assign=i} {* <!-- counter for 'deactivate all' link --> *}
 
-<div class="pluginInstalledFilters">
-  <div class="pluginTypeFilter">
-    <input type="radio" name="p-filter" class="filter" id="seeAll" checked><label for="seeAll">All</label><input type="radio" name="p-filter" class="filter" id="seeActive"><label class="filterLabel" for="seeActive">Active</label><input type="radio" name="p-filter" class="filter" id="seeInactive"><label class="filterLabel" for="seeInactive">Inactive</label><input type="radio" name="p-filter" class="filter" id="seeOther"><label class="filterLabel" for="seeOther">Other</label>
-  </div>
-  
-  <div class="nbPluginsSearch"></div>
-  
-  <div class="pluginFilter"> 
-    <span class="icon-search search-icon"></span>
-    <span class="icon-cancel search-cancel"></span>
-    <input class='search-input' type="text" placeholder="{'Search'|@translate}">
-  </div>
-
-  <div class="AlbumViewSelector">
-      <input type="radio" name="layout" class="switchLayout" id="displayClassic" {if $smarty.cookies.pwg_plugin_manager_view == 'classic' || !$smarty.cookies.pwg_plugin_manager_view}checked{/if}/><label for="displayClassic"><span class="icon-pause firstIcon tiptip" title="{'Classic View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayLine" {if $smarty.cookies.pwg_plugin_manager_view == 'line'}checked{/if}/><label for="displayLine"><span class="icon-th-list tiptip" title="{'Line View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayCompact" {if $smarty.cookies.pwg_plugin_manager_view == 'compact'}checked{/if}/><label for="displayCompact"><span class="icon-th-large lastIcon tiptip" title="{'Compact View'|translate}"></span></label>
-  </div>  
-
+<div class="pluginTypeFilter">
+<input type="radio" name="p-filter" class="filter" id="seeAll" {if $count_types_plugins["active"] <= 0} checked {/if}><label for="seeAll">{'All'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeActive" {if $count_types_plugins["active"] > 0} checked {/if}><label class="filterLabel" for="seeActive">{'Activated'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeInactive"><label class="filterLabel" for="seeInactive">{'Deactivated'|@translate}<span class="filter-badge">X</span></label><input type="radio" name="p-filter" class="filter" id="seeOther"><label class="filterLabel" for="seeOther">{'Other'|@translate}<span class="filter-badge">X</span></label>
 </div>
 
-<div class="emptyResearch"> {'No plugins found'|@translate} </div>
+<div class="nbPluginsSearch"></div>
 
-    <div class="pluginContainer {if $smarty.cookies.pwg_plugin_manager_view == 'classic'} classic-form {elseif $smarty.cookies.pwg_plugin_manager_view == 'line'} line-form {elseif $smarty.cookies.pwg_plugin_manager_view == 'compact'} compact-form {else} {/if}">
+<div class="pluginFilter"> 
+  <span class="icon-search search-icon"></span>
+  <span class="icon-cancel search-cancel"></span>
+  <input class='search-input' type="text" placeholder="{'Search'|@translate}">
+</div>
+
+<div class="AlbumViewSelector">
+    <input type="radio" name="layout" class="switchLayout" id="displayClassic" {if $smarty.cookies.pwg_plugin_manager_view == 'classic' || !$smarty.cookies.pwg_plugin_manager_view}checked{/if}/><label for="displayClassic"><span class="icon-pause firstIcon tiptip" title="{'Classic View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayLine" {if $smarty.cookies.pwg_plugin_manager_view == 'line'}checked{/if}/><label for="displayLine"><span class="icon-th-list tiptip" title="{'Line View'|translate}"></span></label><input type="radio" name="layout" class="switchLayout" id="displayCompact" {if $smarty.cookies.pwg_plugin_manager_view == 'compact'}checked{/if}/><label for="displayCompact"><span class="icon-th-large lastIcon tiptip" title="{'Compact View'|translate}"></span></label>
+</div>  
+
+<div class="pluginContainer {if $smarty.cookies.pwg_plugin_manager_view == 'classic-form'} classic-form {elseif $smarty.cookies.pwg_plugin_manager_view == 'line-form'} line-form {elseif $smarty.cookies.pwg_plugin_manager_view == 'compact-form'} compact-form {else} {/if}">
 
 {foreach from=$plugins item=plugin name=plugins_loop}
 

admin/themes/default/theme.css

@@ -2459,6 +2459,10 @@ h2:lang(en) { text-transform:capitalize; }
 
 .pluginTypeFilter label .filter-badge {
   font-weight: normal;
+  border-radius: 20px;
+  text-align: center;
+  padding: 0px 7px;
+  margin-left: 10px;
 }
 
 .pluginTypeFilter input:checked + label{
@@ -2477,6 +2481,12 @@ h2:lang(en) { text-transform:capitalize; }
   color: #8c8c8c;
 }
 
+.nbPluginsSearch {
+  position: absolute;
+  right: 415px;
+  transform: translateY(18px);
+}
+
 .pluginContainer.line .pluginBox:hover .pluginContent{
   transition: 0.4s;
   background: #ffd7ad;
@@ -2743,10 +2753,7 @@ legend {text-align:left;}
 .pluginContainer {
   padding: 0 20px;
   margin : 0;
-}
-
-.pluginInstalledFilters {
-  height: 75px;
+  margin-top: 75px;
 }
 
 .switch {