diff options
| author | Sem <sembrestels@riseup.net> | 2012-07-31 10:09:51 +0200 |
|---|---|---|
| committer | Sem <sembrestels@riseup.net> | 2012-07-31 10:09:51 +0200 |
| commit | 28b1669c4b1afaed7429da2cc9580340dcb13b6e (patch) | |
| tree | 041440d7e32d2bde64101e7ab8a99dbe9d2ed8e8 /views | |
| parent | e0879bc60015ab6be470b6828da0e50a7399bb9b (diff) | |
| download | elgg-28b1669c4b1afaed7429da2cc9580340dcb13b6e.tar.gz elgg-28b1669c4b1afaed7429da2cc9580340dcb13b6e.tar.bz2 | |
New uploader based on javascript for Tidypics
Diffstat (limited to 'views')
| -rw-r--r-- | views/default/forms/photos/basic_upload.php | 75 | ||||
| -rw-r--r-- | views/default/photos/css.php | 64 |
2 files changed, 96 insertions, 43 deletions
diff --git a/views/default/forms/photos/basic_upload.php b/views/default/forms/photos/basic_upload.php index ba849d1b4..9e71cf59e 100644 --- a/views/default/forms/photos/basic_upload.php +++ b/views/default/forms/photos/basic_upload.php @@ -1,48 +1,63 @@ <?php -/** - * Basic uploader form - * - * This only handled uploading the images. Editing the titles and descriptions - * are handled with the edit forms. - * - * @uses $vars['entity'] - * - * @author Cash Costello - * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2 - */ - $album = $vars['entity']; -$access_id = $album->access_id; +$help = elgg_echo('tidypics:uploader:help'); -$maxfilesize = (float) elgg_get_plugin_setting('maxfilesize', 'tidypics'); +$input = elgg_view('input/file', array( + 'name' => 'images[]', + 'multiple' => 'multiple', + 'class' => 'hidden-js', +)); -$instructions = elgg_echo("tidypics:uploader:upload"); -$max = elgg_echo('tidypics:uploader:basic', array($maxfilesize)); +$button = elgg_view('output/url', array( + 'text' => elgg_echo('tidypics:uploader:upload') . $input, + 'class' => 'elgg-button elgg-button-action fileinput-button', +)); -$list = ''; -for ($x = 0; $x < 10; $x++) { - $list .= '<li>' . elgg_view('input/file', array('name' => 'images[]')) . '</li>'; -} +$reset = elgg_view('input/reset', array( + 'value' => elgg_echo('cancel'), + 'class' => 'hidden', +)); $foot = elgg_view('input/hidden', array('name' => 'guid', 'value' => $album->getGUID())); $foot .= elgg_view('input/submit', array('value' => elgg_echo("save"))); -$form_body = <<<HTML +echo <<<HTML <div> $max </div> -<div> - <ol> - $list - </ol> +<div class="fileinput-container"> + $button + $reset + <p class="elgg-text-help">$help</p> +</div> +<div class="mtm"><!-- The table listing the files available for upload/download --> + <table role="presentation" class="elgg-table-alt clearfloat mtm"> + <tbody class="files"></tbody> + </table> </div> <div class='elgg-foot'> $foot </div> HTML; -echo elgg_view('input/form', array( - 'body' => $form_body, - 'action' => 'action/photos/image/upload', - 'enctype' => 'multipart/form-data', -)); +?> + +<noscript><style type="text/css">hidden-nojs {display: hidden}</style></noscript> + +<!-- The template to display files available for upload --> +<script id="template-upload" type="text/x-tmpl"> +{% for (var i=0, file; file=o.files[i]; i++) { %} + <tr class="template-upload fade"> + {% if (file.error) { %} + <td class="error"><span class="elgg-message elgg-state-error">{%=locale.fileupload.error%} {%=locale.fileupload.errors[file.error] || file.error%}</span></td> + {% } else { %} + <td class="preview"><span class="fade"></span></td> + {% } %} + <td class="name"><span>{%=file.name%}</span></td> + <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td> + + </tr> +{% } %} +</script> +<!-- The template to display files available for download --> +<script id="template-download" type="text/x-tmpl" /> diff --git a/views/default/photos/css.php b/views/default/photos/css.php index 3f0218fdc..b031b825c 100644 --- a/views/default/photos/css.php +++ b/views/default/photos/css.php @@ -145,30 +145,68 @@ } /* *************************************** - AJAX UPLOADER + UPLOADER *************************************** */ -#tidypics-uploader-steps { - list-style: none; + +.fileinput-container { + text-align: center; +} +.fileinput-button { + cursor: pointer; } +.fileinput-button input { + position: absolute; + top: 0; + right: 0; + margin: 0; + opacity: 0; + filter: alpha(opacity=0); -#tidypics-uploader-steps li a { - font-weight:bold; +} +.files .fade { + display: none; +} +/* Fix for IE 6: */ +*html .fileinput-button { + margin-right: -2px; +} +*html .fileinput-button .elgg-button { + line-height: 24px; +} +*html .fileupload-buttonbar .elgg-button { + margin-left: 3px; } -.tidypics-choose-button-hover { - color:#0054a7; - text-decoration:underline; +/* Fix for IE 7: */ +*+html .fileinput-button { + margin-right: 1px; +} +*+html .fileinput-button .elgg-button { + line-height: 24px; +} +*+html .fileupload-buttonbar .elgg-button { + margin-left: 3px; } -.tidypics-disable { - color:#cccccc; +@media (max-width: 480px) { + .files .preview * { + width: 40px; + } + .files .name * { + width: 80px; + display: inline-block; + word-wrap: break-word; + } } -.tidypics-disable:hover { -color:#cccccc; -text-decoration:none; +/* Fix for Webkit (Safari, Chrome) */ +@media screen and (-webkit-min-device-pixel-ratio:0) { + .fileinput-button { + margin-top: 2px; + } } + <?php return true; ?> |