Make WordPress Core

Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#37278 closed enhancement (fixed)

Improving 'Remove' icon in TinyMCE link inline toolbar

Reported by: hardeepasrani's profile hardeepasrani Owned by: azaozz's profile azaozz
Milestone: 4.7 Priority: normal
Severity: normal Version: 4.5
Component: TinyMCE Keywords: has-screenshots ui-feedback ux-feedback has-patch
Focuses: ui Cc:

Description

When you are editing a post, and click on a link in the post, you are presented with a popup that shows you the URL, a pencil icon for editing the link, and an X icon for closing the popup. Oh whoops, the X icon actually deletes the link information. A more appropriate icon for this part of the UI is a trash can instead of an X.

Before: https://nimbus.everhelper.me/client/notes/share/514182/v5nfqq51axc9zwvm3ep0

After: https://nimbus.everhelper.me/client/notes/share/514181/didbxhmd251cmdpsqpqg

Same goes for Images & Galleries

Attachments (6)

remove-icon.diff (1.4 KB) - added by hardeepasrani 8 years ago.
Changes dashicons-no to dashicons-trash
37278.before.png (3.7 KB) - added by ocean90 8 years ago.
37278.after.png (3.6 KB) - added by ocean90 8 years ago.
link-toolbar.png (9.5 KB) - added by azaozz 8 years ago.
37278.2.diff (1.7 KB) - added by azaozz 8 years ago.
Disabled.png (4.8 KB) - added by hardeepasrani 7 years ago.

Download all attachments as: .zip

Change History (28)

@hardeepasrani
8 years ago

Changes dashicons-no to dashicons-trash

#1 @hardeepasrani
8 years ago

I posted the wrong link. There you go:

Before: https://nimbus.everhelper.me/client/notes/share/514182/v5nfqq51axc9zwvm3ep0

After: https://nimbus.everhelper.me/client/notes/share/514180/eos11px5qbxcr2vzmng3

Hope it makes sense. And thanks to Alan for the suggestion. :)

@ocean90
8 years ago

@ocean90
8 years ago

#2 @ravipatel
8 years ago

Needed replace class dashicons-no with dashicons-trash.

#3 @hardeepasrani
8 years ago

  • Summary changed from Improving removing icon in TinyMCE to Improving 'Remove' icon in TinyMCE

#4 @ocean90
8 years ago

#37449 was marked as a duplicate.

#5 follow-up: @afercia
8 years ago

  • Keywords has-screenshots added
  • Summary changed from Improving 'Remove' icon in TinyMCE to Improving 'Remove' icon in TinyMCE link inline toolbar
  • Version changed from trunk to 4.5

Maybe the default TinyMCE "unlink" icon would improve consistency. See also 36569#comment:5.

https://cldup.com/TVccXiLPYp.png

#6 @magicroundabout
8 years ago

I spotted this too and raised #37449 as a result. Use of the X seems inconsistent - it's used on the media-modal to close the modal. An X in the corner of something is, in my mind, a design pattern for closing, not deleting. And in my case I find myself clicking the X to close the modal. Visual here:

https://cldup.com/_aHRv9tP6k.gif

I'd really like this changed to a trashcan or, probably better, the suggested remove-link dashicon.

I originally suggested, and mocked up, the trashcan, retaining the X for closing the modal. My reasoning for doing this is that you still want an affordance for closing the modal on mobiles (yes, a tap "outside" works, but there is no affordance for that):

https://cldup.com/vlLZ3d8EAW.png

Unlink looks like this:

https://cldup.com/lXoTVF0HFm.png

#7 @iseulde
8 years ago

  • Milestone changed from Awaiting Review to Future Release

X was used for consistency: the inline toolbar for images and views also uses the X to remove the image or view. Once I asked @melchoyce about using a trash icon for images, but the argument against that was that it could mean the image gets removed from the server, and not just from the post. In any case I agree that the current icon is a bit confusing, but I'd also like an icon that is consistent across all inline toolbars.

#8 @ocean90
8 years ago

#37954 was marked as a duplicate.

#9 @ocean90
8 years ago

  • Keywords ui-feedback ux-feedback added

#10 in reply to: ↑ 5 @melchoyce
8 years ago

Replying to afercia:

Maybe the default TinyMCE "unlink" icon would improve consistency. See also 36569#comment:5.

+1. Unlink feels more consistent, and then we can eliminate the x entirely, since clicking away from the link popup closes it.

#11 @iseulde
8 years ago

@melchoyce I don't think we can remove a button to close the toolbar, as clicking outside may not be possible on smaller screens if there are search results as well.

#12 @iseulde
8 years ago

Oh, it appears the edit link toolbar doesn't have an X button. Maybe that can give problems on a small screen...

This ticket was mentioned in Slack in #core-editor by iseulde. View the logs.


8 years ago

#14 follow-up: @mor10
8 years ago

Jumping in here: In the context of the popup where there is no unbroken link icon, the broken link icon is not clear. I suggest redesigning it to something that looks more like a link with an X over it to make it clear this removes the link. On its own, the broken link icon looks a bit like a pill that is popping open.

@azaozz
8 years ago

#15 in reply to: ↑ 14 @azaozz
8 years ago

Replying to mor10:

Yes, agree. The unlink icon needs some context to be clear, best is to keep it next to the link icon. Also having the "link" icon for "Insert/edit link" in the top toolbar then having the pencil icon for editing links in the inline link toolbar is inconsistent.

As far as I see having both 'link' and 'unlink' icons in the inline toolbar seems best (screenshot above).

@azaozz
8 years ago

#16 @azaozz
8 years ago

  • Keywords has-patch added
  • Milestone changed from Future Release to 4.7

In 37278.2.diff:

  • Change the icons in the inline link toolbar to be same as in the top toolbar.
  • Remove the unlink icon from the top toolbar. Even if there is no inline link toolbar a link can be removed by deleting the URL in the wplink modal (or the default TinyMCE modal). This is how the TinyMCE examples are too: https://www.tinymce.com/docs/demo/basic-example/.

#17 @jorbin
8 years ago

  • Owner set to azaozz
  • Status changed from new to assigned

This ticket was mentioned in Slack in #core by jeffpaul. View the logs.


8 years ago

#19 @azaozz
8 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

Fixed in [38891]:

TinyMCE: change the icon and tooltip for the remove link button in the inline link toolbar.

Props hardeepasrani, ocean90, magicroundabout, iseulde.
Fixes 37278.

#20 follow-up: @hardeepasrani
7 years ago

@azaozz Great progress here. Further more, I think the Remove Link button should be disabled if the selected node is not a link in the editor. Your opinion?

This ticket was mentioned in Slack in #core by hardeepasrani. View the logs.


7 years ago

#22 in reply to: ↑ 20 @swissspidy
7 years ago

Further more, I think the Remove Link button should be disabled if the selected node is not a link in the editor.

See #36569

Note: See TracTickets for help on using tickets.