Fix cropping UI tools

humanmade · Apr 2, 2024 · 326e3f5 · 326e3f5
1 parent 0fda089
commit 326e3f5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/inc/cropper/media-template.php b/inc/cropper/media-template.php
@@ -205,19 +205,21 @@
  <div class="imgedit-menu wp-clearfix">
 
  <# if ( data.model.get('editor').can && data.model.get('editor').can.rotate ) { #>
- <button type="button" class="imgedit-rleft button" onclick="imageEdit.rotate( 90, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )"><span class="screen-reader-text"><?php esc_html_e( 'Rotate counter-clockwise' ); ?></span></button>
- <button type="button" class="imgedit-rright button" onclick="imageEdit.rotate( -90, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )"><span class="screen-reader-text"><?php esc_html_e( 'Rotate clockwise' ); ?></span></button>
+ <button type="button" class="imgedit-rleft button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 90, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )"><?php esc_html_e( 'Rotate 90&deg; left' ); ?></button>
+ <button type="button" class="imgedit-rright button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( -90, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )"><?php esc_html_e( 'Rotate 90&deg; right' ); ?></button>
+ <button type="button" class="imgedit-rfull button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.rotate( 180, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )"><?php esc_html_e( 'Rotate 180&deg;' ); ?></button>
  <# } else { #>
  <button type="button" class="imgedit-rleft button disabled" disabled></button>
  <button type="button" class="imgedit-rright button disabled" disabled></button>
  <# } #>
 
- <button type="button" onclick="imageEdit.flip( 1, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-flipv button"><span class="screen-reader-text"><?php esc_html_e( 'Flip vertically' ); ?></span></button>
- <button type="button" onclick="imageEdit.flip( 2, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-fliph button"><span class="screen-reader-text"><?php esc_html_e( 'Flip horizontally' ); ?></span></button>
+ <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip( 1, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-flipv button"><?php esc_html_e( 'Flip vertically' ); ?></button>
+ <button type="button" onkeyup="imageEdit.browsePopup(this)" onclick="imageEdit.flip( 2, {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-fliph button"><?php esc_html_e( 'Flip horizontally' ); ?></button>
 
  <button type="button" id="image-undo-{{ data.model.get( 'id' ) }}" onclick="imageEdit.undo( {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-undo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Undo' ); ?></span></button>
  <button type="button" id="image-redo-{{ data.model.get( 'id' ) }}" onclick="imageEdit.redo( {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}', this )" class="imgedit-redo button disabled" disabled><span class="screen-reader-text"><?php esc_html_e( 'Redo' ); ?></span></button>
 
+ <input type="hidden" id="imgedit-nonce-{{ data.model.get( 'id' ) }}" value="{{ data.model.get( 'editor' ).nonce }}" />
  <input type="hidden" id="imgedit-sizer-{{ data.model.get( 'id' ) }}" value="{{ data.model.get( 'editor' ).sizer }}" />
  <input type="hidden" id="imgedit-history-{{ data.model.get( 'id' ) }}" value="" />
  <input type="hidden" id="imgedit-undone-{{ data.model.get( 'id' ) }}" value="0" />
@@ -260,7 +262,7 @@ class="image-preview image-preview-{{ data.model.get( 'size' ) }}"
  <div class="hm-thumbnail-editor__focal-point focal-point" title="<?php esc_attr_e( 'Click to remove focal point', 'hm-smart-media' ); ?>"></div>
  </div>
  </div>
- <div class="hm-thumbnail-editor__actions" id="imgedit-panel-{{ data.model.get( 'id' ) }}">
+ <div class="hm-thumbnail-editor__actions imgedit-submit imgedit-menu" id="imgedit-panel-{{ data.model.get( 'id' ) }}">
  <# if ( data.model.get( 'size' ) === 'full' || data.model.get( 'size' ) === 'full-orig' ) { #>
  <input type="button" onclick="imageEdit.save( {{ data.model.get( 'id' ) }}, '{{ data.model.get( 'editor' ).nonce }}' )" disabled="disabled" class="button button-primary imgedit-submit-btn" value="<?php esc_attr_e( 'Save' ); ?>" />
  <# if ( data.model.get( 'editor' ).can && data.model.get( 'editor' ).can.restore ) { #>

diff --git a/inc/cropper/src/cropper.scss b/inc/cropper/src/cropper.scss
@@ -86,7 +86,7 @@
  img {
  display: block;
  width: auto;
- height: 80px;
+ height: auto;
  max-width: 100%;
  max-height: 80px;
  }
@@ -127,6 +127,8 @@
 
  &-crop {
  position: relative;
+ padding: 0;
+ margin: 10px 0 0;
  }
 
  &--preview {

diff --git a/inc/cropper/src/views/image-editor.js b/inc/cropper/src/views/image-editor.js
@@ -284,6 +284,7 @@ const ImageEditor = Media.View.extend( {
  },
  onEditImage() {
  this.$el.find( '.focal-point, .note-focal-point' ).hide();
+ this.$el.find( '.imgedit-submit-btn' ).prop( 'disabled', false );
  },
 } );