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
parent
d617598716
commit
448422f8ae
|
|
@ -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 ) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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’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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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() {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 );
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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.' ),
|
||||
);
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue