Movable Widget Panels should have a more distinct appearance
|Reported by:||scribblerguy||Owned by:||anonymous|
|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 wish.
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)
The attached image uses three shades of grey for this, but the colors used can always be tweaked.