WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#17184 closed enhancement (fixed)

Press This Bookmarklet Redesign

Reported by: chexee Owned by: Chexee
Milestone: 3.2 Priority: low
Severity: trivial Version: 3.1
Component: UI Keywords: has-patch needs-testing
Focuses: Cc:

Description

Been working on this over at the UI blog: http://make.wordpress.org/ui/2011/04/04/pressthis-take-2/

Enhances the design of the Press This bookmarklet (previously a text link). Inspired by the Readability Bookmarklet: https://www.readability.com/bookmarklets

Attaching a patch that implements this design via CSS3 and degrades in IE 7/8: http://cl.ly/1Y0U2s1b3n1N1g3b3u32

Attachments (11)

press-this.diff (3.5 KB) - added by chexee 3 years ago.
Press This bookmarklet redesign
17184.diff (1.1 KB) - added by andrewryno 3 years ago.
Screen shot 2011-04-20 at 10.32.09 AM.png (36.3 KB) - added by jane 3 years ago.
Screenshot of Press This on Tools screen
17184.1.diff (2.1 KB) - added by chexee 3 years ago.
Adds hand icon back to bookmarklet
press-this.png (818 bytes) - added by chexee 3 years ago.
Updated sprite to include hand icon
17184-gradient_opera.patch (2.5 KB) - added by ocean90 3 years ago.
17184.2.style-update-compat.diff (439 bytes) - added by chexee 3 years ago.
Background position got broken in latest version of trunk. This fixes that
Screenshot-1.png (8.2 KB) - added by studionashvegas 3 years ago.
17184.newtitletext.diff (987 bytes) - added by studionashvegas 3 years ago.
Replaced title text with call-to-action (Drag me to your bookmarks bar!)
show_shortcut_prompt.patch (1.1 KB) - added by johnjamesjacoby 3 years ago.
show_shortcut_prompt()
pressthis-userselect.diff (506 bytes) - added by chexee 3 years ago.
disables text select on right click

Download all attachments as: .zip

Change History (33)

chexee3 years ago

Press This bookmarklet redesign

comment:1 jane3 years ago

  • Component changed from General to UI
  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.2
  • Priority changed from normal to low
  • Version set to 3.1

Design approved by both me and @iammattthomas.Would like to pop this into 3.2 if no objections.

comment:2 azaozz3 years ago

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

(In [17662]) Press This bookmarklet redesign, props chexee, fixes #17184

andrewryno3 years ago

comment:3 andrewryno3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Patch doesn't work on Options > Writing, only Tools page (see: http://d.pr/lRo4).

Also the icon (/wp-admin/images/press-this.png) didn't get added.

Version 0, edited 3 years ago by andrewryno (next)

comment:4 jane3 years ago

It 'works' on both screens for me (Mac/Chrome), but the design is broken. The image @andrewryno posted is how it looks on Writing Settings. Am attaching image for record of how it looks on Tools.

jane3 years ago

Screenshot of Press This on Tools screen

comment:5 markjaquith3 years ago

Can't find the icon anywhere. Chex — can you attach press-this.png ?

comment:6 markjaquith3 years ago

(In [17665]) Press This HTML fix. Still waiting on the icon image. props andrewryno. see #17184

comment:7 markjaquith3 years ago

(In [17666]) Do not allow the Press This links to be click-activated when they are meant to be dragged. fixes #17192. see #17184

chexee3 years ago

Adds hand icon back to bookmarklet

chexee3 years ago

Updated sprite to include hand icon

comment:8 ocean903 years ago

