2 files changed, 57 insertions, 43 deletions

diff --git a/admin/themes/default/template/intro.tpl b/admin/themes/default/template/intro.tpl
index 3bd1e179b..efebaebdb 100644
--- a/admin/themes/default/template/intro.tpl
+++ b/admin/themes/default/template/intro.tpl
@@ -5,7 +5,8 @@
 jQuery().ready(function(){ldelim}
   jQuery('.cluetip').cluetip({ldelim}
     width: 300,
-    splitTitle: '|'
+    splitTitle: '|',
+    positionBy: 'bottomTop'
   });
 });
 </script>
diff --git a/admin/themes/default/template/menubar.tpl b/admin/themes/default/template/menubar.tpl
index 95fe660c8..ccc0f2e69 100644
--- a/admin/themes/default/template/menubar.tpl
+++ b/admin/themes/default/template/menubar.tpl
@@ -1,56 +1,69 @@
 {known_script id="jquery" src=$ROOT_URL|@cat:"themes/default/js/jquery.packed.js"}
 {known_script id="jquery.ui" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.core.packed.js" }
-{known_script id="jquery-tablednd" src=$ROOT_URL|@cat:"themes/default/js/jquery.tablednd.js"}
+{known_script id="jquery.ui.sortable" src=$ROOT_URL|@cat:"themes/default/js/ui/packed/ui.sortable.packed.js" }
 
-{literal}
 <script type="text/javascript">
-$(function() {
-$('table.table2').tableDnD({
-onDrop:function(table,row) {
-var rows = table.tBodies[0].rows;
-for (var i=0; i<rows.length; i++) {
-  $(rows[i])
-     .attr('class', 'row'+i%2)
-     .find("input:text").attr('value', (i+1)*10);
-}
-}
-});
-});
+  jQuery().ready(function(){ldelim}
+    jQuery(".menuPos").hide();
+    jQuery(".drag_button").show();
+    jQuery(".menuLi").css("cursor","move");
+    jQuery(".menuUl").sortable({ldelim}
+      axis: "y",
+      opacity: 0.8
+    });
+    jQuery("input[name^='hide_']").click(function() {ldelim}
+      men = this.name.split('hide_');
+      if (this.checked) {ldelim}
+        jQuery("#menu_"+men[1]).addClass('menuLi_hidden');
+      } else {ldelim}
+        jQuery("#menu_"+men[1]).removeClass('menuLi_hidden');
+      }
+    });
+    jQuery("#menuOrdering").submit(function(){ldelim}
+      ar = jQuery('.menuUl').sortable('toArray');
+      for(i=0;i<ar.length;i++) {ldelim}
+        men = ar[i].split('menu_');
+        document.getElementsByName('pos_' + men[1])[0].value = i+1;
+      }
+    });
+  });
 </script>
-{/literal}
 
 <div class="titrePage">
   <h2>Menubar</h2>
 </div>
-<div id="debugArea"></div>
-<form method="post" action="{$F_ACTION}" class="properties">
-  <table class="table2" style="width:99%">
-    <thead>
-      <tr class="throw">
-	<td>Id</td>
-	<td>{'Author'|@translate}</td>
-	<td>{'Name'|@translate}</td>
-	<td>{'Position'|@translate}</td>
-	<td>{'Hide'|@translate}</td>
-      </tr>
-    </thead>
-    <tbody>
+
+<form id="menuOrdering" action="{$F_ACTION}" method="post">
+  <ul class="menuUl">
     {foreach from=$blocks item=block name="block_loop"}
-	<tr class="{if $smarty.foreach.block_loop.index is odd}row1{else}row2{/if}">
-	  <td>
-            <img src="{$themeconf.admin_icon_dir}/cat_move.png" class="button drag_button" alt="{'Drag to re-order'|@translate}" title="{'Drag to re-order'|@translate}">
-            {$block.reg->get_id()}
-          </td>
-	  <td>{$block.reg->get_owner()}</td>
-	  <td>{$block.reg->get_name()|@translate}</td>
-	  <td><input type="text" name="pos_{$block.reg->get_id()}" value={math equation="abs(pos)" pos=$block.pos} size="2"></td>
-	  <td><input type="checkbox" name="hide_{$block.reg->get_id()}" {if $block.pos<0}checked="checked"{/if}></td>
-	</tr>
-     {/foreach}
-     </tbody>
-  </table>
-  <p>
+    <li class="menuLi {if $block.pos<0}menuLi_hidden{/if}" id="menu_{$block.reg->get_id()}">
+      <p>
+        <span>
+          <strong>{'Hide'|@translate} <input type="checkbox" name="hide_{$block.reg->get_id()}" {if $block.pos<0}checked="checked"{/if}></strong>
+        </span>
+
+        <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>{$block.reg->get_name()|@translate}</strong> ({$block.reg->get_id()})
+      </p>
+
+      {if $block.reg->get_owner() != 'piwigo'}
+      <p class="menuAuthor">
+        {'Author'|@translate}: <i>{$block.reg->get_owner()}</i>
+      </p>
+      {/if}
+
+      <p class="menuPos">
+        <label>
+          {'Position'|@translate} :
+          <input type="text" size="4" name="pos_{$block.reg->get_id()}" maxlength="4" value="{math equation="abs(pos)" pos=$block.pos}">
+        </label>
+      </p>
+    </li>
+    {/foreach}
+  </ul>
+  <p class="menuSubmit">
     <input type="submit" name="submit" value="{'Submit'|@translate}" {$TAG_INPUT_ENABLED}>
     <input type="submit" name="reset" value="{'Reset'|@translate}" {$TAG_INPUT_ENABLED}>
   </p>
+
 </form>