WordPress.org
Get WordPress

Make WordPress Core

Changeset 55919


Ignore:
Timestamp:
06/14/2023 08:40:42 PM (3 years ago)
Author:
joedolson
Message:

Media: Update admin image editor design.

Significant restructure of the admin image editor interface, but no new functionality. Reorganize editing buttons into a common region at the top of the editor. Move image rotation tools into a pop-out menu. Add 180 degree rotation option. Add scale button to control group. Move sidebar tools next to the editing canvas to improve visual proximity between action and result. Enlarge editing canvas and crop handles. Separate activating crop functions from applying crop. Add numeric inputs for crop & scale values.

A long term goal is to move undo/redo and cancel/save into the modal title bar, but that is not feasible without significant updates to the modal framework.

Props afercia, karmatosed, nrqsnchz, antpb, chaion07, costdev, peterwilsoncc, antpb, sabernhardt, prashantbhivsane, joedolson.
Fixes #50523.

Location:
trunk
Files:
7 edited

Legend:

Unmodified
Added
Removed

  • trunk/.env

    r54096 r55919  
    1313
    1414# Where to run WordPress from. Valid options are 'src' and 'build'.
    15 LOCAL_DIR=src
     15LOCAL_DIR=build
    1616
    1717# The PHP version to use. Valid options are 'latest', and '{version}-fpm'.

  • trunk/src/js/_enqueues/lib/image-edit.js

    r55859 r55919  
    2323
    2424        /**
    25          * Handle crop tool clicks.
    26          */
    27         handleCropToolClick: function( postid, nonce, cropButton ) {
     25         * Enable crop tool.
     26         */
     27        toggleCropTool: function( postid, nonce, cropButton ) {
    2828                var img = $( '#image-preview-' + postid ),
    2929                        selection = this.iasapi.getSelection();
    3030
    31                 // Ensure selection is available, otherwise reset to full image.
    32                 if ( isNaN( selection.x1 ) ) {
    33                         this.setCropSelection( postid, { 'x1': 0, 'y1': 0, 'x2': img.innerWidth(), 'y2': img.innerHeight(), 'width': img.innerWidth(), 'height': img.innerHeight() } );
    34                         selection = this.iasapi.getSelection();
    35                 }
    36 
    37                 // If we don't already have a selection, select the entire image.
    38                 if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
    39                         this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
    40                         this.iasapi.setOptions( { show: true } );
    41                         this.iasapi.update();
     31                imageEdit.toggleControls( cropButton );
     32                var $el = $( cropButton );
     33                var state = ( $el.attr( 'aria-expanded' ) === 'true' ) ? 'true' : 'false';
     34                // Crop tools have been closed.
     35                if ( 'false' === state ) {
     36                        // Cancel selection, but do not unset inputs.
     37                        this.iasapi.cancelSelection();
     38                        imageEdit.setDisabled($('.imgedit-crop-clear'), 0);
    4239                } else {
    43 
     40                        imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     41                        // Get values from inputs to restore previous selection.
     42                        var startX = ( $( '#imgedit-start-x-' + postid ).val() ) ? $('#imgedit-start-x-' + postid).val() : 0;
     43                        var startY = ( $( '#imgedit-start-y-' + postid ).val() ) ? $('#imgedit-start-y-' + postid).val() : 0;
     44                        var width = ( $( '#imgedit-sel-width-' + postid ).val() ) ? $('#imgedit-sel-width-' + postid).val() : img.innerWidth();
     45                        var height = ( $( '#imgedit-sel-height-' + postid ).val() ) ? $('#imgedit-sel-height-' + postid).val() : img.innerHeight();
     46                        // Ensure selection is available, otherwise reset to full image.
     47                        if ( isNaN( selection.x1 ) ) {
     48                                this.setCropSelection( postid, { 'x1': startX, 'y1': startY, 'x2': width, 'y2': height, 'width': width, 'height': height } );
     49                                selection = this.iasapi.getSelection();
     50                        }
     51
     52                        // If we don't already have a selection, select the entire image.
     53                        if ( 0 === selection.x1 && 0 === selection.y1 && 0 === selection.x2 && 0 === selection.y2 ) {
     54                                this.iasapi.setSelection( 0, 0, img.innerWidth(), img.innerHeight(), true );
     55                                this.iasapi.setOptions( { show: true } );
     56                                this.iasapi.update();
     57                        } else {
     58                                this.iasapi.setSelection( startX, startY, width, height, true );
     59                                this.iasapi.setOptions( { show: true } );
     60                                this.iasapi.update();
     61                        }
     62                }
     63        },
     64
     65        /**
     66         * Handle crop tool clicks.
     67         */
     68        handleCropToolClick: function( postid, nonce, cropButton ) {
     69
     70                if ( cropButton.classList.contains( 'imgedit-crop-clear' ) ) {
     71                        this.iasapi.cancelSelection();
     72                        imageEdit.setDisabled($('.imgedit-crop-apply'), 0);
     73
     74                        $('#imgedit-sel-width-' + postid).val('');
     75                        $('#imgedit-sel-height-' + postid).val('');
     76                        $('#imgedit-start-x-' + postid).val('0');
     77                        $('#imgedit-start-y-' + postid).val('0');
     78                        $('#imgedit-selection-' + postid).val('');
     79                } else {
    4480                        // Otherwise, perform the crop.
    4581                        imageEdit.crop( postid, nonce , cropButton );
    … …  
    123159                $('#imgedit-response-' + postid).empty();
    124160
     161                $('#imgedit-panel-' + postid).on( 'keypress', function(e) {
     162                        var nonce = $( '#imgedit-nonce-' + postid ).val();
     163                        if ( e.which === 26 && e.ctrlKey ) {
     164                                imageEdit.undo( postid, nonce );
     165                        }
     166
     167                        if ( e.which === 25 && e.ctrlKey ) {
     168                                imageEdit.redo( postid, nonce );
     169                        }
     170                });
     171
    125172                $('#imgedit-panel-' + postid).on( 'keypress', 'input[type="text"]', function(e) {
    126173                        var k = e.keyCode;
    … …  
    171218
    172219        /**
     220         * Shows or hides image menu popup.
     221         *
     222         * @since 6.3.0
     223         *
     224         * @memberof imageEdit
     225         *
     226         * @param {HTMLElement} el The activated control element.
     227         *
     228         * @return {boolean} Always returns false.
     229         */
     230        togglePopup : function(el) {
     231                var $el = $( el );
     232                var $targetEl = $( el ).attr( 'aria-controls' );
     233                var $target = $( '#' + $targetEl );
     234                $el
     235                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     236                // Open menu and set z-index to appear above image crop area if it is enabled.
     237                $target
     238                        .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' ).css( { 'z-index' : 200000 } );
     239                // Move focus to first item in menu.
     240                $target.find( 'button' ).first().trigger( 'focus' );
     241
     242                return false;
     243        },
     244
     245        /**
     246         * Navigate popup menu by arrow keys.
     247         *
     248         * @since 6.3.0
     249         *
     250         * @memberof imageEdit
     251         *
     252         * @param {HTMLElement} el The current element.
     253         *
     254         * @return {boolean} Always returns false.
     255         */
     256        browsePopup : function(el) {
     257                var $el = $( el );
     258                var $collection = $( el ).parent( '.imgedit-popup-menu' ).find( 'button' );
     259                var $index = $collection.index( $el );
     260                var $prev = $index - 1;
     261                var $next = $index + 1;
     262                var $last = $collection.length;
     263                if ( $prev < 0 ) {
     264                        $prev = $last - 1;
     265                }
     266                if ( $next === $last ) {
     267                        $next = 0;
     268                }
     269                var $target = false;
     270                if ( event.keyCode === 40 ) {
     271                        $target = $collection.get( $next );
     272                } else if ( event.keyCode === 38 ) {
     273                        $target = $collection.get( $prev );
     274                }
     275                if ( $target ) {
     276                        $target.focus();
     277                        event.preventDefault();
     278                }
     279
     280                return false;
     281        },
     282
     283        /**
     284         * Close popup menu and reset focus on feature activation.
     285         *
     286         * @since 6.3.0
     287         *
     288         * @memberof imageEdit
     289         *
     290         * @param {HTMLElement} el The current element.
     291         *
     292         * @return {boolean} Always returns false.
     293         */
     294        closePopup : function(el) {
     295                var $parent = $(el).parent( '.imgedit-popup-menu' );
     296                var $controlledID = $parent.attr( 'id' );
     297                var $target = $( 'button[aria-controls="' + $controlledID + '"]' );
     298                $target
     299                        .attr( 'aria-expanded', 'false' ).trigger( 'focus' );
     300                $parent
     301                        .toggleClass( 'imgedit-popup-menu-open' ).slideToggle( 'fast' );
     302
     303                return false;
     304        },
     305
     306        /**
    173307         * Shows or hides the image edit help box.
    174308         *
    … …  
    186320                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' )
    187321                        .parents( '.imgedit-group-top' ).toggleClass( 'imgedit-help-toggled' ).find( '.imgedit-help' ).slideToggle( 'fast' );
     322
     323                return false;
     324        },
     325
     326        /**
     327         * Shows or hides image edit input fields when enabled.
     328         *
     329         * @since 6.3.0
     330         *
     331         * @memberof imageEdit
     332         *
     333         * @param {HTMLElement} el The element to trigger the edit panel.
     334         *
     335         * @return {boolean} Always returns false.
     336         */
     337        toggleControls : function(el) {
     338                var $el = $( el );
     339                var $target = $( '#' + $el.attr( 'aria-controls' ) );
     340                $el
     341                        .attr( 'aria-expanded', 'false' === $el.attr( 'aria-expanded' ) ? 'true' : 'false' );
     342                $target
     343                        .parent( '.imgedit-group' ).toggleClass( 'imgedit-panel-active' );
    188344
    189345                return false;
    … …  
    406562
    407563                                if ( $('#imgedit-history-' + postid).val() && $('#imgedit-undone-' + postid).val() === '0' ) {
    408                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
     564                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', false);
    409565                                } else {
    410                                         $('input.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
     566                                        $('button.imgedit-submit-btn', '#imgedit-panel-' + postid).prop('disabled', true);
    411567                                }
     568                                var successMessage = __( 'Image updated.' );
    412569
    413570                                t.toggleEditor(postid, 0);
     571                                wp.a11y.speak( successMessage, 'assertive' );
    414572                        })
    415573                        .on( 'error', function() {
    … …  
    714872                        selW = $('#imgedit-sel-width-' + postid),
    715873                        selH = $('#imgedit-sel-height-' + postid),
     874                        selX = $('#imgedit-start-x-' + postid),
     875                        selY = $('#imgedit-start-y-' + postid),
    716876                        $image = $( image ),
    717877                        $img;
    … …  
    772932                        onSelectStart: function() {
    773933                                imageEdit.setDisabled($('#imgedit-crop-sel-' + postid), 1);
     934                                imageEdit.setDisabled($('.imgedit-crop-clear'), 1);
     935                                imageEdit.setDisabled($('.imgedit-crop-apply'), 1);
    774936                        },
    775937                        /**
    … …  
    785947                        onSelectEnd: function(img, c) {
    786948                                imageEdit.setCropSelection(postid, c);
     949                                if ( ! $('#imgedit-crop > *').is(':visible') ) {
     950                                        imageEdit.toggleControls($('.imgedit-crop.button'));
     951                                }
    787952                        },
    788953
    … …  
    801966                                selW.val( imageEdit.round(c.width / sizer) );
    802967                                selH.val( imageEdit.round(c.height / sizer) );
     968                                selX.val( imageEdit.round(c.x1 / sizer) );
     969                                selY.val( imageEdit.round(c.y1 / sizer) );
    803970                        }
    804971                });
    … …  
    827994                        $('#imgedit-sel-width-' + postid).val('');
    828995                        $('#imgedit-sel-height-' + postid).val('');
     996                        $('#imgedit-start-x-' + postid).val('0');
     997                        $('#imgedit-start-y-' + postid).val('0');
    829998                        $('#imgedit-selection-' + postid).val('');
    830999                        return false;
    … …  
    9571126                        return false;
    9581127                }
    959 
     1128                this.closePopup(t);
    9601129                this.addStep({ 'r': { 'r': angle, 'fw': this.hold.h, 'fh': this.hold.w }}, postid, nonce);
    9611130        },
    … …  
    9791148                        return false;
    9801149                }
    981 
     1150                this.closePopup(t);
    9821151                this.addStep({ 'f': { 'f': axis, 'fw': this.hold.w, 'fh': this.hold.h }}, postid, nonce);
    9831152        },
    … …  
    10151184                $('#imgedit-sel-width-' + postid).val('');
    10161185                $('#imgedit-sel-height-' + postid).val('');
     1186                $('#imgedit-start-x-' + postid).val('0');
     1187                $('#imgedit-start-y-' + postid).val('0');
    10171188        },
    10181189
    … …  
    10981269        setNumSelection : function( postid, el ) {
    10991270                var sel, elX = $('#imgedit-sel-width-' + postid), elY = $('#imgedit-sel-height-' + postid),
     1271                        elX1 = $('#imgedit-start-x-' + postid), elY1 = $('#imgedit-start-y-' + postid),
     1272                        xS = this.intval( elX1.val() ), yS = this.intval( elY1.val() ),
    11001273                        x = this.intval( elX.val() ), y = this.intval( elY.val() ),
    11011274                        img = $('#image-preview-' + postid), imgh = img.height(), imgw = img.width(),
    … …  
    11161289                }
    11171290
    1118                 if ( x && y && ( sel = ias.getSelection() ) ) {
     1291                if ( ( ( x && y ) || ( xS && yS ) ) && ( sel = ias.getSelection() ) ) {
    11191292                        x2 = sel.x1 + Math.round( x * sizer );
    11201293                        y2 = sel.y1 + Math.round( y * sizer );
    1121                         x1 = sel.x1;
    1122                         y1 = sel.y1;
     1294                        x1 = ( xS === sel.x1 ) ? sel.x1 : Math.round( xS * sizer );
     1295                        y1 = ( yS === sel.y1 ) ? sel.y1 : Math.round( yS * sizer );
    11231296
    11241297                        if ( x2 > imgw ) {
    … …  
    12061379                                if ( r > h ) {
    12071380                                        r = h;
     1381                                        var errorMessage = __( 'Selected crop ratio exceeds the boundaries of the image. Try a different ratio.' );
     1382
     1383                                        $( '#imgedit-crop-' + postid )
     1384                                                .prepend( '<div class="notice notice-error" tabindex="-1" role="alert"><p>' + errorMessage + '</p></div>' );
     1385
     1386                                        wp.a11y.speak( errorMessage, 'assertive' );
    12081387                                        if ( n ) {
    1209                                                 $('#imgedit-crop-height-' + postid).val('');
     1388                                                $('#imgedit-crop-height-' + postid).val( '' );
    12101389                                        } else {
    1211                                                 $('#imgedit-crop-width-' + postid).val('');
     1390                                                $('#imgedit-crop-width-' + postid).val( '');
     1391                                        }
     1392                                } else {
     1393                                        var error = $( '#imgedit-crop-' + postid ).find( '.notice-error' );
     1394                                        if ( 'undefined' !== typeof( error ) ) {
     1395                                                error.remove();
    12121396                                        }
    12131397                                }
    … …  
    12321416         */
    12331417        validateNumeric: function( el ) {
    1234                 if ( ! this.intval( $( el ).val() ) ) {
     1418                if ( false === this.intval( $( el ).val() ) ) {
    12351419                        $( el ).val( '' );
    12361420                        return false;

  • trunk/src/js/_enqueues/vendor/imgareaselect/jquery.imgareaselect.js

    r54928 r55919  
    957957             */
    958958            if (!parseInt($handles.css('width')) >= 0)
    959                 $handles.width(5).height(5);
     959                $handles.width(10).height(10);
    960960
    961961            /*

  • trunk/src/wp-admin/css/common.css

    r55307 r55919  
    192192.popular-tags,
    193193.feature-filter,
    194 .imgedit-group,
    195194.comment-ays {
    196195        border: 1px solid #c3c4c7;
    … …  
    205204.popular-tags,
    206205.feature-filter,
    207 .imgedit-group,
    208206.comment-ays {
    209207        background: #fff;

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

    r55859 r55919  
    878878}
    879879
    880 .imgedit-settings p,
    881 .imgedit-settings fieldset {
     880.image-editor p,
     881.image-editor fieldset {
    882882        margin: 8px 0;
    883883}
    884884
    885 .imgedit-settings legend {
     885.image-editor legend {
    886886        margin-bottom: 5px;
    887887}
    888888
    889 .describe .imgedit-wrap .imgedit-settings {
     889.describe .imgedit-wrap .image-editor {
    890890        padding: 0 5px;
    891891}
    … …  
    899899}
    900900
    901 .wp_attachment_holder .imgedit-wrap .imgedit-panel-content {
    902         float: left;
    903         padding: 3px 16px 0 0;
    904         min-width: 400px;
    905         max-width: calc( 100% - 266px );
    906 }
    907 
    908 .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     901.imgedit-panel-content {
     902        display: grid;
     903        grid-template-columns: 640px 1fr;
     904        gap: 20px;
     905}
     906
     907@media screen and (max-width: 1120px) {
     908        .imgedit-panel-content {
     909                grid-template-columns: 1fr;
     910        }
     911}
     912
     913.imgedit-settings {
     914        max-width: 400px; /* Prevent reflow when help info is expanded. */
     915}
     916
     917.imgedit-group-controls > * {
     918        display: none;
     919}
     920
     921.imgedit-panel-active .imgedit-group-controls > * {
     922        display: block;
     923}
     924
     925.wp_attachment_holder .imgedit-wrap .image-editor {
    909926        float: right;
    910927        width: 250px;
    911928}
    912929
    913 .imgedit-settings input {
     930.image-editor input {
    914931        margin-top: 0;
    915932        vertical-align: middle;
    … …  
    946963
    947964.media-disabled,
    948 .imgedit-settings .disabled {
     965.image-editor .disabled {
    949966        /* WCAG 1.4.3 Text or images of text that are part of an inactive user
    950967           interface component ... have no contrast requirement. */
    … …  
    968985.A1B1 .spinner {
    969986        float: left;
    970 }
    971 
    972 .imgedit-menu {
    973         margin: 0 0 12px;
    974987}
    975988
    … …  
    986999        font-size: 13px;
    9871000        line-height: 2;
    988         margin: 0 8px 8px 0;
    9891001        padding: 0 10px;
    9901002}
    … …  
    10151027}
    10161028
    1017 .imgedit-rleft:before {
    1018         content: "\f166";
    1019 }
    1020 
    1021 .imgedit-rright:before {
     1029.imgedit-scale:before {
     1030        content: "\f211";
     1031}
     1032
     1033.imgedit-rotate:before {
    10221034        content: "\f167";
    1023 }
    1024 
    1025 .imgedit-flipv:before {
    1026         content: "\f168";
    1027 }
    1028 
    1029 .imgedit-fliph:before {
    1030         content: "\f169";
    10311035}
    10321036
    … …  
    10491053}
    10501054
     1055.imgedit-crop-wrap {
     1056        padding: 20px;
     1057        background-image: linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7), linear-gradient(45deg, #c3c4c7 25%, transparent 25%, transparent 75%, #c3c4c7 75%, #c3c4c7);
     1058        background-position: 0 0, 10px 10px;
     1059        background-size: 20px 20px;
     1060}
     1061
     1062
    10511063.imgedit-crop {
    10521064        margin: 0 8px 0 0;
    10531065}
    10541066
    1055 .imgedit-rleft {
    1056         margin: 0 3px;
    1057 }
    1058 
    1059 .imgedit-rright {
    1060         margin: 0 8px 0 3px;
    1061 }
    1062 
    1063 .imgedit-flipv {
    1064         margin: 0 3px;
    1065 }
    1066 
    1067 .imgedit-fliph {
     1067.imgedit-rotate {
    10681068        margin: 0 8px 0 3px;
    10691069}
    … …  
    10751075.imgedit-redo {
    10761076        margin: 0 8px 0 3px;
     1077}
     1078
     1079.imgedit-thumbnail-preview-group {
     1080        display: flex;
     1081        flex-wrap: wrap;
     1082        column-gap: 10px;
    10771083}
    10781084
    … …  
    11031109}
    11041110
     1111.imgedit-popup-menu,
    11051112.imgedit-help {
    11061113        display: none;
    11071114        padding-bottom: 8px;
     1115}
     1116
     1117.imgedit-panel-tools > .imgedit-menu {
     1118        display: flex;
     1119        column-gap: 4px;
     1120        align-items: start;
     1121}
     1122
     1123.imgedit-popup-menu {
     1124        width: fit-content;
     1125        position: absolute;
     1126        left: calc( 100% + 4px );
     1127        top: -3px;
     1128}
     1129
     1130.image-editor .imgedit-menu .imgedit-popup-menu button {
     1131        display: block;
     1132        margin: 2px 0;
     1133        width: 100%;
     1134}
     1135
     1136.imgedit-rotate-menu-container {
     1137        position: relative;
    11081138}
    11091139
    … …  
    11401170}
    11411171
    1142 .imgedit-submit {
    1143         margin: 8px 0 0;
    1144 }
    1145 
    11461172.imgedit-submit-btn {
    11471173        margin-left: 20px;
    … …  
    11741200
    11751201.imgedit-group {
    1176         margin-bottom: 8px;
    1177         padding: 10px;
    1178 }
    1179 
    1180 .imgedit-settings .imgedit-original-dimensions {
     1202        margin-bottom: 20px;
     1203}
     1204
     1205.image-editor .imgedit-original-dimensions {
    11811206        display: inline-block;
    11821207}
    11831208
    1184 .imgedit-settings .imgedit-scale input[type="text"],
    1185 .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1186 .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1209.image-editor .imgedit-scale-controls input[type="text"],
     1210.image-editor .imgedit-crop-ratio input[type="text"],
     1211.image-editor .imgedit-crop-sel input[type="text"] {
    11871212        width: 80px;
    11881213        font-size: 14px;
    … …  
    11981223}
    11991224
    1200 .imgedit-settings .imgedit-scale-button-wrapper {
     1225.image-editor .imgedit-scale-button-wrapper {
    12011226        margin-top: 0.3077em;
    12021227        display: block;
    12031228}
    12041229
    1205 .imgedit-settings .imgedit-scale .button {
     1230.image-editor .imgedit-scale-controls .button {
    12061231        margin-bottom: 0;
    12071232}
    … …  
    12721297        }
    12731298
    1274         .imgedit-settings .imgedit-scale input[type="text"],
    1275         .imgedit-settings .imgedit-crop-ratio input[type="text"],
    1276         .imgedit-settings .imgedit-crop-sel input[type="text"] {
     1299        .image-editor .imgedit-scale input[type="text"],
     1300        .image-editor .imgedit-crop-ratio input[type="text"],
     1301        .image-editor .imgedit-crop-sel input[type="text"] {
    12771302                font-size: 16px;
    12781303                padding: 6px 10px;
    … …  
    12801305
    12811306        .wp_attachment_holder .imgedit-wrap .imgedit-panel-content,
    1282         .wp_attachment_holder .imgedit-wrap .imgedit-settings {
     1307        .wp_attachment_holder .imgedit-wrap .image-editor {
    12831308                float: none;
    12841309                width: auto;
    … …  
    12971322
    12981323        .media-modal .imgedit-wrap .imgedit-panel-content,
    1299         .media-modal .imgedit-wrap .imgedit-settings {
     1324        .media-modal .imgedit-wrap .image-editor {
    13001325                position: initial !important;
    13011326        }
    13021327
    1303         .media-modal .imgedit-wrap .imgedit-settings {
     1328        .media-modal .imgedit-wrap .image-editor {
    13041329                box-sizing: border-box;
    13051330                width: 100% !important;
    13061331        }
    13071332
    1308         .imgedit-settings .imgedit-scale-button-wrapper {
     1333        .image-editor .imgedit-scale-button-wrapper {
    13091334                display: inline-block;
    13101335        }

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

    r55859 r55919  
    2929        }
    3030
    31         $sizer = $big > 400 ? 400 / $big : 1;
     31        $sizer = $big > 600 ? 600 / $big : 1;
    3232
    3333        $backup_sizes = get_post_meta( $post_id, '_wp_attachment_backup_sizes', true );
    … …  
    5656        <div class="imgedit-wrap wp-clearfix">
    5757        <div id="imgedit-panel-<?php echo $post_id; ?>">
    58 
    59         <div class="imgedit-panel-content wp-clearfix">
    60                 <?php echo $note; ?>
     58        <?php echo $note; ?>
     59        <div class="imgedit-panel-content imgedit-panel-tools wp-clearfix">
    6160                <div class="imgedit-menu wp-clearfix">
    62                         <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this )" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     61                        <button type="button" onclick="imageEdit.toggleCropTool( <?php echo "$post_id, '$nonce'"; ?>, this );" aria-expanded="false" aria-controls="imgedit-crop" class="imgedit-crop button disabled" disabled><?php esc_html_e( 'Crop' ); ?></button>
     62                        <button type="button" class="imgedit-scale button" onclick="imageEdit.toggleControls(this);" aria-expanded="false" aria-controls="imgedit-scale"><?php esc_html_e( 'Scale' ); ?></button>
     63                        <div class="imgedit-rotate-menu-container">
     64                                <button type="button" aria-controls="imgedit-rotate-menu" class="imgedit-rotate button" onclick="imageEdit.togglePopup(this)"><?php esc_html_e( 'Image Rotation' ); ?></button>
     65                                <div id="imgedit-rotate-menu" class="imgedit-popup-menu">
    6366                        <?php
    64 
    6567                        // On some setups GD library does not provide imagerotate() - Ticket #11536.
    6668                        if ( wp_image_editor_supports(
    … …  
    7274                                $note_no_rotate = '';
    7375                                ?>
    74                                 <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate left' ); ?></button>
    75                                 <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate right' ); ?></button>
     76                                        <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° left' ); ?></button>
     77                                        <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(-90, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 90° right' ); ?></button>
     78                                        <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate(180, <?php echo "$post_id, '$nonce'"; ?>, this)"><?php esc_html_e( 'Rotate 180°' ); ?></button>
    7679                                <?php
    7780                        } else {
    7881                                $note_no_rotate = '<p class="note-no-rotate"><em>' . __( 'Image rotation is not supported by your web host.' ) . '</em></p>';
    7982                                ?>
    80                                 <button type="button" class="imgedit-rleft button disabled" disabled></button>
    81                                 <button type="button" class="imgedit-rright button disabled" disabled></button>
    82                         <?php } ?>
    83 
    84                         <button type="button" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
    85                         <button type="button" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
    86 
    87                         <br class="imgedit-undo-redo-separator" />
     83                                        <button type="button" class="imgedit-rleft button disabled" disabled></button>
     84                                        <button type="button" class="imgedit-rright button disabled" disabled></button>
     85                                <?php
     86                        }
     87                        ?>
     88                                        <hr />
     89                                        <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(1, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertical' ); ?></button>
     90                                        <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip(2, <?php echo "$post_id, '$nonce'"; ?>, this)" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontal' ); ?></button>
     91                                        <?php echo $note_no_rotate; ?>
     92                                </div>
     93                        </div>
     94                </div>
     95                <div class="imgedit-submit imgedit-menu">
    8896                        <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><?php esc_html_e( 'Undo' ); ?></button>
    8997                        <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><?php esc_html_e( 'Redo' ); ?></button>
    90                         <?php echo $note_no_rotate; ?>
    91                 </div>
    92 
    93                 <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
    94                 <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
    95                 <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
    96                 <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
    97                 <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    98                 <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" 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 esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
    103                 </div>
    104 
    105                 <div class="imgedit-submit">
    106                         <input type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn" value="<?php esc_attr_e( 'Cancel' ); ?>" />
    107                         <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' ); ?>" />
     98                        <button type="button" onclick="imageEdit.close(<?php echo $post_id; ?>, 1)" class="button imgedit-cancel-btn"><?php esc_html_e( 'Cancel Editing' ); ?></button>
     99                        <button type="button" onclick="imageEdit.save(<?php echo "$post_id, '$nonce'"; ?>)" disabled="disabled" class="button button-primary imgedit-submit-btn"><?php esc_html_e( 'Save Edits' ); ?></button>
    108100                </div>
    109101        </div>
    110102
    111         <div class="imgedit-settings">
    112         <div class="imgedit-group">
    113         <div class="imgedit-group-top">
    114                 <h2><?php _e( 'Scale Image' ); ?></h2>
    115                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    116                         <?php
    117                         /* translators: Hidden accessibility text. */
    118                         esc_html_e( 'Scale Image Help' );
    119                         ?>
    120                 </span></button>
    121                 <div class="imgedit-help">
    122                 <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>
     103        <div class="imgedit-panel-content wp-clearfix">
     104                <div class="imgedit-tools">
     105                        <input type="hidden" id="imgedit-nonce-<?php echo $post_id; ?>" value="<?php echo $nonce; ?>" />
     106                        <input type="hidden" id="imgedit-sizer-<?php echo $post_id; ?>" value="<?php echo $sizer; ?>" />
     107                        <input type="hidden" id="imgedit-history-<?php echo $post_id; ?>" value="" />
     108                        <input type="hidden" id="imgedit-undone-<?php echo $post_id; ?>" value="0" />
     109                        <input type="hidden" id="imgedit-selection-<?php echo $post_id; ?>" value="" />
     110                        <input type="hidden" id="imgedit-x-<?php echo $post_id; ?>" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     111                        <input type="hidden" id="imgedit-y-<?php echo $post_id; ?>" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     112
     113                        <div id="imgedit-crop-<?php echo $post_id; ?>" class="imgedit-crop-wrap">
     114                        <div class="imgedit-crop-grid"></div>
     115                        <img id="image-preview-<?php echo $post_id; ?>" onload="imageEdit.imgLoaded('<?php echo $post_id; ?>')"
     116                                src="<?php echo esc_url( admin_url( 'admin-ajax.php', 'relative' ) ) . '?action=imgedit-preview&amp;_ajax_nonce=' . $nonce . '&amp;postid=' . $post_id . '&amp;rand=' . rand( 1, 99999 ); ?>" alt="" />
     117                        </div>
    123118                </div>
    124                 <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
    125                 <p>
    126                         <?php
    127                         printf(
    128                                 /* translators: %s: Image width and height in pixels. */
    129                                 __( 'Original dimensions %s' ),
    130                                 '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
    131                         );
    132                         ?>
    133                 </p>
    134                 <?php endif; ?>
    135                 <div class="imgedit-submit">
    136 
    137                 <fieldset class="imgedit-scale">
    138                 <legend><?php _e( 'New dimensions:' ); ?></legend>
    139                 <div class="nowrap">
    140                 <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
    141                         <?php
    142                         /* translators: Hidden accessibility text. */
    143                         _e( 'scale width' );
    144                         ?>
    145                 </label>
    146                 <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" step="1" id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
    147                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    148                 <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text">
    149                         <?php
    150                         /* translators: Hidden accessibility text. */
    151                         _e( 'scale height' );
    152                         ?>
    153                 </label>
    154                 <input type="number" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" min="1" max="<?php echo isset( $meta['height'] ) ? $meta['height'] : ''; ?>" step="1" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onchange="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
    155                 <div class="imgedit-scale-button-wrapper"><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' ); ?>" /></div>
     119                <div class="imgedit-settings">
     120                        <div class="imgedit-tool-active">
     121                                <div class="imgedit-group">
     122                                <div id="imgedit-scale" tabindex="-1" class="imgedit-group-controls">
     123                                        <div class="imgedit-group-top">
     124                                                <h2><?php _e( 'Scale Image' ); ?></h2>
     125                                                <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     126                                                <?php
     127                                                /* translators: Hidden accessibility text. */
     128                                                esc_html_e( 'Scale Image Help' );
     129                                                ?>
     130                                                </span></button>
     131                                                <div class="imgedit-help">
     132                                                <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>
     133                                                </div>
     134                                                <?php if ( isset( $meta['width'], $meta['height'] ) ) : ?>
     135                                                <p>
     136                                                        <?php
     137                                                        printf(
     138                                                                /* translators: %s: Image width and height in pixels. */
     139                                                                __( 'Original dimensions %s' ),
     140                                                                '<span class="imgedit-original-dimensions">' . $meta['width'] . ' &times; ' . $meta['height'] . '</span>'
     141                                                        );
     142                                                        ?>
     143                                                </p>
     144                                                <?php endif; ?>
     145                                                <div class="imgedit-submit">
     146                                                <fieldset class="imgedit-scale-controls">
     147                                                        <legend><?php _e( 'New dimensions:' ); ?></legend>
     148                                                        <div class="nowrap">
     149                                                        <label for="imgedit-scale-width-<?php echo $post_id; ?>" class="screen-reader-text">
     150                                                        <?php
     151                                                        /* translators: Hidden accessibility text. */
     152                                                        _e( 'scale height' );
     153                                                        ?>
     154                                                        </label>
     155                                                        <input type="number" step="1" min="0" max="<?php echo isset( $meta['width'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>"  id="imgedit-scale-width-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 1, this)" value="<?php echo isset( $meta['width'] ) ? $meta['width'] : 0; ?>" />
     156                                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     157                                                        <label for="imgedit-scale-height-<?php echo $post_id; ?>" class="screen-reader-text"><?php _e( 'scale height' ); ?></label>
     158                                                        <input type="number" step="1" min="0" max="<?php echo isset( $meta['height'] ) ? $meta['width'] : ''; ?>" aria-describedby="imgedit-scale-warn-<?php echo $post_id; ?>" id="imgedit-scale-height-<?php echo $post_id; ?>" onkeyup="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" onblur="imageEdit.scaleChanged(<?php echo $post_id; ?>, 0, this)" value="<?php echo isset( $meta['height'] ) ? $meta['height'] : 0; ?>" />
     159                                                        <button id="imgedit-scale-button" type="button" onclick="imageEdit.action(<?php echo "$post_id, '$nonce'"; ?>, 'scale')" class="button button-primary"><?php esc_html_e( 'Scale' ); ?></button>
     160                                                        <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
     161                                                        </div>
     162                                                </fieldset>
     163                                                </div>
     164                                        </div>
     165                                </div>
     166                        </div>
     167
     168                <?php if ( $can_restore ) { ?>
     169                                <div class="imgedit-group">
     170                                <div class="imgedit-group-top">
     171                                        <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
     172                                        <div class="imgedit-help imgedit-restore">
     173                                        <p>
     174                                        <?php
     175                                        _e( 'Discard any changes and restore the original image.' );
     176                                        if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
     177                                                echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
     178                                        }
     179                                        ?>
     180                                        </p>
     181                                        <div class="imgedit-submit">
     182                                                <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; ?> />
     183                                        </div>
     184                                </div>
     185                        </div>
     186                        </div>
     187                <?php } ?>
     188                        <div class="imgedit-group">
     189                                <div id="imgedit-crop" tabindex="-1" class="imgedit-group-controls">
     190                                <div class="imgedit-group-top">
     191                                        <h2><?php _e( 'Crop Image' ); ?></h2>
     192                                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     193                                        <?php
     194                                        /* translators: Hidden accessibility text. */
     195                                        _e( 'Image Crop Help' );
     196                                        ?>
     197                                        </span></button>
     198                                        <div class="imgedit-help">
     199                                                <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
     200                                                <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
     201                                                <?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>
     202
     203                                                <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
     204                                                <?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>
     205                                        </div>
     206                                </div>
     207                                <fieldset class="imgedit-crop-ratio">
     208                                        <legend><?php _e( 'Aspect ratio:' ); ?></legend>
     209                                        <div class="nowrap">
     210                                        <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
     211                                        <?php
     212                                        /* translators: Hidden accessibility text. */
     213                                        _e( 'crop ratio width' );
     214                                        ?>
     215                                        </label>
     216                                        <input type="number" step="1" min="1" 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)" />
     217                                        <span class="imgedit-separator" aria-hidden="true">:</span>
     218                                        <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
     219                                        <?php
     220                                        /* translators: Hidden accessibility text. */
     221                                        _e( 'crop ratio height' );
     222                                        ?>
     223                                        </label>
     224                                        <input  type="number" step="1" min="0" 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)" />
     225                                        </div>
     226                                </fieldset>
     227                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     228                                        <legend><?php _e( 'Selection:' ); ?></legend>
     229                                        <div class="nowrap">
     230                                        <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
     231                                        <?php
     232                                        /* translators: Hidden accessibility text. */
     233                                        _e( 'selection width' );
     234                                        ?>
     235                                        </label>
     236                                        <input  type="number" step="1" min="0" id="imgedit-sel-width-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     237                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     238                                        <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
     239                                        <?php
     240                                        /* translators: Hidden accessibility text. */
     241                                        _e( 'selection height' );
     242                                        ?>
     243                                        </label>
     244                                        <input  type="number" step="1" min="0" id="imgedit-sel-height-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" />
     245                                        </div>
     246                                </fieldset>
     247                                <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
     248                                        <legend><?php _e( 'Starting Coordinates:' ); ?></legend>
     249                                        <div class="nowrap">
     250                                        <label for="imgedit-start-x-<?php echo $post_id; ?>" class="screen-reader-text">
     251                                        <?php
     252                                        /* translators: Hidden accessibility text. */
     253                                        _e( 'horizontal start position' );
     254                                        ?>
     255                                        </label>
     256                                        <input  type="number" step="1" min="0" id="imgedit-start-x-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     257                                        <span class="imgedit-separator" aria-hidden="true">&times;</span>
     258                                        <label for="imgedit-start-y-<?php echo $post_id; ?>" class="screen-reader-text">
     259                                        <?php
     260                                        /* translators: Hidden accessibility text. */
     261                                        _e( 'vertical start position' );
     262                                        ?>
     263                                        </label>
     264                                        <input  type="number" step="1" min="0" id="imgedit-start-y-<?php echo $post_id; ?>" onkeyup="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" onblur="imageEdit.setNumSelection(<?php echo $post_id; ?>, this)" value="0" />
     265                                        </div>
     266                                </fieldset>
     267                                <div class="imgedit-crop-apply imgedit-menu container">
     268                                        <button class="button-primary" type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-apply button"><?php esc_html_e( 'Apply Crop' ); ?></button> <button type="button" onclick="imageEdit.handleCropToolClick( <?php echo "$post_id, '$nonce'"; ?>, this );" class="imgedit-crop-clear button" disabled="disabled"><?php esc_html_e( 'Clear Crop' ); ?></button>
     269                                </div>
     270                        </div>
    156271                </div>
    157                 <span class="imgedit-scale-warn" id="imgedit-scale-warn-<?php echo $post_id; ?>"><span class="dashicons dashicons-warning" aria-hidden="true"></span><?php esc_html_e( 'Images cannot be scaled to a size larger than the original.' ); ?></span>
    158 
    159                 </fieldset>
    160 
    161                 </div>
    162         </div>
    163         </div>
    164 
    165         <?php if ( $can_restore ) { ?>
    166 
    167         <div class="imgedit-group">
    168         <div class="imgedit-group-top">
    169                 <h2><button type="button" onclick="imageEdit.toggleHelp(this);" class="button-link" aria-expanded="false"><?php _e( 'Restore original image' ); ?> <span class="dashicons dashicons-arrow-down imgedit-help-toggle"></span></button></h2>
    170                 <div class="imgedit-help imgedit-restore">
    171                 <p>
    172                         <?php
    173                         _e( 'Discard any changes and restore the original image.' );
    174 
    175                         if ( ! defined( 'IMAGE_EDIT_OVERWRITE' ) || ! IMAGE_EDIT_OVERWRITE ) {
    176                                 echo ' ' . __( 'Previously edited copies of the image will not be deleted.' );
    177                         }
    178                         ?>
    179                 </p>
    180                 <div class="imgedit-submit">
    181                 <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; ?> />
    182                 </div>
    183                 </div>
    184         </div>
    185         </div>
    186 
    187         <?php } ?>
    188 
    189         <div class="imgedit-group">
    190         <div class="imgedit-group-top">
    191                 <h2><?php _e( 'Image Crop' ); ?></h2>
    192                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    193                         <?php
    194                         /* translators: Hidden accessibility text. */
    195                         esc_html_e( 'Image Crop Help' );
    196                         ?>
    197                 </span></button>
    198 
    199                 <div class="imgedit-help">
    200                 <p><?php _e( 'To crop the image, click on it and drag to make your selection.' ); ?></p>
    201 
    202                 <p><strong><?php _e( 'Crop Aspect Ratio' ); ?></strong><br />
    203                 <?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>
    204 
    205                 <p><strong><?php _e( 'Crop Selection' ); ?></strong><br />
    206                 <?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>
    207                 </div>
    208         </div>
    209 
    210         <fieldset class="imgedit-crop-ratio">
    211                 <legend><?php _e( 'Aspect ratio:' ); ?></legend>
    212                 <div class="nowrap">
    213                 <label for="imgedit-crop-width-<?php echo $post_id; ?>" class="screen-reader-text">
    214                         <?php
    215                         /* translators: Hidden accessibility text. */
    216                         _e( 'crop ratio width' );
    217                         ?>
    218                 </label>
    219                 <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)" />
    220                 <span class="imgedit-separator" aria-hidden="true">:</span>
    221                 <label for="imgedit-crop-height-<?php echo $post_id; ?>" class="screen-reader-text">
    222                         <?php
    223                         /* translators: Hidden accessibility text. */
    224                         _e( 'crop ratio height' );
    225                         ?>
    226                 </label>
    227                 <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)" />
    228                 </div>
    229         </fieldset>
    230 
    231         <fieldset id="imgedit-crop-sel-<?php echo $post_id; ?>" class="imgedit-crop-sel">
    232                 <legend><?php _e( 'Selection:' ); ?></legend>
    233                 <div class="nowrap">
    234                 <label for="imgedit-sel-width-<?php echo $post_id; ?>" class="screen-reader-text">
    235                         <?php
    236                         /* translators: Hidden accessibility text. */
    237                         _e( 'selection width' );
    238                         ?>
    239                 </label>
    240                 <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)" />
    241                 <span class="imgedit-separator" aria-hidden="true">&times;</span>
    242                 <label for="imgedit-sel-height-<?php echo $post_id; ?>" class="screen-reader-text">
    243                         <?php
    244                         /* translators: Hidden accessibility text. */
    245                         _e( 'selection height' );
    246                         ?>
    247                 </label>
    248                 <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)" />
    249                 </div>
    250         </fieldset>
    251 
    252272        </div>
    253273
    … …  
    258278
    259279        <div class="imgedit-group imgedit-applyto">
    260         <div class="imgedit-group-top">
    261                 <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
    262                 <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
     280                <div class="imgedit-group-top">
     281                        <h2><?php _e( 'Thumbnail Settings' ); ?></h2>
     282                        <button type="button" class="dashicons dashicons-editor-help imgedit-help-toggle" onclick="imageEdit.toggleHelp(this);" aria-expanded="false"><span class="screen-reader-text">
    263283                        <?php
    264284                        /* translators: Hidden accessibility text. */
    265285                        esc_html_e( 'Thumbnail Settings Help' );
    266286                        ?>
    267                 </span></button>
    268                 <div class="imgedit-help">
    269                 <p><?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>
     287                        </span></button>
     288                        <div class="imgedit-help">
     289                        <p><?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>
     290                        </div>
     291                </div>
     292                <div class="imgedit-thumbnail-preview-group">
     293                        <figure class="imgedit-thumbnail-preview">
     294                                <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" />
     295                                <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
     296                        </figure>
     297                        <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
     298                        <fieldset>
     299                                <legend><?php _e( 'Apply changes to:' ); ?></legend>
     300
     301                                <span class="imgedit-label">
     302                                        <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
     303                                        <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
     304                                </span>
     305
     306                                <span class="imgedit-label">
     307                                        <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
     308                                        <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
     309                                </span>
     310 
     311                                <span class="imgedit-label">
     312                                        <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
     313                                        <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
     314                                </span>
     315
     316                                <?php
     317                                if ( $edit_custom_sizes ) {
     318                                        if ( ! is_array( $edit_custom_sizes ) ) {
     319                                                $edit_custom_sizes = get_intermediate_image_sizes();
     320                                        }
     321                                        foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
     322                                                if ( array_key_exists( $size, $meta['sizes'] ) ) {
     323                                                        if ( 'thumbnail' === $size ) {
     324                                                                continue;
     325                                                        }
     326                                                        ?>
     327                                                        <span class="imgedit-label">
     328                                                        <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
     329                                                                <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
     330                                                        </span>
     331                                                        <?php
     332                                                }
     333                                        }
     334                                }
     335                                ?>
     336                                </fieldset>
     337                        </div>
    270338                </div>
    271339        </div>
    272 
    273         <figure class="imgedit-thumbnail-preview">
    274                 <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" />
    275                 <figcaption class="imgedit-thumbnail-preview-caption"><?php _e( 'Current thumbnail' ); ?></figcaption>
    276         </figure>
    277 
    278         <div id="imgedit-save-target-<?php echo $post_id; ?>" class="imgedit-save-target">
    279         <fieldset>
    280                 <legend><?php _e( 'Apply changes to:' ); ?></legend>
    281 
    282                 <span class="imgedit-label">
    283                         <input type="radio" id="imgedit-target-all" name="imgedit-target-<?php echo $post_id; ?>" value="all" checked="checked" />
    284                         <label for="imgedit-target-all"><?php _e( 'All image sizes' ); ?></label>
    285                 </span>
    286 
    287                 <span class="imgedit-label">
    288                         <input type="radio" id="imgedit-target-thumbnail" name="imgedit-target-<?php echo $post_id; ?>" value="thumbnail" />
    289                         <label for="imgedit-target-thumbnail"><?php _e( 'Thumbnail' ); ?></label>
    290                 </span>
    291 
    292                 <span class="imgedit-label">
    293                         <input type="radio" id="imgedit-target-nothumb" name="imgedit-target-<?php echo $post_id; ?>" value="nothumb" />
    294                         <label for="imgedit-target-nothumb"><?php _e( 'All sizes except thumbnail' ); ?></label>
    295                 </span>
    296                 <?php
    297                 if ( $edit_custom_sizes ) {
    298                         if ( ! is_array( $edit_custom_sizes ) ) {
    299                                 $edit_custom_sizes = get_intermediate_image_sizes();
    300                         }
    301                         foreach ( array_unique( $edit_custom_sizes ) as $key => $size ) {
    302                                 if ( array_key_exists( $size, $meta['sizes'] ) ) {
    303                                         if ( 'thumbnail' === $size ) {
    304                                                 continue;
    305                                         }
    306                                         ?>
    307                                         <span class="imgedit-label">
    308                                                 <input type="radio" id="imgedit-target-custom<?php echo esc_attr( $key ); ?>" name="imgedit-target-<?php echo $post_id; ?>" value="<?php echo esc_attr( $size ); ?>" />
    309                                                 <label for="imgedit-target-custom<?php echo esc_attr( $key ); ?>"><?php echo esc_html( $size ); ?></label>
    310                                         </span>
    311                                         <?php
    312                                 }
    313                         }
    314                 }
    315                 ?>
    316         </fieldset>
     340        <?php } ?>
     341                </div>
    317342        </div>
     343
    318344        </div>
    319 
    320         <?php } ?>
    321 
    322         </div>
     345        <div class="imgedit-wait" id="imgedit-wait-<?php echo $post_id; ?>"></div>
     346        <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>
    323347
    324348        </div>
    … …  
    510534function _image_get_preview_ratio( $w, $h ) {
    511535        $max = max( $w, $h );
    512         return $max > 400 ? ( 400 / $max ) : 1;
     536        return $max > 600 ? ( 600 / $max ) : 1;
    513537}
    514538

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

    r55896 r55919  
    19581958.media-modal .imgedit-wrap .imgedit-panel-content {
    19591959        padding: 16px 16px 0;
    1960         position: absolute;
    1961         top: 0;
    1962         right: 282px;
    1963         bottom: 0;
    1964         left: 0;
    1965         overflow: auto;
    1966 }
    1967 
    1968 /*
    1969  * Implementation of bottom padding in overflow content differs across browsers.
    1970  * We need a different method. See https://github.com/w3c/csswg-drafts/issues/129
    1971  */
    1972 .media-modal .imgedit-wrap .imgedit-submit {
    1973         margin-bottom: 16px;
    1974 }
    1975 
    1976 .media-modal .imgedit-wrap .imgedit-settings {
    1977         background: #f6f7f7;
    1978         border-left: 1px solid #dcdcde;
    1979         padding: 20px 16px 0;
    1980         position: absolute;
    1981         top: 0;
    1982         right: 0;
    1983         bottom: 0;
    1984         width: 250px;
    1985         overflow: auto;
     1960        overflow: visible;
    19861961}
    19871962
    … …  
    19971972        background: none;
    19981973        border: none;
    1999         border-bottom: 1px solid #dcdcde;
    20001974        box-shadow: none;
    20011975        margin: 0;
     1976        padding: 0;
     1977        position: relative; /* RTL fix, #WP29352 */
     1978}
     1979
     1980.media-modal .imgedit-group.imgedit-panel-active {
    20021981        margin-bottom: 16px;
    2003         padding: 0;
    20041982        padding-bottom: 16px;
    2005         position: relative; /* RTL fix, #WP29352 */
    2006 }
    2007 
    2008 .media-modal .imgedit-group:last-of-type {
    2009         border: none;
    2010         margin: 0;
    2011         padding: 0;
    20121983}
    20131984
    … …  
    20782049.media-modal .imgedit-wrap div.updated, /* Back-compat for pre-5.5 */
    20792050.media-modal .imgedit-wrap .notice {
    2080         margin: 0;
    2081         margin-bottom: 16px;
     2051        margin: 0 16px;
    20822052}
    20832053
    … …  
    28282798
    28292799@media screen and (max-width: 782px) {
     2800        .imgedit-panel-content {
     2801                grid-template-columns: auto;
     2802        }
     2803
    28302804        .media-frame-toolbar .media-toolbar {
    28312805                bottom: -54px;
Note: See TracChangeset for help on using the changeset viewer.