mirror of
https://github.com/penpot/penpot.git
synced 2025-02-13 10:38:13 -05:00
🎉 Drag and drop files in the dashboard
This commit is contained in:
Andrés Moya
parent
81a604dca2
commit
c2332331ce
11 changed files with 332 additions and 81 deletions
|
|
@ -177,13 +177,17 @@
|
|||
background-color: $color-white;
|
||||
|
||||
&:hover {
|
||||
border-color: $color-primary;
|
||||
border: 2px solid $color-primary;
|
||||
|
||||
.project-th-actions {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
border: 2px solid $color-primary;
|
||||
}
|
||||
|
||||
.project-th-actions {
|
||||
align-items: center;
|
||||
bottom: 2px;
|
||||
|
|
@ -234,7 +238,6 @@
|
|||
.project-th-actions.force-display {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// IMAGES SECTION
|
||||
|
|
@ -275,6 +278,21 @@
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.drag-counter {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 4px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-color: $color-primary;
|
||||
border-radius: 50%;
|
||||
color: $color-black;
|
||||
font-size: $fs18;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// STYLES FOR LIBRARIES
|
||||
|
|
|
|||
|
|
@ -249,6 +249,10 @@
|
|||
background-color: $color-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
flex: 1 0 0;
|
||||
margin-right: $medium;
|
||||
overflow-y: auto;
|
||||
user-select: none;
|
||||
|
||||
&.search {
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -57,6 +57,10 @@
|
|||
::modified-at
|
||||
::project-id]))
|
||||
|
||||
(s/def ::set-of-uuid
|
||||
(s/every ::us/uuid :kind set?))
|
||||
|
||||
(declare clear-selected-files)
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Data Fetching
|
||||
|
|
@ -145,8 +149,10 @@
|
|||
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(->> (rp/query :search-files params)
|
||||
(rx/map #(partial fetched %)))))))
|
||||
(rx/concat
|
||||
(->> (rp/query :search-files params)
|
||||
(rx/map #(partial fetched %)))
|
||||
(rx/of (clear-selected-files)))))))
|
||||
|
||||
;; --- Fetch Files
|
||||
|
||||
|
|
@ -158,8 +164,10 @@
|
|||
(ptk/reify ::fetch-files
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(->> (rp/query :files params)
|
||||
(rx/map #(partial fetched %)))))))
|
||||
(rx/concat
|
||||
(->> (rp/query :files params)
|
||||
(rx/map #(partial fetched %)))
|
||||
(rx/of (clear-selected-files)))))))
|
||||
|
||||
;; --- Fetch Shared Files
|
||||
|
||||
|
|
@ -171,8 +179,10 @@
|
|||
(ptk/reify ::fetch-shared-files
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(->> (rp/query :shared-files {:team-id team-id})
|
||||
(rx/map #(partial fetched %)))))))
|
||||
(rx/concat
|
||||
(->> (rp/query :shared-files {:team-id team-id})
|
||||
(rx/map #(partial fetched %)))
|
||||
(rx/of (clear-selected-files)))))))
|
||||
|
||||
;; --- Fetch recent files
|
||||
|
||||
|
|
@ -185,8 +195,10 @@
|
|||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [params {:team-id team-id}]
|
||||
(->> (rp/query :recent-files params)
|
||||
(rx/map #(recent-files-fetched team-id %)))))))
|
||||
(rx/concat
|
||||
(->> (rp/query :recent-files params)
|
||||
(rx/map #(recent-files-fetched team-id %)))
|
||||
(rx/of (clear-selected-files)))))))
|
||||
|
||||
(defn recent-files-fetched
|
||||
[team-id files]
|
||||
|
|
@ -202,6 +214,41 @@
|
|||
state
|
||||
projects)))))
|
||||
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Data Selection
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
||||
(defn clear-selected-files
|
||||
[]
|
||||
(ptk/reify ::clear-file-select
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(update state :dashboard-local
|
||||
assoc :selected-files #{}
|
||||
:selected-project nil))))
|
||||
|
||||
(defn toggle-file-select
|
||||
[{:keys [file] :as params}]
|
||||
(ptk/reify ::toggle-file-select
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [file-id (:id file)
|
||||
selected-project (get-in state [:dashboard-local
|
||||
:selected-project])]
|
||||
(if (or (nil? selected-project)
|
||||
(= selected-project (:project-id file)))
|
||||
(update state :dashboard-local
|
||||
(fn [local]
|
||||
(-> local
|
||||
(update :selected-files
|
||||
#(if (contains? % file-id)
|
||||
(disj % file-id)
|
||||
(conj % file-id)))
|
||||
(assoc :selected-project
|
||||
(:project-id file)))))
|
||||
state)))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Data Modification
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
@ -556,18 +603,18 @@
|
|||
|
||||
;; --- Move File
|
||||
|
||||
(defn move-file
|
||||
[{:keys [id project-id] :as params}]
|
||||
(us/assert ::us/uuid id)
|
||||
(defn move-files
|
||||
[{:keys [ids project-id] :as params}]
|
||||
(us/assert ::set-of-uuid ids)
|
||||
(us/assert ::us/uuid project-id)
|
||||
(ptk/reify ::move-file
|
||||
(ptk/reify ::move-files
|
||||
ptk/WatchEvent
|
||||
(watch [_ state stream]
|
||||
(let [{:keys [on-success on-error]
|
||||
:or {on-success identity
|
||||
on-error identity}} (meta params)]
|
||||
|
||||
(->> (rp/mutation! :move-files {:ids #{id}
|
||||
(->> (rp/mutation! :move-files {:ids ids
|
||||
:project-id project-id})
|
||||
(rx/tap on-success)
|
||||
(rx/catch on-error))))))
|
||||
|
|
|
|||
|
|
@ -40,6 +40,16 @@
|
|||
(def dashboard-local
|
||||
(l/derived :dashboard-local st/state))
|
||||
|
||||
(def dashboard-selected-files
|
||||
(l/derived (fn [state]
|
||||
(get-in state [:dashboard-local :selected-files] #{}))
|
||||
st/state))
|
||||
|
||||
(def dashboard-selected-project
|
||||
(l/derived (fn [state]
|
||||
(get-in state [:dashboard-local :selected-project]))
|
||||
st/state))
|
||||
|
||||
;; ---- Workspace refs
|
||||
|
||||
(def workspace-local
|
||||
|
|
|
|||
|
|
@ -61,7 +61,7 @@
|
|||
|
||||
(mf/defc dashboard-content
|
||||
[{:keys [team projects project section search-term profile] :as props}]
|
||||
[:div.dashboard-content
|
||||
[:div.dashboard-content {:on-click (st/emitf (dd/clear-selected-files))}
|
||||
(case section
|
||||
:dashboard-projects
|
||||
[:& projects-section {:team team :projects projects}]
|
||||
|
|
|
|||
|
|
@ -23,11 +23,12 @@
|
|||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc file-menu
|
||||
[{:keys [file show? on-edit on-menu-close top left] :as props}]
|
||||
[{:keys [file show? on-edit on-menu-close top left navigate?] :as props}]
|
||||
(assert (some? file) "missing `file` prop")
|
||||
(assert (boolean? show?) "missing `show?` prop")
|
||||
(assert (fn? on-edit) "missing `on-edit` prop")
|
||||
(assert (fn? on-menu-close) "missing `on-menu-close` prop")
|
||||
(assert (boolean? navigate?) "missing `navigate?` prop")
|
||||
(let [top (or top 0)
|
||||
left (or left 0)
|
||||
|
||||
|
|
@ -81,16 +82,18 @@
|
|||
(mf/use-callback
|
||||
(mf/deps file)
|
||||
(fn [team-id project-id]
|
||||
(let [data {:id (:id file)
|
||||
(let [data {:ids #{(:id file)}
|
||||
:project-id project-id}
|
||||
|
||||
mdata {:on-success
|
||||
(st/emitf (dm/success (tr "dashboard.success-move-file"))
|
||||
(rt/nav :dashboard-files
|
||||
{:team-id team-id
|
||||
:project-id project-id}))}]
|
||||
(if navigate?
|
||||
(rt/nav :dashboard-files
|
||||
{:team-id team-id
|
||||
:project-id project-id})
|
||||
(dd/fetch-recent-files {:team-id team-id})))}]
|
||||
|
||||
(st/emitf (dd/move-file (with-meta data mdata))))))
|
||||
(st/emitf (dd/move-files (with-meta data mdata))))))
|
||||
|
||||
add-shared
|
||||
(mf/use-callback
|
||||
|
|
|
|||
|
|
@ -13,14 +13,17 @@
|
|||
[app.common.uuid :as uuid]
|
||||
[app.config :as cfg]
|
||||
[app.main.data.dashboard :as dd]
|
||||
[app.main.data.messages :as dm]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.fonts :as fonts]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.file-menu :refer [file-menu]]
|
||||
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.worker :as wrk]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.router :as rt]
|
||||
|
|
@ -60,17 +63,30 @@
|
|||
|
||||
(mf/defc grid-item
|
||||
{:wrap [mf/memo]}
|
||||
[{:keys [id file] :as props}]
|
||||
(let [local (mf/use-state {:menu-open false
|
||||
:menu-pos nil
|
||||
:edition false})
|
||||
locale (mf/deref i18n/locale)
|
||||
menu-ref (mf/use-ref)
|
||||
[{:keys [id file selected-files navigate?] :as props}]
|
||||
(let [local (mf/use-state {:menu-open false
|
||||
:menu-pos nil
|
||||
:edition false})
|
||||
locale (mf/deref i18n/locale)
|
||||
item-ref (mf/use-ref)
|
||||
menu-ref (mf/use-ref)
|
||||
selected? (contains? selected-files id)
|
||||
|
||||
on-menu-close
|
||||
(mf/use-callback
|
||||
#(swap! local assoc :menu-open false))
|
||||
|
||||
on-select
|
||||
(mf/use-callback
|
||||
(mf/deps id)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(dom/stop-propagation event)
|
||||
(let [shift? (kbd/shift? event)]
|
||||
(when-not shift?
|
||||
(st/emit! (dd/clear-selected-files)))
|
||||
(st/emit! (dd/toggle-file-select {:file file})))))
|
||||
|
||||
on-navigate
|
||||
(mf/use-callback
|
||||
(mf/deps id)
|
||||
|
|
@ -83,6 +99,43 @@
|
|||
qparams {:page-id (first (get-in file [:data :pages]))}]
|
||||
(st/emit! (rt/nav :workspace pparams qparams)))))))
|
||||
|
||||
create-counter
|
||||
(mf/use-callback
|
||||
(fn [element file-count]
|
||||
(let [counter-el (dom/create-element "div")]
|
||||
(dom/set-property! counter-el "class" "drag-counter")
|
||||
(dom/set-text! counter-el (str file-count))
|
||||
counter-el)))
|
||||
|
||||
on-drag-start
|
||||
(mf/use-callback
|
||||
(mf/deps selected-files)
|
||||
(fn [event]
|
||||
(let [offset (dom/get-offset-position (.-nativeEvent event))
|
||||
|
||||
select-current? (not (contains? selected-files (:id file)))
|
||||
|
||||
item-el (mf/ref-val item-ref)
|
||||
counter-el (create-counter item-el
|
||||
(if select-current?
|
||||
1
|
||||
(count selected-files)))]
|
||||
|
||||
(when select-current?
|
||||
(st/emit! (dd/clear-selected-files))
|
||||
(st/emit! (dd/toggle-file-select {:file file})))
|
||||
|
||||
(dnd/set-data! event "penpot/files" "dummy")
|
||||
(dnd/set-allowed-effect! event "move")
|
||||
|
||||
;; set-drag-image requires that the element is rendered and
|
||||
;; visible to the user at the moment of creating the ghost
|
||||
;; image (to make a snapshot), but you may remove it right
|
||||
;; afterwards, in the next render cycle.
|
||||
(dom/append-child! item-el counter-el)
|
||||
(dnd/set-drag-image! event item-el (:x offset) (:y offset))
|
||||
(ts/raf #(.removeChild item-el counter-el)))))
|
||||
|
||||
on-menu-click
|
||||
(mf/use-callback
|
||||
(mf/deps file)
|
||||
|
|
@ -108,7 +161,13 @@
|
|||
:edition true
|
||||
:menu-open false)))]
|
||||
|
||||
[:div.grid-item.project-th {:on-click on-navigate
|
||||
[:div.grid-item.project-th {:class (dom/classnames
|
||||
:selected selected?)
|
||||
:ref item-ref
|
||||
:draggable true
|
||||
:on-click on-select
|
||||
:on-double-click on-navigate
|
||||
:on-drag-start on-drag-start
|
||||
:on-context-menu on-menu-click}
|
||||
[:div.overlay]
|
||||
[:& grid-item-thumbnail {:file file}]
|
||||
|
|
@ -130,14 +189,18 @@
|
|||
:show? (:menu-open @local)
|
||||
:left (:x (:menu-pos @local))
|
||||
:top (:y (:menu-pos @local))
|
||||
:navigate? navigate?
|
||||
:on-edit on-edit
|
||||
:on-menu-close on-menu-close}]]]]))
|
||||
|
||||
(mf/defc empty-placeholder
|
||||
[]
|
||||
[:div.grid-empty-placeholder
|
||||
[:div.icon i/file-html]
|
||||
[:div.text (tr "dashboard.empty-files")]])
|
||||
[{:keys [dragging?] :as props}]
|
||||
(if-not dragging?
|
||||
[:div.grid-empty-placeholder
|
||||
[:div.icon i/file-html]
|
||||
[:div.text (tr "dashboard.empty-files")]]
|
||||
[:div.grid-row.no-wrap
|
||||
[:div.grid-item]]))
|
||||
|
||||
(mf/defc loading-placeholder
|
||||
[]
|
||||
|
|
@ -147,7 +210,8 @@
|
|||
|
||||
(mf/defc grid
|
||||
[{:keys [id opts files] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
selected-files (mf/deref refs/dashboard-selected-files)]
|
||||
[:section.dashboard-grid
|
||||
(cond
|
||||
(nil? files)
|
||||
|
|
@ -159,73 +223,123 @@
|
|||
[:& grid-item
|
||||
{:id (:id item)
|
||||
:file item
|
||||
:key (:id item)}])]
|
||||
:selected-files selected-files
|
||||
:key (:id item)
|
||||
:navigate? true}])]
|
||||
|
||||
:else
|
||||
[:& empty-placeholder])]))
|
||||
|
||||
(mf/defc line-grid-row
|
||||
[{:keys [locale files on-load-more] :as props}]
|
||||
(let [rowref (mf/use-ref)
|
||||
[{:keys [locale files team-id selected-files on-load-more dragging?] :as props}]
|
||||
(let [rowref (mf/use-ref)
|
||||
|
||||
width (mf/use-state 900)
|
||||
limit (mf/use-state 1)
|
||||
width (mf/use-state nil)
|
||||
|
||||
itemsize 290]
|
||||
itemsize 290
|
||||
ratio (if (some? @width) (/ @width itemsize) 0)
|
||||
nitems (mth/floor ratio)
|
||||
limit (if (and (some? @width)
|
||||
(> (* itemsize (count files)) @width)
|
||||
(< (- ratio nitems) 0.51))
|
||||
(dec nitems) ;; Leave space for the "show all" block
|
||||
nitems)
|
||||
limit (if dragging?
|
||||
(dec limit)
|
||||
limit)
|
||||
limit (max 1 limit)]
|
||||
|
||||
(mf/use-layout-effect
|
||||
(mf/deps width)
|
||||
(fn []
|
||||
(let [node (mf/ref-val rowref)
|
||||
obs (new js/ResizeObserver
|
||||
(fn [entries x]
|
||||
(ts/raf (fn []
|
||||
(let [data (first entries)
|
||||
rect (.-contentRect ^js data)]
|
||||
(reset! width (.-width ^js rect)))))))
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(let [node (mf/ref-val rowref)
|
||||
obs (new js/ResizeObserver
|
||||
(fn [entries x]
|
||||
(ts/raf #(let [row (first entries)
|
||||
row-rect (.-contentRect ^js row)
|
||||
row-width (.-width ^js row-rect)]
|
||||
(reset! width row-width)))))]
|
||||
|
||||
nitems (/ @width itemsize)
|
||||
num (mth/floor nitems)]
|
||||
|
||||
(.observe ^js obs node)
|
||||
|
||||
(cond
|
||||
(< (* itemsize (count files)) @width)
|
||||
(reset! limit num)
|
||||
|
||||
(< nitems (+ num 0.51))
|
||||
(reset! limit (dec num))
|
||||
|
||||
:else
|
||||
(reset! limit num))
|
||||
(fn []
|
||||
(.disconnect ^js obs)))))
|
||||
(.observe ^js obs node)
|
||||
(fn []
|
||||
(.disconnect ^js obs)))))
|
||||
|
||||
[:div.grid-row.no-wrap {:ref rowref}
|
||||
(for [item (take @limit files)]
|
||||
(when dragging?
|
||||
[:div.grid-item])
|
||||
(for [item (take limit files)]
|
||||
[:& grid-item
|
||||
{:id (:id item)
|
||||
:file item
|
||||
:key (:id item)}])
|
||||
(when (> (count files) @limit)
|
||||
:selected-files selected-files
|
||||
:key (:id item)
|
||||
:navigate? false}])
|
||||
(when (and (> limit 0)
|
||||
(> (count files) limit))
|
||||
[:div.grid-item.placeholder {:on-click on-load-more}
|
||||
[:div.placeholder-icon i/arrow-down]
|
||||
[:div.placeholder-label
|
||||
(t locale "dashboard.show-all-files")]])]))
|
||||
|
||||
(mf/defc line-grid
|
||||
[{:keys [project-id opts files on-load-more] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)]
|
||||
[:section.dashboard-grid
|
||||
[{:keys [project-id team-id opts files on-load-more] :as props}]
|
||||
(let [locale (mf/deref i18n/locale)
|
||||
dragging? (mf/use-state false)
|
||||
|
||||
selected-files (mf/deref refs/dashboard-selected-files)
|
||||
selected-project (mf/deref refs/dashboard-selected-project)
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-callback
|
||||
(mf/deps selected-project)
|
||||
(fn [e]
|
||||
(when (dnd/has-type? e "penpot/files")
|
||||
(dom/prevent-default e)
|
||||
(when-not (dnd/from-child? e)
|
||||
(when (not= selected-project project-id)
|
||||
(reset! dragging? true))))))
|
||||
|
||||
on-drag-over
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when (dnd/has-type? e "penpot/files")
|
||||
(dom/prevent-default e))))
|
||||
|
||||
on-drag-leave
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when-not (dnd/from-child? e)
|
||||
(reset! dragging? false))))
|
||||
|
||||
on-drop
|
||||
(mf/use-callback
|
||||
(mf/deps files selected-files)
|
||||
(fn [e]
|
||||
(reset! dragging? false)
|
||||
(when (not= selected-project project-id)
|
||||
(let [data {:ids selected-files
|
||||
:project-id project-id}
|
||||
|
||||
mdata {:on-success
|
||||
(st/emitf (dm/success (tr "dashboard.success-move-file"))
|
||||
(dd/fetch-recent-files {:team-id team-id}))}]
|
||||
(st/emit! (dd/move-files (with-meta data mdata)))))))]
|
||||
|
||||
[:section.dashboard-grid {:on-drag-enter on-drag-enter
|
||||
:on-drag-over on-drag-over
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drop on-drop}
|
||||
(cond
|
||||
(nil? files)
|
||||
[:& loading-placeholder]
|
||||
|
||||
(seq files)
|
||||
[:& line-grid-row {:files files
|
||||
:team-id team-id
|
||||
:selected-files selected-files
|
||||
:on-load-more on-load-more
|
||||
:dragging? @dragging?
|
||||
:locale locale}]
|
||||
|
||||
:else
|
||||
[:& empty-placeholder])]))
|
||||
[:& empty-placeholder {:dragging? @dragging?}])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -148,6 +148,7 @@
|
|||
|
||||
[:& line-grid
|
||||
{:project-id (:id project)
|
||||
:team-id team-id
|
||||
:on-load-more on-nav
|
||||
:files files}]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.util.avatars :as avatars]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.dom.dnd :as dnd]
|
||||
[app.util.i18n :as i18n :refer [t tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
[app.util.object :as obj]
|
||||
|
|
@ -42,13 +43,16 @@
|
|||
[rumext.alpha :as mf]))
|
||||
|
||||
(mf/defc sidebar-project
|
||||
[{:keys [item selected?] :as props}]
|
||||
(let [dstate (mf/deref refs/dashboard-local)
|
||||
edit-id (:project-for-edit dstate)
|
||||
[{:keys [item team-id selected?] :as props}]
|
||||
(let [dstate (mf/deref refs/dashboard-local)
|
||||
selected-files (:selected-files dstate)
|
||||
selected-project (:selected-project dstate)
|
||||
edit-id (:project-for-edit dstate)
|
||||
|
||||
local (mf/use-state {:menu-open false
|
||||
:menu-pos nil
|
||||
:edition? (= (:id item) edit-id)})
|
||||
:edition? (= (:id item) edit-id)
|
||||
:dragging? false})
|
||||
|
||||
on-click
|
||||
(mf/use-callback
|
||||
|
|
@ -75,13 +79,56 @@
|
|||
(mf/deps item)
|
||||
(fn [name]
|
||||
(st/emit! (dd/rename-project (assoc item :name name)))
|
||||
(swap! local assoc :edition? false)))]
|
||||
(swap! local assoc :edition? false)))
|
||||
|
||||
on-drag-enter
|
||||
(mf/use-callback
|
||||
(mf/deps selected-project)
|
||||
(fn [e]
|
||||
(when (dnd/has-type? e "penpot/files")
|
||||
(dom/prevent-default e)
|
||||
(when-not (dnd/from-child? e)
|
||||
(when (not= selected-project (:id item))
|
||||
(swap! local assoc :dragging? true))))))
|
||||
|
||||
on-drag-over
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when (dnd/has-type? e "penpot/files")
|
||||
(dom/prevent-default e))))
|
||||
|
||||
on-drag-leave
|
||||
(mf/use-callback
|
||||
(fn [e]
|
||||
(when-not (dnd/from-child? e)
|
||||
(swap! local assoc :dragging? false))))
|
||||
|
||||
on-drop
|
||||
(mf/use-callback
|
||||
(mf/deps item selected-files)
|
||||
(fn [e]
|
||||
(swap! local assoc :dragging? false)
|
||||
(when (not= selected-project (:id item))
|
||||
(let [data {:ids selected-files
|
||||
:project-id (:id item)}
|
||||
|
||||
mdata {:on-success
|
||||
(st/emitf (dm/success (tr "dashboard.success-move-file"))
|
||||
(rt/nav :dashboard-files
|
||||
{:team-id team-id
|
||||
:project-id (:id item)}))}]
|
||||
(st/emit! (dd/move-files (with-meta data mdata)))))))]
|
||||
|
||||
[:*
|
||||
[:li {:on-click on-click
|
||||
[:li {:class (if selected? "current"
|
||||
(when (:dragging? @local) "dragging"))
|
||||
:on-click on-click
|
||||
:on-double-click on-edit-open
|
||||
:on-context-menu on-menu-click
|
||||
:class (when selected? "current")}
|
||||
:on-drag-enter on-drag-enter
|
||||
:on-drag-over on-drag-over
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drop on-drop}
|
||||
(if (:edition? @local)
|
||||
[:& inline-edition {:content (:name item)
|
||||
:on-end on-edit}]
|
||||
|
|
@ -451,6 +498,7 @@
|
|||
{:item item
|
||||
:key (:id item)
|
||||
:id (:id item)
|
||||
:team-id (:id team)
|
||||
:selected? (= (:id item) (:id project))}])]
|
||||
[:div.sidebar-empty-placeholder
|
||||
[:span.icon i/pin]
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@
|
|||
[e]
|
||||
(.-target e))
|
||||
|
||||
|
||||
(defn classnames
|
||||
[& params]
|
||||
(assert (even? (count params)))
|
||||
|
|
@ -233,6 +232,12 @@
|
|||
{:pre [(blob? b)]}
|
||||
(js/URL.createObjectURL b))
|
||||
|
||||
(defn set-property! [node property value]
|
||||
(.setAttribute node property value))
|
||||
|
||||
(defn set-text! [node text]
|
||||
(set! (.-textContent node) text))
|
||||
|
||||
(defn set-css-property [node property value]
|
||||
(.setProperty (.-style ^js node) property value))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue