Ignore:
Timestamp:
Feb 20, 2012, 8:28:43 PM (12 years ago)
Author:
plg
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/admin/themes/default/template/cat_list.tpl

    r12677 r13282  
    1 {footer_script require='jquery.ui.sortable'}
    2 jQuery(document).ready(function(){ldelim}
    3         jQuery(".catPos").hide();
    4         jQuery(".drag_button").show();
    5         jQuery(".categoryLi").css("cursor","move");
    6         jQuery(".categoryUl").sortable({ldelim}
    7                 axis: "y",
    8                 opacity: 0.8
    9         });
    10         jQuery("#categoryOrdering").submit(function(){ldelim}
    11                 ar = jQuery('.categoryUl').sortable('toArray');
    12                 for(i=0;i<ar.length;i++) {ldelim}
    13                         cat = ar[i].split('cat_');
    14                         document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
    15                 }
    16         });
     1{footer_script require='jquery.ui.sortable'}{literal}
     2jQuery(document).ready(function(){
     3  jQuery(".catPos").hide();
     4  jQuery(".drag_button").show();
     5  jQuery(".categoryLi").css("cursor","move");
     6  jQuery(".categoryUl").sortable({
     7    axis: "y",
     8    opacity: 0.8,
     9    update : function() {
     10      jQuery("#manualOrder").show();
     11      jQuery("#notManualOrder").hide();
     12      jQuery("#autoOrder").hide();
     13      jQuery("#createAlbum").hide();
     14    },
     15  });
    1716
    18         jQuery("input[name=order_type]").click(function () {ldelim}
    19                 jQuery("#automatic_order_params").hide();
    20                 if (jQuery("input[name=order_type]:checked").val() == "automatic") {ldelim}
    21                         jQuery("#automatic_order_params").show();
    22                 }
    23         });
     17  jQuery("#categoryOrdering").submit(function(){
     18    ar = jQuery('.categoryUl').sortable('toArray');
     19    for(i=0;i<ar.length;i++) {
     20      cat = ar[i].split('cat_');
     21      document.getElementsByName('catOrd[' + cat[1] + ']')[0].value = i;
     22    }
     23  });
     24
     25  jQuery("input[name=order_type]").click(function () {
     26    jQuery("#automatic_order_params").hide();
     27    if (jQuery("input[name=order_type]:checked").val() == "automatic") {
     28      jQuery("#automatic_order_params").show();
     29    }
     30  });
     31
     32  jQuery("#addAlbumOpen").click(function(){
     33    jQuery("#createAlbum").toggle();
     34    jQuery("input[name=virtual_name]").focus();
     35    jQuery("#autoOrder").hide();
     36  });
     37
     38  jQuery("#addAlbumClose").click(function(){
     39    jQuery("#createAlbum").hide();
     40  });
     41
     42
     43  jQuery("#autoOrderOpen").click(function(){
     44    jQuery("#autoOrder").toggle();
     45    jQuery("#createAlbum").hide();
     46  });
     47
     48  jQuery("#autoOrderClose").click(function(){
     49    jQuery("#autoOrder").hide();
     50  });
     51
     52  jQuery("#cancelManualOrder").click(function(){
     53    jQuery(".categoryUl").sortable("cancel");
     54    jQuery("#manualOrder").hide();
     55    jQuery("#notManualOrder").show();
     56  });
    2457});
    25 {/footer_script}
     58{/literal}{/footer_script}
    2659
    27 <h2>{'Album list management'|@translate}</h2>
     60<h2><span style="letter-spacing:0">{$CATEGORIES_NAV}</span> &#8250; {'Album list management'|@translate}</h2>
    2861
    29 <h3>{$CATEGORIES_NAV}</h3>
     62<form id="categoryOrdering" action="{$F_ACTION}" method="post">
     63<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
    3064
    31 <form id="addVirtual" action="{$F_ACTION}" method="post">
    32   <p>
    33     <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
    34     {'Add a virtual album'|@translate} : <input type="text" name="virtual_name">
    35     <input class="submit" type="submit" value="{'Submit'|@translate}" name="submitAdd">
    36     {if count($categories)>9 }
    37     <a href="#EoP" class="button" style="border:0;">
    38                 <img src="{$themeconf.admin_icon_dir}/page_end.png" title="{'Page end'|@translate}" alt="page_end" style="margin-bottom:-0.6em;"></a>
    39     {/if}
     65<p class="showCreateAlbum">
     66  <span id="notManualOrder">
     67    <a href="#" id="addAlbumOpen">{'create a new album'|@translate}</a>
     68    | <a href="#" id="autoOrderOpen">{'apply automatic sort order'|@translate}</a>
     69  </span>
     70  <span id="manualOrder" style="display:none;">
     71    <input class="submit" name="submitManualOrder" type="submit" value="{'Save manual order'|@translate}">
     72    {'... or '|@translate} <a href="#" id="cancelManualOrder">{'cancel manual order'|@translate}</a>
     73  </span>
     74</p>
     75
     76<fieldset id="createAlbum" style="display:none;">
     77  <legend>{'create a new album'|@translate}</legend>
     78  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
     79
     80  <p><strong>{'Album name'|@translate}</strong>
     81    <br><input type="text" name="virtual_name">
    4082  </p>
    41 </form>
     83  <p class="actionButtons">
     84    <input class="submit" type="submit" value="{'Create'|@translate}" name="submitAdd">
     85    <a href="#" id="addAlbumClose">{'Cancel'|@translate}</a>
     86  </p>
     87</fieldset>
    4288
    4389{if count($categories) }
    44 <form id="categoryOrdering" action="{$F_ACTION}" method="post">
    45   <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
    4690
    47   <div class="orderParams">
    48     <input class="submit" name="submitOrder" type="submit" value="{'Save order'|@translate}">
    49     <label><input type="radio" name="order_type" value="manual" checked="checked"> {'manual order'|@translate}</label>
    50     <label><input type="radio" name="order_type" value="automatic"> {'automatic order'|@translate}</label>
    51     <span id="automatic_order_params" style="display:none">
    52       <select name="ascdesc">
    53         <option value="asc">{'ascending'|@translate}</option>
    54         <option value="desc">{'descending'|@translate}</option>
    55       </select>
    56       <label><input type="checkbox" name="recursive"> {'Apply to sub-albums'|@translate}</label>
    57     </span>
    58   </div>
     91<fieldset id="autoOrder" style="display:none;">
     92  <legend>{'Automatic sort order'|@translate}</legend>
     93  <p><strong>{'Sort order'|@translate}</strong>
     94    <br><label><input type="radio" value="asc" name="ascdesc" checked="checked">{'ascending'|@translate}</label>
     95    <br><label><input type="radio" value="desc" name="ascdesc">{'descending'|@translate}</label>
     96  </p>
     97
     98  <p>
     99    <label><input type="checkbox" name="recursive"> <strong>{'Apply to sub-albums'|@translate}</strong></label>
     100  </p>
     101
     102  <p class="actionButtons">
     103    <input class="submit" name="submitAutoOrder" type="submit" value="{'Save order'|@translate}">
     104    <a href="#" id="autoOrderClose">{'Cancel'|@translate}</a>
     105  </p>
     106</fieldset>
    59107
    60108  <ul class="categoryUl">
    … …  
    63111    <li class="categoryLi{if $category.IS_VIRTUAL} virtual_cat{/if}" id="cat_{$category.ID}">
    64112      <!-- category {$category.ID} -->
    65       <ul class="categoryActions">
    66         {if cat_admin_access($category.ID)}
    67         <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>
    68         {/if}
    69         <li><a href="{$category.U_EDIT}" title="{'Edit album'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_edit.png" alt="{'Edit'|@translate}"></a></li>
    70         {if isset($category.U_MANAGE_ELEMENTS) }
    71         <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>
    72         {/if}
    73         <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>
    74         {if isset($category.U_MANAGE_PERMISSIONS) }
    75         <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>
    76         {/if}
    77         {if isset($category.U_SYNC) }
    78         <li><a href="{$category.U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/synchronize.png" alt="{'Synchronize'|@translate}"></a></li>
    79         {/if}
    80         {if isset($category.U_DELETE) }
    81         <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>
    82         {/if}
    83       </ul>
    84 
    85       <p>
    86       <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}">
     113      <p class="albumTitle">
     114<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}">
    87115      <strong><a href="{$category.U_CHILDREN}" title="{'manage sub-albums'|@translate}">{$category.NAME}</a></strong>
    88       {if $category.IS_VIRTUAL}
    89       <img src="{$themeconf.admin_icon_dir}/virt_category.png" alt="{'Virtual album'|@translate}">
    90       {/if}
    91116      </p>
    92117
    … …  
    98123      </p>
    99124
     125<p class="albumActions">
     126        <a href="{$category.U_EDIT}">{'Edit'|@translate}</a>
     127        {if isset($category.U_MANAGE_ELEMENTS) }
     128        | <a href="{$category.U_MANAGE_ELEMENTS}">{'manage album photos'|@translate}</a>
     129        {/if}
     130        | <a href="{$category.U_CHILDREN}">{'manage sub-albums'|@translate}</a>
     131        {if isset($category.U_MANAGE_PERMISSIONS) }
     132        | <a href="{$category.U_MANAGE_PERMISSIONS}">{'Permissions'|@translate}</a>
     133        {/if}
     134        {if isset($category.U_SYNC) }
     135        | <a href="{$category.U_SYNC}">{'Synchronize'|@translate}</a>
     136        {/if}
     137        {if isset($category.U_DELETE) }
     138        | <a href="{$category.U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete album'|@translate}</a>
     139{/if}
     140{if cat_admin_access($category.ID)}
     141|
     142<a href="{$category.U_JUMPTO}">{'jump to album'|@translate} →</a>
     143{/if}
     144</p>
     145
    100146    </li>
    101147    {/foreach}
    102148  </ul>
     149{/if}
    103150</form>
    104 
    105 <a name="EoP"></a>
    106 {/if}
Note: See TracChangeset for help on using the changeset viewer.