Ignore:
Timestamp:
May 18, 2014, 12:04:36 AM (10 years ago)
Author:
mistic100
Message:

feature 3080 : simpler date inputs (one input + fontello + picker selects)

Location:
trunk/admin/themes/default/template
Files:
5 edited

Legend:

Unmodified
Added
Removed

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

    r28087 r28497  
    77{combine_script id='jquery.ui.slider' require='jquery.ui' load='footer' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
    88{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
    9 
    10 {footer_script}{literal}
    11   pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
    12 {/literal}{/footer_script}
    139
    1410{footer_script}{literal}
    … …  
    6561{footer_script require='jquery.tokeninput'}
    6662jQuery(document).ready(function() {ldelim}
     63  jQuery('[data-datepicker]').pwgDatepicker();
     64
    6765  jQuery("a.preview-box").colorbox();
    6866 
    … …  
    866864      <label><input type="checkbox" name="remove_date_creation"> {'remove creation date'|@translate}</label><br>
    867865      <div id="set_date_creation">
    868           <select id="date_creation_day" name="date_creation_day">
    869              <option value="0">--</option>
    870             {section name=day start=1 loop=32}
    871               <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY}selected="selected"{/if}>{$smarty.section.day.index}</option>
    872             {/section}
    873           </select>
    874           <select id="date_creation_month" name="date_creation_month">
    875             {html_options options=$month_list selected=$DATE_CREATION_MONTH}
    876           </select>
    877           <input id="date_creation_year"
    878                  name="date_creation_year"
    879                  type="text"
    880                  size="4"
    881                  maxlength="4"
    882                  value="{$DATE_CREATION_YEAR}">
    883           <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
     866        <input type="hidden" name="date_creation" value="{$DATE_CREATION}">
     867        <label>
     868          <i class="icon-calendar"></i>
     869          <input type="text" data-datepicker="date_creation" readonly>
     870        </label>
    884871      </div>
    885872    </div>

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

    r28496 r28497  
    4949  });
    5050});
     51
     52{* <!-- DATEPICKER --> *}
     53jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
     54  jQuery('[data-datepicker]').pwgDatepicker();
     55});
     56
     57{* <!-- THUMBNAILS --> *}
     58$(".elementEdit img")
     59  .css("opacity", 0.6) // Opacity on page load
     60  .hover(function(){
     61    $(this).fadeTo("slow", 1.0); // Opacity on hover
     62  },function(){
     63    $(this).fadeTo("slow", 0.6); // Opacity on mouseout
     64  });
    5165}());
    5266{/footer_script}
    … …  
    95109      <td><strong>{'Creation date'|@translate}</strong></td>
    96110      <td>
    97         <label><input type="radio" name="date_creation_action-{$element.id}" value="unset"> {'unset'|@translate}</label>
    98         <label><input type="radio" name="date_creation_action-{$element.id}" value="set" id="date_creation_action_set-{$element.id}"> {'set to'|@translate}</label>
    99 
    100         <select id="date_creation_day-{$element.id}" name="date_creation_day-{$element.id}">
    101                 <option value="0">--</option>
    102            {section name=day start=1 loop=32}
    103              <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$element.DATE_CREATION_DAY}selected="selected"{/if}>{$smarty.section.day.index}</option>
    104            {/section}
    105         </select>
    106         <select id="date_creation_month-{$element.id}" name="date_creation_month-{$element.id}">
    107           {html_options options=$month_list selected=$element.DATE_CREATION_MONTH}
    108         </select>
    109         <input id="date_creation_year-{$element.id}"
    110                name="date_creation_year-{$element.id}"
    111                type="text"
    112                size="4"
    113                maxlength="4"
    114                value="{$element.DATE_CREATION_YEAR}">
    115         <input id="date_creation_linked_date-{$element.id}" name="date_creation_linked_date-{$element.id}" type="hidden" size="10" disabled="disabled">
    116         {footer_script}
    117           pwg_initialization_datepicker("#date_creation_day-{$element.id}", "#date_creation_month-{$element.id}", "#date_creation_year-{$element.id}", "#date_creation_linked_date-{$element.id}", "#date_creation_action_set-{$element.id}");
    118         {/footer_script}
     111        <input type="hidden" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
     112        <label>
     113          <i class="icon-calendar"></i>
     114          <input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
     115        </label>
     116        <a href="#" class="icon-cancel-circled" id="date_creation_unset-{$element.id}">{'unset'|translate}</a>
    119117      </td>
    120118    </tr>
    … …  
    155153
    156154</form>
    157 
    158 {footer_script}
    159 {literal}$(document).ready(function() {
    160         $(".elementEdit img")
    161                 .fadeTo("slow", 0.6) // Opacity on page load
    162                 .hover(function(){
    163                         $(this).fadeTo("slow", 1.0); // Opacity on hover
    164                 },function(){
    165                 $(this).fadeTo("slow", 0.6); // Opacity on mouseout
    166                 });
    167 });{/literal}
    168 {/footer_script}

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

    r23497 r28497  
    22{include file='include/datepicker.inc.tpl'}
    33
    4 {footer_script}{literal}
    5         pwg_initialization_datepicker("#start_day", "#start_month", "#start_year", "#start_linked_date", null, null, "#end_linked_date");
    6         pwg_initialization_datepicker("#end_day", "#end_month", "#end_year", "#end_linked_date", null, "#start_linked_date", null);
    7 {/literal}{/footer_script}
     4{footer_script}
     5jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
     6  jQuery('[data-datepicker]').pwgDatepicker();
     7});
     8{/footer_script}
    89
    910<h2>{'History'|@translate} {$TABSHEET_TITLE}</h2>
    … …  
    1516    <li><label>{'Date'|@translate}</label></li>
    1617    <li>
    17       <select id="start_day" name="start_day">
    18         <option value="0">--</option>
    19         {section name=day start=1 loop=32}
    20         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$START_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
    21         {/section}
    22       </select>
    23       <select id="start_month" name="start_month">
    24       {html_options options=$month_list selected=$START_MONTH_SELECTED}
    25       </select>
    26       <input id="start_year" name="start_year" value="{$START_YEAR}" type="text" size="4" maxlength="4" >
    27       <input id="start_linked_date" name="start_linked_date" type="hidden" size="10" disabled="disabled">
     18      <input type="hidden" name="start" value="{$START}">
     19      <label>
     20        <i class="icon-calendar"></i>
     21        <input type="text" data-datepicker="start" data-datepicker-end="end" data-datepicker-unset="start_unset" readonly>
     22      </label>
     23      <br>
     24      <a href="#" class="icon-cancel-circled" id="start_unset">{'unset'|translate}</a>
    2825    </li>
    2926  </ul>
    … …  
    3128    <li><label>{'End-Date'|@translate}</label></li>
    3229    <li>
    33       <select id="end_day" name="end_day">
    34         <option value="0">--</option>
    35         {section name=day start=1 loop=32}
    36         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$END_DAY_SELECTED}selected="selected"{/if}>{$smarty.section.day.index}</option>
    37         {/section}
    38       </select>
    39       <select id="end_month" name="end_month">
    40       {html_options options=$month_list selected=$END_MONTH_SELECTED}
    41       </select>
    42       <input id="end_year" name="end_year" value="{$END_YEAR}" type="text" size="4" maxlength="4" >
    43       <input id="end_linked_date" name="end_linked_date" type="hidden" size="10" disabled="disabled">
     30      <input type="hidden" name="end" value="{$END}">
     31      <label>
     32        <i class="icon-calendar"></i>
     33        <input type="text" data-datepicker="end" data-datepicker-start="start" data-datepicker-unset="end_unset" readonly>
     34      </label>
     35      <br>
     36      <a href="#" class="icon-cancel-circled" id="end_unset">{'unset'|translate}</a>
    4437    </li>
    4538  </ul>

  • trunk/admin/themes/default/template/include/datepicker.inc.tpl

    r9586 r28497  
    1 {combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='themes/default/js/datepicker.js'}
     1{combine_script id='datepicker.js' load='footer' require='jquery.ui.datepicker' path='admin/themes/default/js/datepicker.js'}
    22
    33{assign var="datepicker_language" value="themes/default/js/ui/i18n/jquery.ui.datepicker-`$lang_info.code`.js"}
    … …  
    88
    99{combine_css path="themes/default/js/ui/theme/jquery.ui.datepicker.css"}
    10 
    11 {footer_script require='jquery.ui.datepicker,datepicker.js'}
    12 function pwg_initialization_datepicker(day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date)
    13 {ldelim}
    14   return pwg_common_initialization_datepicker(
    15     "{$ROOT_URL}{$themeconf.admin_icon_dir}/datepicker.png",
    16     day, month, year, linked_date, checked_on_change, min_linked_date, max_linked_date);
    17 };
    18 {/footer_script}

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

    r28496 r28497  
    7777
    7878{* <!-- DATEPICKER --> *}
    79 pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
     79jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
     80  jQuery('[data-datepicker]').pwgDatepicker();
     81});
    8082}());
    8183{/footer_script}
    … …  
    139141      <strong>{'Creation date'|@translate}</strong>
    140142      <br>
    141       <select id="date_creation_day" name="date_creation_day">
    142         <option value="0">--</option>
    143 {section name=day start=1 loop=32}
    144         <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
    145 {/section}
    146       </select>
    147 
    148       <select id="date_creation_month" name="date_creation_month">
    149         {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
    150       </select>
    151 
    152       <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
    153       <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
    154       <input name="date_creation_time" type="hidden" value="{$DATE_CREATION_TIME_VALUE}">
    155       <a href="#" id="unset_date_creation" style="display:none">unset</a>
     143      <input type="hidden" name="date_creation_time" value="{$DATE_CREATION_TIME}">
     144      <input type="hidden" name="date_creation" value="{$DATE_CREATION}">
     145      <label>
     146        <i class="icon-calendar"></i>
     147        <input type="text" data-datepicker="date_creation" data-datepicker-unset="date_creation_unset" readonly>
     148      </label>
     149      <a href="#" class="icon-cancel-circled" id="date_creation_unset">{'unset'|translate}</a>
    156150    </p>
    157151
Note: See TracChangeset for help on using the changeset viewer.