Changeset 46354

Timestamp:

09/30/2019 04:33:39 PM (5 years ago)

Author:

antpb

Message:

Media: Prevents clipping of text when scaling image edit screen.

Props sabernhardt, audrasjb, afercia.
See #47115.

Location:

trunk/src

Files:

• js/_enqueues/lib/image-edit.js (modified) (2 diffs)
• js/media/views/frame/select.js (modified) (2 diffs)
• wp-admin/css/edit.css (modified) (1 diff)
• wp-admin/css/media.css (modified) (3 diffs)
• wp-admin/includes/image-edit.php (modified) (4 diffs)
• wp-admin/includes/media.php (modified) (1 diff)
• wp-includes/css/editor.css (modified) (1 diff)

trunk/src/js/_enqueues/lib/image-edit.js

@@ -504 +504 @@
             // If a response is returned, close the editor and show an error.
             if ( ret.error ) {
-                $('#imgedit-response-' + postid).html('<div class="error"><p>' + ret.error + '</p></div>');
+                $('#imgedit-response-' + postid).html('<div class="error" role="alert"><p>' + ret.error + '</p></div>');
                 imageEdit.close(postid);
                 return;
@@ -518 +518 @@
 
             if ( ret.msg ) {
-                $('#imgedit-response-' + postid).html('<div class="updated"><p>' + ret.msg + '</p></div>');
+                $('#imgedit-response-' + postid).html('<div class="updated" role="alert"><p>' + ret.msg + '</p></div>');
             }
 

trunk/src/js/media/views/frame/select.js

@@ -63 +63 @@
      */
     createStates: function() {
+        console.log("test");
+        this.on( 'content:render:edit-image', this.editState, this );
         var options = this.options;
 
@@ -77 +79 @@
                 title:     options.title,
                 priority:  20
-            })
+            }),
+                new wp.media.controller.EditImage( { model: this.options.editImage } ),
         ]);
     },

trunk/src/wp-admin/css/edit.css

@@ -654 +654 @@
 .edit-form-section {
     margin-bottom: 20px;
+}
+
+.wp_attachment_details .attachment-content-description {
+    margin-top: 0.5385em;
+    display: inline-block;
+    min-height: 1.6923em;
 }
 

trunk/src/wp-admin/css/media.css

@@ -801 +801 @@
 }
 
+.attachment-details .setting + .description a:focus {
+        /* Only visible in Windows High Contrast mode */
+        outline: 1px solid transparent;
+}
+
 .wp_attachment_details .attachment-alt-text-description {
     margin-top: 5px;
@@ -1115 +1120 @@
 }
 
+.imgedit-settings .imgedit-original-dimensions {
+    display: inline-block;
+}
+
 .imgedit-settings .imgedit-scale input[type="text"],
 .imgedit-settings .imgedit-crop-ratio input[type="text"],
 .imgedit-settings .imgedit-crop-sel input[type="text"] {
-    width: 50px;
+    width: 80px;
     font-size: 14px;
     padding: 5px 8px;
@@ -1129 +1138 @@
     font-size: 13px;
     color: #444;
+}
+
+.imgedit-settings .imgedit-scale-button-wrapper {
+    margin-top: 0.3077em;
+    display: block;
 }
 

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

@@ -39 +39 @@
     if ( $msg ) {
         if ( isset( $msg->error ) ) {
-            $note = "<div class='error'><p>$msg->error</p></div>";
+            $note = "<div class='error' tabindex='-1' role='alert'><p>$msg->error</p></div>";
         } elseif ( isset( $msg->msg ) ) {
-            $note = "<div class='updated'><p>$msg->msg</p></div>";
+            $note = "<div class='updated' tabindex='-1' role='alert'><p>$msg->msg</p></div>";
         }
     }
@@ -63 +63 @@
                 /* translators: %s: Image width and height in pixels. */
                 __( 'Original dimensions %s' ),
-                $meta['width'] . ' &times; ' . $meta['height']
+                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
             );
             ?>
@@ -79 +79 @@
         <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
         <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span>
-        <input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
+        <div class="imgedit-scale-button-wrapper"><input id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /></div>
         </div>
         </fieldset>
@@ -236 +236 @@
 
         <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
-        <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand( 1, 99999 ); ?>" alt="" />
+        <img id="image-preview-<?php echo $post_id; ?>"  src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand( 1, 99999 ); ?>" alt="" />
         </div>
 

trunk/src/wp-admin/includes/media.php

@@ -3208 +3208 @@
     ?>
 
-    <label for="attachment_content"><strong><?php _e( 'Description' ); ?></strong>
+    <label for="attachment_content" class="attachment-content-description"><strong><?php _e( 'Description' ); ?></strong>
     <?php
 

trunk/src/wp-includes/css/editor.css

@@ -1323 +1323 @@
         /* .button-small is normally 11px, but a bit too small for these buttons. */
         font-size: 12px;
-        height: 26px;
+        min-height: 26px;
         line-height: 2;
     }