[wp-trac] [WordPress Trac] #7109: Movable Widget Panels should have a more distinct appearance

WordPress Trac wp-trac at lists.automattic.com
Sun Jun 8 18:01:41 GMT 2008

#7109: Movable Widget Panels should have a more distinct appearance
 Reporter:  scribblerguy  |       Owner:  anonymous                                 
     Type:  enhancement   |      Status:  new                                       
 Priority:  normal        |   Milestone:  2.7                                       
Component:  General       |     Version:  2.5.1                                     
 Severity:  normal        |    Keywords:  has-patch, widgets, Admin Panel, interface
 '''Issue:''' Currently, the chief visual difference between the list of
 "Available Widgets" and the list of "Current Widgets" is the background
 color of the individual panels. When a user moves their mouse cursor over
 one of the "Current Widgets," the cursor icon does change to the "Move"
 cursor (typically something that looks like an x-y axis), but there is no
 prior visual cue that the user can move the widgets.

 '''Solution:''' A simple and easy to implement visual cue would be the
 addition of what I'm calling a "grip panel." For years, movable toolbars
 in the Windows operating system have employed some sort of "grip" on their
 left edge as a cue that the toolbar is movable. The two most common form
 of grip panels are (1) a solid, raised relief bar (see any unlocked
 toolbar in Windows XP's Explorer); or (2) a single line of lowered relief
 dots (or "dimples").

 For the latter (a line of "dimples"), Microsoft Office (at least the
 "2003" version) and  OpenOffice 2.4 are two examples of software
 applications installed on millions of computer that use this convention.
 When a user moves their cursor over the grip panel, it changes from an
 arrow to the "Move" cursor. Then, by pressing down on their  (left-click)
 mouse button, the user can drag and move the toolbar to wherever they

 Applying this convention to WordPress, a user who has worked with the
 above office suites (or other software which employs the same convention)
 should be able to ascertain by the grip panel visual cue that the "Current
 Widgets" panels are movable.

 '''Implementation:''' This can be done purely through CSS with a simple
 background image. The attached patch has been checked in Firefox 2.0.14,
 Opera 9.27, Internet Explorer 7, and Safari 3, all on Windows Vista.

 This initial patch does not use CSS shorthand, in order to make the
 differences more human readable, and in case tweaks to the code are
 necessary. If and when the enhancement is implemented, the background
 declarations can be merged into a shorthand declaration.

 The attached GIF image has been optimized by reducing the color palette to
 four colors, so the final file size is only 70 bytes.

 '''Other Notes:''' The grip "dimples" are essentially a simple optical
 illusion consisting of four pixels, which uses three different shades of a
 color: (D = darkest; M = medium; L = lightest)

 D M[[BR]]
 M L

 The attached image uses three shades of grey for this, but the colors used
 can always be tweaked.

Ticket URL: <http://trac.wordpress.org/ticket/7109>
WordPress Trac <http://trac.wordpress.org/>
WordPress blogging software

More information about the wp-trac mailing list