Ticket #28864: 28864.6.patch
File 28864.6.patch, 25.9 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
837 837 838 838 .imgedit-wrap { 839 839 position: relative; 840 padding-top: 10px; 840 841 } 841 842 842 843 .imgedit-settings p { 843 margin: 8px 0 0;844 margin: 8px 0; 844 845 } 845 846 847 .imgedit-settings fieldset { 848 margin: 8px 0; 849 } 850 851 .imgedit-settings legend { 852 margin-bottom: 5px; 853 } 854 846 855 .describe .imgedit-wrap .imgedit-settings { 847 856 padding: 0 5px; 848 857 } … … 853 862 854 863 .wp_attachment_holder .imgedit-wrap > div { 855 864 height: auto; 856 overflow: hidden;857 865 } 858 866 859 867 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content { 860 padding-right: 16px; 861 width: auto; 862 overflow: hidden; 868 padding: 3px 16px 0 0; 869 float: left; 863 870 } 864 871 865 872 .wp_attachment_holder .imgedit-wrap .imgedit-settings { … … 874 881 875 882 .imgedit-wait { 876 883 position: absolute; 877 top: 0;884 top: 10px; 878 885 background: #fff url(../images/spinner.gif) no-repeat center; 879 886 -webkit-background-size: 20px 20px; 880 887 background-size: 20px 20px; … … 899 906 overflow: hidden; 900 907 } 901 908 909 .imgedit-response + .wp_attachment_image { 910 overflow: visible; 911 } 912 902 913 .wp_attachment_image .button, 903 914 .A1B1 .button { 904 915 float: left; … … 916 927 } 917 928 918 929 .imgedit-menu { 930 min-width: 300px; 919 931 margin: 0 0 12px; 920 min-width: 300px;932 padding-left: 3px; 921 933 } 922 934 923 .imgedit-menu div { 935 .imgedit-menu .note-no-rotate { 936 clear: both; 937 margin: 0; 938 padding: 1em 0 0; 939 } 940 941 .image-editor .imgedit-menu .button { 924 942 float: left; 943 -webkit-box-sizing: content-box; 944 -moz-box-sizing: content-box; 945 box-sizing: content-box; 925 946 width: 32px; 926 border: 1px solid #d5d5d5; 947 height: 32px; 948 margin: 0 8px 0 0; 949 padding: 0; 927 950 background: #f1f1f1; 928 margin: 0 8px 0 0;929 height: 32px;930 951 -webkit-font-smoothing: antialiased; 931 952 -moz-osx-font-smoothing: grayscale; 932 text-align: center; 933 line-height: 28px; 953 line-height: 16px; 934 954 color: #777; 935 955 cursor: pointer; 936 956 } 937 957 938 .imgedit-menu div:before {958 .imgedit-menu .button:before { 939 959 font: normal 20px/1 'dashicons'; 940 960 speak: none; 941 961 vertical-align: middle; 942 962 } 943 963 944 .imgedit-menu div:hover { 964 .imgedit-menu .button:hover, 965 .imgedit-menu .button:focus { 945 966 border-color: #c1c1c1; 946 967 background-color: #eaeaea; 947 968 color: #333; 948 969 } 949 970 950 .imgedit-menu div.disabled {971 .imgedit-menu .button.disabled { 951 972 border-color: #ccc; 952 973 background-color: #ddd; 953 974 color: #777; … … 1025 1046 } 1026 1047 1027 1048 #poststuff .imgedit-group-top h3 { 1049 display: inline-block; 1028 1050 padding: 0; 1029 1051 } 1030 1052 … … 1033 1055 } 1034 1056 1035 1057 .imgedit-applyto .imgedit-label { 1036 padding: 2px0 0;1058 padding: .5em 0 0; 1037 1059 display: block; 1060 vertical-align: bottom; 1038 1061 } 1039 1062 1040 1063 .imgedit-help { … … 1042 1065 font-style: italic; 1043 1066 } 1044 1067 1045 a.imgedit-help-toggle { 1046 text-decoration: none; 1068 /* higher specificity than buttons */ 1069 .image-editor .imgedit-settings .imgedit-help-toggle, 1070 .image-editor .imgedit-settings .imgedit-help-toggle:hover, 1071 .image-editor .imgedit-settings .imgedit-help-toggle:active { 1072 border: none; 1073 height: auto; 1074 padding: 0; 1075 background: transparent; 1076 color: #0074a2; 1077 font-size: 20px; 1078 line-height: 1; 1079 cursor: pointer; 1080 -webkit-box-shadow: none; 1081 box-shadow: none; 1047 1082 } 1048 1083 1084 .image-editor .imgedit-settings .imgedit-help-toggle:focus { 1085 color: #0074a2; 1086 -webkit-box-shadow: 1087 0 0 0 1px #5b9dd9, 1088 0 0 2px 1px rgba(30, 140, 190, .8); 1089 box-shadow: 1090 0 0 0 1px #5b9dd9, 1091 0 0 2px 1px rgba(30, 140, 190, .8); 1092 } 1093 1049 1094 .form-table td.imgedit-response { 1050 1095 padding: 0; 1051 1096 } … … 1060 1105 1061 1106 .imgedit-wrap .nowrap { 1062 1107 white-space: nowrap; 1108 font-size: 12px; 1109 line-height: 1.4em; 1063 1110 } 1064 1111 1065 1112 span.imgedit-scale-warn { … … 1070 1117 vertical-align: middle; 1071 1118 } 1072 1119 1120 .imgedit-save-target { 1121 margin: 8px 0; 1122 } 1123 1073 1124 .imgedit-group { 1074 1125 margin-bottom: 8px; 1075 1126 padding: 2px 10px; 1076 1127 } 1077 1128 1129 .imgedit-settings .imgedit-scale input[type="text"], 1130 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1131 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1132 width: 3.57142857em; 1133 font-size: 14px; 1134 padding: 3px 5px; 1135 } 1136 1137 .imgedit-separator { 1138 display: inline-block; 1139 width: 0.53846153em; 1140 text-align: center; 1141 vertical-align: middle; 1142 font-size: 13px; 1143 color: #444; 1144 } 1145 1146 .imgedit-settings .imgedit-scale .button { 1147 margin-bottom: 0; 1148 } 1149 1078 1150 audio, video { 1079 1151 display: inline-block; 1080 1152 max-width: 100%; … … 1119 1191 .media-upload-form .media-item .error { 1120 1192 padding: 10px 0 10px 12px; 1121 1193 } 1194 1195 .imgedit-settings .imgedit-scale input[type="text"], 1196 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1197 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1198 width: 3.75em; 1199 font-size: 16px; 1200 padding: 6px 10px; 1201 } 1202 1203 .imgedit-applyto .imgedit-label { 1204 vertical-align: middle; 1205 } 1122 1206 } 1123 1207 1124 1208 /** -
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
2645 2645 2646 2646 <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> 2647 2647 2648 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image " id="media-head-<?php echo $attachment_id; ?>">2648 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>"> 2649 2649 <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> 2650 2650 <p><?php echo $image_edit_button; ?></p> 2651 2651 </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 // ensure the undo button is enabled 184 t.setDisabled( $( '#image-undo-' + postid) , true ); 185 // move focus to the undo button otherwise focus is lost 186 $( '#image-undo-' + postid ).focus(); 187 } 188 } 189 172 190 parent.empty().append(img); 173 191 174 192 // w, h are the new full size dims … … 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 the 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 the 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; … … 86 92 } 87 93 88 94 .media-frame input:disabled, 89 .media-frame textarea:disabled, 95 .media-frame textarea:disabled { 96 background: rgba( 255, 255, 255, 0.5 ); 97 border-color: rgba( 222, 222, 222, 0.75 ); 98 -webkit-box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 ); 99 box-shadow: inset 0 1px 2px rgba( 0, 0, 0, 0.04 ); 100 color: rgba( 51, 51, 51, 0.5 ); 101 } 102 90 103 .media-frame input[readonly], 91 104 .media-frame textarea[readonly] { 92 105 background-color: #eee; … … 389 402 margin: 1px; 390 403 width: 65%; 391 404 float: right; 405 line-height: 1.35714285; 392 406 } 393 407 394 408 .media-sidebar .setting .value, … … 1684 1698 .media-modal .imgedit-wrap .imgedit-settings { 1685 1699 background: #f3f3f3; 1686 1700 border-left: 1px solid #ddd; 1687 padding: 016px 16px;1701 padding: 20px 16px 16px; 1688 1702 position: absolute; 1689 1703 top: 0; 1690 1704 right: 0; … … 1712 1726 padding: 0; 1713 1727 } 1714 1728 1729 .media-modal .imgedit-group-top { 1730 margin: 0; 1731 } 1732 1715 1733 .media-modal .imgedit-group-top h3 { 1734 display: inline-block; 1716 1735 text-transform: uppercase; 1717 1736 font-size: 12px; 1718 1737 color: #666; 1719 1738 margin: 0; 1720 margin-top: 24px;1739 margin-top: 4px; 1721 1740 } 1722 1741 1723 1742 .media-modal .imgedit-group-top h3 a { … … 1725 1744 color: #666; 1726 1745 } 1727 1746 1728 .media-modal .imgedit-help-toggle { 1729 margin-top: -2px; 1747 /* higher specificity */ 1748 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle { 1749 margin-top: 2px; 1730 1750 cursor: pointer; 1731 color: # 666;1751 color: #0074a2; 1732 1752 } 1733 1753 1754 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 1755 margin-top: -2px; 1756 } 1757 1734 1758 .media-modal .imgedit-help-toggled span.dashicons:before { 1735 1759 content: '\f142'; 1736 1760 }