Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-16 01:31:22 -05:00
Code Issues Activity

Improve drag experience.

Browse source
This commit is contained in:
Andrey Antukh 2016-02-03 18:07:28 +02:00
parent 4bec35869c
commit 7aa3bb01a9
3 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
resources/public/styles/partials/settings-bar.scss
View file

@ -227,6 +227,7 @@
align-items: center; align-items: center;
border-bottom: 1px solid $color-gray-darker; border-bottom: 1px solid $color-gray-darker;
box-sizing: border-box; box-sizing: border-box;
background-color: $color-gray-dark;
display: flex; display: flex;
padding: $small; padding: $small;
width: 100%; width: 100%;

25
src/uxbox/ui/workspace/toolboxes/layers.cljs
View file

@ -118,6 +118,7 @@
local (:rum/local own) local (:rum/local own)
classes (classnames classes (classnames
:selected selected? :selected selected?
:drag-active (:dragging @local)
:drag-top (= :top (:over @local)) :drag-top (= :top (:over @local))
:drag-bottom (= :bottom (:over @local)) :drag-bottom (= :bottom (:over @local))
:drag-inside (= :middle (:over @local)))] :drag-inside (= :middle (:over @local)))]
@ -125,6 +126,7 @@
(let [target (dom/event->target event)] (let [target (dom/event->target event)]
(dnd/set-allowed-effect! event "move") (dnd/set-allowed-effect! event "move")
(dnd/set-data! event (:id item)) (dnd/set-data! event (:id item))
(dnd/set-image! event target 50 10)
(swap! local assoc :dragging true))) (swap! local assoc :dragging true)))
(on-drag-end [event] (on-drag-end [event]
(swap! local assoc :dragging false :over nil)) (swap! local assoc :dragging false :over nil))
@ -147,17 +149,22 @@
(swap! local assoc :over false))] (swap! local assoc :over false))]
(html (html
[:li {:key (str (:id item)) [: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")} :class (when selected? "selected")}
[:div.element-list-body [: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.element-actions
[:div.toggle-element [:div.toggle-element
{:class (when-not (:hidden item) "selected") {:class (when-not (:hidden item) "selected")

8
src/uxbox/util/dom/dnd.cljs
View file

@ -25,6 +25,14 @@
(let [dt (.-dataTransfer e)] (let [dt (.-dataTransfer e)]
(.setData dt (str key) (pr-str data))))) (.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 (defn get-data
([e] ([e]
(get-data e "uxbox/data")) (get-data e "uxbox/data"))