Ignore:
Timestamp:
02/15/10 23:23:02 (10 years ago)
Author:
plg
Message:

feature 1438: switch between uploadify and HTML form

feature 1435 related: change the order to display the "who can see these
photos?" options. It's just a test, we're discussing about usability on this
field.

graphical design: distinguish the 3 main fields (category/privacy/files), no
use of the table anymore to have a smaller width. One goal was to see the
"Upload" button when the form opens for the first time in a 1024x768 browser.

Location:
extensions/upload_form
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • extensions/upload_form/include/upload.js

    r4739 r4895  
    99  if (upload_slots <= upload_limit) { 
    1010    new_slot = document.createElement("p"); 
    11     new_slot.innerHTML = "<input  class='file' type='file' name='image_upload[]' size='70' />"; 
     11    new_slot.innerHTML = "<input  class='file' type='file' name='image_upload[]' size='60' />"; 
    1212    document.getElementById("uploadBoxes").appendChild(new_slot); 
    1313  } 
  • extensions/upload_form/language/en_UK/plugin.lang.php

    r4887 r4895  
    4040$lang['Everybody'] = 'Everybody'; 
    4141$lang['Who can see these photos?'] = 'Who can see these photos?'; 
     42$lang['... or switch to the old style form'] = '... or switch to the old style form'; 
     43$lang['... or switch to the multiple files form'] = '... or switch to the multiple files form'; 
  • extensions/upload_form/language/fr_FR/plugin.lang.php

    r4887 r4895  
    4040$lang['Everybody'] = 'Tout le monde'; 
    4141$lang['Who can see these photos?'] = 'Qui peut voir ces photos ?'; 
     42$lang['... or switch to the old style form'] = '... ou passer sur le formulaire "à l\'ancienne"'; 
     43$lang['... or switch to the multiple files form'] = '... ou passer sur le formulaire multi-fichier'; 
  • extensions/upload_form/upload.php

    r4887 r4895  
    344344  ); 
    345345 
     346$upload_modes = array('html', 'multiple'); 
     347 
     348$upload_mode = 'multiple'; 
     349$upload_switch = 'html'; 
     350if (isset($_GET['upload_mode']) and in_array($_GET['upload_mode'], $upload_modes)) 
     351{ 
     352  $index_of_upload_mode = array_flip($upload_modes); 
     353  $upload_mode_index = $index_of_upload_mode[ $_GET['upload_mode'] ]; 
     354 
     355  $upload_mode = $_GET['upload_mode']; 
     356  $upload_switch = $upload_modes[ ($upload_mode_index + 1) % 2 ]; 
     357} 
     358 
    346359$template->assign( 
    347360    array( 
    348       'upload_mode' => 'multiple', 
     361      'upload_mode' => $upload_mode, 
     362      'switch_url' => $admin_base_url.'&upload_mode='.$upload_switch, 
    349363      'upload_id' => md5(rand()), 
    350364      'session_id' => session_id(), 
     
    394408// image level options 
    395409$tpl_options = array(); 
    396 foreach ($conf['available_permission_levels'] as $level) 
     410foreach (array_reverse($conf['available_permission_levels']) as $level) 
    397411{ 
    398412  $label = null; 
     
    423437    } 
    424438     
    425     $label = implode(', ', array_reverse($labels)); 
     439    $label = implode(', ', $labels); 
    426440  } 
    427441  $tpl_options[$level] = $label; 
  • extensions/upload_form/upload.tpl

    r4887 r4895  
    99    $("#category_type_"+$(this).attr("value")).show(); 
    1010  }); 
    11  
    1211}); 
    1312</script> 
     
    2524var session_id = '{$session_id}'; 
    2625var pwg_token = '{$pwg_token}'; 
    27 var buttonText = '{"Select files"|@translate}'; 
     26var buttonText = 'Browse'; 
    2827 
    2928{literal} 
     
    6867  text-align:center; 
    6968} 
     69 
     70.category_selection { 
     71  min-height:65px; 
     72  margin-top:5px; 
     73} 
     74 
     75.category_selection TABLE { 
     76  margin:0; 
     77} 
     78 
     79.formField { 
     80  width:650px; 
     81  margin:0 auto 20px auto; 
     82  padding:10px; 
     83  border: 2px solid #292929; 
     84} 
     85 
     86.formFieldTitle { 
     87  font-weight:bold; 
     88  margin-bottom:10px; 
     89} 
     90 
     91.formField P { 
     92  margin:0; 
     93} 
    7094</style> 
    7195{/literal} 
    7296 
    73 <div class="titrePage"> 
     97<div class="titrePage" style="height:0"> 
    7498  <h2>{'Upload Form'|@translate}</h2> 
    7599</div> 
     
    107131    <legend>{'Upload Photos'|@translate}</legend> 
    108132 
    109     <table> 
    110       <tr> 
    111         <th>{'Drop into category'|@translate}</th> 
    112         <td> 
    113           <label><input type="radio" name="category_type" value="existing" checked="checked"> {'existing category'|@translate}</label> 
    114           <label><input type="radio" name="category_type" value="new"> {'create a new category'|@translate}</label> 
    115  
    116           <div id="category_type_existing"> 
    117             <select class="categoryDropDown" name="category"> 
    118               {html_options options=$category_options} 
    119             </select> 
    120           </div> 
    121  
    122           <div id="category_type_new" style="display:none"> 
    123             <table> 
    124               <tr> 
    125                 <td>{'Parent category'|@translate}</td> 
    126                 <td> 
    127                   <select class="categoryDropDown" name="category_parent"> 
    128                     <option value="0">------------</option> 
    129                     {html_options options=$category_options} 
    130                   </select> 
    131                 </td> 
    132               </tr> 
    133               <tr> 
    134                 <td>{'Category name'|@translate}</td> 
    135                 <td> 
    136                   <input type="text" name="category_name" value="{$F_CATEGORY_NAME}" 
    137                 </td> 
    138               </tr> 
    139             </table> 
    140           </div> 
    141  
    142         </td> 
    143       </tr> 
    144  
    145       <tr> 
    146         <th>{'Who can see these photos?'|@translate}</th> 
    147         <td> 
    148           <select name="level" size="1"> 
    149             {html_options options=$level_options selected=$level_options_selected} 
    150           </select> 
    151         </td> 
    152       </tr> 
     133    <div class="formField"> 
     134      <div class="formFieldTitle">{'Drop into category'|@translate}</div> 
     135       
     136      <label><input type="radio" name="category_type" value="existing"> {'existing category'|@translate}</label> 
     137      <label><input type="radio" name="category_type" value="new" checked="checked"> {'create a new category'|@translate}</label> 
     138 
     139      <div id="category_type_existing" style="display:none" class="category_selection"> 
     140        <select class="categoryDropDown" name="category"> 
     141          {html_options options=$category_options} 
     142        </select> 
     143      </div> 
     144 
     145      <div id="category_type_new" class="category_selection"> 
     146        <table> 
     147          <tr> 
     148            <td>{'Parent category'|@translate}</td> 
     149            <td> 
     150              <select class="categoryDropDown" name="category_parent"> 
     151                <option value="0">------------</option> 
     152                {html_options options=$category_options} 
     153              </select> 
     154            </td> 
     155          </tr> 
     156          <tr> 
     157            <td>{'Category name'|@translate}</td> 
     158            <td> 
     159              <input type="text" name="category_name" value="{$F_CATEGORY_NAME}" 
     160            </td> 
     161          </tr> 
     162        </table> 
     163      </div> 
     164    </div> 
     165 
     166    <div class="formField"> 
     167      <div class="formFieldTitle">{'Who can see these photos?'|@translate}</div> 
     168 
     169      <select name="level" size="1"> 
     170        {html_options options=$level_options selected=$level_options_selected} 
     171      </select> 
     172    </div> 
     173 
     174    <div class="formField"> 
     175      <div class="formFieldTitle">{'Select files'|@translate}</div> 
    153176 
    154177{if $upload_mode eq 'html'} 
    155       <tr> 
    156         <td colspan="2"> 
    157           <strong>{'Select files'|@translate}</strong> 
    158           <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p> 
    159           <div id="uploadBoxes"> 
    160             <p><input class="file" type="file" size="70" name="image_upload[]" /></p> 
    161           </div> 
    162           <div id="addUploadBox"> 
    163             <a href="javascript: UpdateUploadSlots()">{'+ Add an upload box'|@translate}</a> 
    164           </div> 
    165         </td> 
    166       </tr> 
    167        
    168     </table> 
     178    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p> 
     179 
     180      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p> 
     181 
     182      <div id="uploadBoxes"> 
     183        <p><input class="file" type="file" size="60" name="image_upload[]" /></p> 
     184      </div> 
     185      <div id="addUploadBox"> 
     186        <a href="javascript: UpdateUploadSlots()">{'+ Add an upload box'|@translate}</a> 
     187      </div> 
    169188     
     189    </div> <!-- formField --> 
     190 
    170191    <p> 
    171192      <input class="submit" type="submit" name="submit_upload" value="{'Upload'|@translate}" {$TAG_INPUT_ENABLED}/> 
     
    178199    </p> 
    179200 
     201    <p><a href="{$switch_url}">{'... or switch to the old style form'|@translate}</a></p> 
     202 
    180203    <div id="fileQueue"></div> 
    181204 
     205    </div> <!-- formField --> 
    182206    <p> 
    183207      <input class="submit" type="button" value="{'Upload'|@translate}" onclick="javascript:jQuery('#uploadify').uploadifyUpload()"/> 
  • extensions/upload_form/uploadify/uploadify.css

    r4875 r4895  
    2525#fileQueue { 
    2626        width: 420px; 
    27         height: 300px; 
     27        max-height: 300px; 
    2828        overflow: auto; 
    2929        border: 1px solid #333; 
Note: See TracChangeset for help on using the changeset viewer.