0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00

Merge pull request #1074 from penpot/import/drag-drop

Import/drag drop
This commit is contained in:
Andrey Antukh 2021-07-07 09:24:03 +02:00 committed by GitHub
commit 8f95f2ba12
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 314 additions and 180 deletions

View file

@ -319,7 +319,9 @@
create-child
(fn [file child]
(-> file
(create-svg-raw (assoc data :content child))
(create-svg-raw (assoc data
:id (uuid/next)
:content child))
(close-svg-raw)))]
;; First :content is the the shape attribute, the other content is the

View file

@ -6,6 +6,7 @@
.dashboard-grid {
font-size: $fs14;
height: 100%;
.grid-row {
display: flex;

View file

@ -215,6 +215,7 @@
background-color: $color-white;
border: 1px solid $color-gray-20;
width: 30rem;
min-height: 14rem;
p {
font-size: $fs14;
@ -276,10 +277,6 @@
.modal-content {
padding: 1rem;
}
}
.import-dialog {
min-height: 215px;
svg {
max-width: 18px;
@ -451,8 +448,6 @@
}
.export-dialog {
min-height: 24rem;
.export-option {
border-radius: 4px;
border: 1px solid $color-gray-10;

View file

@ -86,9 +86,9 @@
(mf/fnc svg-raw-wrapper
[{:keys [shape frame] :as props}]
(let [childs (mapv #(get objects %) (:shapes shape))]
(if (and (contains? shape :svg-attrs)
(map? (:content shape))
(not= :svg (get-in shape [:content :tag])))
(if (and (map? (:content shape))
(or (= :svg (get-in shape [:content :tag]))
(contains? shape :svg-attrs)))
[:> shape-container {:shape shape}
[:& svg-raw-shape {:frame frame
:shape shape

View file

@ -9,7 +9,6 @@
[app.main.data.modal :as modal]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.util.data :refer [classnames]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr t]]
[app.util.keyboard :as k]
@ -86,9 +85,9 @@
:on-click cancel-fn}])
[:input.accept-button
{:class (classnames :danger (= accept-style :danger)
:primary (= accept-style :primary))
{:class (dom/classnames
:danger (= accept-style :danger)
:primary (= accept-style :primary))
:type "button"
:value accept-label
:on-click accept-fn}]]]]]))

View file

@ -18,12 +18,61 @@
(def ^:const options [:all :merge :detach])
(mf/defc export-entry
[{:keys [file]}]
[:div.file-entry
{:class (dom/classnames
:loading (:loading? file)
:success (:export-success? file)
:error (:export-error? file))}
[:div.file-name
[:div.file-icon
(cond (:export-success? file) i/tick
(:export-error? file) i/close
(:loading? file) i/loader-pencil)]
[:div.file-name-label (:name file)]]])
(defn mark-file-error [files file-id]
(->> files
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-error? true
:loading? false)))))
(defn mark-file-success [files file-id]
(->> files
(mapv #(cond-> %
(= file-id (:id %))
(assoc :export-success? true
:loading? false)))))
(mf/defc export-dialog
{::mf/register modal/components
::mf/register-as :export}
[{:keys [team-id files]}]
(let [selected-option (mf/use-state :all)
[{:keys [team-id files has-libraries?]}]
(let [state (mf/use-state {:status :prepare
:files (->> files (mapv #(assoc % :loading? true)))})
selected-option (mf/use-state :all)
start-export
(fn []
(swap! state assoc :status :exporting)
(->> (uw/ask-many!
{:cmd :export-file
:team-id team-id
:export-type @selected-option
:files (->> files (mapv :id))})
(rx/delay-emit 1000)
(rx/subs
(fn [msg]
(when (= :error (:type msg))
(swap! state update :files mark-file-error (:file-id msg)))
(when (= :finish (:type msg))
(swap! state update :files mark-file-success (:file-id msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))
cancel-fn
(mf/use-callback
(fn [event]
@ -35,24 +84,19 @@
(mf/deps @selected-option)
(fn [event]
(dom/prevent-default event)
(->> (uw/ask-many!
{:cmd :export-file
:team-id team-id
:export-type @selected-option
:files files})
(rx/subs
(fn [msg]
(when (= :finish (:type msg))
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))
(st/emit! (modal/hide))))
(start-export)))
on-change-handler
(mf/use-callback
(fn [_ type]
(reset! selected-option type)))]
(mf/use-effect
(fn []
(when-not has-libraries?
;; Start download automaticaly
(start-export))))
[:div.modal-overlay
[:div.modal-container.export-dialog
[:div.modal-header
@ -62,31 +106,49 @@
[:div.modal-close-button
{:on-click cancel-fn} i/close]]
[:div.modal-content
[:p.explain (tr "dashboard.export.explain")]
[:p.detail (tr "dashboard.export.detail")]
(cond
(= (:status @state) :prepare)
[:*
[:div.modal-content
[:p.explain (tr "dashboard.export.explain")]
[:p.detail (tr "dashboard.export.detail")]
(for [type [:all :merge :detach]]
(let [selected? (= @selected-option type)]
[:div.export-option {:class (when selected? "selected")}
[:label.option-container
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))]
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))]
[:input {:type "radio"
:checked selected?
:on-change #(on-change-handler % type)
:name "export-option"}]
[:span {:class "option-radio-check"}]]]))]
(for [type [:all :merge :detach]]
(let [selected? (= @selected-option type)]
[:div.export-option {:class (when selected? "selected")}
[:label.option-container
[:h3 (tr (str "dashboard.export.options." (d/name type) ".title"))]
[:p (tr (str "dashboard.export.options." (d/name type) ".message"))]
[:input {:type "radio"
:checked selected?
:on-change #(on-change-handler % type)
:name "export-option"}]
[:span {:class "option-radio-check"}]]]))]
[:div.modal-footer
[:div.action-buttons
[:input.cancel-button
{:type "button"
:value (tr "labels.cancel")
:on-click cancel-fn}]
[:div.modal-footer
[:div.action-buttons
[:input.cancel-button
{:type "button"
:value (tr "labels.cancel")
:on-click cancel-fn}]
[:input.accept-button
{:class "primary"
:type "button"
:value (tr "labels.export")
:on-click accept-fn}]]]]]))
[:input.accept-button
{:class "primary"
:type "button"
:value (tr "labels.continue")
:on-click accept-fn}]]]]
(= (:status @state) :exporting)
[:*
[:div.modal-content
(for [file (:files @state)]
[:& export-entry {:file file}])]
[:div.modal-footer
[:div.action-buttons
[:input.accept-button
{:class "primary"
:type "button"
:value (tr "labels.close")
:disabled (->> @state :files (some :loading?))
:on-click cancel-fn}]]]])]]))

View file

@ -6,6 +6,7 @@
(ns app.main.ui.dashboard.file-menu
(:require
[app.common.data :as d]
[app.main.data.dashboard :as dd]
[app.main.data.messages :as dm]
[app.main.data.modal :as modal]
@ -155,12 +156,23 @@
:on-accept del-shared})))
on-export-files
(fn [_]
(st/emit!
(modal/show
{:type :export
:team-id current-team-id
:files (->> files (mapv :id))})))]
(mf/use-callback
(mf/deps files current-team-id)
(fn [_]
(->> (rx/from files)
(rx/flat-map
(fn [file]
(->> (rp/query :file-libraries {:file-id (:id file)})
(rx/map #(assoc file :has-libraries? (d/not-empty? %))))))
(rx/reduce conj [])
(rx/subs
(fn [files]
(st/emit!
(modal/show
{:type :export
:team-id current-team-id
:has-libraries? (->> files (some :has-libraries?))
:files files})))))))]
(mf/use-effect
(fn []

View file

@ -44,7 +44,14 @@
(mf/deps project)
(fn [event]
(dom/prevent-default event)
(st/emit! (dd/create-file {:project-id (:id project)}))))]
(st/emit! (dd/create-file {:project-id (:id project)}))))
on-import
(mf/use-callback
(mf/deps (:id project))
(fn []
(st/emit! (dd/fetch-files {:project-id (:id project)})
(dd/clear-selected-files))))]
[:header.dashboard-header
@ -65,7 +72,8 @@
:left (- (:x (:menu-pos @local)) 180)
:top (:y (:menu-pos @local))
:on-edit on-edit
:on-menu-close on-menu-close}]]))
:on-menu-close on-menu-close
:on-import on-import}]]))
[:div.dashboard-header-actions
[:a.btn-secondary.btn-small {:on-click on-create-clicked}
(tr "dashboard.new-file")]
@ -102,6 +110,6 @@
[:*
[:& header {:team team :project project}]
[:section.dashboard-container
[:& grid {:id (:id project)
[:& grid {:project-id (:id project)
:files files}]]]))

View file

@ -13,6 +13,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.dashboard.file-menu :refer [file-menu]]
[app.main.ui.dashboard.import :refer [use-import-file]]
[app.main.ui.dashboard.inline-edition :refer [inline-edition]]
[app.main.ui.icons :as i]
[app.main.worker :as wrk]
@ -210,22 +211,68 @@
[:div.text (tr "dashboard.loading-files")]])
(mf/defc grid
[{:keys [files] :as props}]
[:section.dashboard-grid
(cond
(nil? files)
[:& loading-placeholder]
[{:keys [files project-id] :as props}]
(let [dragging? (mf/use-state false)
(seq files)
[:div.grid-row
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true}])]
on-finish-import
(mf/use-callback
(fn []
(st/emit! (dd/fetch-files {:project-id project-id})
(dd/clear-selected-files))))
:else
[:& empty-placeholder])])
import-files (use-import-file project-id on-finish-import)
on-drag-enter
(mf/use-callback
(fn [e]
(when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e)
(reset! dragging? true))))
on-drag-over
(mf/use-callback
(fn [e]
(when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(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
(fn [e]
(when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e)
(reset! dragging? false)
(import-files (.-files (.-dataTransfer e))))))]
[: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)
[:div.grid-row
(when @dragging?
[:div.grid-item])
(for [item files]
[:& grid-item
{:file item
:key (:id item)
:navigate? true}])]
:else
[:& empty-placeholder])]))
(mf/defc line-grid-row
[{:keys [files selected-files on-load-more dragging?] :as props}]
@ -285,10 +332,17 @@
(mf/defc line-grid
[{:keys [project-id team-id files on-load-more] :as props}]
(let [dragging? (mf/use-state false)
selected-files (mf/deref refs/dashboard-selected-files)
selected-project (mf/deref refs/dashboard-selected-project)
on-finish-import
(mf/use-callback
(fn []
(st/emit! (dd/fetch-recent-files)
(dd/clear-selected-files))))
import-files (use-import-file project-id on-finish-import)
on-drag-enter
(mf/use-callback
(mf/deps selected-project)
@ -298,13 +352,20 @@
(when-not (or (dnd/from-child? e)
(dnd/broken-event? e))
(when (not= selected-project project-id)
(reset! dragging? true))))))
(reset! dragging? true))))
(when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e)
(reset! dragging? true))))
on-drag-over
(mf/use-callback
(fn [e]
(when (dnd/has-type? e "penpot/files")
(dom/prevent-default e))))
(fn [e]
(when (or (dnd/has-type? e "penpot/files")
(dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e))))
on-drag-leave
(mf/use-callback
@ -321,13 +382,20 @@
on-drop
(mf/use-callback
(mf/deps files selected-files)
(fn [_]
(reset! dragging? false)
(when (not= selected-project project-id)
(let [data {:ids (into #{} (keys selected-files))
:project-id project-id}
mdata {:on-success on-drop-success}]
(st/emit! (dd/move-files (with-meta data mdata)))))))]
(fn [e]
(when (or (dnd/has-type? e "Files")
(dnd/has-type? e "application/x-moz-file"))
(dom/prevent-default e)
(reset! dragging? false)
(import-files (.-files (.-dataTransfer e))))
(when (dnd/has-type? e "penpot/files")
(reset! dragging? false)
(when (not= selected-project project-id)
(let [data {:ids (into #{} (keys selected-files))
:project-id project-id}
mdata {:on-success on-drop-success}]
(st/emit! (dd/move-files (with-meta data mdata))))))))]
[:section.dashboard-grid {:on-drag-enter on-drag-enter
:on-drag-over on-drag-over

View file

@ -12,7 +12,6 @@
[app.main.ui.components.file-uploader :refer [file-uploader]]
[app.main.ui.icons :as i]
[app.main.worker :as uw]
[app.util.data :refer [classnames]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
@ -144,10 +143,11 @@
(swap! state update :files remove-file (:file-id file))))]
[:div.file-entry
{:class (classnames :loading loading?
:success load-success?
:error (or import-error? analyze-error?)
:editable (and ready? (not editing?)))}
{:class (dom/classnames
:loading loading?
:success load-success?
:error (or import-error? analyze-error?)
:editable (and ready? (not editing?)))}
[:div.file-name
[:div.file-icon

View file

@ -20,7 +20,7 @@
[rumext.alpha :as mf]))
(mf/defc project-menu
[{:keys [project show? on-edit on-menu-close top left] :as props}]
[{:keys [project show? on-edit on-menu-close top left on-import] :as props}]
(assert (some? project) "missing `project` prop")
(assert (boolean? show?) "missing `show?` prop")
(assert (fn? on-edit) "missing `on-edit` prop")
@ -84,8 +84,7 @@
on-finish-import
(mf/use-callback
(fn []
(st/emit! (dd/fetch-recent-files)
(dd/clear-selected-files))))]
(when (some? on-import) (on-import))))]
[:*
[:& udi/import-form {:ref file-input
@ -106,7 +105,8 @@
[(tr "dashboard.move-to") nil
(for [team teams]
[(:name team) (on-move (:id team))])])
[(tr "dashboard.import") on-import-files]
(when (some? on-import)
[(tr "dashboard.import") on-import-files])
[:separator]
[(tr "labels.delete") on-delete]]}]]))

