Dashboard visual design improvements

Looking good. Tested in Firefox/Mac OS X and IE6 and IE8/Windows. IE6 won't show the blue background and the grip, but still highlights and drags fine - degrades gracefully. IE8 and Firefox work as expected.

here's my proposal: use standard "dragabble" icon.

I like this but (i) the colors look a bit weird and (ii) it feels a bit cramped -- we could use with one or two more extra pixels, IMO.

I'm just assuming:

1. the 1px white border looks weird on the drag icon when it's on a gray/blue background, hurts the eye. Maybe a pure white drag marker would look better?

2. maybe a bit more spacing to the right of the drag icon

Here's an attempt... I'm no pixel artist, so it's more of a concept than a final version - the draggable arrows are a bit too thick. But here's a version with white arrows. Plus added border-radius for webkit too.

Couldn't figure out how to add a binary file to a patch, so just move draggable-white.png to /misc.

See attached screeshot.

Lazy sunday afternoon... here's a thinner white drag thingy.

I think this drag indicator is the best so far. But the margins are lot looking good in Firefox and Safari afaik.

Agreed that the new icon looks much better. As s.toonen said, the margins need some extra work. This is getting close.

We'll want to rename the old draggable.png to draggable-black.png, I think. That keeps it nice and consistent.

Actually, draggable.png is a sprite image (it already has two phases), so I can just add the white version to the bottom. So the filename can remain the same, no need to patch all other uses of it in core + contrib.

Here's an updated draggable.png, + a patch with the margins fixed hopefully.

Better, only when moving back a block (or draggable thing, whatever they are called) the margins are still incorrect. (See screenshot)
Also in the Garland theme the Syndicate drag thing is to heigh which is due to the float: left; in this part in garland/style.css file:

/**
 * Syndication icons and block
 */
#block-node-syndicate h2 {
  float: left; /* LTR */
  padding-right: 20px; /* LTR */
}

This also makes that having the Syndicate block on the dashboard looks ugly. I believe the float statement has been added to get the syndicate icon on the same level as the block title (see syndicate-block-elsewhere.png), but that's quite a hack isn't it?

Don't take my CSS for granted, but this is how is works for me.

Committed to CVS HEAD. Thanks.

1. Seems there was an image here that was supposed to be committed as well (the one in #16 should replace misc/draggable.png, if I'm following the discussion above correctly).

2. Any discussion of this change?

-  $output = '<div class="canvas-content"><p>' . t('Drag and drop dashboard blocks to their place. Changes are automatically saved. You can also <a href="@add-block">add a custom block</a>.', array('@add-block' => url('admin/structure/block/add', array('query' => array('destination' => 'admin/dashboard/customize'))))) . '</p>';
+  $output = '<div class="canvas-content"><p>' . t('Drag and drop these to the columns below. Changes are automatically saved.') . '</p>';

First, the word "these" needs to refer to something - I suggest we get the word "blocks" back in somehow.

Also, it seems that a fair amount of thought went into the "add a custom block" workflow (see http://drupal.org/node/544360#comment-2127478), so need to think about whether removing that link is correct. Maybe it's true that it's not the most common thing people would ever do here, but for #601932: Allow dashboard to limit available blocks we're probably going to need some kind of additional link on this page anyway....

Perhaps it should be a local action rather than an inline link?

1. Indeed draggable.png in #16 needs to be committed, it is not there yet.

2. You have a point, the original wording seems more descriptive. Yoroy, any specific reason you changed the text?

subscribe

subscribing

OK, this issue seems mostly fixed now, but the "these" is still grammatically ambiguous. Let's add the word "blocks" and be done with it :)

Committed to HEAD.