mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
✨ UI debug toggle for export/import
This commit is contained in:
parent
76e2309778
commit
5c9ec92cc5
12 changed files with 81 additions and 60 deletions
|
@ -12,17 +12,21 @@
|
||||||
[app.util.dom :as dom]))
|
[app.util.dom :as dom]))
|
||||||
|
|
||||||
(mf/defc file-uploader
|
(mf/defc file-uploader
|
||||||
[{:keys [accept multi label-text label-class input-id input-ref on-selected] :as props}]
|
{::mf/forward-ref true}
|
||||||
|
[{:keys [accept multi label-text label-class input-id on-selected] :as props} input-ref]
|
||||||
(let [opt-pick-one #(if multi % (first %))
|
(let [opt-pick-one #(if multi % (first %))
|
||||||
|
|
||||||
on-files-selected (fn [event]
|
on-files-selected
|
||||||
|
(mf/use-callback
|
||||||
|
(mf/deps opt-pick-one)
|
||||||
|
(fn [event]
|
||||||
(let [target (dom/get-target event)]
|
(let [target (dom/get-target event)]
|
||||||
(st/emit!
|
(st/emit!
|
||||||
(some-> target
|
(some-> target
|
||||||
(dom/get-files)
|
(dom/get-files)
|
||||||
(opt-pick-one)
|
(opt-pick-one)
|
||||||
(on-selected)))
|
(on-selected)))
|
||||||
(dom/clean-value! target)))]
|
(dom/clean-value! target))))]
|
||||||
[:*
|
[:*
|
||||||
(when label-text
|
(when label-text
|
||||||
[:label {:for input-id :class-name label-class} label-text])
|
[:label {:for input-id :class-name label-class} label-text])
|
||||||
|
|
|
@ -14,6 +14,7 @@
|
||||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||||
[app.main.ui.context :as ctx]
|
[app.main.ui.context :as ctx]
|
||||||
[app.main.worker :as uw]
|
[app.main.worker :as uw]
|
||||||
|
[app.util.debug :as d]
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[app.util.router :as rt]
|
[app.util.router :as rt]
|
||||||
|
@ -192,7 +193,8 @@
|
||||||
[[(tr "dashboard.duplicate-multi" file-count) on-duplicate]
|
[[(tr "dashboard.duplicate-multi" file-count) on-duplicate]
|
||||||
(when (or (seq current-projects) (seq other-teams))
|
(when (or (seq current-projects) (seq other-teams))
|
||||||
[(tr "dashboard.move-to-multi" file-count) nil sub-options])
|
[(tr "dashboard.move-to-multi" file-count) nil sub-options])
|
||||||
#_[(tr "dashboard.export-multi" file-count) on-export-files]
|
(when (d/debug? :export)
|
||||||
|
[(tr "dashboard.export-multi" file-count) on-export-files])
|
||||||
[:separator]
|
[:separator]
|
||||||
[(tr "labels.delete-multi-files" file-count) on-delete]]
|
[(tr "labels.delete-multi-files" file-count) on-delete]]
|
||||||
|
|
||||||
|
@ -204,7 +206,8 @@
|
||||||
(if (:is-shared file)
|
(if (:is-shared file)
|
||||||
[(tr "dashboard.remove-shared") on-del-shared]
|
[(tr "dashboard.remove-shared") on-del-shared]
|
||||||
[(tr "dashboard.add-shared") on-add-shared])
|
[(tr "dashboard.add-shared") on-add-shared])
|
||||||
#_[(tr "dashboard.export-single") on-export-files]
|
(when (d/debug? :export)
|
||||||
|
[(tr "dashboard.export-single") on-export-files])
|
||||||
[:separator]
|
[:separator]
|
||||||
[(tr "labels.delete") on-delete]])]
|
[(tr "labels.delete") on-delete]])]
|
||||||
|
|
||||||
|
|
|
@ -144,7 +144,7 @@
|
||||||
[:& file-uploader {:input-id "font-upload"
|
[:& file-uploader {:input-id "font-upload"
|
||||||
:accept cm/str-font-types
|
:accept cm/str-font-types
|
||||||
:multi true
|
:multi true
|
||||||
:input-ref input-ref
|
:ref input-ref
|
||||||
:on-selected on-selected}]]]
|
:on-selected on-selected}]]]
|
||||||
|
|
||||||
[:*
|
[:*
|
||||||
|
|
|
@ -39,17 +39,15 @@
|
||||||
(log/debug :action "import-end")
|
(log/debug :action "import-end")
|
||||||
(when on-finish-import (on-finish-import))))))))))
|
(when on-finish-import (on-finish-import))))))))))
|
||||||
|
|
||||||
(mf/defc import-button
|
(mf/defc import-form
|
||||||
[{:keys [project-id on-finish-import]}]
|
{::mf/forward-ref true}
|
||||||
|
[{:keys [project-id on-finish-import]} external-ref]
|
||||||
|
|
||||||
(let [file-input (mf/use-ref nil)
|
(let [on-file-selected (use-import-file project-id on-finish-import)]
|
||||||
on-file-selected (use-import-file project-id on-finish-import)]
|
|
||||||
[:form.import-file
|
[:form.import-file
|
||||||
[:button.import-file-btn {:type "button"
|
|
||||||
:on-click #(dom/click (mf/ref-val file-input))} i/import]
|
|
||||||
[:& file-uploader {:accept "application/zip"
|
[:& file-uploader {:accept "application/zip"
|
||||||
:multi true
|
:multi true
|
||||||
:input-ref file-input
|
:ref external-ref
|
||||||
:on-selected on-file-selected}]]))
|
:on-selected on-file-selected}]]))
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,9 @@
|
||||||
[app.main.store :as st]
|
[app.main.store :as st]
|
||||||
[app.main.ui.components.context-menu :refer [context-menu]]
|
[app.main.ui.components.context-menu :refer [context-menu]]
|
||||||
[app.main.ui.context :as ctx]
|
[app.main.ui.context :as ctx]
|
||||||
|
[app.main.ui.dashboard.import :as udi]
|
||||||
|
[app.util.debug :as d]
|
||||||
|
[app.util.dom :as dom]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[app.util.router :as rt]
|
[app.util.router :as rt]
|
||||||
[beicon.core :as rx]
|
[beicon.core :as rx]
|
||||||
|
@ -71,9 +74,28 @@
|
||||||
:title (tr "modals.delete-project-confirm.title")
|
:title (tr "modals.delete-project-confirm.title")
|
||||||
:message (tr "modals.delete-project-confirm.message")
|
:message (tr "modals.delete-project-confirm.message")
|
||||||
:accept-label (tr "modals.delete-project-confirm.accept")
|
:accept-label (tr "modals.delete-project-confirm.accept")
|
||||||
:on-accept delete-fn}))]
|
:on-accept delete-fn}))
|
||||||
|
|
||||||
[:& context-menu {:on-close on-menu-close
|
|
||||||
|
file-input (mf/use-ref nil)
|
||||||
|
|
||||||
|
on-import-files
|
||||||
|
(mf/use-callback
|
||||||
|
(fn []
|
||||||
|
(dom/click (mf/ref-val file-input))))
|
||||||
|
|
||||||
|
on-finish-import
|
||||||
|
(mf/use-callback
|
||||||
|
(fn []
|
||||||
|
(st/emit! (dd/fetch-recent-files)
|
||||||
|
(dd/clear-selected-files))))]
|
||||||
|
|
||||||
|
[:*
|
||||||
|
[:& udi/import-form {:ref file-input
|
||||||
|
:project-id (:id project)
|
||||||
|
:on-finish-import on-finish-import}]
|
||||||
|
[:& context-menu
|
||||||
|
{:on-close on-menu-close
|
||||||
:show show?
|
:show show?
|
||||||
:fixed? (or (not= top 0) (not= left 0))
|
:fixed? (or (not= top 0) (not= left 0))
|
||||||
:min-width? true
|
:min-width? true
|
||||||
|
@ -87,6 +109,8 @@
|
||||||
[(tr "dashboard.move-to") nil
|
[(tr "dashboard.move-to") nil
|
||||||
(for [team teams]
|
(for [team teams]
|
||||||
[(:name team) (on-move (:id team))])])
|
[(:name team) (on-move (:id team))])])
|
||||||
|
(when (d/debug? :import)
|
||||||
|
[(tr "dashboard.import") on-import-files])
|
||||||
[:separator]
|
[:separator]
|
||||||
[(tr "labels.delete") on-delete]]}]))
|
[(tr "labels.delete") on-delete]]}]]))
|
||||||
|
|
||||||
|
|
|
@ -21,8 +21,7 @@
|
||||||
[app.util.router :as rt]
|
[app.util.router :as rt]
|
||||||
[app.util.time :as dt]
|
[app.util.time :as dt]
|
||||||
[okulary.core :as l]
|
[okulary.core :as l]
|
||||||
[rumext.alpha :as mf]
|
[rumext.alpha :as mf]))
|
||||||
[app.main.ui.dashboard.import :refer [import-button]]))
|
|
||||||
|
|
||||||
(mf/defc header
|
(mf/defc header
|
||||||
{::mf/wrap [mf/memo]}
|
{::mf/wrap [mf/memo]}
|
||||||
|
@ -98,13 +97,7 @@
|
||||||
(fn []
|
(fn []
|
||||||
(let [mdata {:on-success on-file-created}
|
(let [mdata {:on-success on-file-created}
|
||||||
params {:project-id (:id project)}]
|
params {:project-id (:id project)}]
|
||||||
(st/emit! (dd/create-file (with-meta params mdata))))))
|
(st/emit! (dd/create-file (with-meta params mdata))))))]
|
||||||
|
|
||||||
on-finish-import
|
|
||||||
(mf/use-callback
|
|
||||||
(fn []
|
|
||||||
(st/emit! (dd/fetch-recent-files)
|
|
||||||
(dd/clear-selected-files))))]
|
|
||||||
|
|
||||||
[:div.dashboard-project-row {:class (when first? "first")}
|
[:div.dashboard-project-row {:class (when first? "first")}
|
||||||
[:div.project
|
[:div.project
|
||||||
|
@ -117,13 +110,12 @@
|
||||||
(tr "labels.drafts")
|
(tr "labels.drafts")
|
||||||
(:name project))])
|
(:name project))])
|
||||||
|
|
||||||
(when (:menu-open @local)
|
|
||||||
[:& project-menu {:project project
|
[:& project-menu {:project project
|
||||||
:show? (:menu-open @local)
|
:show? (:menu-open @local)
|
||||||
:left (:x (:menu-pos @local))
|
:left (:x (:menu-pos @local))
|
||||||
:top (:y (:menu-pos @local))
|
:top (:y (:menu-pos @local))
|
||||||
:on-edit on-edit-open
|
:on-edit on-edit-open
|
||||||
:on-menu-close on-menu-close}])
|
:on-menu-close on-menu-close}]
|
||||||
|
|
||||||
[:span.info (str file-count " files")]
|
[:span.info (str file-count " files")]
|
||||||
(when (> file-count 0)
|
(when (> file-count 0)
|
||||||
|
@ -131,9 +123,6 @@
|
||||||
(dt/timeago {:locale locale}))]
|
(dt/timeago {:locale locale}))]
|
||||||
[:span.recent-files-row-title-info (str ", " time)]))
|
[:span.recent-files-row-title-info (str ", " time)]))
|
||||||
|
|
||||||
#_[:& import-button {:project-id (:id project)
|
|
||||||
:on-finish-import on-finish-import}]
|
|
||||||
|
|
||||||
(when-not (:is-default project)
|
(when-not (:is-default project)
|
||||||
[:span.pin-icon.tooltip.tooltip-bottom
|
[:span.pin-icon.tooltip.tooltip-bottom
|
||||||
{:class (when (:is-pinned project) "active")
|
{:class (when (:is-pinned project) "active")
|
||||||
|
|
|
@ -285,7 +285,7 @@
|
||||||
[:img {:src (cfg/resolve-team-photo-url team)}]
|
[:img {:src (cfg/resolve-team-photo-url team)}]
|
||||||
[:& file-uploader {:accept "image/jpeg,image/png"
|
[:& file-uploader {:accept "image/jpeg,image/png"
|
||||||
:multi false
|
:multi false
|
||||||
:input-ref finput
|
:ref finput
|
||||||
:on-selected on-file-selected}]]]
|
:on-selected on-file-selected}]]]
|
||||||
|
|
||||||
[:div.block.owner-block
|
[:div.block.owner-block
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
[:img {:src photo}]
|
[:img {:src photo}]
|
||||||
[:& file-uploader {:accept "image/jpeg,image/png"
|
[:& file-uploader {:accept "image/jpeg,image/png"
|
||||||
:multi false
|
:multi false
|
||||||
:input-ref file-input
|
:ref file-input
|
||||||
:on-selected on-file-selected}]]]))
|
:on-selected on-file-selected}]]]))
|
||||||
|
|
||||||
;; --- Profile Page
|
;; --- Profile Page
|
||||||
|
|
|
@ -52,7 +52,7 @@
|
||||||
[:& file-uploader {:input-id "image-upload"
|
[:& file-uploader {:input-id "image-upload"
|
||||||
:accept cm/str-image-types
|
:accept cm/str-image-types
|
||||||
:multi true
|
:multi true
|
||||||
:input-ref ref
|
:ref ref
|
||||||
:on-selected on-files-selected}]]]))
|
:on-selected on-files-selected}]]]))
|
||||||
|
|
||||||
(mf/defc left-toolbar
|
(mf/defc left-toolbar
|
||||||
|
|
|
@ -743,7 +743,7 @@
|
||||||
i/plus
|
i/plus
|
||||||
[:& file-uploader {:accept cm/str-image-types
|
[:& file-uploader {:accept cm/str-image-types
|
||||||
:multi true
|
:multi true
|
||||||
:input-ref input-ref
|
:ref input-ref
|
||||||
:on-selected on-file-selected}]]])
|
:on-selected on-file-selected}]]])
|
||||||
|
|
||||||
[:& asset-section-block {:role :content}
|
[:& asset-section-block {:role :content}
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
[app.common.math :as mth]
|
[app.common.math :as mth]
|
||||||
[cljs.pprint :refer [pprint]]))
|
[cljs.pprint :refer [pprint]]))
|
||||||
|
|
||||||
(def debug-options #{:bounding-boxes :group :events :rotation-handler :resize-handler :selection-center #_:simple-selection})
|
(def debug-options #{:bounding-boxes :group :events :rotation-handler :resize-handler :selection-center :export :import #_:simple-selection})
|
||||||
|
|
||||||
;; These events are excluded when we activate the :events flag
|
;; These events are excluded when we activate the :events flag
|
||||||
(def debug-exclude-events
|
(def debug-exclude-events
|
||||||
|
|
|
@ -2694,5 +2694,8 @@ msgstr "Export file"
|
||||||
msgid "dashboard.export-multi"
|
msgid "dashboard.export-multi"
|
||||||
msgstr "Export %s files"
|
msgstr "Export %s files"
|
||||||
|
|
||||||
|
msgid "dashboard.import"
|
||||||
|
msgstr "Import files"
|
||||||
|
|
||||||
msgid "dashboard.options"
|
msgid "dashboard.options"
|
||||||
msgstr "Options"
|
msgstr "Options"
|
||||||
|
|
Loading…
Add table
Reference in a new issue