feature 2581: new design on albums list management.

icons removed, replaced by text links visible on :hover

better ergonomy for automatic order: the "save manual order" submit button
only appears when a change is detected in the album ordering. The "automatic
sort order" becomes a dedicated fieldset, hidden by default, displayed "on
user demand".

new virtual album form displayed only "on user demand"

cat_list, cat_move and permalinks are 3 tabs for the "Albums > Manage" link
in the menubar.

permalinks admin page slightly redesign: fieldsets instead of centered h3,
"on user demand" form to add/modify permalinks.


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

15 files changed, 309 insertions, 166 deletions

diff --git a/admin.php b/admin.php
index 2ab0409f0..61f086c5c 100644
--- a/admin.php
+++ b/admin.php
@@ -196,7 +196,6 @@ $template->assign(
     'U_CONFIG_LANGUAGES' => $link_start.'languages',
     'U_CONFIG_THEMES'=> $link_start.'themes',
     'U_CATEGORIES'=> $link_start.'cat_list',
-    'U_MOVE'=> $link_start.'cat_move',
     'U_CAT_OPTIONS'=> $link_start.'cat_options',
     'U_CAT_UPDATE'=> $link_start.'site_update&site=1',
     'U_RATING'=> $link_start.'rating',
@@ -205,7 +204,6 @@ $template->assign(
     'U_TAGS'=> $link_start.'tags',
     'U_USERS'=> $link_start.'user_list',
     'U_GROUPS'=> $link_start.'group_list',
-    'U_PERMALINKS'=> $link_start.'permalinks',
     'U_RETURN'=> get_gallery_home_url(),
     'U_ADMIN'=> PHPWG_ROOT_PATH.'admin.php',
     'U_LOGOUT'=> PHPWG_ROOT_PATH.'index.php?act=logout',
diff --git a/admin/cat_list.php b/admin/cat_list.php
index c8df189d1..f1d57390b 100644
--- a/admin/cat_list.php
+++ b/admin/cat_list.php
@@ -100,6 +100,13 @@ $navigation.= l10n('Home');
 $navigation.= '</a>';
 
 // +-----------------------------------------------------------------------+
+// | tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+$page['tab'] = 'list';
+include(PHPWG_ROOT_PATH.'admin/include/albums_tab.inc.php');
+
+// +-----------------------------------------------------------------------+
 // |                    virtual categories management                      |
 // +-----------------------------------------------------------------------+
 // request to delete a virtual category
@@ -134,71 +141,68 @@ else if (isset($_POST['submitAdd']))
   }
 }
 // save manual category ordering
