From 07731a57da84ab666836b5fa880ddefa7fa6e758 Mon Sep 17 00:00:00 2001
From: Zacharie <guetzac@gmail.com>
Date: Wed, 20 May 2020 11:49:57 +0200
Subject: [PATCH] Issue #1175 : Plugin Manager dropdowns fixes

---
 .../default/template/plugins_installed.tpl    | 39 ++++++++++++-------
 admin/themes/default/theme.css                | 15 +++++--
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/admin/themes/default/template/plugins_installed.tpl b/admin/themes/default/template/plugins_installed.tpl
index 873bda5d8..e00f09528 100644
--- a/admin/themes/default/template/plugins_installed.tpl
+++ b/admin/themes/default/template/plugins_installed.tpl
@@ -160,10 +160,21 @@ jQuery(document).ready(function() {
   });
 });
 
-  jQuery(".showOptions").click(function(){
-    jQuery("#PluginOptionsBlock").toggle();
-  });
+$(document).mouseup(function (e) {
+  e.stopPropagation();
+  $(".pluginMiniBox").each(function() {  
+    if ($(this).find(".showOptions").has(e.target).length === 0) {
+      $(this).find(".PluginOptionsBlock").hide();
+    }
+  })
+});
 
+jQuery(".pluginMiniBox").each(function(index){
+  let myplugin = jQuery(this);
+  myplugin.find(".showOptions").click(function(){
+    myplugin.find(".PluginOptionsBlock").toggle();
+  });
+})
 
 {/literal}
 {/footer_script}
@@ -237,11 +248,18 @@ jQuery(document).ready(function() {
     <div class="pluginContent">
       <div class="PluginOptionsIcons">
         <a class="icon-info-circled-1 showInfo" title="{if !empty($author)}{'By %s'|@translate:$author} | {/if}{'Version'|@translate} {$version}"></a>
-        <a class="icon-menu showOptions" ></a>
+        {if $plugin.STATE == 'active' || $plugin.STATE == 'inactive'}
+          <a class="icon-menu showOptions" ></a>
+        {/if}
       </div>
-      <div id="PluginOptionsBlock">
-        <a class="pluginActionLevel2 icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
-        <a class="pluginActionLevel3 icon-back-in-time" href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>      
+      
+      <div class="PluginOptionsBlock">
+        {if $plugin.STATE == 'active'}
+          <a class="plugin-dropdown-action icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
+          <a class="plugin-dropdown-action icon-back-in-time" href="{$plugin.U_ACTION}&amp;action=restore" class="plugin-restore" title="{'Restore default configuration. You will lose your plugin settings!'|@translate}" onclick="return confirm(confirmMsg);">{'Restore'|@translate}</a>   
+        {elseif $plugin.STATE == 'inactive'}
+          <a class="plugin-dropdown-action icon-trash" href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
+        {/if}      
       </div>
       <div class="pluginMiniBoxNameCell">
         {$plugin.NAME}
@@ -257,17 +275,10 @@ jQuery(document).ready(function() {
             <div class="pluginUnavailableAction icon-cog">{'Settings'|@translate}</div>
           {/if}
         {elseif $plugin.STATE == 'inactive'}
-          <div class="pluginEmptyInput"></div>
           <a class="pluginActionLevel1 icon-plus" href="{$plugin.U_ACTION}&amp;action=activate" class="activate">{'Activate'|@translate}</a>
-          <a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
         {elseif $plugin.STATE == 'missing'}
-          <div class="pluginEmptyInput"></div>
-          <div class="pluginEmptyInput"></div>
           <a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=uninstall" onclick="return confirm(confirmMsg);">{'Uninstall'|@translate}</a>
-
         {elseif $plugin.STATE == 'merged'}
-          <div class="pluginEmptyInput"></div>
-          <div class="pluginEmptyInput"></div>
           <a class="pluginActionLevel3" href="{$plugin.U_ACTION}&amp;action=delete">{'Delete'|@translate}</a>
         {/if}                     
       </div>
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index de9bb6ab2..d972a456c 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -1170,6 +1170,14 @@ h2:lang(en) { text-transform:capitalize; }
   /*border-radius:10px;*/
 }
 
+.plugin-dropdown-action{
+ padding:5px 10px;
+ font-size: 13px;
+ color:#3A3A3A
+}
+
+.plugin-dropdown-action:hover {background-color: #e7e7e7; color:#3A3A3A; text-decoration: none;}
+
 .plugin-inactive .pluginMiniBox{
   border-radius:5px;
 }
@@ -1190,18 +1198,19 @@ h2:lang(en) { text-transform:capitalize; }
   padding: 13px;}
 
 
- #PluginOptionsBlock{
+ .PluginOptionsBlock{
     display:none;
     position:absolute;
     right: 0;
     top: 30px;
     background-color:white;
     z-index:2;
-    padding:5px 10px;
+    padding:5px 0px;
     box-shadow: 0px 0px 5px #d7d7d7;
+    border-radius: 10px;
   }
 
-  #PluginOptionsBlock a{
+  .PluginOptionsBlock a{
     display:block;
   }