WordPress.org

Make WordPress Core

Ticket #30154: 30154.diff

File 30154.diff, 18.9 KB (added by certainstrings, 4 years ago)

Responsive Modal Views

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

    diff --git a/src/wp-admin/includes/image-edit.php b/src/wp-admin/includes/image-edit.php
    index db11b56..0a04094 100644
    a b function wp_image_editor($post_id, $msg = false) { 
    4242        ?>
    4343        <div class="imgedit-wrap wp-clearfix">
    4444        <div id="imgedit-panel-<?php echo $post_id; ?>">
    45 
     45        <div class="imgedit-panel-content wp-clearfix">
     46                        <?php echo $note; ?>
     47            <div class="imgedit-menu wp-clearfix">
     48                <button type="button" onclick="imageEdit.crop(<?php echo "$post_id, '$nonce'"; ?>, this)"
     49                        class="imgedit-crop button disabled" disabled><span
     50                            class="screen-reader-text"><?php esc_html_e( 'Crop' ); ?></span></button><?php
     51
     52                                // On some setups GD library does not provide imagerotate() - Ticket #11536
     53                                if ( wp_image_editor_supports( array(
     54                                        'mime_type' => get_post_mime_type( $post_id ),
     55                                        'methods'   => array( 'rotate' )
     56                                ) ) ) {
     57                                        $note_no_rotate = '';
     58                                        ?>
     59                    <button type="button" class="imgedit-rleft button"
     60                            onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span
     61                                class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span>
     62                    </button>
     63                    <button type="button" class="imgedit-rright button"
     64                            onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><span
     65                                class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
     66                                <?php } else {
     67                                        $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
     68                                        ?>
     69                    <button type="button" class="imgedit-rleft button disabled" disabled></button>
     70                    <button type="button" class="imgedit-rright button disabled" disabled></button>
     71                                <?php } ?>
     72
     73                <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)"
     74                        class="imgedit-flipv button"><span
     75                            class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
     76                <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)"
     77                        class="imgedit-fliph button"><span
     78                            class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
     79
     80                <button type="button" id="image-undo-<?php echo $post_id; ?>"
     81                        onclick="imageEdit.undo(<?php echo "$post_id, '$nonce'"; ?>, this)"
     82                        class="imgedit-undo button disabled" disabled><span
     83                            class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
     84                <button type="button" id="image-redo-<?php echo $post_id; ?>"
     85                        onclick="imageEdit.redo(<?php echo "$post_id, '$nonce'"; ?>, this)"
     86                        class="imgedit-redo button disabled" disabled><span
     87                            class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
     88                                <?php echo $note_no_rotate; ?>
     89            </div>
     90
     91            <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>"/>
     92            <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value=""/>
     93            <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0"/>
     94            <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value=""/>
     95            <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>"
     96                   value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>"/>
     97            <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>"
     98                   value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>"/>
     99
     100            <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     101                <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     102                     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 ); ?>"
     103                     alt=""/>
     104            </div>
     105
     106            <div class="imgedit-submit">
     107                <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)"
     108                       class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>"/>
     109                <input type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled"
     110                       class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>"/>
     111            </div>
     112        </div>
    46113        <div class="imgedit-settings">
    47114        <div class="imgedit-group">
    48115        <div class="imgedit-group-top">
    function wp_image_editor($post_id, $msg = false) { 
    96163
    97164<?php } ?>
    98165
    99         <div class="imgedit-group">
    100         <div class="imgedit-group-top">
    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>
    103 
    104                 <div class="imgedit-help">
    105                 <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
    106 
    107                 <p><strong><?php _e('Crop Aspect Ratio'); ?></strong><br />
    108                 <?php _e('The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.'); ?></p>
    109 
    110                 <p><strong><?php _e('Crop Selection'); ?></strong><br />
    111                 <?php _e('Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.'); ?></p>
    112                 </div>
    113         </div>
    114 
    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)" onblur="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)" onblur="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; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    133                 </label>
    134                 <span class="imgedit-separator">&times;</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; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
    137                 </label>
    138                 </div>
    139         </fieldset>
     166        <div class="imgedit-group imgedit-crop">
     167        <div class="imgedit-group-top">
     168            <h2><?php _e( 'Image Crop' ); ?></h2>
     169            <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>
     170
     171            <div class="imgedit-help">
     172            <p><?php _e('To crop the image, click on it and drag to make your selection.'); ?></p>
     173
     174            <p><strong><?php _e('Crop Aspect Ratio'); ?></strong><br />
     175            <?php _e('The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.'); ?></p>
     176
     177            <p><strong><?php _e('Crop Selection'); ?></strong><br />
     178            <?php _e('Once you have made your selection, you can adjust it by entering the size in pixels. The minimum selection size is the thumbnail size as set in the Media settings.'); ?></p>
     179            </div>
     180        </div>
     181
     182        <fieldset class="imgedit-crop-ratio">
     183            <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     184            <div class="nowrap">
     185            <label><span class="screen-reader-text"><?php _e( 'crop ratio width' ); ?></span>
     186            <input type="text" id="imgedit-crop-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 0, this)" />
     187            </label>
     188            <span class="imgedit-separator">:</span>
     189            <label><span class="screen-reader-text"><?php _e( 'crop ratio height' ); ?></span>
     190            <input type="text" id="imgedit-crop-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.setRatioSelection(<?php echo $post_id; ?>, 1, this)" />
     191            </label>
     192            </div>
     193        </fieldset>
     194
     195        <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     196            <legend><?php _e( 'Selection:' ); ?></legend>
     197            <div class="nowrap">
     198            <label><span class="screen-reader-text"><?php _e( 'selection width' ); ?></span>
     199            <input type="text" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     200            </label>
     201            <span class="imgedit-separator">&times;</span>
     202            <label><span class="screen-reader-text"><?php _e( 'selection height' ); ?></span>
     203            <input type="text" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     204            </label>
     205            </div>
     206        </fieldset>
    140207
    141208        </div>
    142209
    function wp_image_editor($post_id, $msg = false) { 
    145212        ?>
    146213
    147214        <div class="imgedit-group imgedit-applyto">
    148         <div class="imgedit-group-top">
    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>
    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>
    152         </div>
     215        <div class="imgedit-group-top">
     216            <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     217            <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>
     218            <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>
     219        </div>
     220
     221        <figure class="imgedit-thumbnail-preview">
     222            <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" />
     223            <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     224        </figure>
     225
     226            <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     227            <fieldset>
     228                <legend><strong><?php _e( 'Apply changes to:' ); ?></strong></legend>
     229
     230                <label class="imgedit-label">
     231                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     232                <?php _e('All image sizes'); ?></label>
     233
     234                <label class="imgedit-label">
     235                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     236                <?php _e('Thumbnail'); ?></label>
     237
     238                <label class="imgedit-label">
     239                <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     240                <?php _e('All sizes except thumbnail'); ?></label>
     241            </fieldset>
     242        </div>
     243    </div>
    153244
    154         <figure class="imgedit-thumbnail-preview">
    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" />
    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>
    162 
    163                 <label class="imgedit-label">
    164                 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    165                 <?php _e('All image sizes'); ?></label>
    166 
    167                 <label class="imgedit-label">
    168                 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    169                 <?php _e('Thumbnail'); ?></label>
    170 
    171                 <label class="imgedit-label">
    172                 <input type="radio" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    173                 <?php _e('All sizes except thumbnail'); ?></label>
    174         </fieldset>
    175         </div>
    176         </div>
    177 
    178         <?php } ?>
    179 
    180         </div>
    181 
    182         <div class="imgedit-panel-content wp-clearfix">
    183                 <?php echo $note; ?>
    184                 <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
    186 
    187                 // On some setups GD library does not provide imagerotate() - Ticket #11536
    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>
    193         <?php } else {
    194                         $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    195         ?>
    196                         <button type="button" class="imgedit-rleft button disabled" disabled></button>
    197                         <button type="button" class="imgedit-rright button disabled" disabled></button>
    198245        <?php } ?>
    199246
    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; ?>
    206                 </div>
    207 
    208                 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    209                 <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    210                 <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    211                 <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    212                 <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    213                 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    214 
    215                 <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
    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&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $post_id; ?>&amp;rand=<?php echo rand(1, 99999); ?>" alt="" />
    217                 </div>
    218 
    219                 <div class="imgedit-submit">
    220                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    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' ); ?>" />
    222                 </div>
    223247        </div>
    224248
    225249        </div>
  • src/wp-includes/css/media-views.css

    diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
    index b5d0953..b3e4b31 100644
    a b  
    26092609        }
    26102610}
    26112611
     2612@media screen and (min-width: 320px) and (max-width: 568px) {
     2613        .imgedit-crop.disabled {
     2614                display: none;
     2615        }
     2616
     2617        .imgedit-crop-wrap img{
     2618                width: 100%;
     2619        }
     2620
     2621        .media-modal .imgedit-wrap .imgedit-panel-content,
     2622        .media-modal .imgedit-wrap .imgedit-settings {
     2623                position: initial !important;
     2624        }
     2625
     2626        .media-modal .imgedit-wrap .imgedit-settings {
     2627                -webkit-box-sizing: border-box;
     2628                -moz-box-sizing: border-box;
     2629                box-sizing: border-box;
     2630                width: 100% !important;
     2631        }
     2632
     2633        .imgedit-crop {
     2634                display: none;
     2635        }
     2636}
     2637
    26122638/**
    26132639 * HiDPI Displays
    26142640 */