WordPress.org
Get WordPress

Make WordPress Core

Ticket #27544: 27544.patch

File 27544.patch, 16.4 KB (added by iseulde, 12 years ago)

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

     
    460460        margin: 8px 0;
    461461}
    462462
    463 .post-php .imgedit-wrap table {
    464         width: 100%;
     463.describe .imgedit-wrap .imgedit-settings {
     464        padding: 0 5px;
    465465}
    466466
    467 .describe .imgedit-wrap table td,
    468 .wp_attachment_holder .imgedit-wrap table td {
    469         vertical-align: top;
    470         padding-top: 0;
     467.wp_attachment_holder div.updated {
     468        margin-top: 0;
    471469}
    472470
    473 .describe .imgedit-wrap table td.imgedit-settings {
    474         padding: 0 5px;
     471.wp_attachment_holder .imgedit-wrap > div {
     472        height: auto;
     473        overflow: hidden;
     474}
     475
     476.wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
     477        padding-right: 16px;
     478        width: auto;
     479        overflow: hidden;
    475480}
    476481
    477 .wp_attachment_holder .imgedit-wrap table td.imgedit-settings {
     482.wp_attachment_holder .imgedit-wrap .imgedit-settings {
     483        float: right;
    478484        width: 250px;
    479485}
    480486
    481 td.imgedit-settings input {
     487.imgedit-settings input {
    482488        margin-top: 0;
    483489        vertical-align: middle;
    484490}
    … …  
    486492.imgedit-wait {
    487493        position: absolute;
    488494        top: 0;
    489         background: #fff url(../images/spinner.gif) no-repeat scroll 22px 10px;
     495        background: #fff url(../images/spinner.gif) no-repeat center;
    490496        -webkit-background-size: 20px 20px;
    491497        background-size: 20px 20px;
    492498        opacity: 0.7;
    … …  
    634640        margin: 5px 0;
    635641}
    636642
     643#poststuff .imgedit-group-top h3 {
     644        padding: 0;
     645}
     646
     647.imgedit-group-top h3 a {
     648        text-decoration: none;
     649}
     650
    637651.imgedit-applyto .imgedit-label {
    638652        padding: 2px 0 0;
    639653        display: block;

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

     
    3434
    3535        ?>
    3636        <div class="imgedit-wrap">
    37         <?php echo $note; ?>
    38         <table id="imgedit-panel-<?php echo $post_id; ?>"><tbody>
    39         <tr><td>
    40         <div class="imgedit-menu">
    41                 <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
    42 
    43         // On some setups GD library does not provide imagerotate() - Ticket #11536
    44         if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
    45                 <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
    46                 <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
    47 <?php } else {
    48                 $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
    49 ?>
    50             <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
    51             <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
    52 <?php } ?>
    53 
    54                 <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
    55                 <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
    56 
    57                 <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>
    58                 <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>
    59                 <br class="clear" />
    60         </div>
    61 
    62         <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    63         <input type="hidden" id="imgedit-minthumb-<?php echo $post_id; ?>" value="<?php echo ( get_option('thumbnail_size_w') . ':' . get_option('thumbnail_size_h') ); ?>" />
    64         <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    65         <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    66         <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    67         <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    68         <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    69 
    70         <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    71         <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" />
    72         </div>
    73 
    74         <div class="imgedit-submit">
    75                 <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    76                 <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
    77         </div>
    78         </td>
     37        <div id="imgedit-panel-<?php echo $post_id; ?>">
    7938
    80         <td class="imgedit-settings">
     39        <div class="imgedit-settings">
    8140        <div class="imgedit-group">
    8241        <div class="imgedit-group-top">
    83                 <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><strong><?php _e('Scale Image'); ?></strong></a>
     42                <h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Scale Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
    8443                <div class="imgedit-help">
    8544                <p><?php _e('You can proportionally scale the original image. For best results the scaling should be done before performing any other operations on it like crop, rotate, etc. Note that images can only be scaled down, not up.'); ?></p>
    8645                <?php if ( isset( $meta['width'], $meta['height'] ) ): ?>
    87                 <p><?php printf( __('Original dimensions %s'), $meta['width'] . '&times;' . $meta['height'] ); ?></p>
     46                <p><?php printf( __('Original dimensions %s'), $meta['width'] . ' &times; ' . $meta['height'] ); ?></p>
    8847                <?php endif ?>
    8948                <div class="imgedit-submit">
    90                 <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; ?>" />&times;<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; ?>" />
     49                <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; ?>" /> &times; <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; ?>" />
    9150                <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>">!</span></span>
    92                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
     51                <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary" value="<?php esc_attr_e( 'Scale' ); ?>" />
    9352                </div>
    9453                </div>
    9554        </div>
     55        </div>
    9656
    9757<?php if ( $can_restore ) { ?>
    9858
     59        <div class="imgedit-group">
    9960        <div class="imgedit-group-top">
    100                 <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><strong><?php _e('Restore Original Image'); ?></strong></a>
     61                <h3><a onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('Restore Original Image'); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></a></h3>
    10162                <div class="imgedit-help">
    10263                <p><?php _e('Discard any changes and restore the original image.');
    10364
    … …  
    10667
    10768                ?></p>
    10869                <div class="imgedit-submit">
    109                 <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
     70                <input type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'restore')" class="button button-primary" value="<?php esc_attr_e( 'Restore image' ); ?>" <?php echo $can_restore; ?> />
    11071                </div>
    11172                </div>
    11273        </div>
     74        </div>
    11375
    11476<?php } ?>
    11577
    116         </div>
    117 
    11878        <div class="imgedit-group">
    11979        <div class="imgedit-group-top">
    120                 <strong><?php _e('Image Crop'); ?></strong>
    121                 <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('(help)'); ?></a>
     80                <h3><?php _e('Image Crop'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
     81
    12282                <div class="imgedit-help">
    12383                <p><?php _e('The image can be cropped by clicking on it and dragging to select the desired part. While dragging the dimensions of the selection are displayed below.'); ?></p>
    12484
    … …  
    155115
    156116        <div class="imgedit-group imgedit-applyto">
    157117        <div class="imgedit-group-top">
    158                 <strong><?php _e('Thumbnail Settings'); ?></strong>
    159                 <a class="imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;" href="#"><?php _e('(help)'); ?></a>
     118                <h3><?php _e('Thumbnail Settings'); ?> <a href="#" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);return false;"></a></h3>
    160119                <p class="imgedit-help"><?php _e('The thumbnail image can be cropped differently. For example it can be square or contain only a portion of the original image to showcase it better. Here you can select whether to apply changes to all image sizes or make the thumbnail different.'); ?></p>
    161120        </div>
    162121
    … …  
    184143
    185144        <?php } ?>
    186145
    187         </td></tr>
    188         </tbody></table>
     146        </div>
     147       
     148        <div class="imgedit-panel-content">
     149                <?php echo $note; ?>
     150                <div class="imgedit-menu">
     151                        <div onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-crop disabled" title="<?php esc_attr_e( 'Crop' ); ?>"></div><?php
     152       
     153                // On some setups GD library does not provide imagerotate() - Ticket #11536
     154                if ( wp_image_editor_supports( array( 'mime_type' => get_post_mime_type( $post_id ), 'methods' => array( 'rotate' ) ) ) ) { ?>
     155                        <div class="imgedit-rleft"  onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate counter-clockwise' ); ?>"></div>
     156                        <div class="imgedit-rright" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)" title="<?php esc_attr_e( 'Rotate clockwise' ); ?>"></div>
     157        <?php } else {
     158                        $note_no_rotate = esc_attr__('Image rotation is not supported by your web host.');
     159        ?>
     160                    <div class="imgedit-rleft disabled"  title="<?php echo $note_no_rotate; ?>"></div>
     161                    <div class="imgedit-rright disabled" title="<?php echo $note_no_rotate; ?>"></div>
     162        <?php } ?>
     163       
     164                        <div onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv" title="<?php esc_attr_e( 'Flip vertically' ); ?>"></div>
     165                        <div onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph" title="<?php esc_attr_e( 'Flip horizontally' ); ?>"></div>
     166       
     167                        <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>
     168                        <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>
     169                        <br class="clear" />
     170                </div>
     171       
     172                <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     173                <input type="hidden" id="imgedit-minthumb-<?php echo $post_id; ?>" value="<?php echo ( get_option('thumbnail_size_w') . ':' . get_option('thumbnail_size_h') ); ?>" />
     174                <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     175                <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     176                <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     177                <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     178                <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     179       
     180                <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     181                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')" src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" />
     182                </div>
     183       
     184                <div class="imgedit-submit">
     185                        <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button" value="<?php esc_attr_e( 'Cancel' ); ?>" />
     186                        <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' ); ?>" />
     187                </div>
     188        </div>
     189       
     190        </div>
    189191        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
    190192        <script type="text/javascript">jQuery( function() { imageEdit.init(<?php echo $post_id; ?>); });</script>
    191193        <div class="hidden" id="imgedit-leaving-<?php echo $post_id; ?>"><?php _e("There are unsaved changes that will be lost. 'OK' to continue, 'Cancel' to return to the Image Editor."); ?></div>

  • src/wp-admin/js/image-edit.js

     
    6363        },
    6464
    6565        toggleHelp : function(el) {
    66                 $(el).siblings('.imgedit-help').slideToggle('fast');
     66                $( el ).parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
    6767                return false;
    6868        },
    6969

  • src/wp-includes/css/media-views.css

     
    14581458 * Image Editor
    14591459 */
    14601460
    1461 .media-frame .image-editor {
    1462         padding: 16px;
     1461.media-frame .imgedit-wrap {
     1462        position: static;
    14631463}
    14641464
    1465 .media-frame .imgedit-wrap table td {
    1466         vertical-align: top;
    1467         padding-top: 0;
     1465.media-frame .imgedit-wait {
     1466        height: auto!important;
     1467        right: 0;
     1468        bottom: 0;
     1469        left: 0;
    14681470}
    14691471
    1470 .media-frame .imgedit-wrap table td.imgedit-settings {
     1472.media-frame .imgedit-wrap .imgedit-panel-content {
     1473        padding: 16px;
     1474        position: absolute;
     1475        top: 0;
     1476        right: 282px;
     1477        bottom: 0;
     1478        left: 0;
     1479        overflow: auto;
     1480}
     1481
     1482.media-frame .imgedit-wrap .imgedit-settings {
     1483        background: #f3f3f3;
     1484        border-left: 1px solid #ddd;
     1485        padding: 0 16px 16px;
     1486        position: absolute;
     1487        top: 0;
     1488        right: 0;
     1489        bottom: 0;
    14711490        width: 250px;
     1491        overflow: auto;
    14721492}
     1493
     1494.media-frame .imgedit-group {
     1495        background: none;
     1496        border: none;
     1497        border-bottom: 1px solid #ddd;
     1498        -webkit-box-shadow: none;
     1499        box-shadow: none;
     1500        margin: 0;
     1501        margin-bottom: 16px;
     1502        padding: 0;
     1503        padding-bottom: 16px;
     1504}
     1505
     1506.media-frame .imgedit-group:last-of-type {
     1507        border: none;
     1508        margin: 0;
     1509        padding: 0;
     1510}
     1511
     1512.media-frame .imgedit-group-top h3 {
     1513        text-transform: uppercase;
     1514        font-size: 12px;
     1515        color: #666;
     1516        margin: 0;
     1517        margin-top: 24px;
     1518}
     1519
     1520.media-frame .imgedit-group-top h3 a {
     1521        text-decoration: none;
     1522        color: #666;
     1523}
     1524
     1525.media-frame .imgedit-help-toggle {
     1526        margin-top: -2px;
     1527        cursor: pointer;
     1528        color: #666;
     1529}
     1530
     1531.media-frame .imgedit-help-toggled span.dashicons:before {
     1532        content: '\f142';
     1533}
     1534
     1535.media-frame .imgedit-group img {
     1536        margin-top: 5px;
     1537}
     1538
     1539.media-frame .imgedit-wrap div.updated {
     1540        margin: 0;
     1541        margin-bottom: 16px;
     1542}
     1543
     1544
    14731545/**
    14741546 * Embed from URL and Image Details
    14751547 */