Make WordPress Core

Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#7109 closed enhancement (wontfix)

Movable Widget Panels should have a more distinct appearance

Reported by: scribblerguy Owned by:
Milestone: Priority: normal
Severity: normal Version: 2.5.1
Component: General Keywords: has-patch, widgets, Admin Panel, interface
Focuses: Cc:


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.

Attachments (3)

widget-grip.diff (1.1 KB) - added by scribblerguy 10 years ago.
changes for the Classic and Fresh admin panel stylesheets
grip-panel.gif (70 bytes) - added by scribblerguy 10 years ago.
screenshot-widget-grips.png (5.7 KB) - added by scribblerguy 10 years ago.
screenshot of the Current Widgets area with the attach patch applied

Download all attachments as: .zip

Change History (9)

10 years ago

changes for the Classic and Fresh admin panel stylesheets

10 years ago

screenshot of the Current Widgets area with the attach patch applied

#1 @scribblerguy
10 years ago

Addendum: Not sure if an alternate style needs to be defined for users whose language is RTL.

#2 @thee17
10 years ago

+1 I think this bit of style wouldn't hurt

#4 @janeforshort
10 years ago

  • Milestone changed from 2.7 to 2.8

Widgets management will be redone in 2.8, was too big to fit into 2.7.

#5 @ryan
9 years ago

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

Any grip handles in widgets screen (being redone in 2.8) should match drag and drop in rest of admin, so will not use the gray dimples as they would be inconsistent with the rest of the admin.

#6 @johnbillion
9 years ago

  • Milestone 2.8 deleted
Note: See TracTickets for help on using tickets.