Opened 6 years ago

Closed 6 years ago

#10835 closed Task (fixed)

Image2: improve visibility of the resizer

Reported by: Olek Nowodziński Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.3
Component: General Version: 4.3 Beta
Keywords: Cc:

Description

For some people the image resizer might seem invisible. We can try to make it better.

Attachments (1)

resizers.png (252.1 KB) - added by Olek Nowodziński 6 years ago.
Possible resizers

Download all attachments as: .zip

Change History (12)

comment:1 Changed 6 years ago by Jakub Ś

Status: newconfirmed

I tend to agree. Resizer looks very nice but it seems a little bit too discrete.

Last edited 6 years ago by Jakub Ś (previous) (diff)

comment:2 Changed 6 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

comment:3 Changed 6 years ago by Olek Nowodziński

Status: assignedreview

Created branch t/10835.

  • Introduced a new resizer with extra outline around the image.
  • This branch also resolves #10836: A special class with cursor: s(w|e)-resize is on editable until mouse button is released and resize process is over.

comment:4 Changed 6 years ago by Piotrek Koszuliński

Status: reviewreview_failed
  • The outline and resize icon are lost when I leave widget area when resizing. They could be kept just like the mouse cursor is.
  • I don't know if we can do anything about that, but the outline is not visible in case of non-captioned image. Therefore, it may not be a good idea to use image outline + widget outline, although it's definitely helpful in case of centered image, especially if it has white background (Stewie's case which I showed you).
  • I think that the arrow is too fat :P. I like lighter ones more.

Changed 6 years ago by Olek Nowodziński

Attachment: resizers.png added

Possible resizers

comment:5 in reply to:  4 Changed 6 years ago by Olek Nowodziński

Replying to Reinmar:

  • The outline and resize icon are lost when I leave widget area when resizing. They could be kept just like the mouse cursor is.

Fixed.

  • I don't know if we can do anything about that, but the outline is not visible in case of non-captioned image. Therefore, it may not be a good idea to use image outline + widget outline, although it's definitely helpful in case of centered image, especially if it has white background (Stewie's case which I showed you).

IMO this is not a serious case and we can just leave it.

Still, a nice workaround could be if we totally changed .cke_widget_wrapper and .cke_widget_element styles for Image2 (both focus and hover) to mimic dashed bounding boxes just like in Photoshop or so. Then, however, Image2 would stand out and look nothing like other widgets.

  • I think that the arrow is too fat :P. I like lighter ones more.

Some ideas, maybe the perfect match for you is among them:

Possible resizers

comment:6 Changed 6 years ago by Piotrek Koszuliński

Some ideas, maybe the perfect match for you is among them:

The dot looks like rotate handler (Maja doesn't like it too), square is good (and we both like it), red square and triangle are bad. I wonder what user not familiar with graphical programs would say though.

IMO this is not a serious case and we can just leave it.

Yes, I could agree with this. Just pointing this out in case someone else has something to say.

Still, a nice workaround could be if we totally changed .cke_widget_wrapper and .cke_widget_element styles for Image2 (both focus and hover) to mimic dashed bounding boxes just like in Photoshop or so. Then, however, Image2 would stand out and look nothing like other widgets.

I'm not sure I fully understand what you mean, but in any case I think that we're fine for now.

comment:7 Changed 6 years ago by Frederico Caldeira Knabben

I'm good with the black square with white borders.

As for the dots, they're yet another ui element in the already full of flashing things. So, at a first glance I would not go with them.

But then, rethinking, it solves other usability problems. For example, we can have images with background that matches the figure/document background color or even pngs with transparent background. In such cases, without the border, we would see the resize handler floating and it would look weird.

I would go with the easy way first, to not block this ticket. So, no borders and resizer only. Then, opening a new ticket for the border, proposing it so we can understand the issues involved with it.

comment:8 in reply to:  7 Changed 6 years ago by Olek Nowodziński

Status: review_failedreview

Replying to fredck:

I'm good with the black square with white borders.

As for the dots, they're yet another ui element in the already full of flashing things. So, at a first glance I would not go with them.

But then, rethinking, it solves other usability problems. For example, we can have images with background that matches the figure/document background color or even pngs with transparent background. In such cases, without the border, we would see the resize handler floating and it would look weird.

I would go with the easy way first, to not block this ticket. So, no borders and resizer only. Then, opening a new ticket for the border, proposing it so we can understand the issues involved with it.

I got rid of that dashed outline and introduced a black square instead of an arrow.

comment:9 Changed 6 years ago by Olek Nowodziński

Further discussion moved to #10942.

comment:10 Changed 6 years ago by Piotrek Koszuliński

Status: reviewreview_passed

comment:11 Changed 6 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

Merged into major git:ff7a7d9.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy