<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[29136] trunk/src: Media Grid improvements:</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/29136">29136</a></dd>
<dt>Author</dt> <dd>ocean90</dd>
<dt>Date</dt> <dd>2014-07-13 16:15:36 +0000 (Sun, 13 Jul 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Media Grid improvements:
* Remove fixed elements.
* Adjusts toolbar and search, fixes <a href="http://core.trac.wordpress.org/ticket/28833">#28833</a>.
* Add link to Add New button, fixes <a href="http://core.trac.wordpress.org/ticket/28825">#28825</a>.
* Add "Edit Metadata" tab to all items, "Edit Image" only for images
* Make strings translatable.
* First pass for help tab.
see <a href="http://core.trac.wordpress.org/ticket/28850">#28850</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjsmediajs">trunk/src/wp-admin/js/media.js</a></li>
<li><a href="#trunksrcwpadminuploadphp">trunk/src/wp-admin/upload.php</a></li>
<li><a href="#trunksrcwpincludescssmediaviewscss">trunk/src/wp-includes/css/media-views.css</a></li>
<li><a href="#trunksrcwpincludesjsmediagridjs">trunk/src/wp-includes/js/media-grid.js</a></li>
<li><a href="#trunksrcwpincludesjsmediaviewsjs">trunk/src/wp-includes/js/media-views.js</a></li>
<li><a href="#trunksrcwpincludesmediaphp">trunk/src/wp-includes/media.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjsmediajs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/js/media.js (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/js/media.js 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-admin/js/media.js 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx"> // Open up a manage media frame into the grid.
</span><span class="cx"> wp.media && wp.media({
</span><span class="cx"> frame: 'manage',
</span><del>- container: $('#wpbody-content')
</del><ins>+ container: $('#wpbody-content > .wrap')
</ins><span class="cx"> }).open();
</span><span class="cx">
</span><span class="cx"> $( '#find-posts-submit' ).click( function( event ) {
</span></span></pre></div>
<a id="trunksrcwpadminuploadphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-admin/upload.php (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-admin/upload.php 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-admin/upload.php 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -24,7 +24,9 @@
</span><span class="cx"> wp_enqueue_media();
</span><span class="cx"> wp_enqueue_script( 'media-grid' );
</span><span class="cx"> wp_enqueue_script( 'media' );
</span><del>- wp_localize_script( 'media-grid', 'mediaGridSettings', array( 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH ) ) );
</del><ins>+ wp_localize_script( 'media-grid', '_wpMediaGridSettings', array(
+ 'adminUrl' => parse_url( self_admin_url(), PHP_URL_PATH ),
+ ) );
</ins><span class="cx">
</span><span class="cx"> add_screen_option( 'misc_screen_options', array( 'option' => 'manageuploadgridcolumnshidden', 'id' => 'grid' ) );
</span><span class="cx"> add_screen_option( 'title', array( 'label' => __( 'Name' ) ) );
</span><span class="lines">@@ -32,7 +34,35 @@
</span><span class="cx"> add_screen_option( 'dateFormatted', array( 'label' => __( 'Date' ) ) );
</span><span class="cx"> add_screen_option( 'mime', array( 'label' => __( 'Mime-type' ) ) );
</span><span class="cx">
</span><ins>+ get_current_screen()->add_help_tab( array(
+ 'id' => 'overview',
+ 'title' => __( 'Overview' ),
+ 'content' =>
+ '<p>' . __( 'All the files you’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';
+
</ins><span class="cx"> require_once( ABSPATH . 'wp-admin/admin-header.php' );
</span><ins>+ ?>
+ <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
</ins><span class="cx"> include( ABSPATH . 'wp-admin/admin-footer.php' );
</span><span class="cx"> exit;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpincludescssmediaviewscss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/css/media-views.css (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/css/media-views.css 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-includes/css/media-views.css 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -2572,63 +2572,35 @@
</span><span class="cx"> /**
</span><span class="cx"> * Media Grid
</span><span class="cx"> */
</span><del>-
-.media-grid-view h1 {
- color: #222;
- font-size: 23px;
- font-weight: 400;
- margin: 10px 0 0;
- padding: 9px 15px 4px 22px;
- line-height: 29px;
</del><ins>+.media-grid-view,
+.media-grid-view .media-frame-content,
+.media-grid-view .attachments-browser .attachments,
+.media-grid-view .uploader-inline-content {
+ position: static;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view .view-switch {
- display: inline-block;
- float: none;
- margin-top: 13px;
- vertical-align: middle;
</del><ins>+/* 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;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-/**
- * 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;
</del><ins>+.media-grid-view .media-frame-content {
+ background-color: transparent;
+ border: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view-options {
- top: 120px;
</del><ins>+.media-grid-view .uploader-inline {
+ position: relative;
+ top: auto;
+ right: auto;
+ left: auto;
+ bottom: auto;
+ padding-top: 0;
+ margin-top: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-@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-toolbar,
-.media-grid-view .media-frame-menu {
- display: none;
-}
-
</del><span class="cx"> /**
</span><span class="cx"> * Copied styles from the Add theme toolbar.
</span><span class="cx"> *
</span><span class="lines">@@ -2644,11 +2616,55 @@
</span><span class="cx"> color: #555;
</span><span class="cx"> display: inline-block;
</span><span class="cx"> font-size: 13px;
</span><ins>+ margin: 20px 0;
</ins><span class="cx"> padding: 0 20px;
</span><span class="cx"> position: relative;
</span><span class="cx"> width: 100%;
</span><ins>+ height: auto;
+ border: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.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;
+}
+
</ins><span class="cx"> /**
</span><span class="cx"> * The left and right buttons are copied from the expanded theme details modal.
</span><span class="cx"> *
</span><span class="lines">@@ -2849,29 +2865,17 @@
</span><span class="cx"> margin-top: 3px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.media-grid-view.hide-router .media-frame-title {
- -webkit-box-shadow: none;
- box-shadow: none;
-}
</del><ins>+@media only screen and (max-width: 1120px) {
+ .media-grid-view .media-toolbar-primary,
+ .media-grid-view .media-toolbar-secondary {
+ float: none;
+ }
</ins><span class="cx">
</span><del>-.media-grid-view .media-frame-content {
- background-color: transparent;
- bottom: 40px;
-}
-@media screen and (max-width: 782px) {
- .media-grid-view .media-frame-content {
- border-bottom: none;
- bottom: 0;
</del><ins>+ .media-grid-view input[type="search"] {
+ margin: 20px 0;
+ position: static;
+ width: 100%;
+ max-width: none !important;
</ins><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>-@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;
- }
-}
</del></span></pre></div>
<a id="trunksrcwpincludesjsmediagridjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-grid.js (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-grid.js 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-includes/js/media-grid.js 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -1,4 +1,4 @@
</span><del>-/* global _wpMediaViewsL10n, MediaElementPlayer, mediaGridSettings*/
</del><ins>+/* global _wpMediaViewsL10n, MediaElementPlayer, _wpMediaGridSettings */
</ins><span class="cx"> (function($, _, Backbone, wp) {
</span><span class="cx"> var media = wp.media, l10n;
</span><span class="cx">
</span><span class="lines">@@ -91,7 +91,7 @@
</span><span class="cx"> initialize: function() {
</span><span class="cx"> var self = this;
</span><span class="cx"> _.defaults( this.options, {
</span><del>- title: l10n.mediaLibraryTitle,
</del><ins>+ title: '',
</ins><span class="cx"> modal: false,
</span><span class="cx"> selection: [],
</span><span class="cx"> library: {},
</span><span class="lines">@@ -169,7 +169,7 @@
</span><span class="cx"> // Verify pushState support and activate
</span><span class="cx"> if ( window.history && window.history.pushState ) {
</span><span class="cx"> Backbone.history.start({
</span><del>- root: mediaGridSettings.adminUrl,
</del><ins>+ root: _wpMediaGridSettings.adminUrl,
</ins><span class="cx"> pushState: true
</span><span class="cx"> });
</span><span class="cx"> }
</span><span class="lines">@@ -209,12 +209,6 @@
</span><span class="cx"> filterable: 'mime-types'
</span><span class="cx"> });
</span><span class="cx">
</span><del>- 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 );
- };
</del><span class="cx"> // Add the default states.
</span><span class="cx"> this.states.add([
</span><span class="cx"> libraryState
</span><span class="lines">@@ -229,7 +223,8 @@
</span><span class="cx"> this.on( 'edit:attachment', this.editAttachment, this );
</span><span class="cx"> },
</span><span class="cx">
</span><del>- addNewClickHandler: function() {
</del><ins>+ addNewClickHandler: function( event ) {
+ event.preventDefault();
</ins><span class="cx"> this.trigger( 'toggle:upload:attachment' );
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -446,11 +441,9 @@
</span><span class="cx"> this.on( 'content:render:edit-image', this.editImageContentUgh, this );
</span><span class="cx"> this.on( 'close', this.detach );
</span><span class="cx">
</span><del>- // Only need a tab to Edit Image for images.
- if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
</del><ins>+
</ins><span class="cx"> this.on( 'router:create', this.createRouter, this );
</span><span class="cx"> this.on( 'router:render', this.browseRouter, this );
</span><del>- }
</del><span class="cx">
</span><span class="cx"> this.options.hasPrevious = this.hasPrevious();
</span><span class="cx"> this.options.hasNext = this.hasNext();
</span><span class="lines">@@ -559,14 +552,20 @@
</span><span class="cx"> browseRouter: function( view ) {
</span><span class="cx"> view.set({
</span><span class="cx"> 'edit-metadata': {
</span><del>- text: 'Edit Metadata',
</del><ins>+ text: l10n.editMetadata,
</ins><span class="cx"> priority: 20
</span><del>- },
</del><ins>+ }
+ });
+
+ // Only need a tab to Edit Image for images.
+ if ( 'undefined' !== typeof this.model && this.model.get( 'type' ) === 'image' ) {
+ view.set({
</ins><span class="cx"> 'edit-image': {
</span><del>- text: 'Edit Image',
</del><ins>+ text: l10n.editImage,
</ins><span class="cx"> priority: 40
</span><span class="cx"> }
</span><span class="cx"> });
</span><ins>+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> resetContent: function() {
</span><span class="lines">@@ -693,4 +692,4 @@
</span><span class="cx"> }
</span><span class="cx"> });
</span><span class="cx">
</span><del>-}(jQuery, _, Backbone, wp));
</del><span class="cx">\ No newline at end of file
</span><ins>+}(jQuery, _, Backbone, wp));
</ins></span></pre></div>
<a id="trunksrcwpincludesjsmediaviewsjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/media-views.js (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/media-views.js 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-includes/js/media-views.js 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -5772,11 +5772,12 @@
</span><span class="cx"> this.views.add( this.attachments );
</span><span class="cx">
</span><span class="cx"> this.attachmentsNoResults = new media.View({
</span><del>- controller: this.controller
</del><ins>+ controller: this.controller,
+ tagName: 'p'
</ins><span class="cx"> });
</span><span class="cx">
</span><span class="cx"> this.attachmentsNoResults.$el.addClass( 'hidden no-media' );
</span><del>- this.attachmentsNoResults.$el.html( 'No media found.' );
</del><ins>+ this.attachmentsNoResults.$el.html( l10n.noMedia );
</ins><span class="cx">
</span><span class="cx"> this.views.add( this.attachmentsNoResults );
</span><span class="cx">
</span></span></pre></div>
<a id="trunksrcwpincludesmediaphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/media.php (29135 => 29136)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/media.php 2014-07-13 15:12:00 UTC (rev 29135)
+++ trunk/src/wp-includes/media.php 2014-07-13 16:15:36 UTC (rev 29136)
</span><span class="lines">@@ -2970,6 +2970,10 @@
</span><span class="cx"> 'updateVideoPlaylist' => __( 'Update video playlist' ),
</span><span class="cx"> 'addToVideoPlaylist' => __( 'Add to video playlist' ),
</span><span class="cx"> 'addToVideoPlaylistTitle' => __( 'Add to Video Playlist' ),
</span><ins>+
+ // Media Library
+ 'editMetadata' => __( 'Edit Metadata' ),
+ 'noMedia' => __( 'No media found. Try a different search.' ),
</ins><span class="cx"> );
</span><span class="cx">
</span><span class="cx"> /**
</span><span class="lines">@@ -3245,4 +3249,4 @@
</span><span class="cx"> if ( ! empty( $post_id ) ) {
</span><span class="cx"> return (int) $post_id;
</span><span class="cx"> }
</span><del>-}
</del><span class="cx">\ No newline at end of file
</span><ins>+}
</ins></span></pre>
</div>
</div>
</body>
</html>