cleaned up the CSS and text for the new uploader

4 files changed, 64 insertions, 25 deletions

diff --git a/languages/en.php b/languages/en.php
index 0a8e31672..26ef79605 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -9,7 +9,6 @@ $english = array(
 			'images' => "Images",
 			'caption' => "Caption",
 			'photos' => "Photos",
-			'images:upload' => "Upload Images",
 			'images:multiupload' => "Flash Multi Upload Tool",
 			'images:multiupload:todo' => "Choose one or more files for upload.",
 			'album' => "Photo Album",
@@ -49,7 +48,7 @@ $english = array(
 			'tidypics:administration' => 'Tidypics Administration',
 			'tidypics:stats' => 'Stats',
 			'tidypics:nophotosingroup' => 'This groups does not have any photos yet',
-                        'tidypics:upgrade' => 'Upgrade',
+			'tidypics:upgrade' => 'Upgrade',
 
 			'flickr:setup' => 'Flickr Setup',
 			'flickr:usernamesetup' => 'Please enter your Flickr username here:',
@@ -110,8 +109,13 @@ $english = array(
 			'album:tags' => "Tags",
 			'album:cover' => "Make image album cover?",
 			'tidypics:quota' => "Quota usage:",
-			'tidypics:upload:filedesc' => 'Image files (jpeg, png, gif)',
-
+	
+			'tidypics:uploader:choose' => "Choose photos",
+			'tidypics:uploader:upload' => "Upload photos",
+			'tidypics:uploader:describe' => "Describe photos",
+			'tidypics:uploader:filedesc' => 'Image files (jpeg, png, gif)',
+			'tidypics:uploader:instructs' => 'There are three easy steps for adding photos to your album using this uploader: choosing, uploading, and describing them. If you do not have Flash, there is also a <a href="%s">basic uploader</a> available.',
+			'tidypics:uploader:basic' => 'You can upload up to 10 photos at a time (%s MB maximum per photo)',
 		//views
 
 			'image:total' => "Images in album:",
diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php
index 3fd3c81aa..d836cabcf 100644
--- a/views/default/tidypics/css.php
+++ b/views/default/tidypics/css.php
@@ -305,6 +305,25 @@ list-style: none;
 }
 
 /*----- uploadify ------*/
+
+#tidypics_uploader_steps {
+list-style:none;
+}
+
+#tidypics_uploader_steps li {
+margin-bottom: 20px;
+}
+
+#tidypics_uploader_steps li a {
+font-weight:bold;
+}
+
+.tidypics_choose_button_hover {
+color:#0054a7;
+text-decoration:underline;
+}
+
+
 .uploadifyQueueItem {
 background-color:#F5F5F5;
 border:2px solid #E5E5E5;
@@ -331,6 +350,7 @@ height: 3px;
 #tidypics_uploader {
 position:relative;
 width:400px;
+min-height:20px;
 }
 
 #tidypics_choose_button {
@@ -347,10 +367,6 @@ position:relative;
 z-index:100;
 }
 
-#uploadifyQueue {
-margin-bottom: 20px;
-}
-
 .uploadifyQueueItem .cancel {
 float: right;
 }
diff --git a/views/default/tidypics/forms/ajax_upload.php b/views/default/tidypics/forms/ajax_upload.php
index 313ca17f9..c906b7673 100644
--- a/views/default/tidypics/forms/ajax_upload.php
+++ b/views/default/tidypics/forms/ajax_upload.php
@@ -33,32 +33,40 @@ if ($quota) {
 	}
 }
 
+$basic_uploader_url = current_page_url() . '/basic';
+
 ?>
 
 <div class="contentWrapper">
 
-	<p>Instructions here for uploading images using Ajax/Flash</p>
+	<p><?php echo sprintf(elgg_echo('tidypics:uploader:instructs'), $basic_uploader_url); ?></p>
 
+	<ul id="tidypics_uploader_steps">
+		<li>
 	<div id="tidypics_uploader">
-		<a id="tidypics_choose_button">Choose images</a>
+		<a id="tidypics_choose_button" href="<?php echo $basic_uploader_url; ?>">
+			1. <?php echo elgg_echo('tidypics:uploader:choose'); ?>
+		</a>
 		<div id="tidypics_flash_uploader">
 			<input type="file" id="uploadify" name="uploadify" />
 		</div>
 	</div>
-
-<a href="javascript:$('#uploadify').uploadifyUpload();">Upload Files</a>
-<!--
-<a href="javascript:$('#uploadify').uploadifyClearQueue();">Clear Queue</a>
--->
-<br />
-<a href="<?php echo $vars['url']; ?>pg/photos/batch/<?php echo $batch; ?>">Add titles and descriptions</a>
-<br />
-<a href="<?php echo current_page_url(); ?>/basic">Basic uploader</a>
-
-
+		</li>
+		<li>
+			<a href="javascript:$('#uploadify').uploadifyUpload();">
+				2. <?php echo elgg_echo('tidypics:uploader:upload'); ?>
+			</a>
+		</li>
+		<li>
+			<a href="<?php echo $vars['url']; ?>pg/photos/batch/<?php echo $batch; ?>">
+				3. <?php echo elgg_echo('tidypics:uploader:describe'); ?>
+			</a>
+		</li>
+	</ul>
 </div>
 
 <script type="text/javascript">
+
 $("#uploadify").uploadify({
 	'uploader'     : '<?php echo $vars['url']; ?>mod/tidypics/vendors/uploadify/uploadify.swf',
 	'script'       : '<?php echo $vars['url']; ?>action/tidypics/ajax_upload/',
@@ -73,10 +81,21 @@ $("#uploadify").uploadify({
 	'cancelImg'  : '<?php echo $vars['url']; ?>_graphics/icon_customise_remove.gif',
 	'multi'      : true,
 	'auto'       : false,
-	'fileDesc'   : '<?php echo elgg_echo('tidypics:upload:filedesc'); ?>',
+	'fileDesc'   : '<?php echo elgg_echo('tidypics:uploader:filedesc'); ?>',
 	'fileExt'    : '*.jpg;*.jpeg;*.png;*.gif',
 	'wmode'      : 'transparent',
-	'buttonImg'  : " "
+	'buttonImg'  : " ",
+	'height'     : 20,
+	'onEmbedFlash' : function(event) {
+		$("#" + event.id).hover(
+			function(){
+				$("#tidypics_choose_button").addClass('tidypics_choose_button_hover');
+			},
+			function(){
+				$("#tidypics_choose_button").removeClass('tidypics_choose_button_hover');
+			}
+		);
+	}
 });
 </script>
 
diff --git a/views/default/tidypics/forms/upload.php b/views/default/tidypics/forms/upload.php
index 5a9703171..8bbda08b3 100644
--- a/views/default/tidypics/forms/upload.php
+++ b/views/default/tidypics/forms/upload.php
@@ -35,8 +35,8 @@ if ($quota) {
 	ob_start();
 	?>
 	<p style="line-height:1.6em;">
-		<label><?php echo elgg_echo("images:upload"); ?></label><br />
-		<i><?php echo elgg_echo("tidypics:settings:maxfilesize") . ' ' . $maxfilesize; ?></i><br />
+		<label><?php echo elgg_echo("tidypics:uploader:upload"); ?></label><br />
+		<i><?php echo sprintf(elgg_echo('tidypics:uploader:basic'), $maxfilesize); ?></i><br />
 		<?php
 		if ($quota) {
 			?>