silverstripe-framework/templates/AssetUploadField.ss
Naomi Guyer d642eee28e ENHANCEMENT: UI Changes to FileUpload Area (TRAC-7219)
1. Add arrows to edit dropdowns
2. Adjust lightened fields so they don't look like input boxes, and fix
rgba colours
3. Add ability to click file names to edit
4. Add feedback when edit button is hovered
5. Add feedback if a file has been opened for editing and shut again
(saved changes, unsaved changes, unchanged)
6. Add ability to open and close all files to edit them all at once
7. Add overall feedback for file uploads, and fix NaN error
8. Fix up area to match design
9. Fix error messages so they fit in the provided space
10. Fix case where a single uploaded file errors
2012-05-09 18:38:21 +12:00

54 lines
2.4 KiB
Scheme

<div class="ss-uploadfield-item ss-uploadfield-addfile field">
<h3>
<span class="step-label">
<span class="flyout">1</span><span class="arrow"></span>
<span class="title"><% _t('AssetUploadField.ChooseFiles', 'Choose files') %></span>
</span>
</h3>
<div class="ss-uploadfield-item-info">
<label class="ss-uploadfield-fromcomputer ss-ui-button ss-ui-action-constructive" title="<% _t('AssetUploadField.FROMCOMPUTERINFO', 'Upload from your computer') %>" data-icon="drive-upload">
<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>
<input id="$id" name="$getName" class="$extraClass ss-uploadfield-fromcomputer-fileinput" data-config="$configString" type="file"<% if $multiple %> multiple="multiple"<% end_if %> title="<% _t('AssetUploadField.FROMCOMPUTER', 'Choose files from your computer') %>" />
</label>
<div class="clear"><!-- --></div>
</div>
<div class="ss-uploadfield-item-uploador">
<% _t('AssetUploadField.UPLOADOR', 'OR') %>
</div>
<div class="ss-uploadfield-item-preview ss-uploadfield-dropzone">
<div>
<% _t('AssetUploadField.DROPAREA', 'Drop Area') %>
<span><% _t('AssetUploadField.DRAGFILESHERE', 'Drag files here') %></span>
</div>
</div>
<div class="clear"><!-- --></div>
</div>
<div class="ss-uploadfield-editandorganize">
<h3>
<span class="step-label">
<span class="flyout">2</span><span class="arrow"></span>
<span class="title"><% _t('AssetUploadField.EDITANDORGANIZE', 'Edit & organize') %></span>
</span>
</h3>
<div class="fileOverview">
<div class="uploadStatus">
<div class="state started"><% _t('AssetUploadField.UPLOADINPROGRESS', 'Please wait upload in progress') %></div>
<div class="state completed" style="display:none;"><% _t('AssetUploadField.FILEUPLOADCOMPLETED', 'File Upload Completed!') %></div>
<div class="details"><% _t('AssetUploadField.TOTAL', 'Total') %>: <span class="total"></span> <% _t('AssetUploadField.FILES', 'Files') %> <span class="fileSize"></span> </div>
</div>
<div class="ss-uploadfield-item-actions">
<button class="ss-uploadfield-item-edit-all ss-ui-button ui-corner-all" title="<% _t('AssetUploadField.EDITINFO', 'Edit files') %>">
<% _t('AssetUploadField.EDITALL', 'Edit all') %>
<span class="toggle-details">
<span class="toggle-details-icon"></span>
</span>
</button>
</div>
</div>
<ul class="ss-uploadfield-files files"></ul>
</div>