Upstream
/
WordPress
mirror of https://github.com/WordPress/WordPress.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
This commit is contained in:
Dominik Schilling 2014-07-13 16:16:15 +00:00
parent d617598716
commit 448422f8ae
12 changed files with 211 additions and 169 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
wp-admin/js/media.js
View File

@ -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 ) {

2
wp-admin/js/media.min.js vendored
View File

@ -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);

32
wp-admin/upload.php
View File

@ -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;
}

146
wp-includes/css/media-views-rtl.css
View File

@ -2572,63 +2572,35 @@ video#inline-media-node {
/**
* Media Grid
*/
.media-grid-view h1 {
color: #222;
font-size: 23px;
font-weight: 400;
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;
}
.media-grid-view,
.media-grid-view .media-frame-content,
.media-grid-view .attachments-browser .attachments,
.media-grid-view .uploader-inline-content {
position: static;
}
/* 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 {
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (max-width: 1120px) {
.media-grid-view .media-toolbar-primary,
.media-grid-view .media-toolbar-secondary {
float: none;
}
.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;
.media-grid-view input[type="search"] {
margin: 20px 0;
position: static;
width: 100%;
max-width: none !important;
}
}
@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;
}
}

2
wp-includes/css/media-views-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

146
wp-includes/css/media-views.css
View File

@ -2572,63 +2572,35 @@ video#inline-media-node {
/**
* Media Grid
*/
.media-grid-view h1 {
color: #222;
font-size: 23px;
font-weight: 400;
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;
}
.media-grid-view,
.media-grid-view .media-frame-content,
.media-grid-view .attachments-browser .attachments,
.media-grid-view .uploader-inline-content {
position: static;
}
/* 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 {
-webkit-box-shadow: none;
box-shadow: none;
}
@media only screen and (max-width: 1120px) {
.media-grid-view .media-toolbar-primary,
.media-grid-view .media-toolbar-secondary {
float: none;
}
.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;
.media-grid-view input[type="search"] {
margin: 20px 0;
position: static;
width: 100%;
max-width: none !important;
}
}
@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;
}
}

2
wp-includes/css/media-views.min.css vendored
View File

File diff suppressed because one or more lines are too long

33
wp-includes/js/media-grid.js
View File

@ -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));

2
wp-includes/js/media-grid.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
wp-includes/js/media-views.js
View File

@ -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 );

2
wp-includes/js/media-views.min.js vendored
View File

File diff suppressed because one or more lines are too long

6
wp-includes/media.php
View File

@ -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;
}
}
}