Changeset 36223
- Timestamp:
- 01/08/2016 07:12:11 PM (9 years ago)
- Location:
- trunk/src
- Files:
-
- 6 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-admin/css/common.css
r36171 r36223 275 275 a:focus .media-icon img { 276 276 color: #124964; 277 278 277 -webkit-box-shadow: 278 0 0 0 1px #5b9dd9, 279 279 0 0 2px 1px rgba(30, 140, 190, .8); 280 281 280 box-shadow: 281 0 0 0 1px #5b9dd9, 282 282 0 0 2px 1px rgba(30, 140, 190, .8); 283 283 } … … 1671 1671 1672 1672 .screen-options + .screen-options { 1673 1673 margin-top: 10px; 1674 1674 } 1675 1675 … … 2953 2953 .js .postbox .handlediv:focus .toggle-indicator:before { 2954 2954 -webkit-box-shadow: 2955 2955 0 0 0 1px #5b9dd9, 2956 2956 0 0 2px 1px rgba(30, 140, 190, .8); 2957 2958 2957 box-shadow: 2958 0 0 0 1px #5b9dd9, 2959 2959 0 0 2px 1px rgba(30, 140, 190, .8); 2960 2960 } -
trunk/src/wp-admin/css/media.css
r36162 r36223 641 641 .edit-attachment-frame .edit-media-header .right { 642 642 cursor: pointer; 643 color: #7 77;643 color: #72777c; 644 644 background-color: transparent; 645 645 height: 50px; … … 651 651 border-left: 1px solid #ddd; 652 652 -webkit-transition: color .1s ease-in-out, background .1s ease-in-out; 653 653 transition: color .1s ease-in-out, background .1s ease-in-out; 654 654 } 655 655 … … 838 838 .imgedit-wrap { 839 839 position: relative; 840 } 841 842 .imgedit-settings p { 843 margin: 8px 0 0; 840 padding-top: 10px; 841 } 842 843 .imgedit-settings p, 844 .imgedit-settings fieldset { 845 margin: 8px 0; 846 } 847 848 .imgedit-settings legend { 849 margin-bottom: 5px; 844 850 } 845 851 … … 854 860 .wp_attachment_holder .imgedit-wrap > div { 855 861 height: auto; 856 overflow: hidden;857 862 } 858 863 859 864 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content { 860 padding-right: 16px; 861 width: auto; 862 overflow: hidden; 865 padding: 3px 16px 0 0; 866 float: left; 863 867 } 864 868 … … 909 913 } 910 914 911 .wp_attachment_image,912 915 .A1B1 { 913 916 overflow: hidden; … … 929 932 930 933 .imgedit-menu { 934 min-width: 300px; 931 935 margin: 0 0 12px; 932 min-width: 300px; 933 } 934 935 .imgedit-menu div { 936 } 937 938 .imgedit-menu .note-no-rotate { 939 clear: both; 940 margin: 0; 941 padding: 1em 0 0; 942 } 943 944 .image-editor .imgedit-menu .button { 936 945 float: left; 937 946 width: 32px; 938 border: 1px solid #d5d5d5; 947 height: 32px; 948 margin: 0 8px 0 0; 949 padding: 0; 939 950 background: #f1f1f1; 940 margin: 0 8px 0 0;941 height: 32px;942 951 -webkit-font-smoothing: antialiased; 943 952 -moz-osx-font-smoothing: grayscale; 944 text-align: center; 945 line-height: 28px; 946 color: #777; 947 cursor: pointer; 948 } 949 950 .imgedit-menu div:before { 953 line-height: 16px; 954 color: #72777c; 955 } 956 957 .imgedit-menu .button:before { 951 958 font: normal 20px/1 dashicons; 952 959 speak: none; … … 954 961 } 955 962 956 .imgedit-menu div:hover { 957 border-color: #c1c1c1; 958 background-color: #eaeaea; 959 color: #32373c; 960 } 961 962 .imgedit-menu div.disabled { 963 .imgedit-menu .button.disabled { 963 964 border-color: #ccc; 964 965 background-color: #ddd; 965 color: #7 77;966 color: #72777c; 966 967 filter: alpha(opacity=50); 967 968 opacity: 0.5; … … 1029 1030 } 1030 1031 1031 .imgedit-applyto img { 1032 margin: 0 8px 0 0; 1032 .imgedit-thumbnail-preview { 1033 margin: 10px 8px 0 0; 1034 } 1035 1036 .imgedit-thumbnail-preview-caption { 1037 display: block; 1033 1038 } 1034 1039 1035 1040 #poststuff .imgedit-group-top h3, /* Back-compat for pre-4.4 */ 1036 1041 #poststuff .imgedit-group-top h2 { 1042 display: inline-block; 1037 1043 margin: 0; 1038 1044 padding: 0; … … 1047 1053 1048 1054 .imgedit-applyto .imgedit-label { 1049 padding: 2px 0 0;1050 1055 display: block; 1056 padding: .5em 0 0; 1051 1057 } 1052 1058 … … 1056 1062 } 1057 1063 1058 a.imgedit-help-toggle { 1059 text-decoration: none; 1064 /* higher specificity than buttons */ 1065 .image-editor .imgedit-settings .imgedit-help-toggle, 1066 .image-editor .imgedit-settings .imgedit-help-toggle:hover, 1067 .image-editor .imgedit-settings .imgedit-help-toggle:active { 1068 border: 1px solid transparent; 1069 margin: -1px 0 0 -1px; 1070 padding: 0; 1071 background: transparent; 1072 color: #0074a2; 1073 font-size: 20px; 1074 line-height: 1; 1075 cursor: pointer; 1076 -webkit-box-sizing: content-box; 1077 -moz-box-sizing: content-box; 1078 box-sizing: content-box; 1079 -webkit-box-shadow: none; 1080 box-shadow: none; 1081 } 1082 1083 .image-editor .imgedit-settings .imgedit-help-toggle:focus { 1084 color: #0074a2; 1085 border-color: #5b9dd9; 1086 outline: none; 1087 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1088 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1060 1089 } 1061 1090 … … 1074 1103 .imgedit-wrap .nowrap { 1075 1104 white-space: nowrap; 1105 font-size: 12px; 1106 line-height: inherit; 1076 1107 } 1077 1108 … … 1084 1115 } 1085 1116 1117 .imgedit-save-target { 1118 margin: 8px 0; 1119 } 1120 1086 1121 .imgedit-group { 1087 1122 margin-bottom: 8px; 1088 1123 padding: 10px; 1124 } 1125 1126 .imgedit-settings .imgedit-scale input[type="text"], 1127 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1128 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1129 width: 50px; 1130 font-size: 14px; 1131 padding: 3px 5px; 1132 } 1133 1134 .imgedit-separator { 1135 display: inline-block; 1136 width: 7px; 1137 text-align: center; 1138 vertical-align: middle; 1139 font-size: 13px; 1140 color: #444; 1141 } 1142 1143 .imgedit-settings .imgedit-scale .button { 1144 margin-bottom: 0; 1089 1145 } 1090 1146 … … 1132 1188 padding: 10px 0 10px 12px; 1133 1189 } 1190 1191 .imgedit-settings .imgedit-scale input[type="text"], 1192 .imgedit-settings .imgedit-crop-ratio input[type="text"], 1193 .imgedit-settings .imgedit-crop-sel input[type="text"] { 1194 width: 60px; 1195 font-size: 16px; 1196 padding: 6px 10px; 1197 } 1198 1199 .imgedit-applyto .imgedit-label { 1200 vertical-align: middle; 1201 } 1134 1202 } 1135 1203 -
trunk/src/wp-admin/includes/image-edit.php
r35567 r36223 41 41 42 42 ?> 43 <div class="imgedit-wrap ">43 <div class="imgedit-wrap wp-clearfix"> 44 44 <div id="imgedit-panel-<?php echo $post_id; ?>"> 45 45 … … 47 47 <div class="imgedit-group"> 48 48 <div class="imgedit-group-top"> 49 <h2><?php _e( 'Scale Image' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 49 <h2><?php _e( 'Scale Image' ); ?></h2> 50 <button type="button" class="dashicons dashicons-editor-help 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> 50 51 <div class="imgedit-help"> 51 52 <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> … … 55 56 <?php endif ?> 56 57 <div class="imgedit-submit"> 57 <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; ?>" /> 58 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span> 59 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" /> 58 59 <fieldset class="imgedit-scale"> 60 <legend><?php _e( 'New dimensions:' ); ?></legend> 61 <div class="nowrap"> 62 <label><span class="screen-reader-text"><?php _e( 'scale width' ); ?></span> 63 <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; ?>" /> 64 </label> 65 <span class="imgedit-separator">×</span> 66 <label><span class="screen-reader-text"><?php _e( 'scale height' ); ?></span> 67 <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; ?>" /> 68 </label> 69 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span> 70 <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' ); ?>" /> 71 </div> 72 </fieldset> 73 60 74 </div> 61 75 </div> … … 66 80 <div class="imgedit-group"> 67 81 <div class="imgedit-group-top"> 68 <h2>< a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h2>82 <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link"><?php _e( 'Restore Original Image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2> 69 83 <div class="imgedit-help"> 70 84 <p><?php _e('Discard any changes and restore the original image.'); … … 85 99 <div class="imgedit-group"> 86 100 <div class="imgedit-group-top"> 87 <h2><?php _e( 'Image Crop' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 101 <h2><?php _e( 'Image Crop' ); ?></h2> 102 <button type="button" class="dashicons dashicons-editor-help 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> 88 103 89 104 <div class="imgedit-help"> … … 98 113 </div> 99 114 100 <p> 101 <?php _e('Aspect ratio:'); ?> 102 <span class="nowrap"> 103 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" style="width:3em;" /> 104 : 105 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" style="width:3em;" /> 106 </span> 107 </p> 108 109 <p id="imgedit-crop-sel-<?php echo $post_id; ?>"> 110 <?php _e('Selection:'); ?> 111 <span class="nowrap"> 112 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 113 × 114 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" style="width:4em;" /> 115 </span> 116 </p> 115 <fieldset class="imgedit-crop-ratio"> 116 <legend><?php _e( 'Aspect ratio:' ); ?></legend> 117 <div class="nowrap"> 118 <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span> 119 <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" /> 120 </label> 121 <span class="imgedit-separator">:</span> 122 <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span> 123 <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" /> 124 </label> 125 </div> 126 </fieldset> 127 128 <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel"> 129 <legend><?php _e( 'Selection:' ); ?></legend> 130 <div class="nowrap"> 131 <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span> 132 <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 133 </label> 134 <span class="imgedit-separator">×</span> 135 <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span> 136 <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>)" /> 137 </label> 138 </div> 139 </fieldset> 140 117 141 </div> 118 142 … … 123 147 <div class="imgedit-group imgedit-applyto"> 124 148 <div class="imgedit-group-top"> 125 <h2><?php _e( 'Thumbnail Settings' ); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h2> 149 <h2><?php _e( 'Thumbnail Settings' ); ?></h2> 150 <button type="button" class="dashicons dashicons-editor-help 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> 126 151 <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> 127 152 </div> 128 153 129 < p>154 <figure class="imgedit-thumbnail-preview"> 130 155 <img src="<?php echo $thumb['url']; ?>" width="<?php echo $thumb_img[0]; ?>" height="<?php echo $thumb_img[1]; ?>" class="imgedit-size-preview" alt="" draggable="false" /> 131 <br /><?php _e('Current thumbnail'); ?> 132 </p> 133 134 <p id="imgedit-save-target-<?php echo $post_id; ?>"> 135 <strong><?php _e('Apply changes to:'); ?></strong><br /> 156 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption> 157 </figure> 158 159 <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target"> 160 <fieldset> 161 <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend> 136 162 137 163 <label class="imgedit-label"> … … 146 172 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" /> 147 173 <?php _e('All sizes except thumbnail'); ?></label> 148 </p> 174 </fieldset> 175 </div> 149 176 </div> 150 177 … … 153 180 </div> 154 181 155 <div class="imgedit-panel-content ">182 <div class="imgedit-panel-content wp-clearfix"> 156 183 <?php echo $note; ?> 157 <div class="imgedit-menu ">158 < div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php184 <div class="imgedit-menu wp-clearfix"> 185 <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 159 186 160 187 // On some setups GD library does not provide imagerotate() - Ticket #11536 161 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?> 162 <div class="imgedit-rleft" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div> 163 <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div> 188 if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { 189 $note_no_rotate = ''; 190 ?> 191 <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> 192 <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> 164 193 <?php } else { 165 $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');194 $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>'; 166 195 ?> 167 <div class="imgedit-rleft disabled" title="<?php echo $note_no_rotate; ?>"></div>168 <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>196 <button type="button" class="imgedit-rleft button disabled" disabled></button> 197 <button type="button" class="imgedit-rright button disabled" disabled></button> 169 198 <?php } ?> 170 199 171 < div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>172 < div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>173 174 < 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>175 < 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>176 < br class="clear" />200 <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> 201 <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> 202 203 <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> 204 <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> 205 <?php echo $note_no_rotate; ?> 177 206 </div> 178 207 … … 185 214 186 215 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap"> 187 <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=" <?php esc_attr_e( 'Image preview' ); ?>" />216 <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="" /> 188 217 </div> 189 218 190 219 <div class="imgedit-submit"> 191 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button " value="<?php esc_attr_e( 'Cancel' ); ?>" />220 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" /> 192 221 <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' ); ?>" /> 193 222 </div> … … 563 592 $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) ); 564 593 565 if ( is_wp_error( $img ) ) 566 return false; 594 if ( is_wp_error( $img ) ) { 595 return false; 596 } 567 597 568 598 $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null; -
trunk/src/wp-admin/includes/media.php
r35918 r36223 2702 2702 2703 2703 $att_url = wp_get_attachment_url( $post->ID ); ?> 2704 <div class="wp_attachment_holder ">2704 <div class="wp_attachment_holder wp-clearfix"> 2705 2705 <?php 2706 2706 if ( wp_attachment_is_image( $post->ID ) ) : … … 2714 2714 <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> 2715 2715 2716 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image " id="media-head-<?php echo $attachment_id; ?>">2716 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image wp-clearfix" id="media-head-<?php echo $attachment_id; ?>"> 2717 2717 <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> 2718 2718 <p><?php echo $image_edit_button; ?></p> -
trunk/src/wp-admin/js/image-edit.js
r36162 r36223 12 12 }, 13 13 14 setDisabled : function(el, s) { 14 setDisabled : function( el, s ) { 15 /* 16 * `el` can be a single form element or a fieldset. Before #28864, the disabled state on 17 * some text fields was handled targeting $('input', el). Now we need to handle the 18 * disabled state on buttons too so we can just target `el` regardless if it's a single 19 * element or a fieldset because when a fieldset is disabled, its descendants are disabled too. 20 */ 15 21 if ( s ) { 16 el.removeClass('disabled'); 17 $('input', el).removeAttr('disabled'); 22 el.removeClass( 'disabled' ).prop( 'disabled', false ); 18 23 } else { 19 el.addClass('disabled'); 20 $('input', el).prop('disabled', true); 24 el.addClass( 'disabled' ).prop( 'disabled', true ); 21 25 } 22 26 }, … … 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 72 .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ) 73 .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 74 67 75 return false; 68 76 }, … … 167 175 168 176 img = $( '<img id="image-preview-' + postid + '" alt="" />' ) 169 .on('load', function() { 170 var max1, max2, parent = $('#imgedit-crop-' + postid), t = imageEdit; 177 .on( 'load', { history: data.history }, function( event ) { 178 var max1, max2, 179 parent = $( '#imgedit-crop-' + postid ), 180 t = imageEdit, 181 historyObj; 182 183 if ( '' !== event.data.history ) { 184 historyObj = JSON.parse( event.data.history ); 185 // If last executed action in history is a crop action. 186 if ( historyObj[historyObj.length - 1].hasOwnProperty( 'c' ) ) { 187 /* 188 * A crop action has completed and the crop button gets disabled 189 * ensure the undo button is enabled. 190 */ 191 t.setDisabled( $( '#image-undo-' + postid) , true ); 192 // Move focus to the undo button to avoid a focus loss. 193 $( '#image-undo-' + postid ).focus(); 194 } 195 } 171 196 172 197 parent.empty().append(img); … … 306 331 btn = $('#imgedit-open-btn-' + postid), spin = btn.siblings('.spinner'); 307 332 308 btn.prop('disabled', true); 333 /* 334 * Instead of disabling the button, which causes a focus loss and makes screen 335 * readers announce "unavailable", return if the button was already clicked. 336 */ 337 if ( btn.hasClass( 'button-activated' ) ) { 338 return; 339 } 340 309 341 spin.addClass( 'is-active' ); 310 342 … … 319 351 url: ajaxurl, 320 352 type: 'post', 321 data: data 353 data: data, 354 beforeSend: function() { 355 btn.addClass( 'button-activated' ); 356 } 322 357 }).done(function( html ) { 323 358 elem.html( html ); 324 359 head.fadeOut('fast', function(){ 325 360 elem.fadeIn('fast'); 326 btn.remove Attr('disabled');361 btn.removeClass( 'button-activated' ); 327 362 spin.removeClass( 'is-active' ); 328 363 }); … … 338 373 this.setCropSelection(postid, 0); 339 374 this.toggleEditor(postid, 0); 375 // Editor is ready, move focus to the first focusable element. 376 $( '.imgedit-wrap .imgedit-help-toggle' ).eq( 0 ).focus(); 340 377 }, 341 378 … … 430 467 else { 431 468 $('#image-editor-' + postid).fadeOut('fast', function() { 432 $('#media-head-' + postid).fadeIn('fast'); 469 $( '#media-head-' + postid ).fadeIn( 'fast', function() { 470 // Move focus back to the Edit Image button. Runs also when saving. 471 $( '#imgedit-open-btn-' + postid ).focus(); 472 }); 433 473 $(this).empty(); 434 474 }); … … 454 494 addStep : function(op, postid, nonce) { 455 495 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());496 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [], 497 undone = $( '#imgedit-undone-' + postid ), 498 pop = t.intval( undone.val() ); 459 499 460 500 while ( pop > 0 ) { … … 517 557 t.refreshEditor(postid, nonce, function() { 518 558 var elem = $('#imgedit-history-' + postid), 519 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : [];559 history = ( elem.val() !== '' ) ? JSON.parse( elem.val() ) : []; 520 560 521 561 t.setDisabled($('#image-redo-' + postid), true); 522 562 t.setDisabled(button, pop < history.length); 563 // When undo gets disabled, move focus to the redo button to avoid a focus loss. 564 if ( history.length === pop ) { 565 $( '#image-redo-' + postid ).focus(); 566 } 523 567 }); 524 568 }, … … 536 580 t.setDisabled($('#image-undo-' + postid), true); 537 581 t.setDisabled(button, pop > 0); 582 // When redo gets disabled, move focus to the undo button to avoid a focus loss. 583 if ( 0 === pop ) { 584 $( '#image-undo-' + postid ).focus(); 585 } 538 586 }); 539 587 }, -
trunk/src/wp-includes/css/media-views.css
r36162 r36223 21 21 font-size: 12px; 22 22 -webkit-overflow-scrolling: touch; 23 } 24 25 .media-modal legend, 26 .media-modal label { 27 font-size: 13px; 23 28 } 24 29 … … 111 116 112 117 .media-frame :-moz-placeholder { 113 118 color: #a9a9a9; 114 119 } 115 120 … … 395 400 } 396 401 397 .compat-item label span 402 .compat-item label span { 398 403 text-align: right; 399 404 } … … 1735 1740 background: #f3f3f3; 1736 1741 border-left: 1px solid #ddd; 1737 padding: 016px 16px;1742 padding: 20px 16px 16px; 1738 1743 position: absolute; 1739 1744 top: 0; … … 1763 1768 } 1764 1769 1770 .media-modal .imgedit-group-top { 1771 margin: 0; 1772 } 1773 1765 1774 .media-modal .imgedit-group-top h3, /* Back-compat for pre-4.4 */ 1766 .media-modal .imgedit-group-top h2 { 1775 .media-modal .imgedit-group-top h2, 1776 .media-modal .imgedit-group-top h2 .button-link { 1777 display: inline-block; 1767 1778 text-transform: uppercase; 1768 1779 font-size: 12px; 1769 1780 color: #666; 1770 1781 margin: 0; 1771 margin-top: 24px;1782 margin-top: 3px; 1772 1783 } 1773 1784 1774 1785 .media-modal .imgedit-group-top h3 a, /* Back-compat for pre-4.4 */ 1775 .media-modal .imgedit-group-top h2 a { 1786 .media-modal .imgedit-group-top h2 a, 1787 .media-modal .imgedit-group-top h2 .button-link { 1776 1788 text-decoration: none; 1777 1789 color: #666; 1778 1790 } 1779 1791 1780 .media-modal .imgedit-help-toggle { 1792 /* higher specificity than media.css */ 1793 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle, 1794 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:hover, 1795 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:active { 1796 border: 1px solid transparent; 1797 margin: 0; 1798 padding: 0; 1799 background: transparent; 1800 color: #0074a2; 1801 font-size: 20px; 1802 line-height: 1; 1803 cursor: pointer; 1804 -webkit-box-sizing: content-box; 1805 -moz-box-sizing: content-box; 1806 box-sizing: content-box; 1807 -webkit-box-shadow: none; 1808 box-shadow: none; 1809 } 1810 1811 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle:focus { 1812 color: #0074a2; 1813 border-color: #5b9dd9; 1814 outline: none; 1815 -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1816 box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); 1817 } 1818 1819 .wp-core-ui.media-modal .imgedit-group-top .dashicons-arrow-down.imgedit-help-toggle { 1820 margin-top: -3px; 1821 } 1822 1823 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 1781 1824 margin-top: -2px; 1782 cursor: pointer;1783 color: #666;1784 1825 } 1785 1826 … … 1788 1829 } 1789 1830 1790 .media-modal .imgedit-group img { 1791 margin-top: 5px; 1831 .media-modal .imgedit-thumbnail-preview { 1832 margin: 10px 8px 0 0; 1833 } 1834 1835 .imgedit-thumbnail-preview-caption { 1836 display: block; 1792 1837 } 1793 1838
Note: See TracChangeset
for help on using the changeset viewer.