17184-gradient_opera.patch includes CSS gradient fix (see also #16461) and adds support for Opera. It also removes unnecessary lines.

chexee3 years ago

Background position got broken in latest version of trunk. This fixes that

comment:9 chexee3 years ago

17184.2.style-update-compat.diff fixes bg positioning for including the sprite, but not including the hand icon.

Last edited 3 years ago by chexee (previous) (diff)

comment:10 markjaquith3 years ago

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

In [17867]:

Add missing Press This image, CSS background tweak. props Chexee. fixes #17184

comment:11 markjaquith3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Patch juggling left out the hand. Will get that later.

comment:12 chexee3 years ago

Went into beta without the hand? 17184.1.diff should add the hand.

17184.2.style-update-compat.diff just makes the CSS compatible with the sprite with the hand.

Some confusion about whether we wanted to add the hand or not. Sorry about that :[

comment:13 johnjamesjacoby3 years ago

Possible to remove the title attribute from the 'Press This' link too?

Feels too 'linky' when you curiously mouse over it, and a tool-tip pops up.

If the title attribute of an element is the same as the contents within that element, it's superfluous markup for the sake of saying it's 'compliant' to stop validators from complaining. If we decide to keep the title attribute, we should change the text to something more instructive like "Drag me to your bookmark toolbar!"

Last edited 3 years ago by johnjamesjacoby (previous) (diff)

studionashvegas3 years ago

studionashvegas3 years ago

Replaced title text with call-to-action (Drag me to your bookmarks bar!)

comment:14 studionashvegas3 years ago

  • Keywords needs-testing added

comment:15 azaozz3 years ago

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

In [18160]:

Remove the title attribute from the Press This link as it needlessly repeats the text, props johnjamesjacoby, fixes #17184

comment:16 follow-up: johnjamesjacoby3 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

The behavior of the "Press This" link is still a little off, particularly in Chrome. I wouldn't normally re-open a closed ticket this late, but I think in this case it warrants another look-see.

So the description says:

Drag-and-drop the following link to your bookmarks bar or right click it and add it to your favorites for a posting shortcut.

...yet when I right-click in Chrome, it either highlights the text in the span (because I right-clicked the span) or returns false and acts like I right-clicked the body (because it's returning false on-click. There's effectively no URL to add to the bookmarks bar.

Further more, if I opted to hide the bookmarks-bar in Chrome I have no where to drag the link to. If I drag it to the tab-bar, it opens a new empty tab which immediately pops open the JS window, without ever giving me the chance to bookmark it.

I'm attaching a patch (which is by no means elegant) that puts the URL string in a prompt() that appears onclick. This needs core-dev and UX feedback. Even if my solution isn't the end-all, I think this might need more attention.

johnjamesjacoby3 years ago

show_shortcut_prompt()

comment:17 markjaquith3 years ago

Let's just let right-clicking work, only blocking left clicks.

chexee3 years ago

disables text select on right click

comment:18 chexee3 years ago

Patch above uses CSS3's user-select to disable text selection, so you can right click and get a normal context menu.

Combine with JJJ's patch so left click gives proper instructions and right click has normal behavior.

comment:19 in reply to: ↑ 16 azaozz3 years ago

Replying to johnjamesjacoby:

The behavior of the "Press This" link is still a little off, particularly in Chrome.

The problem is that Chrome doesn't have "Bookmark This Link" on right-clicking a link at all. We will have to add some JS there to handle this only in Chrome, prompt(...) is probably the most inconvenient for the user. Not sure if we can make it at least look better.

comment:20 follow-up: azaozz3 years ago

Another idea would be to show the actual bookmarklet's code in a read-only textarea under the Press This link, pre-selected. Can be shown onclick in Chrome only (onclick would cover right-click and double-click).

comment:21 in reply to: ↑ 20 johnjamesjacoby3 years ago

Replying to azaozz:

Another idea would be to show the actual bookmarklet's code in a read-only textarea under the Press This link, pre-selected. Can be shown onclick in Chrome only (onclick would cover right-click and double-click).

This is simpler solution than my prompt idea, which was more for avoiding additional UI where it might not be needed for everyone.

Last edited 3 years ago by johnjamesjacoby (previous) (diff)

comment:22 azaozz3 years ago

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

In [18187]:

Make copying the PressThis bookmarklet code easier in WebKit browsers, fixes #17184

Note: See TracTickets for help on using tickets.