Media Modal: Show progress bars for uploading images, and adjust progress bar styles to compensate for the darker attachment background. see #21390.

git-svn-id: http://core.svn.wordpress.org/trunk@22176 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views.css

@@ -442,15 +442,16 @@
 	width: 70%;
 	margin: 10px auto;
 	padding: 2px;
-	border: 2px solid #dfdfdf;
+	border: 2px solid #ccc;
 	border-radius: 8px;
+	background: #fff;
 }
 
 .media-progress-bar div {
 	height: 8px;
 	min-width: 8px;
 	width: 0;
-	background: #dfdfdf;
+	background: #ccc;
 	border-radius: 10px;
 	-webkit-transition: width 200ms;
 	-moz-transition:    width 200ms;

wp-includes/media.php

@@ -1329,13 +1329,13 @@ function wp_print_media_templates( $attachment ) {
 
 	<script type="text/html" id="tmpl-attachment">
 		<div class="attachment-preview type-<%- type %> subtype-<%- subtype %> <%- orientation %>">
-			<% if ( 'image' === type ) { %>
+			<% if ( uploading ) { %>
+				<div class="media-progress-bar"><div></div></div>
+			<% } else if ( 'image' === type ) { %>
 				<div class="thumbnail">
 					<img src="<%- url %>" width="<%- width %>" height="<%- height %>" draggable="false"
 					style="top:<%- top %>px; left:<%- left %>px;" />
 				</div>
-			<% } else if ( uploading ) { %>
-				<div class="media-progress-bar"><div></div></div>
 			<% } else { %>
 				<img src="<%- icon %>" class="icon" draggable="false" />
 				<div class="filename"><%- filename %></div>