Make WordPress Core

Opened 13 years ago

Closed 13 years ago

#17184 closed enhancement (fixed)

Press This Bookmarklet Redesign

Reported by: chexee's profile chexee Owned by: chexee's profile 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 13 years ago.
Press This bookmarklet redesign
17184.diff (1.1 KB) - added by andrewryno 13 years ago.
Screen shot 2011-04-20 at 10.32.09 AM.png (36.3 KB) - added by jane 13 years ago.
Screenshot of Press This on Tools screen
17184.1.diff (2.1 KB) - added by chexee 13 years ago.
Adds hand icon back to bookmarklet
press-this.png (818 bytes) - added by chexee 13 years ago.
Updated sprite to include hand icon
17184-gradient_opera.patch (2.5 KB) - added by ocean90 13 years ago.
17184.2.style-update-compat.diff (439 bytes) - added by chexee 13 years ago.
Background position got broken in latest version of trunk. This fixes that
Screenshot-1.png (8.2 KB) - added by studionashvegas 13 years ago.
17184.newtitletext.diff (987 bytes) - added by studionashvegas 13 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 13 years ago.
show_shortcut_prompt()
pressthis-userselect.diff (506 bytes) - added by chexee 13 years ago.
disables text select on right click

Download all attachments as: .zip

Change History (33)

@chexee
13 years ago

Press This bookmarklet redesign

#1 @jane
13 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.

#2 @azaozz
13 years ago

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

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

@andrewryno
13 years ago

#3 @andrewryno
13 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Initial patch doesn't work on Options > Writing, only Tools page (see: http://d.pr/lRo4). New patch fixes it.

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

Last edited 13 years ago by andrewryno (previous) (diff)

#4 @jane
13 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.

@jane
13 years ago

Screenshot of Press This on Tools screen

#5 @markjaquith
13 years ago

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

#6 @markjaquith
13 years ago

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

#7 @markjaquith
13 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

@chexee
13 years ago

Adds hand icon back to bookmarklet

@chexee
13 years ago

Updated sprite to include hand icon

#8 @ocean90
13 years ago

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

@chexee
13 years ago

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

#9 @chexee
13 years ago

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

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

#10 @markjaquith
13 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

#11 @markjaquith
13 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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

#12 @chexee
13 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 :[

#13 @johnjamesjacoby
13 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.

Version 0, edited 13 years ago by johnjamesjacoby (next)

@studionashvegas
13 years ago

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

#14 @studionashvegas
13 years ago

  • Keywords needs-testing added

#15 @azaozz
13 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

#16 follow-up: @johnjamesjacoby
13 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.

@johnjamesjacoby
13 years ago

show_shortcut_prompt()

#17 @markjaquith
13 years ago

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

@chexee
13 years ago

disables text select on right click

#18 @chexee
13 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.

#19 in reply to: ↑ 16 @azaozz
13 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.

#20 follow-up: @azaozz
13 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).

#21 in reply to: ↑ 20 @johnjamesjacoby
13 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 13 years ago by johnjamesjacoby (previous) (diff)

#22 @azaozz
13 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.