Issue #1167 Implement Group Member Manage, Group manager fixes

* Adding and removing members now works in the Member manager popup
 * Implement an intelligent research input for adding users
 * Add the plugin confirm.js
 * Add a confirm popup for the group deletion
 * Implement the "Set as group for new users" action for groups

admin/themes/default/js/group_list.js

@@ -1,3 +1,5 @@
+const DELAY_FEEDBACK = 3000;
+
 /*-------
 Group Popup
 -------*/
@@ -17,7 +19,7 @@ $(".CloseGroupPopup").click(function () {
 $("#form-btn").click(function () {
   $("#cancel").show();
   $("#addUserLabel").show();
-  $(".input-user-name").show();
+  $(".UserSearch").show();
   $("#UserSubmit").show();
   $("#form-btn").hide();
   $(".groups .list_user").css("max-height", "100px");
@@ -26,7 +28,7 @@ $("#form-btn").click(function () {
 $("#cancel").click(function () {
   $("#cancel").hide();
   $("#addUserLabel").hide();
-  $(".input-user-name").hide();
+  $(".UserSearch").hide();
   $("#UserSubmit").hide();
   $("#form-btn").show();
   $(".groups .list_user").css("max-height", "200px");
@@ -86,7 +88,8 @@ jQuery(document).ready(function () {
           newgroup.find(".Group-checkbox label").attr("for", "Group-Checkbox-selection-" + id);
           newgroup.find(".Group-checkbox input").attr("id", "Group-Checkbox-selection-" + id);
           newgroup.find(".input-edit-group-name").attr("placeholder", name);
-          newgroup.find(".group_number_users").html("0 " + member_default);
+          newgroup.find(".group_number_users").html("0 " + str_member_default);
+          newgroup.find(".group_name-editable").html(name);
           hideAddGroupForm();
           //Setup the icon color
           var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]];
@@ -97,13 +100,13 @@ jQuery(document).ready(function () {
           
           //Place group in first Place 
           newgroup.appendTo(".groups");
-          newgroup.find(".groupMessage").html(group_created);
+          newgroup.find(".groupMessage").html(str_group_created);
           newgroup.find(".groupMessage").fadeIn();
-          newgroup.find(".groupMessage").delay(4000).fadeOut();
+          newgroup.find(".groupMessage").delay(DELAY_FEEDBACK).fadeOut();
         } else {
-          $("#showAddGroup .groupError").html(name_taken);
+          $("#showAddGroup .groupError").html(str_name_taken);
           $("#showAddGroup .groupError").fadeIn();
-          $("#showAddGroup .groupError").delay(3000).fadeOut();
+          $("#showAddGroup .groupError").delay(DELAY_FEEDBACK).fadeOut();
         }
       },
       error: function (err) {
@@ -113,24 +116,6 @@ jQuery(document).ready(function () {
   });
 });
 
-/*-------
- User List group pop-in
- -------*/
-
-var modalUL = document.getElementById("UserList");
-
-var btn = document.getElementById("UserListTrigger");
-
-var close = document.getElementsByClassName("CloseUserList")[0];
-
-btn.onclick = function () {
-  modalUL.style.visibility = "visible";
-};
-
-close.onclick = function () {
-  modalUL.style.visibility = "hidden";
-};
-
 /*-------
  SETUP JS ON GROUP BOX
  -------*/
@@ -168,6 +153,8 @@ var setupGroupBox = function (groupBox) {
           .trigger("change");
       });
       updateSelectionPanel();
+      option = $('<option value="'+id+'">'+groupBox.find("#group_name").html()+'</option>')
+      option.appendTo("#MergeOptionsChoices");
     } else {
       groupBox.removeClass("OrangeBackground");
       groupBox.find(".icon-users-1").removeClass("OrangeIcon");
@@ -178,6 +165,11 @@ var setupGroupBox = function (groupBox) {
         }
       });
       updateSelectionPanel();
+      $("#MergeOptionsChoices option").each(function () {
+        if ($(this).attr("value") == id) {
+          $(this).remove();
+        }
+      });
     }
   });
 
@@ -188,40 +180,72 @@ var setupGroupBox = function (groupBox) {
 
   /* Set the delete action */
   groupBox.find("#GroupDelete").on("click", function () {
-    deleteGroup(id);
+    $.confirm({
+      title: str_delete+' '+groupBox.find("#group_name").html(),
+      content: str_are_you_sure,
+      boxWidth: '30%',
+      useBootstrap: false,
+      type: 'red',
+      typeAnimated: true,
+      buttons: {
+          confirm: {
+            text: str_yes_delete_confirmation,
+            btnClass: 'btn-red',
+            action: function () {
+              deleteGroup(id);
+            }
+          },
+          cancel: {
+            text: str_no_delete_confirmation
+          }
+      }
+    });
   });
 
   /* Set the rename action */
   groupBox.find(".Group-name .icon-pencil").on("click", function () {
-    groupBox.find(".Group-name-container form").show();
+    console.log("clic");
+    groupBox.find(".group-rename").css("display", "flex");
     groupBox.find(".Group-name-container .icon-pencil").hide();
-    groupBox.find(".Group-name-container .icon-ok").show();
     groupBox.find(".Group-name-container p").css("opacity", 0)
   });
 
   groupBox.find(".Group-name-container .icon-ok").on("click", function () {
-    renameGroup(id, groupBox.find(".group_name-editable").val())
+    if (groupBox.find(".group_name-editable").val() != groupBox.find("#group_name").html())
+      renameGroup(id, groupBox.find(".group_name-editable").val())
   });
 
   groupBox.find(".Group-name-container form").on("submit", function (e) {
     e.preventDefault();
-    renameGroup(id, groupBox.find(".group_name-editable").val())
+    if (groupBox.find(".group_name-editable").val() != groupBox.find("#group_name").html())
+      renameGroup(id, groupBox.find(".group_name-editable").val())
   });
 
+  groupBox.find(".group-rename .icon-cancel").on('click', function() {
+    groupBox.find(".group-rename").hide();
+    groupBox.find(".Group-name-container .icon-pencil").removeAttr("style");
+    groupBox.find(".Group-name-container p").css("opacity", 1);
+    groupBox.find(".group_name-editable").val(groupBox.find(".Group-name-container p").html());
+  })
+
   /* Hide group options and rename field on click on the screen */
 
   $(document).mouseup(function (e) {
     if ($(e.target).closest("#group-"+id+" #GroupOptions").length === 0) {
       groupBox.find(".group-dropdown-options #GroupOptions").hide();
     }
-    if ($(e.target).closest("#group-"+id+" .Group-name").length === 0) {
-      groupBox.find(".Group-name-container form").hide();
-      groupBox.find(".Group-name-container .icon-pencil").removeAttr("style");
-      groupBox.find(".Group-name-container .icon-ok").hide();
-      groupBox.find(".Group-name-container p").css("opacity", 1);
-      groupBox.find(".group_name-editable").val(groupBox.find(".Group-name-container p").html());
-    }
   });
+
+  /* Setup the default action */
+  if (groupBox.data("default") == 1) {
+    setupDefaultActions(id, true);
+  } else if (groupBox.data("default") == 0) {
+    setupDefaultActions(id, false);
+  }
+
+  groupBox.find(".manage-users").on("click", function(){openUserManager(id)});
+  
+
 };
 
 /* Group Ajax Functions */
@@ -233,6 +257,12 @@ var deleteGroup = function (id) {
     success: function (raw_data) {
       data = jQuery.parseJSON(raw_data);
       if (data.stat === "ok") {
+        $.alert({
+          title: str_group_deleted,
+          content: "",
+          boxWidth: '20%',
+          useBootstrap: false
+        });
         $("#group-" + id).remove();
       }
     },
@@ -252,21 +282,20 @@ var renameGroup = function(id, newName) {
       if (data.stat === "ok") {
         newName = data.result.groups[0].name;
         //Display message
-        $("#group-" + id).find(".groupMessage").html(renaming_done);
+        $("#group-" + id).find(".groupMessage").html(str_renaming_done);
         $("#group-" + id).find(".groupMessage").fadeIn();
-        $("#group-" + id).find(".groupMessage").delay(3000).fadeOut();
+        $("#group-" + id).find(".groupMessage").delay(DELAY_FEEDBACK).fadeOut();
         $("#group-" + id).find("#group_name").html(newName);
 
         //Hide editable field
-        $("#group-" + id).find(".Group-name-container form").hide();
-        $("#group-" + id).find(".Group-name-container span").show();
-        $("#group-" + id).find(".Group-name-container .icon-ok").hide();
-        $("#group-" + id).find(".Group-name-container p").css("opacity", 1)
+        $("#group-" + id).find(".group-rename").hide();
+        $("#group-" + id).find(".Group-name-container .icon-pencil").removeAttr("style");
+        $("#group-" + id).find(".Group-name-container p").css("opacity", 1);
       } else {
         //Display error message
-        $("#group-" + id).find(".groupError").html(name_taken);
+        $("#group-" + id).find(".groupError").html(str_name_taken);
         $("#group-" + id).find(".groupError").fadeIn();
-        $("#group-" + id).find(".groupError").delay(3000).fadeOut();
+        $("#group-" + id).find(".groupError").delay(DELAY_FEEDBACK).fadeOut();
       }
     },
     error: function (err) {
@@ -275,6 +304,49 @@ var renameGroup = function(id, newName) {
   });
 }
 
+var setDefaultGroup = function (id, is_default) {
+  jQuery.ajax({
+    url: "ws.php?format=json&method=pwg.groups.setInfo",
+    type: "POST",
+    data: "group_id=" + id + "&pwg_token=" + pwg_token + "&is_default="+is_default,
+    success: function (raw_data) {
+      data = jQuery.parseJSON(raw_data);
+      if (data.stat === "ok") {
+        if (is_default) {
+          setupDefaultActions(id,true)
+          $("#group-" + id).find(".groupMessage").html(str_set_default_state);
+        } else {
+          setupDefaultActions(id,false)
+          $("#group-" + id).find(".groupMessage").html(str_unset_default_state);
+        }
+        $("#group-" + id).find(".groupMessage").fadeIn();
+        $("#group-" + id).find(".groupMessage").delay(DELAY_FEEDBACK).fadeOut();
+      }
+    },
+    error: function (err) {
+      console.log(err);
+    },
+  });
+};
+
+var setupDefaultActions = function(id, is_default) {
+  if (is_default) {
+    $("#group-" + id).find("#GroupDefault").html(str_unset_default);
+    $("#group-" + id).find(".is-default-token").attr("title",str_unset_default)
+    $("#group-" + id).find(".is-default-token").removeClass("deactivate");
+    $("#group-" + id).find("#GroupDefault").unbind("click");
+    $("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, false)})
+    $("#group-" + id).find(".is-default-token").on("click", function(){setDefaultGroup(id, false)})
+  } else {
+    $("#group-" + id).find("#GroupDefault").html(str_set_default);
+    $("#group-" + id).find(".is-default-token").attr("title",str_set_default)
+    $("#group-" + id).find(".is-default-token").addClass("deactivate");;
+    $("#group-" + id).find("#GroupDefault").unbind("click");
+    $("#group-" + id).find("#GroupDefault").on("click", function(){setDefaultGroup(id, true)})
+    $("#group-" + id).find(".is-default-token").unbind("click");
+  }
+}
+
 
 /*-------
  Selection mode toggle actions,  
@@ -287,14 +359,12 @@ $(function () {
     if ($(this).is(":checked")) {
       $(".in-selection-mode").show();
       $(".not-in-selection-mode").hide();
-      $("#group_name").attr("contenteditable", false);
       $(".GroupManagerButtons").removeClass("visible");
     } else {
       $(".in-selection-mode").fadeOut();
       $(".not-in-selection-mode").removeAttr("style");
       $(".Group-checkbox input").attr("checked", false);
       $(".Group-checkbox input[type='checkbox']").trigger("change");
-      $("#group_name").attr("contenteditable", true);
     }
   });
 });
@@ -396,4 +466,186 @@ $('.ConfirmDeleteButton').on("click", function() {
     $(this).remove();
     updateSelectionPanel("NoSelection");
   })
-})
+})
+
+/*-------
+ Manage User Part
+ -------*/
+
+// Initialize the research user bar
+var selectize;
+
+// List of users
+var usersSearch = [];
+
+// Setup the user research bar
+$(function() {
+
+  // initialize the Selectize control
+  $select = $('.AddUserBlock input').selectize({
+    delimiter: ',',
+    persist: false,
+    plugins: ['remove_button']
+  });
+
+  // fetch the instance
+  selectize = $select[0].selectize;
+
+  var idSearch = "";
+  $('.UserSearch input').on("focus", function() {
+    // Import users if it is not already done
+    if (usersSearch.length == 0) {
+      jQuery.ajax({
+        url: "ws.php?format=json&method=pwg.users.getList",
+        type: "POST",
+        data: "",
+        success: function (raw_data) {
+          data = jQuery.parseJSON(raw_data);
+          if (data.stat === "ok") {
+            usersSearch = data.result.users;
+            updateUserSearch();
+            selectize.refreshOptions();
+          }
+        }
+      });
+    } else if (idSearch != $("#UserList").attr("data-group_id")) {
+      updateUserSearch();
+    }
+  });
+
+  // Update User search bar (remove group users in selection)
+  updateUserSearch = function () {
+    idSearch = $("#UserList").attr("data-group_id");
+    selectize.clearOptions();
+    usersSearch.forEach(function(u){
+      isInGroup = false;
+      $('.UsernameBlock').each(function(){
+        if ($(this).data("id")==u.id)
+          isInGroup = true;
+      })
+      if (!isInGroup) {
+        selectize.addOption({value:u.id, text:u.username})
+      }
+    })
+  }
+});
+
+// Display the user manager for a specific group
+var openUserManager = function(grp_id) {
+  jQuery.ajax({
+    url: "ws.php?format=json&method=pwg.users.getList",
+    type: "POST",
+    data: "group_id=" + grp_id,
+    success: function (raw_data) {
+      data = jQuery.parseJSON(raw_data);
+      if (data.stat === "ok") {
+        //Fill with user blocks
+        let users = data.result.users;
+        $(".UsersInGroupList").html('');
+        $(".UserNumberBadge").html(''+users.length);
+        users.forEach(u => {
+          addUserDisplay(u.username, u.id, grp_id);
+        });
+        $('#UserList').fadeIn();
+        //Attribute the group id to the div
+        $("#UserList").attr("data-group_id", grp_id);
+        //Clear the selection
+        selectize.clear();
+      }
+    },
+    error: function (err) {
+      console.log(err);
+    },
+  });
+}
+
+//Add a user block
+var addUserDisplay = function(username, user_id, grp_id) {
+  let userBlock = $('<div class="UsernameBlock" data-id='+user_id+'>'+
+      '<span class="icon-user-1"></span>'+
+      '<p>'+username+'</p>'+
+      '<div class="Tooltip">'+
+        '<span class="icon-cancel"></span>'+
+        '<p class="TooltipText">Dissociate user from this group</p>'+
+      '</div>'+
+      '<div class="UserInfo"><p>User Dissociated</p></div>'+
+    '</div>');
+    userBlock.appendTo(".UsersInGroupList");
+
+    //Setup the delete action
+    userBlock.find(".icon-cancel").on("click", function () {
+    jQuery.ajax({
+      url: "ws.php?format=json&method=pwg.groups.deleteUser",
+      type: "POST",
+      data: "group_id=" + grp_id + "&user_id=" + user_id + "&pwg_token=" + pwg_token,
+      success: function (raw_data) {
+        data = jQuery.parseJSON(raw_data);
+        if (data.stat === "ok") {
+          //Setup User Info
+          userBlock.find(".UserInfo")
+            .css("display", "flex")
+            .addClass("UserInfo-dissociated").removeClass("UserInfo-associated")
+            .hide()
+            .find("p").html(str_user_dissociated);
+          userBlock.find(".UserInfo").fadeIn();
+          userBlock.delay(1000).fadeOut(function(){
+            userBlock.remove();
+            updateUserSearch();
+            //Update member number
+            $(".GroupContainer[data-id="+grp_id+"] .group_number_users")
+            .html(($(".UsernameBlock").length) + " " + str_member_default);
+            $(".UserNumberBadge").html(''+$(".UsernameBlock").length);
+          })
+        }
+      }
+    });
+  })
+  return userBlock;
+} 
+
+// Close pop-up on cross click
+$(".CloseUserList").on("click", function() {$('#UserList').fadeOut();})
+
+// Adding Group Action
+$(".AddUserBlock button").on("click", function () {
+  let grp_id = $("#UserList").attr("data-group_id")
+  let usersString = ""
+  // Get selected ids
+  let ids = selectize.getValue();
+  ids.split(',').forEach(function(id){
+    usersString += "&user_id[]="+id
+  });
+  jQuery.ajax({
+    url: "ws.php?format=json&method=pwg.groups.addUser",
+    type: "POST",
+    data: "group_id=" + grp_id+ usersString + "&pwg_token=" + pwg_token,
+    success: function (raw_data) {
+      data = jQuery.parseJSON(raw_data);
+      ids.split(',').forEach(function(id){
+        // Get the username
+        let username = "undefined";
+        usersSearch.forEach(function(u) {
+          if (u.id == id) {
+            username = u.username;
+          }
+        })
+        let userBlock = addUserDisplay(username, id, grp_id)
+
+        //Setup User Info
+        userBlock.find(".UserInfo")
+          .css("display", "flex")
+          .addClass("UserInfo-associated").removeClass("UserInfo-dissociated")
+          .show()
+          .find("p").html(str_user_associated);
+        userBlock.delay(1000).fadeIn();
+        userBlock.find(".UserInfo").delay(1000).fadeOut();
+
+        updateUserSearch();
+        //Update member number
+        $(".GroupContainer[data-id="+grp_id+"] .group_number_users")
+        .html(($(".UsernameBlock").length) + " " + str_member_default);
+        $(".UserNumberBadge").html(''+$(".UsernameBlock").length);
+      })
+    }
+  }); 
+});

admin/themes/default/template/group_list.tpl

@@ -1,17 +1,34 @@
 {footer_script}
 var pwg_token = "{$PWG_TOKEN}";
-var member_default = "{'member'|@translate}"
-var group_created = "{'Group added'|@translate}"
-var renaming_done = "{'Group renamed'|@translate}"
-var name_taken = "{'Name is already taken'|@translate}"
+var str_member_default = "{'member'|@translate}"
+var str_group_created = "{'Group added'|@translate}"
+var str_renaming_done = "{'Group renamed'|@translate}"
+var str_name_taken = "{'Name is already taken'|@translate}"
+var str_group_deleted = "{'Group succesfully deleted'|@translate}"
+var str_set_default = "{'Set as group for new users'|@translate}"
+var str_unset_default = "{'Unset as group for new users'|@translate}"
+var str_set_default_state = "{'Group for new users set'|@translate}"
+var str_unset_default_state = "{'Group for new users unset'|@translate}"
+var str_delete = "{'Delete'|@translate}"
+var str_are_you_sure = "{'Are you sure ?'|@translate}"
+var str_yes_delete_confirmation = "{'Yes, delete it'|@translate}"
+var str_no_delete_confirmation = "{"No, I've changed my mind"|@translate}"
+var str_user_associated = "{"User Associated"|@translate}"
+var str_user_dissociated = "{"User Dissociated"|@translate}"
 {/footer_script}
 
+{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+{combine_css path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
+
+{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='common' load='footer' path='admin/themes/default/js/group_list.js'}
 
 {* Define template function for the content of Groups*}
 {function name=groupContent}
 {function groupContent}
-  <div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id} style="order: -{$grp_id}">
+  <div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id} {if $grp_is_default}data-default=1 {else}data-default=0 {/if} style="order: -{$grp_id}">
     <div class="Group-checkbox in-selection-mode">
       <label class="Group-checkbox-label" for="Group-Checkbox-selection-{$grp_id}"></label>
       <input type="checkbox" id="Group-Checkbox-selection-{$grp_id}">
@@ -23,28 +40,30 @@ var name_taken = "{'Name is already taken'|@translate}"
         <div class="groupMessage icon-ok"></div>
         <div class="groupError icon-cancel"></div>
       </div>
-            
+
+      <div class="icon-star 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-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">{'Set Group for new users'|@translate}</option>
+          <option class="icon-star group-dropdown-option" id="GroupDefault" value="delete"></option>
         </div>
       </div>
 
       <div class="Group-name">
-        
         <div class="Group-name-container">
-          <span class="icon-pencil not-in-selection-mode"></span>
-          <span class="icon-ok"></span>
           <p id="group_name">{$grp_name}</p>
+          <span class="icon-pencil"></span>
+        </div>
+        <div class="group-rename">
           <form>
             <input type="text" class="group_name-editable" value="{$grp_name}">
             <input type="submit" hidden>
           </form>
+          <span class="icon-ok"></span>
+          <span class="icon-cancel"></span>
         </div>
-        
-        
       </div>
 
       <div id="EditGroupName">
@@ -72,14 +91,14 @@ var name_taken = "{'Name is already taken'|@translate}"
     <input type="checkbox" id="toggleSelectionMode">
     <span class="slider round"></span>
   </label>
-  <p> Selection mode</p>
+  <p>{'Selection mode'|@translate}</p>
 </div>
 
 <div id="selection-mode-block" class="in-selection-mode">
   <div class="Selection-mode-content">
-   <p id="nothing-selected">No selection</p>
+   <p id="nothing-selected">{'No group selected, no action possible.'|@translate}</p>
    <div class="SelectionModeGroup">
-    <p> Your selection</p>
+    <p>{'Your selection'|@translate}</p>
     <div class="SelectionModeGroupList">
 
     <div class="DeleteGroupList"> {* TODO *}
@@ -87,15 +106,15 @@ var name_taken = "{'Name is already taken'|@translate}"
     </div>
 
     </div>
-    <button id="MergeSelectionMode" class="icon-object-group unavailable">Merge</button>
-    <button id="DeleteSelectionMode" class="icon-trash-1 unavailable">Delete</button>
+    <button id="MergeSelectionMode" class="icon-object-group unavailable">{'Merge'|@translate}</button>
+    <button id="DeleteSelectionMode" class="icon-trash-1 unavailable">{'Delete'|@translate}</button>
    </div>
 
    <div id="MergeOptionsBlock">
-   <p>Choose which group to merge these groups into</p>
-   <p class="ItalicTextInfo">The other groups will be removed</p>
+   <p>{'Choose which group to merge these groups into'|@translate}</p>
+   <p class="ItalicTextInfo">{'The other groups will be removed'|@translate}</p>
     <div class="MergeOptionsContainer">
-      <label for="MergeOptionsChoices">Merge into:</label>
+      <label for="MergeOptionsChoices">{'The other groups will be removed'|@translate}</label>
       <select id="MergeOptionsChoices"> {* TODO *}
       </select>
     </div>
@@ -140,7 +159,7 @@ var name_taken = "{'Name is already taken'|@translate}"
     </div>
 
     {* Template Group (for js application) *}
-    {groupContent grp_id="template" grp_name="Template" grp_members=0}
+    {groupContent grp_id="template" grp_name="Template" grp_members=0 grp_is_default=false}
 
     {assign var='color_tab' value=[["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]]}
 
@@ -153,6 +172,7 @@ var name_taken = "{'Name is already taken'|@translate}"
         grp_members=$group.MEMBERS 
         icon_color=$color_tab[$color_id][0]
         icon_background_color=$color_tab[$color_id][1]
+        grp_is_default=$group.IS_DEFAULT
       }
       
     {/foreach}
@@ -174,8 +194,8 @@ var name_taken = "{'Name is already taken'|@translate}"
     <div class="UserListAddFilterUsers">
       <div class="AddUserBlock">
         <p>Associate User</p>
-        <input class="input-user-name" type="text" name="username" maxlength="50" size="20" placeholder="ExampleUser">
-        <button class="icon-ok submit" name="submit_add" id="UserSubmit" type="submit">Select user</button>
+        <input type=text class="UserSearch" type="text" name="username" maxlength="50" size="20" placeholder="John Doe"></select>
+        <button class="icon-ok submit" name="submit_add" id="UserSubmit" type="submit">Select user(s)</button>
       </div>
       <div class="FilterUserBlock">
         <div class="AmountOfUsersShown">
@@ -190,18 +210,11 @@ var name_taken = "{'Name is already taken'|@translate}"
     <div class="UsersInGroupListContainer">
     
       <div class="UsersInGroupList row">
-        <div class="UsernameBlock">
-          <span class="icon-user-1"></span>
-          <p>Hester Hampton</p>
-          <div class="Tooltip">
-            <span class="icon-cancel"></span>
-            <p class="TooltipText">Dissociate user from this group</p>
-          </div>
-        </div>
+        
         <div class='ValidationUserAssociated'>
            <p class="icon-ok">User Associated</p>
           </div>
-        </div>
+      </div>
   
     </div>
 

admin/themes/default/theme.css

@@ -1584,44 +1584,56 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   text-align: center;
   font-weight:700;
   max-width: 170px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.groups .Group-name .Group-name-container p:focus{
-  margin:0 30px;
+.Group-name-container {
+  position: relative;
+  display: inline-flex;
+  transform: translate(10px, 0);
 }
 
-.Group-name-container form{
-  margin: 0 !important;
+.group-rename {
+  margin: 0;
   position: absolute;
-  top : 0px;
-  transform: translate(-1px, -5px);
+  top: 0px;
+  transform: translate(0,-8px);
   display: none;
+  opacity: 1;
 }
 
-.Group-name-container .icon-ok{
-  display: none;
-  position:absolute;
-  top: 2px;
-  left: 190px;
-  cursor: pointer;
-  z-index: 2;
+.group-rename span {
+  padding: 5px;
+  margin: auto;
 }
 
-.Group-name-container .icon-ok:hover{
+.group-rename .icon-ok {
+  background-color: #ffa744;
+}
+
+.group-rename .icon-ok:hover {
+  background-color: #3c3c3c;;
+}
+
+.group-rename form {
+  margin: 0 !important;
+}
+
+.Group-name span:hover{
   color: #ffa744;
+  cursor: pointer;
 }
 
-.Group-name-container form input{
-  text-align: center;
-  width: 200px;
+.group-rename input{
+  text-align: left;
+  width: 130px;
   margin: 4px;
-  margin-top: 0px;
-  background: none !important;
-  border-radius: 10px;
-  border: 2px solid #89a6ee !important;
   font-weight: bold;
   color: #3c3c3c;
   font-family: "Open Sans", "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
+  margin-left: 9px;
 }
 
 .addGroupLabel {
@@ -1837,6 +1849,7 @@ input:checked + .slider:before {
   font-weight: 700;
   padding: 13px 40px;
   background-color:transparent;
+  width: 180px;
 }
 
 .SelectionModeGroup button:hover{
@@ -1959,17 +1972,7 @@ input:checked + .slider:before {
 
 .groups .Group-name{
   position:relative;
-}
-
-.groups .Group-name .icon-pencil{
-  position:absolute;
-  top: 2px;
-  left: 195px;
-  cursor: pointer;
-}
-
-.groups .Group-name .icon-pencil:hover{
-  color: #ffa744;
+  text-align: center;
 }
 
 #EditGroupName{
@@ -1978,11 +1981,11 @@ input:checked + .slider:before {
 }
 
 .groups .Group-name .icon-pencil{
-  display:none;
+  opacity: 0;
 }
   
 .Group-name:hover .icon-pencil{
-  display:block;
+  opacity: 1;
 }
 
 /* Options menu*/
@@ -2006,12 +2009,36 @@ input:checked + .slider:before {
 
 }
 
+.is-default-token {
+  display: block;
+  z-index: 1;
+  position: absolute;
+  cursor: pointer;
+  right: 33px;
+  top: 4px;
+  padding: 5px 0;
+  font-size: 20px;
+  color: #777;
+  transition: 0.2s ease;
+}
+
+.is-default-token:hover {
+  transform: scale(1.2,1.2);
+}
+
+.is-default-token.deactivate {
+  display: none;
+}
+
+
+
 .group-dropdown-options {
   cursor: pointer;
 }
 
 .group-dropdown-option{
  padding:5px 10px;
+ font-size: 13px;
 }
 
 /*Group checkbox*/
@@ -2089,7 +2116,7 @@ input:checked + .slider:before {
   background-color: #CDE9FD;
   width: 27px;
   height: 27px;
-  padding: 12px 10px 8px;
+  padding: 10px;
   border-radius: 30px;
   margin: 10px auto;
 }
@@ -2098,6 +2125,7 @@ input:checked + .slider:before {
   font-weight:700;
   width: 145px;
   margin: auto;
+  text-align: center;
 }
 
 .groups #addGroupForm{
@@ -2162,12 +2190,15 @@ input:checked + .slider:before {
   width: 190px;
   height: 50px;
   line-height: 50px;
-  margin-bottom: 10px;
+}
+
+.manage-permissions {
+  margin-bottom: 15px;
 }
 
 .groups .manage-users,
 .groups .manage-permissions{
-  font-size: 15px;
+  font-size: 13px;
   display: inline-block;
 }
 
@@ -2199,11 +2230,16 @@ input:checked + .slider:before {
 }
 
 #UserList{
-  visibility: hidden;
+  display: none;
+}
+
+.UserSearch {
+  width: 220px;
+  margin-top: 4px;
 }
 
 .UserListPopIn{
-  position: absolute;
+  position: fixed;
   z-index: 100;
   padding-top: 100px;
   left: 0;
@@ -2217,7 +2253,6 @@ input:checked + .slider:before {
 .UserListPopInContainer{
   display:block;
   width:1100px;
-  height:520px;
   position:absolute;
   left:50%;
   transform:translateX(-50%);
@@ -2267,6 +2302,8 @@ input:checked + .slider:before {
 #UserList .AddUserBlock{
   padding:10px 0;
   margin-bottom:30px;
+  display: flex;
+  align-items: center;
 }
 
 #UserList .FilterUserBlock{
@@ -2327,6 +2364,31 @@ input:checked + .slider:before {
   border-radius:25px;
 }
 
+.UsernameBlock .UserInfo {
+  display: none;
+  position: absolute;
+  top: 0;
+  
+  width: 100%;
+  left: 0px;
+  height: 100%;
+  border-radius: 25px;
+}
+
+.UsernameBlock .UserInfo-dissociated {
+  color: #f22;
+  background-color: #ffd5dc;
+}
+
+.UsernameBlock .UserInfo-associated {
+  color: #0a0;
+  background-color:#c2f5c2;
+}
+
+.UsernameBlock .UserInfo p {
+  margin: auto
+}
+
 .UsersInGroupListContainer{
   max-height:315px;
 }