feature 2890: small changes to the new design of group manager. Tab (with

icon), javascript open for "add group" form, use a "link style" for
"Permissions" on each album, add icon for "Permissions" link, use same colors
for "selected" items as for photos batch manager or comments manager, replace
"-" by "·" and make it less visible (softer color) for user separator.


git-svn-id: http://piwigo.org/svn/trunk@25449 68402e56-0260-453c-a942-63ccdbb3a9ee

admin/group_list.php

@@ -28,6 +28,19 @@ if( !defined("PHPWG_ROOT_PATH") )
 
 include_once(PHPWG_ROOT_PATH.'admin/include/functions.php');
 
+// +-----------------------------------------------------------------------+
+// | tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+include_once(PHPWG_ROOT_PATH.'admin/include/tabsheet.class.php');
+
+$my_base_url = get_root_url().'admin.php?page=';
+
+$tabsheet = new tabsheet();
+$tabsheet->set_id('groups');
+$tabsheet->select('group_list');
+$tabsheet->assign();
+
 // +-----------------------------------------------------------------------+
 // | Check Access and exit when user status is not ok                      |
 // +-----------------------------------------------------------------------+
@@ -400,7 +413,7 @@ SELECT username
       'ID' => $row['id'],
       'IS_DEFAULT' => (get_boolean($row['is_default']) ? ' ['.l10n('default').']' : ''),
       'NB_MEMBERS' => count($members),
-      'L_MEMBERS' => implode(' - ', $members),
+      'L_MEMBERS' => implode(' <span class="userSeparator">&middot;</span> ', $members),
       'MEMBERS' => l10n_dec('%d member', '%d members', count($members)),
       'U_MEMBERS' => $members_url.$row['id'],
       'U_DELETE' => $del_url.$row['id'].'&amp;pwg_token='.get_pwg_token(),

admin/include/add_core_tabs.inc.php

@@ -65,7 +65,11 @@ function add_core_tabs($sheets, $tab_id)
     case 'users':
       $sheets[''] = array('caption' => '<span class="icon-users"> </span>'.l10n('User list'), 'url' => '');
       break;
-      
+
+    case 'groups':
+      $sheets[''] = array('caption' => '<span class="icon-group"> </span>'.l10n('Groups'), 'url' => '');
+      break;
+
     case 'configuration':
       global $conf_link;
       $sheets['main'] = array('caption' => l10n('General'), 'url' => $conf_link.'main');

admin/themes/clear/theme.css

@@ -329,6 +329,10 @@ p.albumTitle img {margin-bottom:-3px;}
   background-color:#ccc;
 }
 label>p.group_select {
-  color: #666;
-  background-color:#F9F9F9;
+  color: #000;
+  background-color:#C2F5C2;
+}
+
+.userSeparator {
+  color:#999;
 }

admin/themes/default/template/group_list.tpl

@@ -1,6 +1,20 @@
 {footer_script}
 {literal}
 $(document).ready(function() {
+  /**
+   * Add group
+   */
+  jQuery("#addGroup").click(function() {
+    jQuery("#addGroupForm").toggle();
+    jQuery("input[name=groupname]").focus();
+    return false;
+  });
+
+  jQuery("#addGroupClose").click(function() {
+    jQuery("#addGroupForm").hide();
+    return false;
+  });
+
   $('.groups input').change(function () { $(this).parent('p').toggleClass('group_select'); });
   $(".grp_action").hide();
   $("input.group_selection").click(function() {
@@ -51,18 +65,29 @@ $(document).ready(function() {
   <h2>{'Group management'|@translate}</h2>
 </div>
 
-<form method="post" name="add_user" action="{$F_ADD_ACTION}" class="properties">
+<p class="showCreateAlbum" id="showAddGroup">
+  <a class="icon-plus-circled" href="#" id="addGroup">{'Add group'|translate}</a>
+</p>
+
+<form method="post" style="display:none" id="addGroupForm" name="add_user" action="{$F_ADD_ACTION}" class="properties">
   <fieldset>
     <legend>{'Add group'|@translate}</legend>
-    <span class="property">
-      <label for="groupname">{'Group name'|@translate}</label>
-    </span>
-    <input type="text" id="groupname" name="groupname" maxlength="50" size="20">
-		<input type="submit" name="submit_add" value="{'Add'|@translate}">
-		<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+
+    <p>
+      <strong>{'Group name'|translate}</strong><br>
+      <input type="text" name="groupname" maxlength="50" size="20">
+    </p>
+
+    <p class="actionButtons">
+      <input class="submit" name="submit_add" type="submit" value="{'Add'|translate}">
+      <a href="#" id="addGroupClose">{'Cancel'|@translate}</a>
+    </p>
+
+    <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
 
   </fieldset>
 </form>
+
 <form method="post" name="add_user" action="{$F_ADD_ACTION}" class="properties">
   <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
 
@@ -72,7 +97,7 @@ $(document).ready(function() {
     <li>
       <label><p>{$group.NAME}<i><small>{$group.IS_DEFAULT}</small></i><input class="group_selection" name="group_selection[]" type="checkbox" value="{$group.ID}"></p></label>
       <p class="list_user">{if $group.MEMBERS>0}<a href="{$group.U_MEMBERS}" title="{'Manage the members'|@translate}">{$group.MEMBERS}</a><br>{$group.L_MEMBERS}{else}{$group.MEMBERS}{/if}</p>
-      <a class="buttonLike group_perm" href="{$group.U_PERM}" title="{'Permissions'|@translate}">{'Manage Permissions'|@translate}</a>
+      <a class="icon-lock group_perm" href="{$group.U_PERM}" title="{'Permissions'|@translate}">{'Permissions'|translate}</a>
     </li>
     {/foreach}
     {/if}

admin/themes/roma/theme.css

@@ -303,10 +303,14 @@ div.token-input-dropdown ul li.token-input-selected-dropdown-item {background-co
   background-color:#111;
 }
 label>p.group_select {
-  color: #111;
-  background-color:#ccc;
+  color: #fff;
+  background-color:#555;
+}
+
+.userSeparator {
+  color:#666;
 }
 
 #configContent fieldset:not(.no-border) {
   border-top-color:#444;
-}
+}