Media Grid improvements:

* Remove fixed elements.
* Adjusts toolbar and search, fixes #28833.
* Add link to Add New button, fixes #28825.
* Add "Edit Metadata" tab to all items, "Edit Image" only for images
* Make strings translatable.
* First pass for help tab.

see #28850.
Built from https://develop.svn.wordpress.org/trunk@29136


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

wp-admin/js/media.js

@@ -75,7 +75,7 @@ var findPosts;
 		// Open up a manage media frame into the grid.
 		wp.media && wp.media({
 			frame: 'manage',
-			container: $('#wpbody-content')
+			container: $('#wpbody-content > .wrap')
 		}).open();
 
 		$( '#find-posts-submit' ).click( function( event ) {

wp-admin/js/media.min.js

@@ -1 +1 @@
-var findPosts;!function(a){findPosts={open:function(b,c){var d=a(".ui-find-overlay");return 0===d.length&&(a("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),d.show(),b&&c&&a("#affected").attr("name",b).val(c),a("#find-posts").show(),a("#find-posts-input").focus().keyup(function(a){27==a.which&&findPosts.close()}),findPosts.send(),!1},close:function(){a("#find-posts-response").html(""),a("#find-posts").hide(),a(".ui-find-overlay").hide()},overlay:function(){a(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var b={ps:a("#find-posts-input").val(),action:"find_posts",_ajax_nonce:a("#_ajax_nonce").val()},c=a(".find-box-search .spinner");c.show(),a.ajax(ajaxurl,{type:"POST",data:b,dataType:"json"}).always(function(){c.hide()}).done(function(b){b.success||a("#find-posts-response").text(attachMediaBoxL10n.error),a("#find-posts-response").html(b.data)}).fail(function(){a("#find-posts-response").text(attachMediaBoxL10n.error)})}},a(document).ready(function(){wp.media&&wp.media({frame:"manage",container:a("#wpbody-content")}).open(),a("#find-posts-submit").click(function(b){a('#find-posts-response input[type="radio"]:checked').length||b.preventDefault()}),a("#find-posts .find-box-search :input").keypress(function(a){return 13==a.which?(findPosts.send(),!1):void 0}),a("#find-posts-search").click(findPosts.send),a("#find-posts-close").click(findPosts.close),a("#doaction, #doaction2").click(function(b){a('select[name^="action"]').each(function(){"attach"===a(this).val()&&(b.preventDefault(),findPosts.open())})}),a(".find-box-inside").on("click","tr",function(){a(this).find(".found-radio input").prop("checked",!0)})})}(jQuery);
+var findPosts;!function(a){findPosts={open:function(b,c){var d=a(".ui-find-overlay");return 0===d.length&&(a("body").append('<div class="ui-find-overlay"></div>'),findPosts.overlay()),d.show(),b&&c&&a("#affected").attr("name",b).val(c),a("#find-posts").show(),a("#find-posts-input").focus().keyup(function(a){27==a.which&&findPosts.close()}),findPosts.send(),!1},close:function(){a("#find-posts-response").html(""),a("#find-posts").hide(),a(".ui-find-overlay").hide()},overlay:function(){a(".ui-find-overlay").on("click",function(){findPosts.close()})},send:function(){var b={ps:a("#find-posts-input").val(),action:"find_posts",_ajax_nonce:a("#_ajax_nonce").val()},c=a(".find-box-search .spinner");c.show(),a.ajax(ajaxurl,{type:"POST",data:b,dataType:"json"}).always(function(){c.hide()}).done(function(b){b.success||a("#find-posts-response").text(attachMediaBoxL10n.error),a("#find-posts-response").html(b.data)}).fail(function(){a("#find-posts-response").text(attachMediaBoxL10n.error)})}},a(document).ready(function(){wp.media&&wp.media({frame:"manage",container:a("#wpbody-content > .wrap")}).open(),a("#find-posts-submit").click(function(b){a('#find-posts-response input[type="radio"]:checked').length||b.preventDefault()}),a("#find-posts .find-box-search :input").keypress(function(a){return 13==a.which?(findPosts.send(),!1):void 0}),a("#find-posts-search").click(findPosts.send),a("#find-posts-close").click(findPosts.close),a("#doaction, #doaction2").click(function(b){a('select[name^="action"]').each(function(){"attach"===a(this).val()&&(b.preventDefault(),findPosts.open())})}),a(".find-box-inside").on("click","tr",function(){a(this).find(".found-radio input").prop("checked",!0)})})}(jQuery);

wp-admin/upload.php

@@ -24,7 +24,9 @@ if ( 'grid' === $mode ) {
 	wp_enqueue_media();
 	wp_enqueue_script( 'media-grid' );
 	wp_enqueue_script( 'media' );
-	wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH )  ) );
+	wp_localize_script( 'media-grid', '_wpMediaGridSettings', array(
+		'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH ),
+	) );
 
 	add_screen_option( 'misc_screen_options', array( 'option' => 'manageuploadgridcolumnshidden', 'id' => 'grid' ) );
 	add_screen_option( 'title', array( 'label' => __( 'Name' ) ) );
@@ -32,7 +34,35 @@ if ( 'grid' === $mode ) {
 	add_screen_option( 'dateFormatted', array( 'label' => __( 'Date' ) ) );
 	add_screen_option( 'mime', array( 'label' => __( 'Mime-type' ) ) );
 
+	get_current_screen()->add_help_tab( array(
+	'id'		=> 'overview',
+	'title'		=> __( 'Overview' ),
+	'content'	=>
+		'<p>' . __( 'All the files you&#8217;ve uploaded are listed in the Media Library, with the most recent uploads listed first. You can use the Screen Options tab to customize the display of this screen.' ) . '</p>'
+	) );
+
+	get_current_screen()->set_help_sidebar(
+		'<p><strong>' . __( 'For more information:' ) . '</strong></p>' .
+		'<p>' . __( '<a href="http://codex.wordpress.org/Media_Library_Screen" target="_blank">Documentation on Media Library</a>' ) . '</p>' .
+		'<p>' . __( '<a href="https://wordpress.org/support/" target="_blank">Support Forums</a>' ) . '</p>'
+	);
+
+	$title = __('Media Library');
+	$parent_file = 'upload.php';
+
 	require_once( ABSPATH . 'wp-admin/admin-header.php' );
+	?>
+	<div class="wrap">
+		<h2>
+		<?php
+		echo esc_html( $title );
+		if ( current_user_can( 'upload_files' ) ) { ?>
+			<a href="media-new.php" class="add-new-h2"><?php echo esc_html_x( 'Add New', 'file' ); ?></a><?php
+		}
+		?>
+		</h2>
+	</div>
+	<?php
 	include( ABSPATH . 'wp-admin/admin-footer.php' );
 	exit;
 }

wp-includes/css/media-views-rtl.css

@@ -2572,63 +2572,35 @@ video#inline-media-node {
 /**
  * Media Grid
  */
-
+.media-grid-view,
-.media-grid-view h1 {
+.media-grid-view .media-frame-content,
-	color: #222;
+.media-grid-view .attachments-browser .attachments,
-	font-size: 23px;
+.media-grid-view .uploader-inline-content {
-	font-weight: 400;
+	position: static;
-	margin: 10px 0 0;
-	padding: 9px 22px 4px 15px;
-	line-height: 29px;
-}
-
-.media-grid-view .view-switch {
-	display: inline-block;
-	float: none;
-	margin-top: 13px;
-	vertical-align: middle;
-}
-
-/**
- * Position both the frame and the uploader window into the content
- * area of the screen.
- */
-.media-grid-view {
-	z-index: 1;
-	position: fixed;
-	bottom: 0;
-	right: 160px;
-	left: 0;
-	top: 32px;
-	-webkit-transition: 200ms ease-in-out;
-	transition: 200ms ease-in-out;
-}
-
-.media-grid-view-options {
-	top: 120px;
-}
-
-@media screen and (max-width: 900px) {
-	.auto-fold .media-grid-view {
-		right: 36px;
-	}
-}
-@media screen and (max-width: 782px) {
-	.media-grid-view {
-		top: 46px;
-	}
-	.auto-fold .media-grid-view {
-		right: 0px;
-		bottom: 0px;
-	}
 }
 
 /* Regions we don't use at all */
+.media-grid-view .media-frame-title,
 .media-grid-view .media-frame-toolbar,
 .media-grid-view .media-frame-menu {
 	display: none;
 }
 
+.media-grid-view .media-frame-content {
+	background-color: transparent;
+	border: none;
+}
+
+.media-grid-view .uploader-inline {
+	position: relative;
+	top: auto;
+	left: auto;
+	right: auto;
+	bottom: auto;
+	padding-top: 0;
+	margin-top: 0;
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
@@ -2644,9 +2616,53 @@ video#inline-media-node {
 	color: #555;
 	display: inline-block;
 	font-size: 13px;
+	margin: 20px 0;
 	padding: 0 20px;
 	position: relative;
 	width: 100%;
+	height: auto;
+	border: none;
+}
+
+.media-grid-view input[type="search"] {
+	margin: 1px;
+	padding: 3px 5px;
+	position: absolute;
+	left: 10px;
+	top: 9px;
+	font-size: 16px;
+	font-weight: 300;
+	line-height: 1.5;
+	width: 280px;
+}
+
+.media-grid-view .view-switch {
+	display: inline-block;
+	float: none;
+	vertical-align: middle;
+	padding: 15px 0;
+	margin: 0 0 0 20px;
+}
+
+.media-grid-view select.attachment-filters {
+	margin: 0 0 0 10px;
+}
+
+.media-grid-view .spinner {
+	margin-top: 15px;
+}
+
+.media-grid-view .attachments-browser {
+	padding: 0;
+}
+
+.media-grid-view .attachments-browser .no-media {
+	color: #999;
+	font-size: 18px;
+	font-style: normal;
+	margin: 0;
+	padding: 100px 0 0;
+	text-align: center;
 }
 
 /**
@@ -2849,29 +2865,17 @@ video#inline-media-node {
 	margin-top: 3px;
 }
 
-.media-grid-view.hide-router .media-frame-title {
+@media only screen and (max-width: 1120px) {
-	-webkit-box-shadow: none;
+	.media-grid-view .media-toolbar-primary,
-	box-shadow: none;
+	.media-grid-view .media-toolbar-secondary {
-}
+		float: none;
+	}
 
-.media-grid-view .media-frame-content {
+	.media-grid-view input[type="search"] {
-	background-color: transparent;
+		margin: 20px 0;
-	bottom: 40px;
+		position: static;
-}
+		width: 100%;
-@media screen and (max-width: 782px) {
+		max-width: none !important;
-	.media-grid-view .media-frame-content {
-		border-bottom: none;
-		bottom: 0;
 	}
 }
 
-@media only screen and (max-width: 640px), screen and (max-height: 400px) {
-	.media-grid-view .media-frame-title {
-		display: block;
-		width: auto;
-		bottom: auto;
-		left: 0;
-		top: 0;
-		height: 60px;
-	}
-}

wp-includes/css/media-views.css

@@ -2572,63 +2572,35 @@ video#inline-media-node {
 /**
  * Media Grid
  */
-
+.media-grid-view,
-.media-grid-view h1 {
+.media-grid-view .media-frame-content,
-	color: #222;
+.media-grid-view .attachments-browser .attachments,
-	font-size: 23px;
+.media-grid-view .uploader-inline-content {
-	font-weight: 400;
+	position: static;
-	margin: 10px 0 0;
-	padding: 9px 15px 4px 22px;
-	line-height: 29px;
-}
-
-.media-grid-view .view-switch {
-	display: inline-block;
-	float: none;
-	margin-top: 13px;
-	vertical-align: middle;
-}
-
-/**
- * Position both the frame and the uploader window into the content
- * area of the screen.
- */
-.media-grid-view {
-	z-index: 1;
-	position: fixed;
-	bottom: 0;
-	left: 160px;
-	right: 0;
-	top: 32px;
-	-webkit-transition: 200ms ease-in-out;
-	transition: 200ms ease-in-out;
-}
-
-.media-grid-view-options {
-	top: 120px;
-}
-
-@media screen and (max-width: 900px) {
-	.auto-fold .media-grid-view {
-		left: 36px;
-	}
-}
-@media screen and (max-width: 782px) {
-	.media-grid-view {
-		top: 46px;
-	}
-	.auto-fold .media-grid-view {
-		left: 0px;
-		bottom: 0px;
-	}
 }
 
 /* Regions we don't use at all */
+.media-grid-view .media-frame-title,
 .media-grid-view .media-frame-toolbar,
 .media-grid-view .media-frame-menu {
 	display: none;
 }
 
+.media-grid-view .media-frame-content {
+	background-color: transparent;
+	border: none;
+}
+
+.media-grid-view .uploader-inline {
+	position: relative;
+	top: auto;
+	right: auto;
+	left: auto;
+	bottom: auto;
+	padding-top: 0;
+	margin-top: 0;
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
@@ -2644,9 +2616,53 @@ video#inline-media-node {
 	color: #555;
 	display: inline-block;
 	font-size: 13px;
+	margin: 20px 0;
 	padding: 0 20px;
 	position: relative;
 	width: 100%;
+	height: auto;
+	border: none;
+}
+
+.media-grid-view input[type="search"] {
+	margin: 1px;
+	padding: 3px 5px;
+	position: absolute;
+	right: 10px;
+	top: 9px;
+	font-size: 16px;
+	font-weight: 300;
+	line-height: 1.5;
+	width: 280px;
+}
+
+.media-grid-view .view-switch {
+	display: inline-block;
+	float: none;
+	vertical-align: middle;
+	padding: 15px 0;
+	margin: 0 20px 0 0;
+}
+
+.media-grid-view select.attachment-filters {
+	margin: 0 10px 0 0;
+}
+
+.media-grid-view .spinner {
+	margin-top: 15px;
+}
+
+.media-grid-view .attachments-browser {
+	padding: 0;
+}
+
+.media-grid-view .attachments-browser .no-media {
+	color: #999;
+	font-size: 18px;
+	font-style: normal;
+	margin: 0;
+	padding: 100px 0 0;
+	text-align: center;
 }
 
 /**
@@ -2849,29 +2865,17 @@ video#inline-media-node {
 	margin-top: 3px;
 }
 
-.media-grid-view.hide-router .media-frame-title {
+@media only screen and (max-width: 1120px) {
-	-webkit-box-shadow: none;
+	.media-grid-view .media-toolbar-primary,
-	box-shadow: none;
+	.media-grid-view .media-toolbar-secondary {
-}
+		float: none;
+	}
 
-.media-grid-view .media-frame-content {
+	.media-grid-view input[type="search"] {
-	background-color: transparent;
+		margin: 20px 0;
-	bottom: 40px;
+		position: static;
-}
+		width: 100%;
-@media screen and (max-width: 782px) {
+		max-width: none !important;
-	.media-grid-view .media-frame-content {
-		border-bottom: none;
-		bottom: 0;
 	}
 }
 
-@media only screen and (max-width: 640px), screen and (max-height: 400px) {
-	.media-grid-view .media-frame-title {
-		display: block;
-		width: auto;
-		bottom: auto;
-		right: 0;
-		top: 0;
-		height: 60px;
-	}
-}

wp-includes/js/media-grid.js

@@ -1,4 +1,4 @@
-/* global _wpMediaViewsL10n, MediaElementPlayer, mediaGridSettings*/
+/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings */
 (function($, _, Backbone, wp) {
 	var media = wp.media, l10n;
 
@@ -91,7 +91,7 @@
 		initialize: function() {
 			var self = this;
 			_.defaults( this.options, {
-				title:     l10n.mediaLibraryTitle,
+				title:     '',
 				modal:     false,
 				selection: [],
 				library:   {},
@@ -169,7 +169,7 @@
 			// Verify pushState support and activate
 			if ( window.history && window.history.pushState ) {
 				Backbone.history.start({
-					root: mediaGridSettings.adminUrl,
+					root: _wpMediaGridSettings.adminUrl,
 					pushState: true
 				});
 			}
@@ -209,12 +209,6 @@
 				filterable: 'mime-types'
 			});
 
-			libraryState._renderTitle = function( view ) {
-				var text = this.get('title') || '';
-				view.$el.addClass( 'wrap' );
-				text += '<a class="add-new-h2">Add New</a>';
-				view.$el.html( text );
-			};
 			// Add the default states.
 			this.states.add([
 				libraryState
@@ -229,7 +223,8 @@
 			this.on( 'edit:attachment', this.editAttachment, this );
 		},
 
-		addNewClickHandler: function() {
+		addNewClickHandler: function( event ) {
+			event.preventDefault();
 			this.trigger( 'toggle:upload:attachment' );
 		},
 
@@ -446,11 +441,9 @@
 			this.on( 'content:render:edit-image', this.editImageContentUgh, this );
 			this.on( 'close', this.detach );
 
-			// Only need a tab to Edit Image for images.
+
-			if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
 				this.on( 'router:create', this.createRouter, this );
 				this.on( 'router:render', this.browseRouter, this );
-			}
 
 			this.options.hasPrevious = this.hasPrevious();
 			this.options.hasNext = this.hasNext();
@@ -559,14 +552,20 @@
 		browseRouter: function( view ) {
 			view.set({
 				'edit-metadata': {
-					text:     'Edit Metadata',
+					text:     l10n.editMetadata,
 					priority: 20
-				},
+				}
+			});
+
+			// Only need a tab to Edit Image for images.
+			if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
+				view.set({
 				'edit-image': {
-					text:     'Edit Image',
+						text:     l10n.editImage,
 					priority: 40
 				}
 			});
+			}
 		},
 
 		resetContent: function() {
@@ -693,4 +692,4 @@
 		}
 	});
 
-}(jQuery, _, Backbone, wp));
+}(jQuery, _, Backbone, wp));

wp-includes/js/media-views.js

@@ -5772,11 +5772,12 @@
 			this.views.add( this.attachments );
 
 			this.attachmentsNoResults = new media.View({
-				controller: this.controller
+				controller: this.controller,
+				tagName: 'p'
 			});
 
 			this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
-			this.attachmentsNoResults.$el.html( 'No media found.' );
+			this.attachmentsNoResults.$el.html( l10n.noMedia );
 
 			this.views.add( this.attachmentsNoResults );
 

wp-includes/media.php

@@ -2970,6 +2970,10 @@ function wp_enqueue_media( $args = array() ) {
  		'updateVideoPlaylist'      => __( 'Update video playlist' ),
  		'addToVideoPlaylist'       => __( 'Add to video playlist' ),
  		'addToVideoPlaylistTitle'  => __( 'Add to Video Playlist' ),
+
+ 		// Media Library
+ 		'editMetadata' => __( 'Edit Metadata' ),
+ 		'noMedia'      => __( 'No media found. Try a different search.' ),
 	);
 
 	/**
@@ -3245,4 +3249,4 @@ function attachment_url_to_postid( $url ) {
 	if ( ! empty( $post_id ) ) {
 		return (int) $post_id;
 	}
-}
+}