Empty sidebars missing some indication of "droppablity"

[shaunandrews]

Its not obvious that you can drop widgets into empty sidebars. MP6 has previously introduced a default "dropzone" area that made this more obvious.

[shaunandrews]

Empty sidebar without drop zone indicator

[shaunandrews]

Suggested dropzone indicator

[shaunandrews]

26168.diff​ adds an :after pseudo element to the #widgets-right .widgets-sortables. This element is always there, but widgets have a higher z-index so they hide it when placed.

[iammattthomas]

In 26413:

Reintroduce a drop zone indicator in empty sidebars on the Widgets page. Fixes #26168, props shaunandrews.

[shaunandrews]

The drop zone added in r26413 is no where to be seen in /trunk...

[shaunandrews]

Looks like it was removed in r26426 due to conflicts with jQuery UI sortables. I've tried for nearly 90 minutes to add it back, but now that widgets no longer live inside their own div its way harder than adding an :after pseudo element. This will likely require some JS to add/remove a temporary placeholder for empty sidebars.

[azaozz]

...its way harder than adding an :after pseudo element.

Yeah, almost got it working with:

div#widgets-right .sidebar-description {
	padding-bottom: 45px;
}

div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div,
div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div.ui-draggable + div.widget-placeholder,
div#widgets-right .widgets-holder-wrap:not(.closed) .sidebar-description + div.ui-sortable-helper + div {
	margin-top: -45px;
}

However that makes the first widget in each sidebar shift position momentarily on drag start, which breaks the drag-helper in UI Sortable and makes it quite hard to place the widget properly.

How about 26168.2.patch: when starting to drag, add "highlighting" of all areas where a widget can be dropped, including closed sidebars. This makes it even more obvious than a placeholder in empty sidebars:

[shaunandrews]

I like that highlight effect, but it doesn't solve the root problem: it's not obvious that you can drop widgets into sidebars. Highlighting them once you drag the widget helps, but you have to try to drag the widget first. The dashed bordered "dropzone" indicator was more obvious as it was always visible in empty sidebars. It also had the benefit of making sidebars look less strange when they were empty.

I think the highlight in drag effect should go in regardless.

[azaozz]

In 26474:

Widgets: highlight all drop zones (open and closed sidebars) on starting to drag a widget to indicate "droppability", fixes #26168.

[azaozz]

I personally prefer the highlighting of all drop zones. If I remember right it used to work this way in the very first implementation of drag/drop on this screen, when it was using Prototype.js and Scriptaculous, before we adopted jQuery in core. Not sure why we stopped doing this.

It's true the user has to discover the "draggability" first, but having boxes with dashed border doesn't really help for that (if the user has never dragged a widget before, he/she wouldn't know these boxes are actually placeholders). On top of that these boxes are not visible on the screen initially as the first sidebar is usually populated with some default widgets and the rest of the sidebars are closed.

I know we lost the "move" cursor when hovering over an available widget, but the first couple of words on the screen (after the titles) are "Drag widgets". Perhaps we could also add a "pointer" for new users encouraging them to either drag the widgets or click-to-add from the available widgets.