Ticket #28864: 28864.4.patch
File 28864.4.patch, 24.7 KB (added by , 10 years ago) |
---|
-
src/wp-admin/css/common.css
114 114 clear: both; 115 115 } 116 116 117 .contain-floats:after { 118 content: ''; 119 display: table; 120 clear: both; 121 } 122 117 123 /* Hide visually but not from screen readers */ 118 124 .screen-reader-text, 119 125 .screen-reader-text span, -
src/wp-admin/css/media.css
772 772 line-height: 16px; 773 773 } 774 774 775 .edit-attachment-frame .imgedit-settings input[type="text"] { 776 padding: 4px 6px; 777 } 778 775 779 .edit-attachment-frame .attachment-info { 776 780 overflow: auto; 777 781 -webkit-box-sizing: border-box; … … 837 841 838 842 .imgedit-wrap { 839 843 position: relative; 844 padding-top: 10px; 840 845 } 841 846 842 847 .imgedit-settings p { … … 843 848 margin: 8px 0 0; 844 849 } 845 850 851 .imgedit-settings fieldset { 852 margin: 8px 0; 853 } 854 855 .imgedit-settings legend { 856 margin-bottom: 5px; 857 } 858 846 859 .describe .imgedit-wrap .imgedit-settings { 847 860 padding: 0 5px; 848 861 } … … 853 866 854 867 .wp_attachment_holder .imgedit-wrap > div { 855 868 height: auto; 856 overflow: hidden;857 869 } 858 870 859 871 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content { 860 padding-right: 16px; 861 width: auto; 862 overflow: hidden; 872 padding: 3px 16px 0 0; 873 float: left; 863 874 } 864 875 865 876 .wp_attachment_holder .imgedit-wrap .imgedit-settings { … … 874 885 875 886 .imgedit-wait { 876 887 position: absolute; 877 top: 0;888 top: 10px; 878 889 background: #fff url(../images/spinner.gif) no-repeat center; 879 890 -webkit-background-size: 20px 20px; 880 891 background-size: 20px 20px; … … 899 910 overflow: hidden; 900 911 } 901 912 913 .imgedit-response + .wp_attachment_image { 914 overflow: visible; 915 } 916 902 917 .wp_attachment_image .button, 903 918 .A1B1 .button { 904 919 float: left; … … 916 931 } 917 932 918 933 .imgedit-menu { 934 min-width: 300px; 919 935 margin: 0 0 12px; 920 min-width: 300px;936 padding-left: 3px; 921 937 } 922 938 923 .imgedit-menu div { 939 .imgedit-menu .note-no-rotate { 940 clear: both; 941 margin: 0; 942 padding: 1em 0 0; 943 } 944 945 .wp-core-ui .imgedit-menu button { 924 946 float: left; 947 -webkit-box-sizing: content-box; 948 -moz-box-sizing: content-box; 949 box-sizing: content-box; 925 950 width: 32px; 926 border: 1px solid #d5d5d5; 951 height: 32px; 952 margin: 0 8px 0 0; 953 padding: 0; 927 954 background: #f1f1f1; 928 margin: 0 8px 0 0;929 height: 32px;930 955 -webkit-font-smoothing: antialiased; 931 956 -moz-osx-font-smoothing: grayscale; 932 text-align: center; 933 line-height: 28px; 957 line-height: 16px; 934 958 color: #777; 935 959 cursor: pointer; 936 960 } 937 961 938 .imgedit-menu div:before {962 .imgedit-menu button:before { 939 963 font: normal 20px/1 'dashicons'; 940 964 speak: none; 941 965 vertical-align: middle; 942 966 } 943 967 944 .imgedit-menu div:hover { 968 .imgedit-menu button:hover, 969 .imgedit-menu button:focus { 945 970 border-color: #c1c1c1; 946 971 background-color: #eaeaea; 947 972 color: #333; 948 973 } 949 974 950 .imgedit-menu div.disabled {975 .imgedit-menu button.disabled { 951 976 border-color: #ccc; 952 977 background-color: #ddd; 953 978 color: #777; … … 1025 1050 } 1026 1051 1027 1052 #poststuff .imgedit-group-top h3 { 1053 display: inline-block; 1028 1054 padding: 0; 1029 1055 } 1030 1056 … … 1033 1059 } 1034 1060 1035 1061 .imgedit-applyto .imgedit-label { 1036 padding: 2px0 0;1062 padding: .5em 0 0; 1037 1063 display: block; 1064 vertical-align: bottom; 1038 1065 } 1039 1066 1040 1067 .imgedit-help { … … 1042 1069 font-style: italic; 1043 1070 } 1044 1071 1045 a.imgedit-help-toggle { 1046 text-decoration: none; 1072 /* higher specificity */ 1073 .wp-core-ui .image-editor .imgedit-help-toggle { 1074 border: none; 1075 height: auto; 1076 padding: 0; 1077 background: transparent; 1078 color: #0074a2; 1079 font-size: 20px; 1080 line-height: 1; 1081 cursor: pointer; 1082 -webkit-box-shadow: none; 1083 box-shadow: none; 1047 1084 } 1048 1085 1049 1086 .form-table td.imgedit-response { … … 1070 1107 vertical-align: middle; 1071 1108 } 1072 1109 1110 .imgedit-save-target { 1111 margin: 8px 0; 1112 } 1113 1073 1114 .imgedit-group { 1074 1115 margin-bottom: 8px; 1075 1116 padding: 2px 10px; 1076 1117 } 1077 1118 1119 .imgedit-scale input[type="text"], 1120 .imgedit-crop-ratio input[type="text"], 1121 .imgedit-crop-sel input[type="text"] { 1122 width: 3.57142857em; 1123 line-height: 1.35714285; 1124 } 1125 1126 .imgedit-separator { 1127 display: inline-block; 1128 width: 0.53846153em; 1129 text-align: center; 1130 vertical-align: middle; 1131 font-size: 13px; 1132 color: #444; 1133 } 1134 1078 1135 audio, video { 1079 1136 display: inline-block; 1080 1137 max-width: 100%; -
src/wp-admin/includes/image-edit.php
38 38 39 39 ?> 40 40 <div class="imgedit-wrap"> 41 <div id="imgedit-panel-<?php echo $post_id; ?>" >41 <div id="imgedit-panel-<?php echo $post_id; ?>" class="contain-floats"> 42 42 43 43 <div class="imgedit-settings"> 44 44 <div class="imgedit-group"> 45 45 <div class="imgedit-group-top"> 46 <h3><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3> 46 <h3><?php _e( 'Scale Image' ); ?></h3> 47 <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Scale Image Help' ); ?></span></button> 47 48 <div class="imgedit-help"> 48 49 <p><?php _e('You can proportionally scale the original image. For best results, scaling should be done before you crop, flip, or rotate. Images can only be scaled down, not up.'); ?></p> 49 50 </div> … … 51 52 <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' × ' . $meta['height'] ); ?></p> 52 53 <?php endif ?> 53 54 <div class="imgedit-submit"> 54 <span class="nowrap"><input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" style="width:4em;" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> × <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" style="width:4em;" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" /> 55 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span> 56 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /> 55 56 <fieldset class="imgedit-scale"> 57 <legend><?php _e( 'New dimensions:' ); ?></legend> 58 <div class="nowrap"> 59 <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span> 60 <input type="text" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" /> 61 </label> 62 <span class="imgedit-separator">×</span> 63 <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span> 64 <input type="text" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" /> 65 </label> 66 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span> 67 <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' ); ?>" /> 57 68 </div> 69 </fieldset> 70 </div> 58 71 </div> 59 72 </div> 60 73 … … 81 94 82 95 <div class="imgedit-group"> 83 96 <div class="imgedit-group-top"> 84 <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3> 97 <h3><?php _e( 'Image Crop' ); ?></h3> 98 <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Image Crop Help' ); ?></span></button> 85 99 86 100 <div class="imgedit-help"> 87 101 <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p> … … 94 108 </div> 95 109 </div> 96 110 97 <p> 98 <?php _e('Aspect ratio:'); ?> 99 <span class="nowrap"> 100 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" /> 101 : 102 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> 103 </span> 104 </p> 111 <fieldset class="imgedit-crop-ratio"> 112 <legend><?php _e( 'Aspect ratio:' ); ?></legend> 113 <div class="nowrap"> 114 <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span> 115 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" /> 116 </label> 117 <span class="imgedit-separator">:</span> 118 <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span> 119 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" /> 120 </label> 121 </div> 122 </fieldset> 105 123 106 <p id="imgedit-crop-sel-<?php echo $post_id; ?>"> 107 <?php _e('Selection:'); ?> 108 <span class="nowrap"> 109 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 110 × 111 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 112 </span> 113 </p> 124 <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel"> 125 <legend><?php _e( 'Selection:' ); ?></legend> 126 <div class="nowrap"> 127 <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span> 128 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 129 </label> 130 <span class="imgedit-separator">×</span> 131 <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span> 132 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 133 </label> 134 </div> 135 </fieldset> 114 136 </div> 115 137 116 138 <?php if ( $thumb && $sub_sizes ) { … … 119 141 120 142 <div class="imgedit-group imgedit-applyto"> 121 143 <div class="imgedit-group-top"> 122 <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3> 144 <h3><?php _e( 'Thumbnail Settings' ); ?></h3> 145 <button type="button" class="dashicons dashicons-editor-help button imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" aria-expanded="false"><span class="screen-reader-text"><?php esc_html_e( 'Thumbnail Settings Help' ); ?></span></button> 123 146 <p class="imgedit-help"><?php _e('You can edit the image while preserving the thumbnail. For example, you may wish to have a square thumbnail that displays just a section of the image.'); ?></p> 124 147 </div> 125 148 … … 128 151 <br /><?php _e('Current thumbnail'); ?> 129 152 </p> 130 153 131 <p id="imgedit-save-target-<?php echo $post_id; ?>"> 132 <strong><?php _e('Apply changes to:'); ?></strong><br /> 154 <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target"> 155 <fieldset> 156 <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend> 133 157 134 158 <label class="imgedit-label"> 135 159 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" /> … … 142 166 <label class="imgedit-label"> 143 167 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> 144 168 <?php _e('All sizes except thumbnail'); ?></label> 145 </ p>169 </fieldset> 146 170 </div> 171 </div> 147 172 148 173 <?php } ?> 149 174 150 175 </div> 151 176 152 <div class="imgedit-panel-content ">177 <div class="imgedit-panel-content contain-floats"> 153 178 <?php echo $note; ?> 154 <div class="imgedit-menu ">155 < div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php179 <div class="imgedit-menu contain-floats"> 180 <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php 156 181 157 182 // On some setups GD library does not provide imagerotate() - Ticket #11536 158 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?> 159 <div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div> 160 <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div> 183 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { 184 $note_no_rotate = ''; 185 ?> 186 <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button> 187 <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button> 161 188 <?php } else { 162 $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');189 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>'; 163 190 ?> 164 <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>165 <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>191 <button type="button" class="imgedit-rleft button disabled" disabled></button> 192 <button type="button" class="imgedit-rright button disabled" disabled></button> 166 193 <?php } ?> 167 194 168 < div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>169 < div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>195 <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button> 196 <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button> 170 197 171 < div id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo disabled" title="<?php esc_attr_e( 'Undo' ); ?>"></div>172 < div id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo disabled" title="<?php esc_attr_e( 'Redo' ); ?>"></div>173 < br class="clear" />198 <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button> 199 <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button> 200 <?php echo $note_no_rotate; ?> 174 201 </div> 175 202 176 203 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" /> … … 181 208 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" /> 182 209 183 210 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap"> 184 <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&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" />211 <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&_ajax_nonce=<?php echo $nonce; ?>&postid=<?php echo $post_id; ?>&rand=<?php echo rand(1, 99999); ?>" alt="" /> 185 212 </div> 186 213 187 214 <div class="imgedit-submit"> 188 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button " value="<?php esc_attr_e( 'Cancel' ); ?>" />215 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" /> 189 216 <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" /> 190 217 </div> 191 218 </div> … … 538 565 539 566 $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) ); 540 567 541 542 568 if ( is_wp_error( $img ) ) 569 return false; 543 570 544 571 $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null; 545 572 if ( $changes ) -
src/wp-admin/includes/media.php
2644 2644 2645 2645 <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> 2646 2646 2647 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image " id="media-head-<?php echo $attachment_id; ?>">2647 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>"> 2648 2648 <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> 2649 2649 <p><?php echo $image_edit_button; ?></p> 2650 2650 </div> -
src/wp-admin/js/image-edit.js
11 11 return f | 0; 12 12 }, 13 13 14 setDisabled : function(el, s) { 14 setDisabled : function( el, s ) { 15 // see #28864 16 // disabled state on inputs #imgedit-sel-width-' + postid and #imgedit-sel-height-' + postid 17 // was done targeting $('input', el) now we need to handle disabled state on buttons too and 18 // inputs are already handled by the disabled state on their fieldset $( el ) 15 19 if ( s ) { 16 el.removeClass( 'disabled');17 $( 'input', el).removeAttr('disabled');20 el.removeClass( 'disabled' ); 21 $( el ).prop( 'disabled', false ); 18 22 } else { 19 el.addClass( 'disabled');20 $( 'input', el).prop('disabled', true);23 el.addClass( 'disabled' ); 24 $( el ).prop( 'disabled', true ); 21 25 } 22 26 }, 23 27 … … 56 60 var wait = $('#imgedit-wait-' + postid); 57 61 58 62 if ( toggle ) { 59 wait. height( $('#imgedit-panel-' + postid).height() ).fadeIn('fast');63 wait.innerHeight( $('#imgedit-panel-' + postid).height() ).fadeIn('fast'); 60 64 } else { 61 65 wait.fadeOut('fast'); 62 66 } … … 63 67 }, 64 68 65 69 toggleHelp : function(el) { 66 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 70 var $el = $( el ); 71 $el.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 72 $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ); 67 73 return false; 68 74 }, 69 75 … … 165 171 'rand': t.intval(Math.random() * 1000000) 166 172 }; 167 173 168 img = $( '<img id="image-preview-' + postid + '" />')169 .on( 'load', function() {170 var max1, max2, parent = $( '#imgedit-crop-' + postid), t = imageEdit;174 img = $( '<img id="image-preview-' + postid + '" />' ) 175 .on( 'load', { history: data.history }, function( event ) { 176 var max1, max2, parent = $( '#imgedit-crop-' + postid ), t = imageEdit, historyObj; 171 177 178 if ( '' !== event.data.history ) { 179 historyObj = JSON.parse( event.data.history ); 180 // if last executed action in history is a crop action 181 if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) { 182 // a crop action has completed and the crop button gets disabled 183 // move focus to undo button otherwise focus is lost 184 $( '#image-undo-' + postid ).focus(); 185 } 186 } 187 172 188 parent.empty().append(img); 173 189 174 190 // w, h are the new full size dims … … 179 195 t.initCrop(postid, img, parent); 180 196 t.setCropSelection(postid, 0); 181 197 198 // throw new Error('stopped'); 199 182 200 if ( (typeof callback !== 'undefined') && callback !== null ) { 183 201 callback(); 184 202 } … … 246 264 if ( t._view ) { 247 265 t._view.refresh(); 248 266 } 267 // Restore focus on the 'Scale' button after frame is refreshed. 268 $( '#imgedit-scale-button' ).focus(); 249 269 }); 250 270 }, 251 271 … … 434 454 }); 435 455 } 436 456 437 438 457 }, 439 458 440 459 notsaved : function(postid) { … … 453 472 454 473 addStep : function(op, postid, nonce) { 455 474 var t = this, elem = $('#imgedit-history-' + postid), 456 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [],457 undone = $('#imgedit-undone-' + postid),458 pop = t.intval(undone.val());475 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [], 476 undone = $('#imgedit-undone-' + postid), 477 pop = t.intval(undone.val()); 459 478 460 479 while ( pop > 0 ) { 461 480 history.pop(); … … 516 535 elem.val(pop); 517 536 t.refreshEditor(postid, nonce, function() { 518 537 var elem = $('#imgedit-history-' + postid), 519 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];538 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : []; 520 539 521 540 t.setDisabled($('#image-redo-' + postid), true); 522 541 t.setDisabled(button, pop < history.length); 542 // when undo gets disabled, move focus to redo button otherwise focus is lost 543 if ( pop === history.length ) { 544 $( '#image-redo-' + postid ).focus(); 545 } 523 546 }); 524 547 }, 525 548 … … 535 558 t.refreshEditor(postid, nonce, function() { 536 559 t.setDisabled($('#image-undo-' + postid), true); 537 560 t.setDisabled(button, pop > 0); 561 // when redo gets disabled, move focus to undo button otherwise focus is lost 562 if ( 0 === pop ) { 563 $( '#image-undo-' + postid ).focus(); 564 } 538 565 }); 539 566 }, 540 567 -
src/wp-includes/css/media-views.css
9 9 10 10 .media-frame input, 11 11 .media-frame select, 12 .media-frame textarea { 12 .media-frame textarea, 13 .media-modal input { 13 14 -webkit-box-sizing: border-box; 14 15 -moz-box-sizing: border-box; 15 16 box-sizing: border-box; … … 21 22 font-size: 12px; 22 23 } 23 24 25 .media-modal legend, 26 .media-modal label { 27 font-size: 13px; 28 } 29 24 30 .media-frame input, 25 31 .media-frame textarea { 26 32 padding: 6px 8px; … … 389 395 margin: 1px; 390 396 width: 65%; 391 397 float: right; 398 line-height: 1.35714285; 392 399 } 393 400 394 401 .media-sidebar .setting .value, … … 1684 1691 .media-modal .imgedit-wrap .imgedit-settings { 1685 1692 background: #f3f3f3; 1686 1693 border-left: 1px solid #ddd; 1687 padding: 016px 16px;1694 padding: 20px 16px 16px; 1688 1695 position: absolute; 1689 1696 top: 0; 1690 1697 right: 0; … … 1712 1719 padding: 0; 1713 1720 } 1714 1721 1722 .media-modal .imgedit-group-top { 1723 margin: 0; 1724 } 1725 1715 1726 .media-modal .imgedit-group-top h3 { 1727 display: inline-block; 1716 1728 text-transform: uppercase; 1717 1729 font-size: 12px; 1718 1730 color: #666; 1719 1731 margin: 0; 1720 margin-top: 24px;1732 margin-top: 4px; 1721 1733 } 1722 1734 1723 1735 .media-modal .imgedit-group-top h3 a { … … 1725 1737 color: #666; 1726 1738 } 1727 1739 1728 .media-modal .imgedit-help-toggle { 1729 margin-top: -2px; 1740 /* higher specificity */ 1741 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle { 1742 margin-top: 2px; 1730 1743 cursor: pointer; 1731 1744 color: #666; 1732 1745 } 1733 1746 1747 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 1748 margin-top: -2px; 1749 } 1750 1734 1751 .media-modal .imgedit-help-toggled span.dashicons:before { 1735 1752 content: '\f142'; 1736 1753 }