From d1601ede5fb9477ca9f772ec21dfdf8175c3a80f Mon Sep 17 00:00:00 2001
From: Zacharie <guetzac@gmail.com>
Date: Tue, 23 Jun 2020 12:48:15 +0200
Subject: [PATCH] Group Manager Design fixes

---
 admin/themes/default/js/group_list.js        |  3 ++-
 admin/themes/default/template/group_list.tpl | 11 ++++++-----
 admin/themes/default/theme.css               | 17 +++++++++++++++--
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/admin/themes/default/js/group_list.js b/admin/themes/default/js/group_list.js
index c95270766..eba4f6fd9 100644
--- a/admin/themes/default/js/group_list.js
+++ b/admin/themes/default/js/group_list.js
@@ -168,8 +168,9 @@ var setupGroupBox = function (groupBox) {
   });
 
   /* Set the rename action */
-  groupBox.find(".Group-name .icon-pencil").on("click", function () {
+  groupBox.find(".Group-name .icon-pencil, #GroupEdit").on("click", function () {
     displayRenameForm(true, id);
+    setTimeout(() => {groupBox.find("#GroupOptions").hide()}, 10)
   });
 
   groupBox.find(".group-rename .validate").on("click", function () {
diff --git a/admin/themes/default/template/group_list.tpl b/admin/themes/default/template/group_list.tpl
index b5be4b645..55e0281e4 100644
--- a/admin/themes/default/template/group_list.tpl
+++ b/admin/themes/default/template/group_list.tpl
@@ -55,9 +55,10 @@ var rootUrl = '{$ROOT_URL}'
      
       <div class="icon-ellipsis-vert group-dropdown-options not-in-selection-mode">
         <div id="GroupOptions">
-          <option class="icon-docs group-dropdown-option" id="GroupDuplicate" value="duplicate">{'Duplicate'|@translate}</option>
-          <option class="icon-trash group-dropdown-option" id="GroupDelete" value="delete">{'Delete'|@translate}</option>
-          <option class="icon-star group-dropdown-option" id="GroupDefault" value="delete"></option>
+          <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>
       </div>
 
@@ -93,7 +94,7 @@ var rootUrl = '{$ROOT_URL}'
 
 
 <div class="titrePage">
-  <h2>{'Group management'|@translate}</h2>
+  <h2>{'Group manager'|@translate}</h2>
 </div>
 
 <div class="selection-mode-group-manager">
@@ -116,7 +117,7 @@ var rootUrl = '{$ROOT_URL}'
     </div>
 
     </div>
-    <button id="MergeSelectionMode" class="icon-object-group unavailable">{'Merge'|@translate}</button>
+    <button id="MergeSelectionMode" class="icon-object-group unavailable" title="{'At least 2 selected groups are needed to merge'|@translate}">{'Merge'|@translate}</button>
     <button id="DeleteSelectionMode" class="icon-trash-1 unavailable">{'Delete'|@translate}</button>
    </div>
 
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index ac2dd8a85..7059cd76c 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -2580,6 +2580,19 @@ input:checked + .slider:before {
   content: "";
   position: absolute;
   display: none;
+  animation: checkmark-appear 0.3s ease;
+}
+
+@keyframes checkmark-appear {
+  0% {
+    transform: rotate(45deg) scale(0);
+  }
+  75% {
+    transform: rotate(45deg) scale(1.5);
+  }
+  100% {
+    transform: rotate(45deg);
+  }
 }
 
 .groups .Group-checkbox input:checked ~ .group-checkmark:after {
@@ -2784,7 +2797,7 @@ input:checked + .slider:before {
 
 #UserList .group-name-block .UserNumberBadge{
   padding:3px 9px;
-  border-radius:8px;
+  border-radius:15px;
   background-color: rgb(44,132,195);
   color: #CDE9FD;
   font-size:10px;
@@ -2828,7 +2841,7 @@ input:checked + .slider:before {
 #UserList .AddUserBlock button{
   font-size: 12px;
   font-weight: 700;
-  padding: 13px 10px;
+  padding: 12px 10px;
   border: none;
 }