From 7aa3bb01a9707ebc8ce625f61d3940788a9b29f9 Mon Sep 17 00:00:00 2001
From: Andrey Antukh <niwi@niwi.nz>
Date: Wed, 3 Feb 2016 18:07:28 +0200
Subject: [PATCH] Improve drag experience.

---
 .../public/styles/partials/settings-bar.scss  |  1 +
 src/uxbox/ui/workspace/toolboxes/layers.cljs  | 25 ++++++++++++-------
 src/uxbox/util/dom/dnd.cljs                   |  8 ++++++
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/resources/public/styles/partials/settings-bar.scss b/resources/public/styles/partials/settings-bar.scss
index 082a2c2f7..b1287a8a8 100644
--- a/resources/public/styles/partials/settings-bar.scss
+++ b/resources/public/styles/partials/settings-bar.scss
@@ -227,6 +227,7 @@
       align-items: center;
       border-bottom: 1px solid $color-gray-darker;
       box-sizing: border-box;
+      background-color: $color-gray-dark;
       display: flex;
       padding: $small;
       width: 100%;
diff --git a/src/uxbox/ui/workspace/toolboxes/layers.cljs b/src/uxbox/ui/workspace/toolboxes/layers.cljs
index 7dfd74e99..2eaa91124 100644
--- a/src/uxbox/ui/workspace/toolboxes/layers.cljs
+++ b/src/uxbox/ui/workspace/toolboxes/layers.cljs
@@ -118,6 +118,7 @@
         local (:rum/local own)
         classes (classnames
                  :selected selected?
+                 :drag-active (:dragging @local)
                  :drag-top (= :top (:over @local))
                  :drag-bottom (= :bottom (:over @local))
                  :drag-inside (= :middle (:over @local)))]
@@ -125,6 +126,7 @@
               (let [target (dom/event->target event)]
                 (dnd/set-allowed-effect! event "move")
                 (dnd/set-data! event (:id item))
+                (dnd/set-image! event target 50 10)
                 (swap! local assoc :dragging true)))
             (on-drag-end [event]
               (swap! local assoc :dragging false :over nil))
@@ -147,17 +149,22 @@
               (swap! local assoc :over false))]
       (html
        [:li {:key (str (:id item))
-             :on-click select
-             :on-drag-start on-drag-start
-             :on-drag-enter on-drag-enter
-             :on-drag-leave on-drag-leave
-             :on-drag-over on-drag-over
-             :on-drag-end on-drag-end
-             :on-drop on-drop
-             :draggable true
              :class (when selected? "selected")}
         [:div.element-list-body
-         {:class classes}
+         {:class classes
+          :style {:background-color "gray"
+                  :opacity (if (:dragging @local)
+                             "0.5"
+                             "1")}
+          :on-click select
+          :on-drag-start on-drag-start
+          :on-drag-enter on-drag-enter
+          :on-drag-leave on-drag-leave
+          :on-drag-over on-drag-over
+          :on-drag-end on-drag-end
+          :on-drop on-drop
+          :draggable true}
+
          [:div.element-actions
           [:div.toggle-element
            {:class (when-not (:hidden item) "selected")
diff --git a/src/uxbox/util/dom/dnd.cljs b/src/uxbox/util/dom/dnd.cljs
index 2ab91ab6a..2c205c003 100644
--- a/src/uxbox/util/dom/dnd.cljs
+++ b/src/uxbox/util/dom/dnd.cljs
@@ -25,6 +25,14 @@
    (let [dt (.-dataTransfer e)]
      (.setData dt (str key) (pr-str data)))))
 
+(defn set-image!
+  ([e data]
+   (set-image! e data 0 0))
+  ([e data x y]
+   (let [dt (.-dataTransfer e)
+         st (.-style data)]
+     (.setDragImage dt data x y))))
+
 (defn get-data
   ([e]
    (get-data e "uxbox/data"))