mirror of
https://github.com/penpot/penpot.git
synced 2025-06-02 22:01:39 +02: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
|
|
@ -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?}])]))
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue