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

8 files changed, 194 insertions, 115 deletions

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;