Improve upload_max_filesize error. Improve error display for long messages. New uploads now added to bottom, not top. Fix align class. Remove redundant header text. Props andy. see #5911

git-svn-id: http://svn.automattic.com/wordpress/trunk@7160 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/media.css

@@ -1,17 +1,18 @@
 div#media-upload-header {
 	background-color: #e4f2fd;
 	margin: 0;
-	padding: 1em 0.5em 0 0.5em;
+	padding: 0 5px;
 	font-weight: bold;
 	position: relative;
 	border-bottom: 1px solid #c6d9e9;
+	height: 2.5em;
 }
 
 ul#sidemenu {
 	font-weight: normal;
-	margin: 0 15px;
+	margin: 0 5px;
 	position: absolute;
-	right: 1em;
+	left: 0px;
 	bottom: -1px;
 }
 
@@ -21,12 +22,6 @@ div#media-upload-error {
 	color: #f00;
 }
 
-.file-error {
-	font-weight: bold;
-	color: #f00;
-	margin: 0 15px;
-}
-
 form {
 	margin: 1em;
 }
@@ -59,24 +54,7 @@ form {
 	margin: 0 0 1em 0;
 	padding: 0;
 }
-/*
-.media-upload-form button.button-ok {
-	float: right;
-	background-color: #ebebeb;
-	color: #1f4569;
-	border: none;
-	padding: 0.5em;
-}
 
-.media-upload-form a.button-cancel {
-	float: right;
-	background-color: #fff;
-	color: #9a9a9a;
-	font-size: 0.8em;
-	text-decoration: underline;
-	margin: 0.5em 1em;
-}
-*/
 /* specific to the image upload form */
 .align .field label {
 	display: inline;
@@ -128,21 +106,35 @@ tr.image-size td.field {
 	border-bottom: 1px solid #d0d0d0;
 	width: 623px;
 	position: relative;
+	min-height: 36px;
 }
-span.filename {
-	position: absolute;
-	left: 46px;
-	top: 0px;
+.filename {
 	line-height: 36px;
+	margin-left: 50px;
 	z-index: 2;
 }
+button.dismiss {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	z-index: 4;
+}
+.file-error {
+	margin: 0 0 5px 50px;
+	font-weight: bold;
+	color: #f00;
+}
+
 .progress {
+	position: absolute;
+	top: 0px;
+	left: 0px;
 	width: 623px;
 	height: 36px;
 }
 .bar {
 	width: 0px;
-	height: 36px;
+	height: 100%;
 	background-color: #e8e8e8;
 	border-right: 3px solid #99d;
 }
@@ -161,6 +153,7 @@ span.filename {
 	border-top: 1px solid #d0d0d0;
 	padding: 5px;
 	width: 100%;
+	clear: both;
 }
 .describe.startopen, .describe.startclosed {
 	display: none;
@@ -201,7 +194,8 @@ span.filename {
 	left: 0px;
 	cursor: pointer;
 	border: none;
-	z-index: 10;
+	z-index: 3;
+	height: 36px;
 }
 tr.align td.field {
 	text-align: center;

wp-admin/includes/media.php

@@ -270,7 +270,7 @@ function media_upload_image() {
 		$alt = attribute_escape($_POST['insertonly']['alt']);
 		if ( isset($_POST['insertonly']['align']) ) {
 			$align = attribute_escape($_POST['insertonly']['align']);
-			$class = " class='align-$align'";
+			$class = " class='align$align'";
 		}
 		$html = "<img src='$src' alt='$alt'$class />";
 		return media_send_to_editor($html);
@@ -602,7 +602,7 @@ function get_media_items( $post_id, $errors ) {
 
 	foreach ( $attachments as $id => $attachment )
 		if ( $item = get_media_item($id, isset($errors[$id]) ? $errors[$id] : null) )
-			$output .= "\n<div id='media-item-$id' class='media-item child-of-$attachment->post_parent preloaded'><div id='media-upload-error-$id'></div><span class='filename'></span><div class='progress'><div class='bar'></div></div>$item<div class='progress clickmask'></div>\n</div>";
+			$output .= "\n<div id='media-item-$id' class='media-item child-of-$attachment->post_parent preloaded'><div id='media-upload-error-$id'></div><div class='filename'></div><div class='progress'><div class='bar'></div></div>$item<div class='progress clickmask'></div>\n</div>";
 
 	return $output;
 }
@@ -645,7 +645,7 @@ function get_media_item( $attachment_id, $errors = null, $send = true, $delete =
 	$type
 	<a class='toggle describe-toggle-on' href='#'>$toggle_on</a>
 	<a class='toggle describe-toggle-off' href='#'>$toggle_off</a>
-	<span class='filename new'>$filename</span>
+	<div class='filename new'>$filename</div>
 	<table class='slidetoggle describe $class'><tbody>
 		<tr>
 			<td class='A1B1' rowspan='4' colspan='2'><img class='thumbnail' src='$thumb_url' alt='' /></td>
@@ -730,13 +730,10 @@ function get_media_item( $attachment_id, $errors = null, $send = true, $delete =
 	return $item;
 }
 
-function media_upload_header($title = false) {
-	if ( empty($title) )
-		$title = __('Choose a File');
+function media_upload_header() {
 	?>
 	<script type="text/javascript">post_id = <?php echo intval($_REQUEST['post_id']); ?>;</script>
 	<div id="media-upload-header">
-	<h3><?php echo $title ?></h3>
 	<?php the_media_upload_tabs(); ?>
 	</div>
 	<?php
@@ -856,7 +853,7 @@ jQuery(function($){
 }
 
 function media_upload_gallery_form($errors) {
-	media_upload_header(__('Browse attached files'));
+	media_upload_header();
 
 	$post_id = intval($_REQUEST['post_id']);
 
@@ -894,7 +891,7 @@ jQuery(function($){
 function media_upload_library_form($errors) {
 	global $wpdb, $wp_query, $wp_locale, $type, $tab, $post_mime_types;
 
-	media_upload_header(__('Browse Media Library'));
+	media_upload_header();
 
 	$post_id = intval($_REQUEST['post_id']);
 

wp-includes/js/swfupload/handlers.js

@@ -11,8 +11,13 @@ function fileDialogStart() {
 function fileQueued(fileObj) {
 	// Get rid of unused form
 	jQuery('.media-blank').remove();
+	// Collapse a single item
+	if ( jQuery('.type-form #media-items>*').length == 1 && jQuery('#media-items .hidden').length > 0 ) {
+		jQuery('.toggle').toggle();
+		jQuery('.slidetoggle').slideUp(200).siblings().removeClass('hidden');
+	}
 	// Create a progress bar containing the filename
-	jQuery('#media-items').prepend('<div id="media-item-' + fileObj.id + '" class="media-item child-of-' + post_id + '"><span class="filename original">' + fileObj.name + '</span><div class="progress"><div class="bar"></div></div></div>');
+	jQuery('#media-items').append('<div id="media-item-' + fileObj.id + '" class="media-item child-of-' + post_id + '"><div class="filename original">' + fileObj.name + '</div><div class="progress"><div class="bar"></div></div></div>');
 
 	// Disable the submit button
 	jQuery('#insert-media').attr('disabled', 'disabled');
@@ -76,8 +81,6 @@ function updateMediaForm() {
 	if ( jQuery('.type-form #media-items>*').length == 1 ) {
 		jQuery('#media-items .slidetoggle').slideDown(500).parent().eq(0).children('.toggle').toggle();
 		jQuery('.type-form .slidetoggle').siblings().addClass('hidden');
-	} else {
-		jQuery('.type-form .slidetoggle').siblings().removeClass('hidden');
 	}
 
 	// Only show Gallery button when there are at least two files.
@@ -117,7 +120,7 @@ function wpQueueError(message) {
 
 // file-specific message
 function wpFileError(fileObj, message) {
-	jQuery('#media-item-' + fileObj.id + ' .filename').append('<span class="file-error">'+message+'</span> <button type="button" class="button dismiss">'+swfuploadL10n.dismiss+'</button>');
+	jQuery('#media-item-' + fileObj.id + ' .filename').after('<div class="file-error"><button type="button" class="button dismiss">'+swfuploadL10n.dismiss+'</button>'+message+'</div>').siblings('.progress').remove();
 	jQuery('.dismiss').click(function(){jQuery(this).parents('.media-item').slideUp(200, function(){jQuery(this).remove();})});
 }
 

wp-includes/script-loader.php

@@ -97,7 +97,7 @@ class WP_Scripts {
 		// these error messages came from the sample swfupload js, they might need changing.
 		$this->localize( 'swfupload-handlers', 'swfuploadL10n', array(
 				'queue_limit_exceeded' => __('You have attempted to queue too many files.'),
-				'file_exceeds_size_limit' => __('This file is too big. See php.ini.'),
+				'file_exceeds_size_limit' => sprintf(__('This file is too big. Your php.ini upload_max_filesize is %s.'), ini_get('upload_max_filesize')),
 				'zero_byte_file' => __('The file you selected is empty. Please select another file.'),
 				'invalid_filetype' => __('The file you choose is not an allowed file type.'),
 				'default_error' => __('An error occurred in the upload. Please try again later.'),