Ignore:
Timestamp:
Feb 10, 2012, 11:52:07 AM (12 years ago)
Author:
plg
Message:

feature 2564: redesign on photo administration screen.

  • one screen with several tabs (for now: properties + coi)
  • double select boxes for album associations and representation have been converted to simple multiple select boxes with jQuery Chosen
  • more details about the photo in an introduction text
Location:
trunk/admin/themes/default/template
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r13052 r13077  
    44{combine_script id='jquery.jcrop' load='footer' require='jquery' path='themes/default/js/plugins/jquery.Jcrop.min.js'}
    55
    6 <h2>{'Center of interest'|@translate}</h2>
    7 <div>
    8 <a href="{$U_EDIT}">{'Edit photo information'|@translate}</a>
    9 </div>
     6<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
    107
    118<form method="post">

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

    r13038 r13077  
    22{include file='include/dbselect.inc.tpl'}
    33{include file='include/datepicker.inc.tpl'}
     4
     5{combine_script id='jquery.chosen' load='footer' path='themes/default/js/plugins/chosen.jquery.min.js'}
     6{combine_css path="themes/default/js/plugins/chosen.css"}
     7
     8{footer_script}{literal}
     9jQuery(document).ready(function() {
     10  jQuery(".chzn-select").chosen();
     11});
     12{/literal}{/footer_script}
    413
    514{combine_script id='jquery.tokeninput' load='async' require='jquery' path='themes/default/js/plugins/jquery.tokeninput.js'}
    … …  
    2534{/footer_script}
    2635
    27 <h2>{'Edit photo information'|@translate}</h2>
     36<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
    2837
    29 <img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
    30 
    31 <ul class="categoryActions">
    32   {if isset($U_JUMPTO) }
    33   <li><a href="{$U_JUMPTO}" title="{'jump to photo'|@translate}"><img src="{$themeconf.admin_icon_dir}/category_jump-to.png" alt="{'jump to photo'|@translate}"></a></li>
    34   {/if}
    35   {if !url_is_remote($PATH)}
    36   <li><a href="{$U_SYNC}" title="{'Synchronize'|@translate}"><img src="{$themeconf.admin_icon_dir}/sync_metadata.png" alt="{'Synchronize'|@translate}"></a></li>
    37 
    38   <li><a href="{$U_DELETE}" title="{'delete photo'|@translate}"><img src="{$ROOT_URL}{$themeconf.admin_icon_dir}/category_delete.png" alt="{'delete photo'|@translate}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');"></a></li>
    39   {/if}
    40 </ul>
    41 
    42 <form action="{$F_ACTION}" method="post" id="properties">
     38<form action="{$F_ACTION}" method="post" id="catModify">
    4339
    4440  <fieldset>
    … …  
    4844
    4945      <tr>
    50         <td><strong>{'Path'|@translate}</strong></td>
    51         <td>{$PATH}</td>
    52       </tr>
     46        <td id="albumThumbnail">
     47<img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
     48        </td>
    5349
    54       <tr>
    55         <td><strong>{'Post date'|@translate}</strong></td>
    56         <td>{$REGISTRATION_DATE}</td>
    57       </tr>
     50        <td id="albumLinks">
     51<p style="text-align:left">{$INTRO}</p>
    5852
    59       <tr>
    60         <td><strong>{'Dimensions'|@translate}</strong></td>
    61         <td>{$DIMENSIONS}</td>
    62       </tr>
     53<ul style="padding-left:15px;">
     54{if isset($U_JUMPTO) }
     55  <li><a href="{$U_JUMPTO}">{'jump to photo'|@translate} →</a></li>
     56{/if}
    6357
    64       <tr>
    65         <td><strong>{'Filesize'|@translate}</strong></td>
    66         <td>{$FILESIZE}</td>
    67       </tr>
     58{if !url_is_remote($PATH)}
     59  <li><a href="{$U_SYNC}">{'Synchronize metadata'|@translate}</a></li>
    6860
    69       <tr>
    70         <td><strong>{'Storage album'|@translate}</strong></td>
    71         <td>{$STORAGE_CATEGORY}</td>
    72       </tr>
     61  <li><a href="{$U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete photo'|@translate}</a></li>
     62  {/if}
    7363
    74       {if isset($related_categories) }
    75       <tr>
    76         <td><strong>{'Linked albums'|@translate}</strong></td>
    77         <td>
    78           <ul>
    79             {foreach from=$related_categories item=name}
    80             <li>{$name}</li>
    81             {/foreach}
    82           </ul>
     64</ul>
    8365        </td>
    8466      </tr>
    85       {/if}
    86 {if isset($U_COI)}
    87       <tr>
    88         <td></td>
    89         <td><a href="{$U_COI}">{'Not cropped correctly?'|@translate}</a></td>
    90       </tr>
    91 {/if}
    9267    </table>
    9368
    … …  
    9772    <legend>{'Properties'|@translate}</legend>
    9873
    99     <table>
     74    <p>
     75      <strong>{'Title'|@translate}</strong>
     76      <br>
     77      <input type="text" class="large" name="name" value="{$NAME}">
     78    </p>
    10079
    101       <tr>
    102         <td><strong>{'Name'|@translate}</strong></td>
    103         <td><input type="text" class="large" name="name" value="{$NAME}"></td>
    104       </tr>
     80    <p>
     81      <strong>{'Author'|@translate}</strong>
     82      <br>
     83      <input type="text" class="large" name="author" value="{$AUTHOR}">
     84    </p>
    10585
    106       <tr>
    107         <td><strong>{'Author'|@translate}</strong></td>
    108         <td><input type="text" class="large" name="author" value="{$AUTHOR}"></td>
    109       </tr>
     86    <p>
     87      <strong>{'Creation date'|@translate}</strong>
     88      <br>
     89      <select id="date_creation_day" name="date_creation_day">
     90        <option value="0">--</option>
     91{section name=day start=1 loop=32}
     92        <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
     93{/section}
     94      </select>
    11095
    111       <tr>
    112         <td><strong>{'Creation date'|@translate}</strong></td>
    113         <td>
    114           <label><input type="radio" name="date_creation_action" value="unset"> {'unset'|@translate}</label>
    115           <input type="radio" name="date_creation_action" value="set" id="date_creation_action_set"> {'set to'|@translate}
    116           <select id="date_creation_day" name="date_creation_day">
    117             <option value="0">--</option>
    118             {section name=day start=1 loop=32}
    119               <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
    120             {/section}
    121           </select>
    122           <select id="date_creation_month" name="date_creation_month">
    123             {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
    124           </select>
    125           <input id="date_creation_year"
    126                  name="date_creation_year"
    127                  type="text"
    128                  size="4"
    129                  maxlength="4"
    130                  value="{$DATE_CREATION_YEAR_VALUE}">
    131           <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
    132         </td>
    133       </tr>
     96      <select id="date_creation_month" name="date_creation_month">
     97        {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
     98      </select>
    13499
    135       <tr>
    136         <td><strong>{'Tags'|@translate}</strong></td>
    137         <td>
     100      <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
     101      <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
     102    <a href="#" id="unset_date_creation" style="display:none">unset</a>
     103    </p>
     104
     105    <p>
     106      <strong>{'Linked albums'|@translate}</strong>
     107      <br>
     108      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="associate[]">
     109        {html_options options=$associate_options selected=$associate_options_selected}
     110      </select>
     111    </p>
     112
     113    <p>
     114      <strong>{'Representation of albums'|@translate}</strong>
     115      <br>
     116      <select data-placeholder="Select albums..." class="chzn-select" multiple style="width:700px;" name="represent[]">
     117        {html_options options=$represent_options selected=$represent_options_selected}
     118      </select>
     119    </p>
     120
     121    <p>
     122      <strong>{'Tags'|@translate}</strong>
     123      <br>
    138124<select id="tags" name="tags">
    139125{foreach from=$tag_selection item=tag}
    … …  
    141127{/foreach}
    142128</select>
    143         </td>
    144       </tr>
     129    </p>
    145130
     131    <p>
     132      <strong>{'Description'|@translate}</strong>
     133      <br>
     134      <textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea>
     135    </p>
    146136
    147       <tr>
    148         <td><strong>{'Description'|@translate}</strong></td>
    149         <td><textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea></td>
    150       </tr>
    151 
    152   <tr>
    153     <td><strong>{'Who can see this photo?'|@translate}</strong></td>
    154     <td>
     137    <p>
     138      <strong>{'Who can see this photo?'|@translate}</strong>
     139      <br>
    155140      <select name="level" size="1">
    156141        {html_options options=$level_options selected=$level_options_selected}
    157142      </select>
    158     </td>
    159   </tr>
     143   </p>
    160144
    161     </table>
    162 
    163     <p style="text-align:center;">
    164       <input class="submit" type="submit" value="{'Submit'|@translate}" name="submit">
    165       <input class="submit" type="reset" value="{'Reset'|@translate}" name="reset">
    166     </p>
    167 
    168   </fieldset>
     145  <p style="margin:40px 0 0 0">
     146    <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
     147  </p>
     148</fieldset>
    169149
    170150</form>
    171 
    172 <form id="associations" method="post" action="{$F_ACTION}#associations">
    173   <fieldset>
    174     <legend>{'Linked albums'|@translate}</legend>
    175 
    176     <table class="doubleSelect">
    177       <tr>
    178         <td>
    179           <h3>{'Associated'|@translate}</h3>
    180           <select class="categoryList" name="cat_associated[]" multiple="multiple" size="30">
    181             {html_options options=$associated_options}
    182           </select>
    183           <p><input class="submit" type="submit" value="&raquo;" name="dissociate" style="font-size:15px;"></p>
    184         </td>
    185 
    186         <td>
    187           <h3>{'Dissociated'|@translate}</h3>
    188           <select class="categoryList" name="cat_dissociated[]" multiple="multiple" size="30">
    189             {html_options options=$dissociated_options}
    190           </select>
    191           <p><input class="submit" type="submit" value="&laquo;" name="associate" style="font-size:15px;"></p>
    192         </td>
    193       </tr>
    194     </table>
    195 
    196   </fieldset>
    197 </form>
    198 
    199 <form id="representation" method="post" action="{$F_ACTION}#representation">
    200   <fieldset>
    201     <legend>{'Representation of albums'|@translate}</legend>
    202 
    203     <table class="doubleSelect">
    204       <tr>
    205         <td>
    206           <h3>{'Represents'|@translate}</h3>
    207           <select class="categoryList" name="cat_elected[]" multiple="multiple" size="30">
    208             {html_options options=$elected_options}
    209           </select>
    210           <p><input class="submit" type="submit" value="&raquo;" name="dismiss" style="font-size:15px;"></p>
    211         </td>
    212 
    213         <td>
    214           <h3>{'Does not represent'|@translate}</h3>
    215           <select class="categoryList" name="cat_dismissed[]" multiple="multiple" size="30">
    216             {html_options options=$dismissed_options}
    217           </select>
    218           <p><input class="submit" type="submit" value="&laquo;" name="elect" style="font-size:15px;"></p>
    219         </td>
    220       </tr>
    221     </table>
    222 
    223   </fieldset>
    224 </form>
Note: See TracChangeset for help on using the changeset viewer.