Changeset 23095

Timestamp:

12/06/2012 05:52:19 AM (12 years ago)

Author:

markjaquith

Message:

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.

Location:

trunk

Files:

• wp-admin/css/wp-admin.css (modified) (4 diffs)
• wp-admin/includes/image-edit.php (modified) (1 diff)
• wp-admin/includes/media.php (modified) (2 diffs)
• wp-includes/css/media-views.css (modified) (2 diffs)
• wp-includes/js/media-views.js (modified) (2 diffs)
• wp-includes/media.php (modified) (2 diffs)

trunk/wp-admin/css/wp-admin.css

@@ -4151 +4151 @@
 }
 
+.post-php .imgedit-wrap table {
+    width: 100%;
+}
+
 .describe .imgedit-wrap table td,
 .wp_attachment_holder .imgedit-wrap table td {
@@ -4157 +4161 @@
 }
 
-.imgedit-wrap p,
-.describe .imgedit-wrap table td {
-    font-size: 11px;
-    line-height: 18px;
-}
-
 .describe .imgedit-wrap table td.imgedit-settings {
     padding: 0 5px;
 }
 
+.wp_attachment_holder .imgedit-wrap table td.imgedit-settings {
+    width: 250px;
+}
+
 td.imgedit-settings input {
+    margin-top: 0;
     vertical-align: middle;
 }
@@ -4350 +4353 @@
 }
 
-.imgedit-help ul li {
-    font-size: 11px;
-}
-
 a.imgedit-help-toggle {
     text-decoration: none;
-}
-
-#wpbody-content .imgedit-response div {
-    width: 600px;
-    margin: 8px;
 }
 
@@ -4390 +4384 @@
     border-width: 1px;
     border-style: solid;
-    -webkit-border-radius: 8px;
-    border-radius: 8px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
     margin-bottom: 8px;
     padding: 2px 10px;

trunk/wp-admin/includes/image-edit.php

@@ -192 +192 @@
     </tbody></table>
     <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>

trunk/wp-admin/includes/media.php

@@ -2271 +2271 @@
     $post = get_post();
 
+    $open = isset( $_GET['image-editor'] );
+    if ( $open )
+        require_once ABSPATH . 'wp-admin/includes/image-edit.php';
+
     $thumb_url = false;
     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 ) );
     $title = esc_attr( $post->post_title );
     $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 );
@@ -2297 +2295 @@
         <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><?php echo $image_edit_button; ?></p>
         </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>
     <?php endif; ?>

trunk/wp-includes/css/media-views.css

@@ -1309 +1309 @@
     max-width: 120px;
     max-height: 120px;
+    margin-top: 5px;
     margin-right: 10px;
     margin-bottom: 5px;
@@ -1348 +1349 @@
 }
 
-.attachment-info .delete-attachment a {
-    color: red;
-    padding: 2px 4px;
-    margin: -2px -4px;
+.attachment-info .edit-attachment,
+.attachment-info .refresh-attachment,
+.attachment-info .delete-attachment {
+    display: block;
     text-decoration: none;
     white-space: nowrap;
 }
 
-.attachment-info .delete-attachment a:hover {
-    color: #fff;
-    background: red;
+.attachment-info .refresh-attachment,
+.attachment-details.needs-refresh .attachment-info .edit-attachment {
+    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;
 }
 

trunk/wp-includes/js/media-views.js

@@ -4022 +4022 @@
             'change [data-setting] select':   'updateSetting',
             'change [data-setting] textarea': 'updateSetting',
-            'click .delete-attachment':       'deleteAttachment'
+            'click .delete-attachment':       'deleteAttachment',
+            'click .edit-attachment':         'editAttachment',
+            'click .refresh-attachment':      'refreshAttachment'
         },
 
@@ -4039 +4041 @@
         },
 
-        deleteAttachment: function(event) {
+        deleteAttachment: function( event ) {
             event.preventDefault();
 
             if ( confirm( l10n.warnDelete ) )
                 this.model.destroy();
+        },
+
+        editAttachment: function( event ) {
+            this.$el.addClass('needs-refresh');
+        },
+
+        refreshAttachment: function( event ) {
+            this.$el.removeClass('needs-refresh');
+            event.preventDefault();
+            this.model.fetch();
         }
     });

trunk/wp-includes/media.php

@@ -1338 +1338 @@
             '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['editLink'] = get_edit_post_link( $attachment->ID, 'raw' );
+    }
 
     if ( current_user_can( 'delete_post', $attachment->ID ) )
@@ -1704 +1707 @@
                 <div class="filename">{{ data.filename }}</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 ) { #>
-                    <div class="delete-attachment">
-                        <a href="#"><?php _e( 'Delete Permanently' ); ?></a>
-                    </div>
+                    <a class="delete-attachment" href="#"><?php _e( 'Delete Permanently' ); ?></a>
                 <# } #>
+
                 <div class="compat-meta">
                     <# if ( data.compat && data.compat.meta ) { #>