Add the ability to click "Edit" and kick out to the advanced image editor from within the Media modal. New window, with "Refresh" offered on your return. fixes #22743. props koopersmith, nacin, helenyhou.

git-svn-id: http://core.svn.wordpress.org/trunk@23095 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Mark Jaquith 2012-12-06 05:52:19 +00:00
parent 68524f7c6f
commit 1419b404a8
6 changed files with 73 additions and 42 deletions

View File

@ -4150,23 +4150,26 @@ borger color while dragging a file over the uploader drop area */
margin: 8px 0; margin: 8px 0;
} }
.post-php .imgedit-wrap table {
width: 100%;
}
.describe .imgedit-wrap table td, .describe .imgedit-wrap table td,
.wp_attachment_holder .imgedit-wrap table td { .wp_attachment_holder .imgedit-wrap table td {
vertical-align: top; vertical-align: top;
padding-top: 0; padding-top: 0;
} }
.imgedit-wrap p,
.describe .imgedit-wrap table td {
font-size: 11px;
line-height: 18px;
}
.describe .imgedit-wrap table td.imgedit-settings { .describe .imgedit-wrap table td.imgedit-settings {
padding: 0 5px; padding: 0 5px;
} }
.wp_attachment_holder .imgedit-wrap table td.imgedit-settings {
width: 250px;
}
td.imgedit-settings input { td.imgedit-settings input {
margin-top: 0;
vertical-align: middle; vertical-align: middle;
} }
@ -4349,19 +4352,10 @@ td.imgedit-settings input {
margin-bottom: 8px; margin-bottom: 8px;
} }
.imgedit-help ul li {
font-size: 11px;
}
a.imgedit-help-toggle { a.imgedit-help-toggle {
text-decoration: none; text-decoration: none;
} }
#wpbody-content .imgedit-response div {
width: 600px;
margin: 8px;
}
.form-table td.imgedit-response { .form-table td.imgedit-response {
padding: 0; padding: 0;
} }
@ -4389,8 +4383,8 @@ span.imgedit-scale-warn {
.imgedit-group { .imgedit-group {
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
-webkit-border-radius: 8px; -webkit-border-radius: 3px;
border-radius: 8px; border-radius: 3px;
margin-bottom: 8px; margin-bottom: 8px;
padding: 2px 10px; padding: 2px 10px;
} }

View File

@ -191,7 +191,7 @@ function wp_image_editor($post_id, $msg = false) {
</td></tr> </td></tr>
</tbody></table> </tbody></table>
<div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div> <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
<script type="text/javascript">imageEdit.init(<?php echo $post_id; ?>);</script> <script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script>
<div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div> <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div>
</div> </div>
<?php <?php

View File

@ -2270,20 +2270,18 @@ function multisite_over_quota_message() {
function edit_form_image_editor() { function edit_form_image_editor() {
$post = get_post(); $post = get_post();
$open = isset( $_GET['image-editor'] );
if ( $open )
require_once ABSPATH . 'wp-admin/includes/image-edit.php';
$thumb_url = false; $thumb_url = false;
if ( $attachment_id = intval( $post->ID ) ) if ( $attachment_id = intval( $post->ID ) )
$thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 600 ), true ); $thumb_url = wp_get_attachment_image_src( $attachment_id, array( 900, 450 ), true );
$filename = esc_html( basename( $post->guid ) ); $filename = esc_html( basename( $post->guid ) );
$title = esc_attr( $post->post_title ); $title = esc_attr( $post->post_title );
$alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true ); $alt_text = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
$media_dims = '';
$meta = wp_get_attachment_metadata( $post->ID );
if ( is_array( $meta ) && array_key_exists( 'width', $meta ) && array_key_exists( 'height', $meta ) )
$media_dims .= "<span id='media-dims-$post->ID'>{$meta['width']}&nbsp;&times;&nbsp;{$meta['height']}</span> ";
$media_dims = apply_filters( 'media_meta', $media_dims, $post );
$att_url = wp_get_attachment_url( $post->ID ); $att_url = wp_get_attachment_url( $post->ID );
if ( wp_attachment_is_image( $post->ID ) ) : if ( wp_attachment_is_image( $post->ID ) ) :
@ -2296,11 +2294,13 @@ function edit_form_image_editor() {
<div class="wp_attachment_holder"> <div class="wp_attachment_holder">
<div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div>
<div class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>"> <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image" id="media-head-<?php echo $attachment_id; ?>">
<p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p> <p id="thumbnail-head-<?php echo $attachment_id; ?>"><img class="thumbnail" src="<?php echo set_url_scheme( $thumb_url[0] ); ?>" style="max-width:100%" alt="" /></p>
<p><?php echo $image_edit_button; ?></p> <p><?php echo $image_edit_button; ?></p>
</div> </div>
<div style="display:none" class="image-editor" id="image-editor-<?php echo $attachment_id; ?>"></div> <div<?php if ( ! $open ) echo ' style="display:none"'; ?> class="image-editor" id="image-editor-<?php echo $attachment_id; ?>">
<?php if ( $open ) wp_image_editor( $attachment_id ); ?>
</div>
</div> </div>
<?php endif; ?> <?php endif; ?>

View File

@ -1308,6 +1308,7 @@
float: left; float: left;
max-width: 120px; max-width: 120px;
max-height: 120px; max-height: 120px;
margin-top: 5px;
margin-right: 10px; margin-right: 10px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -1347,17 +1348,30 @@
max-width: 100%; max-width: 100%;
} }
.attachment-info .delete-attachment a { .attachment-info .edit-attachment,
color: red; .attachment-info .refresh-attachment,
padding: 2px 4px; .attachment-info .delete-attachment {
margin: -2px -4px; display: block;
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
} }
.attachment-info .delete-attachment a:hover { .attachment-info .refresh-attachment,
color: #fff; .attachment-details.needs-refresh .attachment-info .edit-attachment {
background: red; display: none;
}
.attachment-details.needs-refresh .attachment-info .refresh-attachment,
.attachment-info .edit-attachment {
display: block;
}
.attachment-info .delete-attachment {
color: #bc0b0b;
}
.attachment-info .delete-attachment:hover {
color: red;
} }
/** /**

View File

@ -4021,7 +4021,9 @@
'change [data-setting] input': 'updateSetting', 'change [data-setting] input': 'updateSetting',
'change [data-setting] select': 'updateSetting', 'change [data-setting] select': 'updateSetting',
'change [data-setting] textarea': 'updateSetting', 'change [data-setting] textarea': 'updateSetting',
'click .delete-attachment': 'deleteAttachment' 'click .delete-attachment': 'deleteAttachment',
'click .edit-attachment': 'editAttachment',
'click .refresh-attachment': 'refreshAttachment'
}, },
initialize: function() { initialize: function() {
@ -4038,11 +4040,21 @@
return this; return this;
}, },
deleteAttachment: function(event) { deleteAttachment: function( event ) {
event.preventDefault(); event.preventDefault();
if ( confirm( l10n.warnDelete ) ) if ( confirm( l10n.warnDelete ) )
this.model.destroy(); this.model.destroy();
},
editAttachment: function( event ) {
this.$el.addClass('needs-refresh');
},
refreshAttachment: function( event ) {
this.$el.removeClass('needs-refresh');
event.preventDefault();
this.model.fetch();
} }
}); });

View File

@ -1337,10 +1337,13 @@ function wp_prepare_attachment_for_js( $attachment ) {
'update' => false, 'update' => false,
'delete' => false, 'delete' => false,
), ),
'editLink' => false,
); );
if ( current_user_can( 'edit_post', $attachment->ID ) ) if ( current_user_can( 'edit_post', $attachment->ID ) ) {
$response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID ); $response['nonces']['update'] = wp_create_nonce( 'update-post_' . $attachment->ID );
$response['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
}
if ( current_user_can( 'delete_post', $attachment->ID ) ) if ( current_user_can( 'delete_post', $attachment->ID ) )
$response['nonces']['delete'] = wp_create_nonce( 'delete-post_' . $attachment->ID ); $response['nonces']['delete'] = wp_create_nonce( 'delete-post_' . $attachment->ID );
@ -1703,14 +1706,22 @@ function wp_print_media_templates() {
<div class="details"> <div class="details">
<div class="filename">{{ data.filename }}</div> <div class="filename">{{ data.filename }}</div>
<div class="uploaded">{{ data.dateFormatted }}</div> <div class="uploaded">{{ data.dateFormatted }}</div>
<# if ( 'image' === data.type && ! data.uploading && data.width && data.height ) { #>
<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div> <# if ( 'image' === data.type && ! data.uploading ) { #>
<# if ( data.width && data.height ) { #>
<div class="dimensions">{{ data.width }} &times; {{ data.height }}</div>
<# } #>
<# if ( data.can.save ) { #>
<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
<a class="refresh-attachment" href="#"><?php _e( 'Refresh' ); ?></a>
<# } #>
<# } #> <# } #>
<# if ( ! data.uploading && data.can.remove ) { #> <# if ( ! data.uploading && data.can.remove ) { #>
<div class="delete-attachment"> <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
<a href="#"><?php _e( 'Delete Permanently' ); ?></a>
</div>
<# } #> <# } #>
<div class="compat-meta"> <div class="compat-meta">
<# if ( data.compat && data.compat.meta ) { #> <# if ( data.compat && data.compat.meta ) { #>
{{{ data.compat.meta }}} {{{ data.compat.meta }}}