Show filenames for non-image attachments in the new media modal.

Also passes all attachment model attributes to the attachment view template by default (instead of selecting specific values).

see #21390, #21836.


git-svn-id: https://develop.svn.wordpress.org/trunk@22159 602fd350-edb4-49c9-b593-d223f7449a82

wp-includes/css/media-views.css

@@ -256,6 +256,7 @@
 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
 	background: #eee;
 	cursor: pointer;
+	color: #464646;
 
 	-webkit-user-select: none;
 	-moz-user-select:    none;
@@ -308,6 +309,13 @@
 	transform:         translate( -50%, -50% );
 }
 
+.attachment .filename {
+	margin-top: 140px;
+	padding: 0 10px;
+	text-align: center;
+	font-weight: bold;
+}
+
 .attachment .thumbnail,
 .attachment .thumbnail img {
 	-webkit-transition-property: width, height, top, left, right, bottom;

wp-includes/js/media-views.js

@@ -406,22 +406,20 @@
 
 		render: function() {
 			var attachment = this.model.toJSON(),
-				options = {
-					icon:        attachment.icon,
-					uploading:   attachment.uploading,
-					orientation: attachment.orientation || 'landscape',
-					type:        attachment.type,
-					subtype:     attachment.subtype,
-					buttons:     this.buttons
-				};
+				options = _.defaults( this.model.toJSON(), {
+					orientation: 'landscape',
+					uploading:   false,
+					type:        ''
+				});
 
+			options.buttons = this.buttons;
 
-			if ( 'image' === attachment.type )
+			if ( 'image' === options.type )
 				_.extend( options, this.crop() );
 
 			this.$el.html( this.template( options ) );
 
-			if ( attachment.uploading )
+			if ( options.uploading )
 				this.$bar = this.$('.media-progress-bar div');
 			else
 				delete this.$bar;

wp-includes/media.php

@@ -1333,13 +1333,14 @@ function wp_print_media_templates( $attachment ) {
 					<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>
 			<% } %>
 
-			<% if ( uploading ) { %>
-				<div class="media-progress-bar"><div></div></div>
-			<% } %>
+
 
 			<% if ( buttons.close ) { %>
 				<a class="close" href="#">&times;</a>