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. git-svn-id: https://develop.svn.wordpress.org/trunk@29136 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Dominik Schilling (ocean90)
parent
cf0e666184
commit
1264558022
@ -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 ) {
|
||||
|
||||
@ -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 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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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));
|
||||
|
||||
@ -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 );
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user