dash: Improve DND to dash and allow reordering

Show a positional indicator where a new favorite will be added and
make the favorites re-orderable. Also allow the removal of favorites
using drag-and-drop according to the mockups.

https://bugzilla.gnome.org/show_bug.cgi?id=634948

data/Makefile.am

@@ -25,6 +25,7 @@ dist_theme_DATA =				\
 	theme/close-window.svg			\
 	theme/close.svg				\
 	theme/corner-ripple.png			\
+	theme/dash-placeholder.svg		\
 	theme/dialog-error.svg			\
 	theme/gnome-shell.css			\
 	theme/mosaic-view-active.svg		\

data/theme/dash-placeholder.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   width="76"
+   height="27"
+   id="svg11252"
+   version="1.1">
+  <defs
+     id="defs11254">
+    <radialGradient
+       xlink:href="#linearGradient39563-4-2"
+       id="radialGradient68155-2-3"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1,0,0,0.3486842,0,317.8421)"
+       cx="49"
+       cy="488"
+       fx="49"
+       fy="488"
+       r="38" />
+    <linearGradient
+       id="linearGradient39563-4-2">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop39565-1-4" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop39567-7-9" />
+    </linearGradient>
+    <radialGradient
+       xlink:href="#linearGradient39573-6-1"
+       id="radialGradient68157-0-8"
+       gradientUnits="userSpaceOnUse"
+       cx="50.5"
+       cy="487.5"
+       fx="50.5"
+       fy="487.5"
+       r="10.5" />
+    <linearGradient
+       id="linearGradient39573-6-1">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop39575-5-6" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="1"
+         id="stop39577-1-2" />
+    </linearGradient>
+  </defs>
+  <g
+     id="layer1"
+     transform="translate(-337,-518.86218)">
+    <g
+       id="g99967"
+       style="display:inline"
+       transform="translate(326,44.862171)">
+      <rect
+         style="opacity:0.49375;color:#000000;fill:url(#radialGradient68155-2-3);fill-opacity:1;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="rect99969"
+         width="76"
+         height="2"
+         x="11"
+         y="487"
+         rx="0"
+         ry="0" />
+      <path
+         style="opacity:0.43125;color:#000000;fill:url(#radialGradient68157-0-8);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+         id="path99971"
+         d="M 61,487.5 C 61,493.29899 56.29899,498 50.5,498 44.70101,498 40,493.29899 40,487.5 40,481.70101 44.70101,477 50.5,477 c 5.79899,0 10.5,4.70101 10.5,10.5 z"
+         transform="matrix(1.2857143,0,0,1.2857143,-14.428572,-139.28571)" />
+      <path
+         transform="matrix(0.43589747,0,0,0.43589747,28.487179,275)"
+         d="M 61,487.5 C 61,493.29899 56.29899,498 50.5,498 44.70101,498 40,493.29899 40,487.5 40,481.70101 44.70101,477 50.5,477 c 5.79899,0 10.5,4.70101 10.5,10.5 z"
+         id="path99973"
+         style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    </g>
+  </g>
+</svg>

data/theme/gnome-shell.css

@@ -341,6 +341,11 @@ StTooltip StLabel {
     width: 60px;
 }
 
+.dash-placeholder {
+    background-image: url("dash-placeholder.svg");
+    height: 27px;
+}
+
 #viewSelector {
     spacing: 16px;
 }
@@ -502,7 +507,17 @@ StTooltip StLabel {
     padding: 6px 12px;
 }
 
+.remove-favorite-icon {
+    color: #a0a0a0;
+}
+
+.remove-favorite-icon:hover {
+    color: white;
+    -st-shadow: black 0px 2px 2px;
+}
+
 .app-well-app > .overview-icon,
+.remove-favorite > .overview-icon,
 .search-result-content > .overview-icon {
     border-radius: 4px;
     padding: 4px;
@@ -523,6 +538,7 @@ StTooltip StLabel {
 }
 
 .app-well-app:hover > .overview-icon,
+.remove-favorite:hover > .overview-icon,
 .search-result-content:hover > .overview-icon {
     background: rgba(255,255,255,0.33);
     text-shadow: black 0px 2px 2px;