From 5462e8ab7586238de36ed37fd7be87bd1881291b Mon Sep 17 00:00:00 2001
From: Zacharie <guetzac@gmail.com>
Date: Wed, 24 Jun 2020 13:08:54 +0200
Subject: [PATCH] Issue #1193 : Uniformize dropdown between tag, group and
 plugin manager

---
 admin/themes/clear/theme.css                  | 12 ----
 admin/themes/default/template/group_list.tpl  |  9 ++-
 .../default/template/plugins_installed.tpl    |  8 +--
 admin/themes/default/theme.css                | 57 +++++++++----------
 4 files changed, 35 insertions(+), 51 deletions(-)

diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index b442af2c4..78b98881b 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -402,18 +402,6 @@ label>p.group_select {
   background-color:#ff7700;
 }
 
-/* Group Options*/
-
-#GroupOptions{
-  background-color:white;
-  box-shadow: -1px 1px 2px #e7e7e7;
-  color:#3c3c3c;
-}
-
-.group-dropdown-option:hover{
-  background-color:#e7e7e7;
-}
-
 /*Group manager buttons*/
 
 .groups .manage-users,
diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl
index 0aa96d296..e840e386a 100644
--- a/admin/themes/default/template/group_list.tpl
+++ b/admin/themes/default/template/group_list.tpl
@@ -55,11 +55,10 @@ var rootUrl = '{$ROOT_URL}'
       <div class="icon-star not-in-selection-mode is-default-token{if !$grp_is_default} deactivate{/if}" ></div> 
      
       <div class="icon-ellipsis-vert group-dropdown-options not-in-selection-mode">
-        <div id="GroupOptions">
-          <option class="icon-pencil group-dropdown-option" id="GroupEdit">{'Edit'|@translate}</option>
-          <option class="icon-docs group-dropdown-option" id="GroupDuplicate">{'Duplicate'|@translate}</option>
-          <option class="icon-trash group-dropdown-option" id="GroupDelete">{'Delete'|@translate}</option>
-          <option class="icon-star group-dropdown-option" id="GroupDefault"></option>
+        <div id="GroupOptions" class="dropdown">
+          <option class="icon-docs dropdown-option" id="GroupDuplicate" value="duplicate">{'Duplicate'|@translate}</option>
+          <option class="icon-trash dropdown-option" id="GroupDelete" value="delete">{'Delete'|@translate}</option>
+          <option class="icon-star dropdown-option" id="GroupDefault" value="delete"></option>
         </div>
       </div>
 
diff --git a/admin/themes/default/template/plugins_installed.tpl b/admin/themes/default/template/plugins_installed.tpl
index e28efe6ff..5709d9a30 100644
--- a/admin/themes/default/template/plugins_installed.tpl
+++ b/admin/themes/default/template/plugins_installed.tpl
@@ -255,12 +255,12 @@ jQuery(".pluginMiniBox").each(function(index){
         {/if}
       </div>
       
-      <div class="PluginOptionsBlock">
+      <div class="PluginOptionsBlock dropdown">
         {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>   
+          <a class="dropdown-option icon-cancel-circled" href="{$plugin.U_ACTION}&amp;action=deactivate">{'Deactivate'|@translate}</a>
+          <a class="dropdown-option 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>
+          <a class="dropdown-option icon-trash" href="{$plugin.U_ACTION}&amp;action=delete" onclick="return confirm(confirmMsg);">{'Delete'|@translate}</a>
         {/if}      
       </div>
       <div class="pluginMiniBoxNameCell">
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index a13b6f6a2..57f04e702 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -283,6 +283,33 @@ TABLE.doubleSelect SELECT.categoryList {
   font-size: 18px;
 }
 
+.dropdown {
+  z-index: 2;
+  padding: 5px 0px;
+  border-radius: 10px;
+  background: linear-gradient(151.2deg, rgb(255, 31, 30) 0%, rgb(247, 104, 58) 32%, rgb(255, 166, 70) 100%);
+  color: white;
+}
+
+.dropdown-option {
+  white-space: nowrap;
+  display: block;
+  text-align: initial;
+  padding: 5px 10px;
+  padding-right: 10px;
+  font-size: 13px;
+  padding-right: 15px;
+  color: white;
+  font-weight: bold;
+  cursor: pointer;
+}
+
+.dropdown-option:hover {
+  text-decoration: none;
+  color: white;
+  background-color: #ffffff4f;
+}
+
 .badge-number {
   border-radius: 20px;
   background-color: #777;
@@ -1538,14 +1565,6 @@ h2:lang(en) { text-transform:capitalize; }
   font-size: 16px;
 }
 
-.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;
 }
@@ -1571,15 +1590,7 @@ h2:lang(en) { text-transform:capitalize; }
     position:absolute;
     right: 0;
     top: 30px;
-    background-color:white;
     z-index:2;
-    padding:5px 0px;
-    box-shadow: 0px 0px 5px #d7d7d7;
-    border-radius: 10px;
-  }
-
-  .PluginOptionsBlock a{
-    display:block;
   }
 
 .warning:before {content:url(icon/warning.png);vertical-align:top;}
@@ -2511,11 +2522,8 @@ input:checked + .slider:before {
   display:none;
   z-index:1;
   position:absolute;
-  border-radius:10px;
   right:-88px;
   top:35px;
-  padding:5px 0;
-
 }
 
 .is-default-token {
@@ -2539,17 +2547,6 @@ input:checked + .slider:before {
   display: none;
 }
 
-
-
-.group-dropdown-options {
-  cursor: pointer;
-}
-
-.group-dropdown-option{
- padding:5px 10px;
- font-size: 13px;
-}
-
 .jconfirmDeleteConfirm, .jconfirmAlert {
   padding-bottom: 0 !important;
   color: #3c3c3c !important;