Issue #1167 : Group manager fixes

* Edit name change into a form
 * Add Animation on Add Group form
 * Add the "set as default" action (not working)
 * Design, color and text fixes

admin/themes/clear/theme.css

@@ -329,17 +329,17 @@ p.albumTitle img {margin-bottom:-3px;}
 .groups .GroupContainer,
 .groups .showCreateGroup,
 .groups .addGroupFormBlock{
-  box-shadow: -1px 1px 2px #e7e7e7;
+  box-shadow: 0px 0px 5px #acacac;
 }
 
-.groups .showCreateGroup:hover  #addGroup,
+.groups #addGroupForm:hover  #addGroup,
 .groups .addGroupFormTitle{
   color:#3c3c3c;
   text-decoration:none;
 }
 
 .groups #addGroup{
-  color:#d5d5d5;
+  color:#777;
 }
 
 .groups .group_number_users{
@@ -410,9 +410,7 @@ label>p.group_select {
   color:#3c3c3c;
 }
 
-.groups #GroupPermission:hover,
-.groups #GroupDuplicate:hover,
-.groups #GroupDelete:hover{
+.group-dropdown-option:hover{
   background-color:#e7e7e7;
 }
 

admin/themes/default/js/group_list.js

@@ -35,20 +35,31 @@ $("#cancel").click(function () {
 /*-------
  Add Group toggle
  -------*/
+var isToggle = true;
+$(".addGroupBlock").on("click", function() {
+  if (isToggle) deployAddGroupForm()
+  else hideAddGroupForm();
+})
 
-$("#showAddGroup").click(function () {
-  $("#addGroupForm").css("display", "inline-block");
-  $("#showAddGroup").css("display", "none");
-});
+var deployAddGroupForm = function () {
+  $(".addGroupBlock").animate({
+    top: "20%",
+    padding: "0px"
+  }, 400, complete=function(){
+    $("#addGroupForm form").fadeIn();
+  });
+  isToggle = false;
+}
 
-var closeAddGroup = function () {
-  $("#addGroupForm").css("display", "none");
-  $("#showAddGroup").css("display", "inline-block");
-};
-
-$("#addGroupClose").click(closeAddGroup);
-
-$(".actionButtons input").click(closeAddGroup);
+var hideAddGroupForm = function () {
+  $("#addGroupForm form").fadeOut(function(){
+    $(".addGroupBlock").animate({
+      top: "50%",
+      padding: "100px 0"
+    }, 400)
+  });
+  isToggle = true;
+}
 
 /*-------
  Add Group Submit
@@ -76,7 +87,7 @@ jQuery(document).ready(function () {
           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);
-
+          hideAddGroupForm();
           //Setup the icon color
           var colors = [["#ffa744", "#ffe9cf"],["#896af3", "#e0daf4"], ["#6ece5e","#d6ffcf"],["#2883c3","#cfebff"]];
           var colorId = Number(id)%4;
@@ -93,7 +104,6 @@ jQuery(document).ready(function () {
           $("#showAddGroup .groupError").html(name_taken);
           $("#showAddGroup .groupError").fadeIn();
           $("#showAddGroup .groupError").delay(3000).fadeOut();
-          $("#showAddGroup .groupError").delay(10).html(contents);
         }
       },
       error: function (err) {
@@ -182,35 +192,39 @@ var setupGroupBox = function (groupBox) {
   });
 
   /* Set the rename action */
-  let contents = groupBox.find("#group_name").html();
-  groupBox.find("#group_name").blur(function() {
-    if (contents!=groupBox.find("#group_name").html()){
-      jQuery.ajax({
-        url: "ws.php?format=json&method=pwg.groups.setInfo",
-        type: "POST",
-        data: "group_id=" + id + "&pwg_token=" + pwg_token + "&name="+groupBox.find("#group_name").html(),
-        success: function (raw_data) {
-          data = jQuery.parseJSON(raw_data);
-          if (data.stat === "ok") {
-            groupBox.find(".groupMessage").html(renaming_done);
-            groupBox.find(".groupMessage").fadeIn();
-            groupBox.find(".groupMessage").delay(3000).fadeOut();
-            contents = groupBox.find("#group_name").html();
-          } else {
-            groupBox.find(".groupError").html(name_taken);
-            groupBox.find(".groupError").fadeIn();
-            groupBox.find(".groupError").delay(3000).fadeOut();
-            groupBox.find("#group_name").delay(10).html(contents);
-          }
-        },
-        error: function (err) {
-          console.log(err);
-        },
-      });
+  groupBox.find(".Group-name .icon-pencil").on("click", function () {
+    groupBox.find(".Group-name-container form").show();
+    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())
+  });
+
+  groupBox.find(".Group-name-container form").on("submit", function (e) {
+    e.preventDefault();
+    renameGroup(id, groupBox.find(".group_name-editable").val())
+  });
+
+  /* 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());
     }
   });
 };
 
+/* Group Ajax Functions */
 var deleteGroup = function (id) {
   jQuery.ajax({
     url: "ws.php?format=json&method=pwg.groups.delete",
@@ -228,6 +242,40 @@ var deleteGroup = function (id) {
   });
 };
 
+var renameGroup = function(id, newName) {
+  jQuery.ajax({
+    url: "ws.php?format=json&method=pwg.groups.setInfo",
+    type: "POST",
+    data: "group_id=" + id + "&pwg_token=" + pwg_token + "&name="+newName,
+    success: function (raw_data) {
+      data = jQuery.parseJSON(raw_data);
+      if (data.stat === "ok") {
+        newName = data.result.groups[0].name;
+        //Display message
+        $("#group-" + id).find(".groupMessage").html(renaming_done);
+        $("#group-" + id).find(".groupMessage").fadeIn();
+        $("#group-" + id).find(".groupMessage").delay(3000).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)
+      } else {
+        //Display error message
+        $("#group-" + id).find(".groupError").html(name_taken);
+        $("#group-" + id).find(".groupError").fadeIn();
+        $("#group-" + id).find(".groupError").delay(3000).fadeOut();
+      }
+    },
+    error: function (err) {
+      console.log(err);
+    },
+  });
+}
+
+
 /*-------
  Selection mode toggle actions,  
  changes "..." in group block to checkbox,
@@ -237,14 +285,13 @@ var deleteGroup = function (id) {
 $(function () {
   $("#toggleSelectionMode").click(function () {
     if ($(this).is(":checked")) {
-      $(".in-selection-mode").fadeIn();
-      $(".not-in-selection-mode").fadeOut();
+      $(".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").fadeIn();
-      $(".GroupManagerButtons").addClass("visible");
+      $(".not-in-selection-mode").removeAttr("style");
       $(".Group-checkbox input").attr("checked", false);
       $(".Group-checkbox input[type='checkbox']").trigger("change");
       $("#group_name").attr("contenteditable", true);
@@ -252,16 +299,6 @@ $(function () {
   });
 });
 
-/*-------
- Hide group options on click on the screen
- -------*/
-
-$(document).mouseup(function (e) {
-  if ($(e.target).closest("#GroupOptions").length === 0) {
-    $(".group-dropdown-options #GroupOptions").hide();
-  }
-});
-
 /*-------
  Update Selection Panel
  -------*/
@@ -272,14 +309,20 @@ var updateSelectionPanel = function (changedState = "") {
   
   if (numSelect == 0) {
     updateStatePanel("NoSelection")
-  } else if (numSelect == 1 && (state == "OptionMerge" || state == "NoSelection" || state == "Selection")) {
-    updateStatePanel("OneSelected")
-  } else if (changedState != "") {
-    updateStatePanel(changedState)
-  } else if (numSelect > 1 && state == "OneSelected") {
-    updateStatePanel("Selection");
+  } else if (changedState == "") {
+    if (numSelect == 1 && state != "ConfirmDeletion")
+      updateStatePanel("OneSelected")
+    if (numSelect > 1 && state == "OneSelected")
+      updateStatePanel("Selection");
+  } else {
+    if (changedState == "Selection" && numSelect == 1)
+      updateStatePanel("OneSelected")
+    else 
+      updateStatePanel(changedState)
   }
 
+  console.log(state);
+
   $(".number-Selected").html(numSelect + "");
 };
 
@@ -291,7 +334,9 @@ var updateStatePanel = function (newState = "Selection") {
   switch (newState) {
     case "OneSelected":
     $("#DeleteSelectionMode").show();
-    $("#MergeSelectionMode").hide();
+    $("#MergeSelectionMode").show();
+    buttonUnavailable($("#MergeSelectionMode"));
+    buttonAvailable($("#DeleteSelectionMode"), "updateSelectionPanel('ConfirmDeletion')");
     $("#MergeOptionsBlock").hide();
     $("#ConfirmGroupAction").hide();
       break;
@@ -304,6 +349,8 @@ var updateStatePanel = function (newState = "Selection") {
     case "Selection":
     $("#DeleteSelectionMode").show();
     $("#MergeSelectionMode").show();
+    buttonAvailable($("#MergeSelectionMode"), "updateSelectionPanel('OptionMerge')");
+    buttonAvailable($("#DeleteSelectionMode"), "updateSelectionPanel('ConfirmDeletion')");
     $("#MergeOptionsBlock").hide();
     $("#ConfirmGroupAction").hide();
       break;
@@ -315,6 +362,10 @@ var updateStatePanel = function (newState = "Selection") {
       break;
   }
   if (newState == "NoSelection") {
+    $("#DeleteSelectionMode").show();
+    $("#MergeSelectionMode").show();
+    buttonUnavailable($("#MergeSelectionMode"));
+    buttonUnavailable($("#DeleteSelectionMode"));
     $(".SelectionModeGroup").hide();
     $("#nothing-selected").show();
     $("#MergeOptionsBlock").hide();
@@ -325,6 +376,16 @@ var updateStatePanel = function (newState = "Selection") {
   }
 };
 
+var buttonAvailable = function(button, onClick) {
+  button.removeClass("unavailable");
+  button.attr("OnClick", onClick);
+}
+
+var buttonUnavailable = function(button) {
+  button.addClass("unavailable");
+  button.removeAttr("OnClick");
+}
+
 /*-------
  Delete function on button's pannel
  -------*/

admin/themes/default/template/group_list.tpl

@@ -1,8 +1,8 @@
 {footer_script}
 var pwg_token = "{$PWG_TOKEN}";
 var member_default = "{'member'|@translate}"
-var group_created = "{'Group created'|@translate}"
-var renaming_done = "{'Renaming done'|@translate}"
+var group_created = "{'Group added'|@translate}"
+var renaming_done = "{'Group renamed'|@translate}"
 var name_taken = "{'Name is already taken'|@translate}"
 {/footer_script}
 
@@ -12,44 +12,52 @@ var name_taken = "{'Name is already taken'|@translate}"
 {function name=groupContent}
 {function groupContent}
   <div id="group-{$grp_id}" class="GroupContainer" data-id={$grp_id} style="order: -{$grp_id}">
-    <div class="groupHeader"> 
-      <div class="icon-users-1" style="color:{$icon_color};background-color:{$icon_background_color}"></div>
-      <div class="groupMessage icon-ok"></div>
-      <div class="groupError icon-cancel"></div>
-    </div>
-          
-    <div class="icon-ellipsis-vert group-dropdown-options not-in-selection-mode">
-      <div id="GroupOptions">
-        <option class="icon-docs" id="GroupDuplicate" value="duplicate">{'Duplicate'|@translate}</option>
-        <option class="icon-trash" id="GroupDelete" value="delete">{'Delete'|@translate}</option>
-      </div>
-    </div>
-
     <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}">
       <span class="group-checkmark"></span>
     </div>
-
-    <div class="Group-name">
-      <span class="icon-pencil not-in-selection-mode"></span>
-      <div class="Group-name-container">
-        <p id="group_name" contenteditable="true">{$grp_name}</p>
+    <div class="groupHeader">
+      <div class="groupIcon"> 
+        <div class="icon-users-1" style="color:{$icon_color};background-color:{$icon_background_color}"></div>
+        <div class="groupMessage icon-ok"></div>
+        <div class="groupError icon-cancel"></div>
       </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>
+        </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>
+          <form>
+            <input type="text" class="group_name-editable" value="{$grp_name}">
+            <input type="submit" hidden>
+          </form>
+        </div>
+        
+        
+      </div>
+
+      <div id="EditGroupName">
+        <input class="input-edit-group-name" type="text" name="username" maxlength="50" size="20" placeholder="{$grp_name}">
+        <button class="icon-ok submit" name="submit_add" id="EditGroupNameSubmit" type="submit">Change group name</button>
+        <a id="EditGroupcancel">{'Cancel'|@translate}</a>
+      </div>
+
+      <p class="group_number_users">{$grp_members}</p>
     </div>
 
-    <div id="EditGroupName">
-      <input class="input-edit-group-name" type="text" name="username" maxlength="50" size="20" placeholder="{$grp_name}">
-      <button class="icon-ok submit" name="submit_add" id="EditGroupNameSubmit" type="submit">Change group name</button>
-      <a id="EditGroupcancel">{'Cancel'|@translate}</a>
-    </div>
-
-    <p class="group_number_users">{$grp_members}</p>
-
-    <div class="GroupManagerButtons visible">
-      <a id="UserListTrigger" class="icon-user-1 manage-users">Manage users</a>
-      <a class="icon-lock manage-permissions">Manage permissions</a>
-    </div>
+    <a id="UserListTrigger" class="icon-user-1 manage-users not-in-selection-mode GroupManagerButtons">Manage users</a>
+    <a class="icon-lock manage-permissions not-in-selection-mode GroupManagerButtons">Manage permissions</a>
   </div>
 {/function}
 {/function}
@@ -79,8 +87,8 @@ var name_taken = "{'Name is already taken'|@translate}"
     </div>
 
     </div>
-    <button id="MergeSelectionMode" class="icon-object-group" onclick="updateSelectionPanel('OptionMerge')">Merge</button>
-    <button id="DeleteSelectionMode" class="icon-trash-1" onclick="updateSelectionPanel('ConfirmDeletion')">Delete</button>
+    <button id="MergeSelectionMode" class="icon-object-group unavailable">Merge</button>
+    <button id="DeleteSelectionMode" class="icon-trash-1 unavailable">Delete</button>
    </div>
 
    <div id="MergeOptionsBlock">
@@ -110,31 +118,25 @@ var name_taken = "{'Name is already taken'|@translate}"
 
   <div class="groups">
 
-    <div class="showCreateGroup" id="showAddGroup">
+    <div id="addGroupForm" class="GroupContainer">
       <div class="groupError icon-cancel"></div>
       <div class="addGroupBlock">
-       <div class="icon-plus-circled"></div>
+        <div class="icon-plus-circled"></div>
         <p id="addGroup">{'Add group'|translate}</p>
       </div>
-    </div>
-
-    <div id="addGroupForm">
-      <div class="addGroupFormBlock">
-        <form>
-          <fieldset>
-          <p class="addGroupFormTitle">{'Add group'|@translate}</p>
-             <div class="addGroupFormLabelAndInput">
-              <p class="addGroupLabel">{'Group name'|translate}</p>
-              <input type="text" name="groupname" maxlength="50" size="20" placeholder="ExampleGroup">
-            </div>
-            <div class="actionButtons">   
-              <input class="icon-ok submit" name="submit_add" type="submit" value="{'Add group'|translate}"><br/>
-              <a id="addGroupClose">{'Cancel'|@translate}</a>
-            </div>
-            <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-          </fieldset>
-        </form>
-        </div>
+      <form>
+        <fieldset>
+           <div class="addGroupFormLabelAndInput">
+            <label class="addGroupLabel" for="addGroupNameInput">{'Group name'|translate}</label>
+            <input type="text" id="addGroupNameInput" name="groupname" maxlength="50" size="20" placeholder="Photographers...">
+          </div>
+          <div class="actionButtons">   
+            <input class="icon-ok submit" name="submit_add" type="submit" value="{'Add'|translate}"><br/>
+            <a id="addGroupClose" onclick="hideAddGroupForm()">{'Cancel'|@translate}</a>
+          </div>
+          <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+        </fieldset>
+      </form>
     </div>
 
     {* Template Group (for js application) *}

admin/themes/default/theme.css

@@ -1477,6 +1477,8 @@ FORM#categoryOrdering p.albumActions .userSeparator {margin:0 5px;}
 
 .albumBlock {display: flex; justify-content: space-between; padding: 10px 10px 0 10px;}
 .albumBlock .albumLineBlock {display: block; padding-left: 7px; max-width: 45%; height: 50px;}
+.showCreateAlbum {text-align:left; margin:0 1em 25px 20px; line-height:22px;}
+.showCreateAlbum .userSeparator {margin:0 5px;}
 #addAlbumOpen, #autoOrderOpen {padding: 7px 15px; font-weight: bold; font-size: 11px;}
 .afterUploadActions {text-align: center; margin-bottom: 30px !important;}
 .afterUploadActions a {justify-content: center; margin: 35px; font-weight: bold; font-size: 14px; padding: 10px 12px;}
@@ -1532,16 +1534,9 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   margin-left:5px;
 }
 
-.showCreateGroup {
-  order: -10000000000;
-  text-align: left;
-  margin: 0 1em 25px 20px;
-  line-height: 22px;
-}
-
  .content .groups form{
   margin:0;
-  margin-top: 40px;
+  margin-top: 115px;
 }
 
 .groups {
@@ -1554,10 +1549,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   margin-right:224px;
 }
 
-.groups .GroupContainer{
-  display:inline-block;
-}
-
 .remove-item {
   flex: 1;
   -webkit-animation: flexShrink 500ms ease forwards;
@@ -1569,34 +1560,78 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   width:100%;
 }
 
-.groups .GroupContainer,
-.groups .addGroupFormBlock {
+.groups .GroupContainer {
   vertical-align: middle;
   position: relative;
-  display: inline-block;
+  display: flex;
+  flex-direction: column;
   text-align: left;
   height: 286px;
   width: 220px;
   margin: 15px;
   border-radius: 10px;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.groupHeader {
+  width: 100%;
 }
 
 .groups .Group-name .Group-name-container p{
-  margin: 0;
+  margin: auto;
   padding: 2px;
   text-align: center;
   font-weight:700;
+  max-width: 170px;
 }
 
 .groups .Group-name .Group-name-container p:focus{
   margin:0 30px;
 }
 
+.Group-name-container form{
+  margin: 0 !important;
+  position: absolute;
+  top : 0px;
+  transform: translate(-1px, -5px);
+  display: none;
+}
+
+.Group-name-container .icon-ok{
+  display: none;
+  position:absolute;
+  top: 2px;
+  left: 190px;
+  cursor: pointer;
+  z-index: 2;
+}
+
+.Group-name-container .icon-ok:hover{
+  color: #ffa744;
+}
+
+.Group-name-container form input{
+  text-align: center;
+  width: 200px;
+  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;
+}
+
 .addGroupLabel {
   margin: 0;
   border-radius: 5px 5px 0 0;
   padding: 2px;
-  text-align: center;
+  position: absolute;
+  left: 11px;
+  top: -11px;
+  font-size: 14px;
 }
 
 .groups .icon-users-1{
@@ -1610,32 +1645,6 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   margin:5px;
 }
 
-.groups .showCreateGroup{
-  vertical-align: middle;
-  position: relative;
-  display: inline-block;
-  height: 286px;
-  width: 220px;
-  margin: 15px;
-  border-radius:10px;
-  margin-left:15px;
-}
-
-.groups .showCreateGroup a:first-child{
-  position: absolute;
-  transform:translate(-50%,-50%);
-  top:50%;
-  left:50%;
-}
-
-.groups .showCreateGroup .userSeparator{
-  margin:0 5px;
-}
-
-.groups #addGroupForm {
-  order: -10000000000;
-}
-
 .groups .addGroupFormTitle{
   font-size:1.2em;
   font-weight:700;
@@ -1645,7 +1654,7 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
   padding:5px;
 }
 
-.groupHeader {
+.groupIcon {
   margin:15px auto;
 }
 
@@ -1663,21 +1672,23 @@ input[type="text"].dError {border-color:#ff7070; background-color:#FFe5e5;}
 .groupMessage {
   display: none;
   position: absolute;
-  background-color: #d6ffcf;
-  min-height: 17px;
+  min-height: 20px;
   padding: 10px;
   border-radius: 30px;
   top: -17px;
   font-size: 12px;
-  right: 50px;
-  width: 106px;
+  right: 52px;
+  width: 110px;
+  color: #0a0;
+  background-color:#c2f5c2;
 }
 
 .groupError {
   z-index: 2;
   display: none;
   position: absolute;
-  background-color: #ffcfcf;
+  color: #f22;
+  background-color: #ffd5dc;
   min-height: 17px;
   padding: 10px;
   border-radius: 30px;
@@ -1799,14 +1810,26 @@ input:checked + .slider:before {
 
 .SelectionModeGroupList div{
   margin:10px;
+  text-align: start;
+}
+
+.SelectionModeGroupList div div{
+  display: flex;
 }
 
 .SelectionModeGroupList a,
-.SelectionModeGroupList p{
+.SelectionModeGroupList p {
   display:inline-block;
   margin:0
 }
 
+.SelectionModeGroupList p {
+  width: 85%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
 .SelectionModeGroup button{
   display:block;
   margin:20px auto;
@@ -1820,6 +1843,13 @@ input:checked + .slider:before {
   cursor: pointer;
 }
 
+.SelectionModeGroup button.unavailable{
+  opacity: 0.3;
+  background: none !important;
+  border: none !important;
+  cursor: auto;
+}
+
 #ConfirmGroupAction{
   font-size:12px;
   font-weight:700;
@@ -1934,7 +1964,12 @@ input:checked + .slider:before {
 .groups .Group-name .icon-pencil{
   position:absolute;
   top: 2px;
-  left: 180px;
+  left: 195px;
+  cursor: pointer;
+}
+
+.groups .Group-name .icon-pencil:hover{
+  color: #ffa744;
 }
 
 #EditGroupName{
@@ -1942,13 +1977,12 @@ input:checked + .slider:before {
   display:none;
 }
 
-@media (hover: hover){
-  .groups .Group-name .icon-pencil{
+.groups .Group-name .icon-pencil{
   display:none;
-  }
-  .groups .Group-name:hover .icon-pencil{
-    display:block;
-  }
+}
+  
+.Group-name:hover .icon-pencil{
+  display:block;
 }
 
 /* Options menu*/
@@ -1976,9 +2010,7 @@ input:checked + .slider:before {
   cursor: pointer;
 }
 
-.groups #GroupPermission,
-.groups #GroupDuplicate,
-.groups #GroupDelete{
+.group-dropdown-option{
  padding:5px 10px;
 }
 
@@ -2042,19 +2074,16 @@ input:checked + .slider:before {
 
 /* Add group */
 
-.showCreateGroup{
-  position:relative;
-  cursor: pointer;
-}
-
 .addGroupBlock{
   position:absolute;
   top:50%;
   transform:translateY(-50%);
-  margin:0 70px;
+  margin: auto;
+  width: 100%;
+  padding: 100px 0;
 }
 
-.groups .showCreateGroup .icon-plus-circled{
+.groups .icon-plus-circled{
   font-size: 19px;
   color: rgb(44,132,195);
   background-color: #CDE9FD;
@@ -2067,10 +2096,17 @@ input:checked + .slider:before {
 
 .groups #addGroup{
   font-weight:700;
+  width: 145px;
+  margin: auto;
 }
 
 .groups #addGroupForm{
+  cursor: pointer;
   position: relative;
+  order: -10000000000;
+}
+
+.groups #addGroupForm form {
   display: none;
 }
 
@@ -2089,6 +2125,7 @@ input:checked + .slider:before {
   margin:10px;
   text-align:center;
   margin-top:18px;
+  position: relative;
 }
 
 .groups fieldset INPUT[type="text"]{
@@ -2122,25 +2159,18 @@ input:checked + .slider:before {
 
 .groups .GroupManagerButtons{
   text-align:center;
-  margin:18px 0;
-}
-
-.groups .GroupManagerButtons a {
-  padding-top :15px;
-  padding-bottom :15px;
+  width: 190px;
+  height: 50px;
+  line-height: 50px;
+  margin-bottom: 10px;
 }
 
 .groups .manage-users,
 .groups .manage-permissions{
-  font-size: 12px;
-  font-weight: 700;
-  padding: 6.5px 20px;
+  font-size: 15px;
   display: inline-block;
 }
 
-.groups .manage-users{
-  padding:6.5px 40px;
-}
 .groups .manage-users,
 .groups .manage-users:hover,
 .groups .manage-permissions,
@@ -2148,17 +2178,13 @@ input:checked + .slider:before {
   text-decoration:none;
 }
 
-.groups .manage-permissions{
-  margin-top:20px;
-}
-
 
 @media (hover: hover){
   .GroupContainer .GroupManagerButtons{
     display:none;
   }
   
-  .GroupContainer:hover .GroupManagerButtons.visible{
+  .GroupContainer:hover .GroupManagerButtons{
     display:block;
   }
 }