Ticket #28864: 28864.patch
File 28864.patch, 19.4 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; … … 843 847 margin: 8px 0 0; 844 848 } 845 849 850 .imgedit-settings fieldset { 851 margin: 8px 0; 852 } 853 854 .imgedit-settings legend { 855 margin-bottom: 5px; 856 } 857 846 858 .describe .imgedit-wrap .imgedit-settings { 847 859 padding: 0 5px; 848 860 } … … 853 865 854 866 .wp_attachment_holder .imgedit-wrap > div { 855 867 height: auto; 856 overflow: hidden;857 868 } 858 869 859 870 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content { 860 padding-right: 16px; 861 width: auto; 862 overflow: hidden; 871 padding: 5px 16px 0 0; 872 float: left; 863 873 } 864 874 865 875 .wp_attachment_holder .imgedit-wrap .imgedit-settings { … … 899 909 overflow: hidden; 900 910 } 901 911 912 .imgedit-response + .wp_attachment_image { 913 overflow: visible; 914 } 915 902 916 .wp_attachment_image .button, 903 917 .A1B1 .button { 904 918 float: left; … … 920 934 min-width: 300px; 921 935 } 922 936 923 . imgedit-menu div{937 .wp-core-ui .imgedit-menu button { 924 938 float: left; 939 -webkit-box-sizing: content-box; 940 -moz-box-sizing: content-box; 941 box-sizing: content-box; 925 942 width: 32px; 926 border: 1px solid #d5d5d5; 943 height: 32px; 944 margin: 0 8px 0 0; 945 padding: 0; 927 946 background: #f1f1f1; 928 margin: 0 8px 0 0;929 height: 32px;930 947 -webkit-font-smoothing: antialiased; 931 948 -moz-osx-font-smoothing: grayscale; 932 text-align: center; 933 line-height: 28px; 949 line-height: 16px; 934 950 color: #777; 935 951 cursor: pointer; 936 952 } 937 953 938 .imgedit-menu div:before {954 .imgedit-menu button:before { 939 955 font: normal 20px/1 'dashicons'; 940 956 speak: none; 941 957 vertical-align: middle; 942 958 } 943 959 944 .imgedit-menu div:hover { 960 .imgedit-menu button:hover, 961 .imgedit-menu button:focus { 945 962 border-color: #c1c1c1; 946 963 background-color: #eaeaea; 947 964 color: #333; 948 965 } 949 966 950 .imgedit-menu div.disabled {967 .imgedit-menu button.disabled { 951 968 border-color: #ccc; 952 969 background-color: #ddd; 953 970 color: #777; … … 1025 1042 } 1026 1043 1027 1044 #poststuff .imgedit-group-top h3 { 1045 display: inline-block; 1028 1046 padding: 0; 1029 1047 } 1030 1048 … … 1033 1051 } 1034 1052 1035 1053 .imgedit-applyto .imgedit-label { 1036 padding: 2px0 0;1054 padding: .5em 0 0; 1037 1055 display: block; 1056 vertical-align: bottom; 1038 1057 } 1039 1058 1040 1059 .imgedit-help { … … 1042 1061 font-style: italic; 1043 1062 } 1044 1063 1045 a.imgedit-help-toggle { 1046 text-decoration: none; 1064 .wp-core-ui .imgedit-help-toggle { 1065 -webkit-box-shadow: none; 1066 box-shadow: none; 1047 1067 } 1068 /* higher specificity */ 1069 .wp-core-ui .image-editor .imgedit-help-toggle { 1070 border: none; 1071 height: auto; 1072 padding: 0; 1073 background: transparent; 1074 color: #0074a2; 1075 font-size: 20px; 1076 line-height: 1; 1077 cursor: pointer; 1078 } 1048 1079 1049 1080 .form-table td.imgedit-response { 1050 1081 padding: 0; … … 1070 1101 vertical-align: middle; 1071 1102 } 1072 1103 1104 .imgedit-save-target { 1105 margin: 8px 0; 1106 } 1107 1073 1108 .imgedit-group { 1074 1109 margin-bottom: 8px; 1075 1110 padding: 2px 10px; 1076 1111 } 1077 1112 1113 .imgedit-scale input[type="text"], 1114 .imgedit-crop-ratio input[type="text"], 1115 .imgedit-crop-sel input[type="text"] { 1116 width: 3.57142857em; 1117 } 1118 1119 .imgedit-separator { 1120 display: inline-block; 1121 width: 0.53846153em; 1122 text-align: center; 1123 vertical-align: middle; 1124 font-size: 13px; 1125 color: #444; 1126 } 1127 1078 1128 audio, video { 1079 1129 display: inline-block; 1080 1130 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> 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> 56 67 <input 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"><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 183 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>184 <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> 185 <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 186 <?php } else { 162 187 $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.'); 163 188 ?> 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>189 <button type="button" class="imgedit-rleft button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button> 190 <button type="button" class="imgedit-rright button disabled" title="<?php echo $note_no_rotate; ?>" disabled></button> 166 191 <?php } ?> 167 192 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>193 <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> 194 <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 195 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" /> 196 <button type="button" id="image-undo-<?php echo $post_id; ?>" onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-undo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button> 197 <button type="button" id="image-redo-<?php echo $post_id; ?>" onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-redo button disabled"><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button> 174 198 </div> 175 199 176 200 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" /> … … 181 205 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" /> 182 206 183 207 <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); ?>" />208 <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 209 </div> 186 210 187 211 <div class="imgedit-submit"> … … 536 560 537 561 $img = wp_get_image_editor( _load_image_to_edit_path( $post_id ) ); 538 562 539 540 563 if ( is_wp_error( $img ) ) 564 return false; 541 565 542 566 $changes = !empty($_REQUEST['history']) ? json_decode( wp_unslash($_REQUEST['history']) ) : null; 543 567 if ( $changes ) -
src/wp-admin/includes/media.php
2653 2653 2654 2654 <div class="imgedit-response" id="imgedit-response-<?php echo $attachment_id; ?>"></div> 2655 2655 2656 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image " id="media-head-<?php echo $attachment_id; ?>">2656 <div<?php if ( $open ) echo ' style="display:none"'; ?> class="wp_attachment_image contain-floats" id="media-head-<?php echo $attachment_id; ?>"> 2657 2657 <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> 2658 2658 <p><?php echo $image_edit_button; ?></p> 2659 2659 </div> -
src/wp-admin/js/image-edit.js
63 63 }, 64 64 65 65 toggleHelp : function(el) { 66 $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 66 var $el = $( el ); 67 $el.parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' ); 68 $el.attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' ); 67 69 return false; 68 70 }, 69 71 -
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[type="radio"] { 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; … … 1676 1682 .media-modal .imgedit-wrap .imgedit-settings { 1677 1683 background: #f3f3f3; 1678 1684 border-left: 1px solid #ddd; 1679 padding: 016px 16px;1685 padding: 20px 16px 16px; 1680 1686 position: absolute; 1681 1687 top: 0; 1682 1688 right: 0; … … 1704 1710 padding: 0; 1705 1711 } 1706 1712 1713 .media-modal .imgedit-group-top { 1714 margin: 0; 1715 } 1716 1707 1717 .media-modal .imgedit-group-top h3 { 1718 display: inline-block; 1708 1719 text-transform: uppercase; 1709 1720 font-size: 12px; 1710 1721 color: #666; 1711 1722 margin: 0; 1712 margin-top: 24px;1723 margin-top: 4px; 1713 1724 } 1714 1725 1715 1726 .media-modal .imgedit-group-top h3 a { … … 1717 1728 color: #666; 1718 1729 } 1719 1730 1720 .media-modal .imgedit-help-toggle { 1721 margin-top: -2px; 1731 /* higher specificity */ 1732 .wp-core-ui.media-modal .image-editor .imgedit-help-toggle { 1733 margin-top: 2px; 1722 1734 cursor: pointer; 1723 1735 color: #666; 1724 1736 } 1725 1737 1738 .wp-core-ui.media-modal .image-editor h3 .imgedit-help-toggle { 1739 margin-top: -2px; 1740 } 1741 1726 1742 .media-modal .imgedit-help-toggled span.dashicons:before { 1727 1743 content: '\f142'; 1728 1744 }