View file

@ -93,7 +93,13 @@
(fn []
(let [mdata {:on-success on-file-created}
params {:project-id (:id project)}]
(st/emit! (dd/create-file (with-meta params mdata))))))]
(st/emit! (dd/create-file (with-meta params mdata))))))
on-import
(mf/use-callback
(fn []
(st/emit! (dd/fetch-recent-files)
(dd/clear-selected-files))))]
[:div.dashboard-project-row {:class (when first? "first")}
[:div.project
@ -111,7 +117,8 @@
:left (:x (:menu-pos @local))
:top (:y (:menu-pos @local))
:on-edit on-edit-open
:on-menu-close on-menu-close}]
:on-menu-close on-menu-close
:on-import on-import}]
[:span.info (str file-count " files")]
(when (> file-count 0)

View file

@ -12,7 +12,7 @@
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown']]
[app.main.ui.icons :as i]
[app.util.data :refer [classnames]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[goog.object :as gobj]
[rumext.alpha :as mf]))
@ -75,7 +75,7 @@
[{:keys [selected? frame on-click index objects] :as props}]
[:div.thumbnail-item {:on-click #(on-click % index)}
[:div.thumbnail-preview
{:class (classnames :selected selected?)}
{:class (dom/classnames :selected selected?)}
[:& exports/frame-svg {:frame frame :objects objects}]]
[:div.thumbnail-info
[:span.name {:title (:name frame)} (:name frame)]]])
@ -104,7 +104,7 @@
:container container
:show true}
[:section.viewer-thumbnails
{:class (classnames :expanded @expanded?)
{:class (dom/classnames :expanded @expanded?)
:ref container
:on-mouse-leave on-mouse-leave}

View file

@ -6,12 +6,14 @@
(ns app.main.ui.workspace.header
(:require
[app.common.data :as d]
[app.common.math :as mth]
[app.config :as cfg]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.shortcuts :as sc]
[app.main.refs :as refs]
[app.main.repo :as rp]
[app.main.store :as st]
[app.main.ui.components.dropdown :refer [dropdown]]
[app.main.ui.icons :as i]
@ -20,6 +22,7 @@
[app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd]
[app.util.router :as rt]
[beicon.core :as rx]
[okulary.core :as l]
[rumext.alpha :as mf]))
@ -135,12 +138,23 @@
(reset! editing? true))
on-export-files
(fn [_]
(st/emit!
(modal/show
{:type :export
:team-id team-id
:files [(:id file)]})))]
(mf/use-callback
(mf/deps file team-id)
(fn [_]
(->> (rx/of file)
(rx/flat-map
(fn [file]
(->> (rp/query :file-libraries {:file-id (:id file)})
(rx/map #(assoc file :has-libraries? (d/not-empty? %))))))
(rx/reduce conj [])
(rx/subs
(fn [files]
(st/emit!
(modal/show
{:type :export
:team-id team-id
:files files})))))))]
(mf/use-effect
(mf/deps @editing?)
#(when @editing?

View file

@ -13,7 +13,7 @@
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.icons :as i]
[app.util.data :refer [classnames matches-search]]
[app.util.data :refer [matches-search]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [t tr]]
[cuerdas.core :as str]
@ -170,11 +170,11 @@
[:div.modal-content
[:div.libraries-header
[:div.header-item
{:class (classnames :active (= @selected-tab :libraries))
{:class (dom/classnames :active (= @selected-tab :libraries))
:on-click #(change-tab :libraries)}
(t locale "workspace.libraries.libraries")]
[:div.header-item
{:class (classnames :active (= @selected-tab :updates))
{:class (dom/classnames :active (= @selected-tab :updates))
:on-click #(change-tab :updates)}
(t locale "workspace.libraries.updates")]]
[:div.libraries-content

View file

@ -18,7 +18,6 @@
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.util.color :as uc]
[app.util.data :refer [classnames]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.alpha :as mf]))
@ -162,7 +161,7 @@
(when (and (not disable-opacity)
(not (:gradient color)))
[:div.input-element
{:class (classnames :percentail (not= (:opacity color) :multiple))}
{:class (dom/classnames :percentail (not= (:opacity color) :multiple))}
[:> numeric-input {:value (-> color :opacity opacity->string)
:placeholder (tr "settings.multiple")
:on-click select-all

View file

@ -153,34 +153,6 @@
;; Other
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
(defn classnames
[& params]
{:pre [(even? (count params))]}
(str/join " " (reduce (fn [acc [k v]]
(if (and k (true? v))
(conj acc (name k))
acc))
[]
(partition 2 params))))
;; (defn normalize-attrs
;; [m]
;; (letfn [(transform [[k v]]
;; (cond
;; (or (= k :class) (= k :class-name))
;; ["className" v]
;; (or (keyword? k) (string? k))
;; [(str/camel (name k)) v]
;; :else
;; [k v]))
;; (walker [x]
;; (if (map? x)
;; (into {} (map tf) x)
;; x))]
;; (walk/postwalk walker m)))
(defn normalize-props
[props]
(clj->js props :keyword-fn (fn [key]
@ -196,28 +168,3 @@
nm (str/trim (str/lower name))]
(str/includes? nm st))))
;; (defn coalesce
;; [^number v ^number n]
;; (if (.-toFixed v)
;; (js/parseFloat (.toFixed v n))
;; 0))
;; (defmacro mirror-map [& fields]
;; (let [keys# (map #(keyword (name %)) fields)
;; vals# fields]
;; (apply hash-map (interleave keys# vals#))))
;; (defmacro some->'
;; [x & forms]
;; `(let [x# (p/then' ~x (fn [v#]
;; (when (nil? v#)
;; (throw (ex-info "internal" {::some-interrupt true})))
;; v#))]
;; (-> (-> x# ~@forms)
;; (p/catch' (fn [e#]
;; (if (::some-interrupt (ex-data e#))
;; nil
;; (throw e#)))))))

View file

@ -201,7 +201,13 @@
(merge (add-attrs {} (:attrs svg-node)) node-attrs))
(= type :svg-raw)
(->> node :content last)
(let [svg-content (get-data node :penpot:svg-content)
tag (-> svg-content :attrs :penpot:tag keyword)
svg-node (if (= :svg tag)
(->> node :content last :content last)
(->> node :content last))]
(merge (add-attrs {} (:attrs svg-node)) node-attrs))
:else
node-attrs)))

View file

@ -450,14 +450,22 @@
[{:keys [team-id files export-type] :as message}]
(->> (rx/from files)
(rx/mapcat #(export-file team-id % export-type))
(rx/map
(fn [value]
(if (contains? value :type)
value
(let [[file export-blob] value]
{:type :finish
:filename (:name file)
:mtype "application/penpot"
:description "Penpot export (*.penpot)"
:uri (dom/create-uri export-blob)}))))))
(rx/mapcat
(fn [file]
(->> (export-file team-id file export-type)
(rx/map
(fn [value]
(if (contains? value :type)
value
(let [[file export-blob] value]
{:type :finish
:file-id (:id file)
:filename (:name file)
:mtype "application/penpot"
:description "Penpot export (*.penpot)"
:uri (dom/create-uri export-blob)}))))
(rx/catch
(fn [err]
(rx/of {:type :error
:error (str err)
:file-id file}))))))))

View file

@ -855,6 +855,9 @@ msgstr "You are seeing version %s"
msgid "labels.accept"
msgstr "Accept"
msgid "labels.close"
msgstr "Close"
msgid "labels.add-custom-font"
msgstr "Add custom font"
@ -2746,4 +2749,4 @@ msgid "workspace.updates.update"
msgstr "Update"
msgid "workspace.viewport.click-to-close-path"
msgstr "Click to close the path"
msgstr "Click to close the path"

View file

@ -855,6 +855,9 @@ msgstr "Estás viendo la versión %s"
msgid "labels.accept"
msgstr "Aceptar"
msgid "labels.close"
msgstr "Cerrar"
msgid "labels.add-custom-font"
msgstr "Añadir fuentes personalizada"
@ -2742,4 +2745,4 @@ msgid "workspace.updates.update"
msgstr "Actualizar"
msgid "workspace.viewport.click-to-close-path"
msgstr "Pulsar para cerrar la ruta"
msgstr "Pulsar para cerrar la ruta"