-else if (isset($_POST['submitOrder']))
+else if (isset($_POST['submitManualOrder']))
 {
-  if ('manual' == $_POST['order_type'])
-  {
-    asort($_POST['catOrd'], SORT_NUMERIC);
-    save_categories_order(array_keys($_POST['catOrd']));
+  asort($_POST['catOrd'], SORT_NUMERIC);
+  save_categories_order(array_keys($_POST['catOrd']));
 
-    array_push(
-      $page['infos'],
-      l10n('Album manual order was saved')
-      );
-  }
-  else
-  {
-    $query = '
+  array_push(
+    $page['infos'],
+    l10n('Album manual order was saved')
+    );
+}
+else if (isset($_POST['submitAutoOrder']))
+{
+  $query = '
 SELECT id
   FROM '.CATEGORIES_TABLE.'
   WHERE id_uppercat '.
     (!isset($_GET['parent_id']) ? 'IS NULL' : '= '.$_GET['parent_id']).'
 ;';
-    $category_ids = array_from_query($query, 'id');
+  $category_ids = array_from_query($query, 'id');
 
-    if (isset($_POST['recursive']))
-    {
-      $category_ids = get_subcat_ids($category_ids);
-    }
-
-    $categories = array();
-    $names = array();
-    $id_uppercats = array();
+  if (isset($_POST['recursive']))
+  {
+    $category_ids = get_subcat_ids($category_ids);
+  }
+  
+  $categories = array();
+  $names = array();
+  $id_uppercats = array();
   
-    $query = '
+  $query = '
 SELECT id, name, id_uppercat
   FROM '.CATEGORIES_TABLE.'
   WHERE id IN ('.implode(',', $category_ids).')
 ;';
-    $result = pwg_query($query);
-    while ($row = pwg_db_fetch_assoc($result))
-    {
-      array_push(
-        $categories,
-        array(
-          'id' => $row['id'],
-          'id_uppercat' => $row['id_uppercat'],
-          )
-        );
-      array_push(
-        $names,
-        $row['name']
-        );
-    }
-
-    array_multisort(
-      $names,
-      SORT_REGULAR,
-      'asc' == $_POST['ascdesc'] ? SORT_ASC : SORT_DESC,
-      $categories
+  $result = pwg_query($query);
+  while ($row = pwg_db_fetch_assoc($result))
+  {
+    array_push(
+      $categories,
+      array(
+        'id' => $row['id'],
+        'id_uppercat' => $row['id_uppercat'],
+        )
       );
-    save_categories_order($categories);
-
     array_push(
-      $page['infos'],
-      l10n('Albums automatically sorted')
+      $names,
+      $row['name']
       );
   }
+
+  array_multisort(
+    $names,
+    SORT_REGULAR,
+    'asc' == $_POST['ascdesc'] ? SORT_ASC : SORT_DESC,
+    $categories
+    );
+  save_categories_order($categories);
+
+  array_push(
+    $page['infos'],
+    l10n('Albums automatically sorted')
+    );
 }
 
 // +-----------------------------------------------------------------------+
diff --git a/admin/cat_move.php b/admin/cat_move.php
index 1643448f1..d57c5b144 100644
--- a/admin/cat_move.php
+++ b/admin/cat_move.php
@@ -71,6 +71,13 @@ $template->assign(
   );
   
 // +-----------------------------------------------------------------------+
+// | tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+$page['tab'] = 'move';
+include(PHPWG_ROOT_PATH.'admin/include/albums_tab.inc.php');
+
+// +-----------------------------------------------------------------------+
 // |                          Categories display                           |
 // +-----------------------------------------------------------------------+
 
diff --git a/admin/include/albums_tab.inc.php b/admin/include/albums_tab.inc.php
new file mode 100644
index 000000000..3db2d98a3
--- /dev/null
+++ b/admin/include/albums_tab.inc.php
@@ -0,0 +1,35 @@
+<?php
+// +-----------------------------------------------------------------------+
+// | Piwigo - a PHP based photo gallery                                    |
+// +-----------------------------------------------------------------------+
+// | Copyright(C) 2008-2012 Piwigo Team                  http://piwigo.org |
+// | Copyright(C) 2003-2008 PhpWebGallery Team    http://phpwebgallery.net |
+// | Copyright(C) 2002-2003 Pierrick LE GALL   http://le-gall.net/pierrick |
+// +-----------------------------------------------------------------------+
+// | This program is free software; you can redistribute it and/or modify  |
+// | it under the terms of the GNU General Public License as published by  |
+// | the Free Software Foundation                                          |
+// |                                                                       |
+// | This program is distributed in the hope that it will be useful, but   |
+// | WITHOUT ANY WARRANTY; without even the implied warranty of            |
+// | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU      |
+// | General Public License for more details.                              |
+// |                                                                       |
+// | You should have received a copy of the GNU General Public License     |
+// | along with this program; if not, write to the Free Software           |
+// | Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, |
+// | USA.                                                                  |
+// +-----------------------------------------------------------------------+
+
+include_once(PHPWG_ROOT_PATH.'admin/include/tabsheet.class.php');
+
+$my_base_url = get_root_url().'admin.php?page=';
+
+$tabsheet = new tabsheet();
+$tabsheet->add('list', l10n('List'), $my_base_url.'cat_list');
+$tabsheet->add('move', l10n('Move'), $my_base_url.'cat_move');
+$tabsheet->add('permalinks', l10n('Permalinks'), $my_base_url.'permalinks');
+$tabsheet->select($page['tab']);
+$tabsheet->assign();
+
+?>
\ No newline at end of file
diff --git a/admin/permalinks.php b/admin/permalinks.php
index 9e5e8fec9..4beb0dbc6 100644
--- a/admin/permalinks.php
+++ b/admin/permalinks.php
@@ -49,7 +49,7 @@ function parse_sort_variables(
   foreach( $sortable_by as $field)
   {
     $url = $base_url;
-    $disp = '&dArr;'; // TODO: an small image is better
+    $disp = '↓'; // TODO: an small image is better
 
     if ( $field !== @$_GET[$get_param] )
     {
@@ -106,6 +106,14 @@ DELETE FROM '.OLD_PERMALINKS_TABLE.'
 
 $template->set_filename('permalinks', 'permalinks.tpl' );
 
+// +-----------------------------------------------------------------------+
+// | tabs                                                                  |
+// +-----------------------------------------------------------------------+
+
+$page['tab'] = 'permalinks';
+include(PHPWG_ROOT_PATH.'admin/include/albums_tab.inc.php');
+
+
 $query = '
 SELECT
   id, permalink,
diff --git a/admin/themes/clear/icon/cat_move.png b/admin/themes/clear/icon/cat_move.png
index c58178692..b3f937614 100644
--- a/admin/themes/clear/icon/cat_move.png
+++ b/admin/themes/clear/icon/cat_move.png
diff --git a/admin/themes/clear/theme.css b/admin/themes/clear/theme.css
index 042f44042..5a717fcb2 100644
--- a/admin/themes/clear/theme.css
+++ b/admin/themes/clear/theme.css
@@ -116,7 +116,7 @@ INPUT.bigbutton:hover { background-color: #ddd;  color:#0cc; border: 0; }
 .throw  { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; }
 label { cursor:pointer }
 .categoryLi, .menuLi { background: #ddd }
-.virtual_cat, .menuLi_hidden { background: #ccc !important; }
+.menuLi_hidden { background: #ccc !important; }
 a.Piwigo {
   font-family: verdana, arial, helvetica, sans-serif !important;
   font-size: 11px; font-weight: normal; letter-spacing: 0;
@@ -311,3 +311,5 @@ input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hove
   background-color:#ff7700;
   color:white;
 }
+
+p.albumTitle img {margin-bottom:-3px;}
\ No newline at end of file
diff --git a/admin/themes/default/template/admin.tpl b/admin/themes/default/template/admin.tpl
index f9da9fccf..a35aab58a 100644
--- a/admin/themes/default/template/admin.tpl
+++ b/admin/themes/default/template/admin.tpl
@@ -49,9 +49,7 @@ Raphael("menubarUsers", 20, 16).path("").scale(0.6, 0.6, 0, 0).attr({fill: "#464
     <dd>
       <ul>
         <li><a href="{$U_CATEGORIES}">{'Manage'|@translate}</a></li>
-        <li><a href="{$U_MOVE}">{'Move'|@translate}</a></li>
         <li><a href="{$U_CAT_OPTIONS}">{'Properties'|@translate}</a></li>
-        <li><a href="{$U_PERMALINKS}">{'Permalinks'|@translate}</a></li>
       </ul>
     </dd>
   </dl>
diff --git a/admin/themes/default/template/cat_list.tpl b/admin/themes/default/template/cat_list.tpl
index 51c9f9b03..47c32ff75 100644
--- a/admin/themes/default/template/cat_list.tpl
+++ b/admin/themes/default/template/cat_list.tpl
@@ -1,93 +1,118 @@
-{footer_script require='jquery.ui.sortable'}
-jQuery(document).ready(function(){ldelim}
-	jQuery(".catPos").hide();
-	jQuery(".drag_button").show();
-	jQuery(".categoryLi").css("cursor","move");
-	jQuery(".categoryUl").sortable({ldelim}
-		axis: "y",
-		opacity: 0.8
-	});
-	jQuery("#categoryOrdering").submit(function(){ldelim}
-		ar = jQuery('.categoryUl').sortable('toArray');
-		for(i=0;i<ar.length;i++) {ldelim}
-			cat = ar[i].split('cat_');
-			document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
-		}
-	});
-
-	jQuery("input[name=order_type]").click(function () {ldelim}
-		jQuery("#automatic_order_params").hide();
-		if (jQuery("input[name=order_type]:checked").val() == "automatic") {ldelim}
-			jQuery("#automatic_order_params").show();
-		}
-	});
+{footer_script require='jquery.ui.sortable'}{literal}
+jQuery(document).ready(function(){
+  jQuery(".catPos").hide();
+  jQuery(".drag_button").show();
+  jQuery(".categoryLi").css("cursor","move");
+  jQuery(".categoryUl").sortable({
+    axis: "y",
+    opacity: 0.8,
+    update : function() {
+      jQuery("#manualOrder").show();
+      jQuery("#notManualOrder").hide();
+      jQuery("#autoOrder").hide();
+      jQuery("#createAlbum").hide();
+    },
+  });
+
+  jQuery("#categoryOrdering").submit(function(){
+    ar = jQuery('.categoryUl').sortable('toArray');
+    for(i=0;i<ar.length;i++) {
+      cat = ar[i].split('cat_');
+      document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
+    }
+  });
+
+  jQuery("input[name=order_type]").click(function () {
+    jQuery("#automatic_order_params").hide();
+    if (jQuery("input[name=order_type]:checked").val() == "automatic") {
+      jQuery("#automatic_order_params").show();
+    }
+  });
+
+  jQuery("#addAlbumOpen").click(function(){
+    jQuery("#createAlbum").toggle();
+    jQuery("input[name=virtual_name]").focus();
+    jQuery("#autoOrder").hide();
+  });
+
+  jQuery("#addAlbumClose").click(function(){
+    jQuery("#createAlbum").hide();
+  });
+
+
+  jQuery("#autoOrderOpen").click(function(){
+    jQuery("#autoOrder").toggle();
+    jQuery("#createAlbum").hide();
+  });
+
+  jQuery("#autoOrderClose").click(function(){
+    jQuery("#autoOrder").hide();
+  });
+
+  jQuery("#cancelManualOrder").click(function(){
+    jQuery(".categoryUl").sortable("cancel");
+    jQuery("#manualOrder").hide();
+    jQuery("#notManualOrder").show();
+  });
 });
-{/footer_script}
+{/literal}{/footer_script}
+
+<h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Album list management'|@translate}</h2>
 
-<h2>{'Album list management'|@translate}</h2>
+<form id="categoryOrdering" action="{$F_ACTION}" method="post">
+<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
 
-<h3>{$CATEGORIES_NAV}</h3>
+<p class="showCreateAlbum">
+  <span id="notManualOrder">
+    <a href="#" id="addAlbumOpen">{'create a new album'|@translate}</a>
+    | <a href="#" id="autoOrderOpen">{'apply automatic sort order'|@translate}</a>
+  </span>
+  <span id="manualOrder" style="display:none;">
+    <input class="submit" name="submitManualOrder" type="submit" value="{'Save manual order'|@translate}">
+    {'... or '|@translate} <a href="#" id="cancelManualOrder">{'cancel manual order'|@translate}</a>
+  </span>
+</p>
 
-<form id="addVirtual" action="{$F_ACTION}" method="post">
-  <p>
-    <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-    {'Add a virtual album'|@translate} : <input type="text" name="virtual_name">
-    <input class="submit" type="submit" value="{'Submit'|@translate}" name="submitAdd">
-    {if count($categories)>9 }
-    <a href="#EoP" class="button" style="border:0;">
-		<img src="{$themeconf.admin_icon_dir}/page_end.png" title="{'Page end'|@translate}" alt="page_end" style="margin-bottom:-0.6em;"></a>
-    {/if}
+<fieldset id="createAlbum" style="display:none;">
+  <legend>{'create a new album'|@translate}</legend>
+  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+
+  <p><strong>{'Album name'|@translate}</strong>
+    <br><input type="text" name="virtual_name">
   </p>
-</form>
+  <p class="actionButtons">
+    <input class="submit" type="submit" value="{'Create'|@translate}" name="submitAdd">
+    <a href="#" id="addAlbumClose">{'Cancel'|@translate}</a>
+  </p>
+</fieldset>
 
 {if count($categories) }
-<form id="categoryOrdering" action="{$F_ACTION}" method="post">
-  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
 
-  <div class="orderParams">
-    <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}">
-    <label><input type="radio" name="order_type" value="manual" checked="checked"> {'manual order'|@translate}</label>
-    <label><input type="radio" name="order_type" value="automatic"> {'automatic order'|@translate}</label>
-    <span id="automatic_order_params" style="display:none">
-      <select name="ascdesc">
-        <option value="asc">{'ascending'|@translate}</option>
-        <option value="desc">{'descending'|@translate}</option>
-      </select>
-      <label><input type="checkbox" name="recursive"> {'Apply to sub-albums'|@translate}</label>
-    </span>
-  </div>
+<fieldset id="autoOrder" style="display:none;">
+  <legend>{'Automatic sort order'|@translate}</legend>
+  <p><strong>{'Sort order'|@translate}</strong>
+    <br><label><input type="radio" value="asc" name="ascdesc" checked="checked">{'ascending'|@translate}</label>
+    <br><label><input type="radio" value="desc" name="ascdesc">{'descending'|@translate}</label>
+  </p>
+
+  <p>
+    <label><input type="checkbox" name="recursive"> <strong>{'Apply to sub-albums'|@translate}</strong></label>
+  </p>
+
+  <p class="actionButtons">
+    <input class="submit" name="submitAutoOrder" type="submit" value="{'Save order'|@translate}">
+    <a href="#" id="autoOrderClose">{'Cancel'|@translate}</a>
+  </p>
+</fieldset>
 
   <ul class="categoryUl">
 
     {foreach from=$categories item=category}
     <li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
       <!-- category {$category.ID} -->
-      <ul class="categoryActions">
-        {if cat_admin_access($category.ID)}
-        <li><a href="{$category.U_JUMPTO}" title="{'jump to album'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_jump-to.png" alt="{'jump to album'|@translate}"></a></li>
-        {/if}
-        <li><a href="{$category.U_EDIT}" title="{'Edit album'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_edit.png" alt="{'Edit'|@translate}"></a></li>
-        {if isset($category.U_MANAGE_ELEMENTS) }
-        <li><a href="{$category.U_MANAGE_ELEMENTS}" title="{'manage album photos'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_elements.png" alt="{'Photos'|@translate}"></a></li>
-        {/if}
-        <li><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_children.png" alt="{'sub-albums'|@translate}"></a></li>
-        {if isset($category.U_MANAGE_PERMISSIONS) }
-        <li><a href="{$category.U_MANAGE_PERMISSIONS}" title="{'Edit album permissions'|@translate}" ><img src="{$themeconf.admin_icon_dir}/category_permissions.png" alt="{'Permissions'|@translate}"></a></li>
-        {/if}
-        {if isset($category.U_SYNC) }
-        <li><a href="{$category.U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/synchronize.png" alt="{'Synchronize'|@translate}"></a></li>
-        {/if}
-        {if isset($category.U_DELETE) }
-        <li><a href="{$category.U_DELETE}" title="{'delete album'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"><img src="{$themeconf.admin_icon_dir}/category_delete.png" alt="{'delete album'|@translate}"></a></li>
-        {/if}
-      </ul>
-
-      <p>
-      <img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}">
+      <p class="albumTitle">
+<img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" style="display:none;" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}">
       <strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
-      {if $category.IS_VIRTUAL}
-      <img src="{$themeconf.admin_icon_dir}/virt_category.png" alt="{'Virtual album'|@translate}">
-      {/if}
       </p>
 
       <p class="catPos">
@@ -97,10 +122,29 @@ jQuery(document).ready(function(){ldelim}
         </label>
       </p>
 
+<p class="albumActions">
+        <a href="{$category.U_EDIT}">{'Edit'|@translate}</a>
+        {if isset($category.U_MANAGE_ELEMENTS) }
+        | <a href="{$category.U_MANAGE_ELEMENTS}">{'manage album photos'|@translate}</a>
+        {/if}
+        | <a href="{$category.U_CHILDREN}">{'manage sub-albums'|@translate}</a>
+        {if isset($category.U_MANAGE_PERMISSIONS) }
+        | <a href="{$category.U_MANAGE_PERMISSIONS}">{'Permissions'|@translate}</a>
+        {/if}
+        {if isset($category.U_SYNC) }
+        | <a href="{$category.U_SYNC}">{'Synchronize'|@translate}</a>
+        {/if}
+        {if isset($category.U_DELETE) }
+        | <a href="{$category.U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete album'|@translate}</a>
+{/if}
+{if cat_admin_access($category.ID)}
+| 
+<a href="{$category.U_JUMPTO}">{'jump to album'|@translate} →</a>
+{/if}
+</p>
+
     </li>
     {/foreach}
   </ul>
-</form>
-
-<a name="EoP"></a>
 {/if}
+</form>
diff --git a/admin/themes/default/template/cat_move.tpl b/admin/themes/default/template/cat_move.tpl
index d0dc98e13..d8a9c9430 100644
--- a/admin/themes/default/template/cat_move.tpl
+++ b/admin/themes/default/template/cat_move.tpl
@@ -1,6 +1,3 @@
-
-{include file='include/resize.inc.tpl'}
-
 <div class="titrePage">
   <h2>{'Move albums'|@translate}</h2>
 </div>
@@ -28,9 +25,8 @@
 
   </fieldset>
 
-  <p>
+  <p style="text-align:left;">
     <input class="submit" type="submit" name="submit" value="{'Submit'|@translate}">
-    <input class="submit" type="reset" name="reset" value="{'Reset'|@translate}">
   </p>
 
 </form>
diff --git a/admin/themes/default/template/permalinks.tpl b/admin/themes/default/template/permalinks.tpl
index 57d8afa37..8ec0f3a6d 100644
--- a/admin/themes/default/template/permalinks.tpl
+++ b/admin/themes/default/template/permalinks.tpl
@@ -1,32 +1,62 @@
+{footer_script require='jquery.ui.sortable'}{literal}
+jQuery(document).ready(function(){
+  jQuery("#addPermalinkOpen").click(function(){
+    jQuery("#addPermalink").show();
+    jQuery("#showAddPermalink").hide();
+  });
+
+  jQuery("#addPermalinkClose").click(function(){
+    jQuery("#addPermalink").hide();
+    jQuery("#showAddPermalink").show();
+  });
+});
+{/literal}{/footer_script}
+
+{literal}
+<style>
+#showAddPermalink {text-align:left;margin-left:1em;margin-top:0;}
+form fieldset p {margin:0 0 1em 0;}
+form fieldset p.actionButtons {margin-bottom:0}
+</style>
+{/literal}
+
 <div class="titrePage">
   <h2>{'Permalinks'|@translate}</h2>
 </div>
 
-<form method="post" action="">
-<fieldset><legend>{'Add/delete a permalink'|@translate}</legend>
-  <label>{'Album'|@translate}:
+<p id="showAddPermalink"><a href="#" id="addPermalinkOpen">{'Add/delete a permalink'|@translate}</a></p>
+
+<form method="post" action="" id="addPermalink" style="display:none">
+<fieldset>
+  <legend>{'Add/delete a permalink'|@translate}</legend>
+  <p>
+    <strong>{'Album'|@translate}</strong>
+    <br>
     <select name="cat_id">
       <option value="0">------</option>
       {html_options options=$categories selected=$categories_selected}
     </select>
-  </label>
-
-  <label>{'Permalink'|@translate}:
-    <input name="permalink">
-  </label>
+  </p>
 
-  <label>{'Save to permalink history'|@translate}:
-    <input type="checkbox" name="save" checked="checked">
-  </label>
+  <p>
+    <strong>{'Permalink'|@translate}</strong>
+    <br><input name="permalink">
+  </p>
 
   <p>
+    <label><input type="checkbox" name="save" checked="checked"> <strong>{'Save to permalink history'|@translate}</strong></label>
+  </p>
+
+  <p class="actionButtons">
     <input type="submit" class="submit" name="set_permalink" value="{'Submit'|@translate}">
+    <a href="#" id="addPermalinkClose">{'Cancel'|@translate}</a>
   </p>
-  </fieldset>
+</fieldset>
 </form>
 
-<h3>{'Permalinks'|@translate}</h3>
-<table class="table2">
+<fieldset>
+  <legend>{'Permalinks'|@translate}</legend>
+<table class="table2" style="margin:0">
 	<tr class="throw">
 		<td>Id {$SORT_ID}</td>
 		<td>{'Album'|@translate} {$SORT_NAME}</td>
@@ -40,16 +70,18 @@
 	</tr>
 {/foreach}
 </table>
+</fieldset>
 
-<h3>{'Permalink history'|@translate} <a name="old_permalinks"></a></h3>
-<table class="table2">
+<fieldset>
+  <legend>{'Permalink history'|@translate} <a name="old_permalinks"></a></legend>
+<table class="table2" style="margin:0">
 	<tr class="throw">
 		<td>Id {$SORT_OLD_CAT_ID}</td>
 		<td>{'Album'|@translate}</td>
 		<td>{'Permalink'|@translate} {$SORT_OLD_PERMALINK}</td>
 		<td>{'Deleted on'|@translate} {$SORT_OLD_DATE_DELETED}</td>
 		<td>{'Last hit'|@translate} {$SORT_OLD_LAST_HIT}</td>
-		<td style="width:20px;">{'Hit'|@translate} {$SORT_OLD_HIT}</td>
+		<td>{'Hit'|@translate} {$SORT_OLD_HIT}</td>
 		<td style="width:5px;"></td>
 	</tr>
 {foreach from=$deleted_permalinks item=permalink}
@@ -64,3 +96,4 @@
 	</tr>
 {/foreach}
 </table>
+</fieldset>
\ No newline at end of file
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index dd49c3ee4..53f220fb6 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -151,26 +151,24 @@ SELECT.categoryList {
 	width: 100%;
 }
 
-FORM#categoryOrdering {
-	padding-left: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
-	padding-right: 1em; /* same as FIELDSET margin (there is no fieldset in this form) */
-}
 FORM#categoryOrdering p {
 	text-align: left;
-	margin-top: 1em;
-	margin-bottom: 1em;
+	/* margin-top: 1em; */
+	/* margin-bottom: 1em; */
 }
 UL.categoryUl {
 	list-style: none;
 	padding: 0;
-	margin: 0;
+	margin: 1em;
 }
 
 LI.categoryLi {
+/*
 	width: 100%;
-	border: 1px solid #666;
-	padding: 0px 5px;
+*/
+	padding: 5px;
 	margin-bottom: 5px;
+  border-radius:5px;
 }
 
 FORM#categoryOrdering UL.categoryActions {
@@ -1072,4 +1070,12 @@ p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
 
 #pendingComments .bottomButtons {
   text-align:left;
-}
\ No newline at end of file
+}
+
+FORM#categoryOrdering p.albumTitle {margin:0;}
+FORM#categoryOrdering p.albumActions {visibility:hidden; margin:0}
+FORM#categoryOrdering .categoryLi:hover p.albumActions {visibility:visible;}
+
+.showCreateAlbum {text-align:left; margin:0 1em 1em 1em;line-height:22px;}
+#autoOrder p, #createAlbum p {text-align:left; margin:0 0 1em 0;}
+#autoOrder p.actionButtons, #createAlbum p.actionButtons {margin-bottom:0;}
\ No newline at end of file
diff --git a/admin/themes/roma/theme.css b/admin/themes/roma/theme.css
index 02830f05e..238148a4b 100644
--- a/admin/themes/roma/theme.css
+++ b/admin/themes/roma/theme.css
@@ -85,8 +85,8 @@ INPUT[type="submit"]:hover , INPUT[type="reset"]:hover  { cursor: pointer; }
 INPUT.bigbutton:hover { background-color: #222;  color:#f33; border: 0; }
 .throw  { font-size: 120%; line-height: 26px; padding-top: 10px; font-weight: bold; color: #ff3363; }
 label { cursor:pointer }
-.categoryLi, .menuLi { background: #222 }
-.virtual_cat, .menuLi_hidden { background: #333 !important; }
+.categoryLi, .menuLi { background: #333 }
+.menuLi_hidden { background: #333 !important; }
 a.Piwigo {
   font-family: verdana, arial, helvetica, sans-serif !important;
   font-size: 11px; font-weight: normal; letter-spacing: 0;
diff --git a/language/en_UK/admin.lang.php b/language/en_UK/admin.lang.php
index 2fada1f0e..586aaae85 100644
--- a/language/en_UK/admin.lang.php
+++ b/language/en_UK/admin.lang.php
@@ -846,4 +846,10 @@ $lang['Not cropped correctly?'] = 'Not cropped correctly?';
 $lang['Center of interest'] = 'Center of interest';
 $lang['Move to album'] = 'Move to album';
 $lang['You can activate only one mobile theme.'] = 'You can activate only one mobile theme.';
+$lang['Automatic sort order'] = 'Automatic sort order';
+$lang['apply automatic sort order'] = 'apply automatic sort order';
+$lang['Save manual order'] = 'Save manual order';
+$lang['cancel manual order'] = 'cancel manual order';
+$lang['Cancel'] = 'Cancel';
+$lang['List'] = 'List';
 ?>
\ No newline at end of file
diff --git a/language/fr_FR/admin.lang.php b/language/fr_FR/admin.lang.php
index 4aa787dda..6e87d2e58 100644
--- a/language/fr_FR/admin.lang.php
+++ b/language/fr_FR/admin.lang.php
@@ -847,4 +847,10 @@ $lang['You can activate only one mobile theme.'] = 'Vous ne pouvez activer qu\'u
 $lang['Center of interest'] = 'Centre d\'interêt';
 $lang['Not cropped correctly?'] = 'La photo n\'est pas recadrée corectement ?';
 $lang['Photo name'] = 'Nom de la photo';
+$lang['Automatic sort order'] = 'Ordre de tri automatique';
+$lang['apply automatic sort order'] = 'appliquer un ordre de tri automatique';
+$lang['Save manual order'] = 'Sauvegarder l\'ordre manuel';
+$lang['cancel manual order'] = 'annuler l\'ordre manuel';
+$lang['Cancel'] = 'Annuler';
+$lang['List'] = 'Liste';
 ?>
\ No newline at end of file