aboutsummaryrefslogtreecommitdiff
path: root/views/default
diff options
context:
space:
mode:
authorSem <sembrestels@riseup.net>2012-07-31 10:09:51 +0200
committerSem <sembrestels@riseup.net>2012-07-31 10:09:51 +0200
commit28b1669c4b1afaed7429da2cc9580340dcb13b6e (patch)
tree041440d7e32d2bde64101e7ab8a99dbe9d2ed8e8 /views/default
parente0879bc60015ab6be470b6828da0e50a7399bb9b (diff)
downloadelgg-28b1669c4b1afaed7429da2cc9580340dcb13b6e.tar.gz
elgg-28b1669c4b1afaed7429da2cc9580340dcb13b6e.tar.bz2
New uploader based on javascript for Tidypics
Diffstat (limited to 'views/default')
-rw-r--r--views/default/forms/photos/basic_upload.php75
-rw-r--r--views/default/photos/css.php64
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;
?>