Wp-calypso: Media: Difficult to edit very small images

[aduth]

Steps to reproduce

1. Starting at URL: https://wordpress.com/post
2. Select a site
3. Click Add Media in the editor toolbar
4. Click Add via URL in the modal header
5. Enter https://wordpress.com/i/stats-icon.gif
6. Press Enter or click Upload
7. After image uploads, select and view detail for the item
8. Click Edit Image to proceed to image editor
9. Use handles to resize the image smaller

What I expected

To be able to resize the image smaller.

What happened instead

The resize handles reset to what appears to be a minimum set width and height beyond the bounds of the image itself, and it is no longer possible to make the handles any smaller.

Browser / OS version

Google Chrome Version 54.0.2840.98 (64-bit)
Mac OS Sierra Version 10.12.1 (16B2555)

Screenshot / Video

[gwwar]

@iamtakashi what do you think we should do in this case? Some options off the top of my head:

1. Don't show crop controls on images less than 50x50
2. Zoom the image in the working canvas. (Might be confusing if we try to transform back to normal size/leave it at that bigger size)
3. Refuse to edit tiny images

[iamtakashi]

User should be able to rotate or flip even tiny images, but I don't expect many users need to crop images less than 50x50. I'd hide the crop controller if the image is smaller than that. And I'd also make the aspect menu greyed out and tell them the minimum size in the popover. If we hear lots of complains about it then we can revisit. How does that sound?

[gwwar]

That sounds like a reasonable compromise @iamtakashi. We'll make this task hide the crop controls when images are smaller than the min crop box, and also hide the aspect options.

And I'd also make the aspect menu greyed out and tell them the minimum size in the popover.

Would this be a global notice, or something inline?

[iamtakashi]

Would this be a global notice, or something inline?

I was thinking that we could show the notice when the greyed out Aspect menu is clicked, instead of the ratio options.

[ramonjd]

hey @lamosty
I see you're assigned to this. Have you started?

I can take a look. Actually, I'd already started setting up the state before I noticed the assignee list.

😄

Let me know if it's okay to carry on.

The initial commit just grabs the saved width and height from the media item, checks it against the min dimensions, then sets the state.

Next task was to disable cropping, followed by the button interaction/ui, and notice.

Cheers.

cc @gwwar

[lamosty]

Hey @ramonjd! Thanks for asking. Nope, haven't touched it. :D

Great that you are working on it. :)

Good luck.

[ramonjd]

PR: https://github.com/Automattic/wp-calypso/pull/16458