diff --git a/frontend/src/app/main/ui/components/file_uploader.cljs b/frontend/src/app/main/ui/components/file_uploader.cljs index 54898407a..115197614 100644 --- a/frontend/src/app/main/ui/components/file_uploader.cljs +++ b/frontend/src/app/main/ui/components/file_uploader.cljs @@ -12,17 +12,21 @@ [app.util.dom :as dom])) (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 %)) - on-files-selected (fn [event] - (let [target (dom/get-target event)] - (st/emit! - (some-> target - (dom/get-files) - (opt-pick-one) - (on-selected))) - (dom/clean-value! target)))] + on-files-selected + (mf/use-callback + (mf/deps opt-pick-one) + (fn [event] + (let [target (dom/get-target event)] + (st/emit! + (some-> target + (dom/get-files) + (opt-pick-one) + (on-selected))) + (dom/clean-value! target))))] [:* (when label-text [:label {:for input-id :class-name label-class} label-text]) diff --git a/frontend/src/app/main/ui/dashboard/file_menu.cljs b/frontend/src/app/main/ui/dashboard/file_menu.cljs index 6dcedd52a..5de3b72a2 100644 --- a/frontend/src/app/main/ui/dashboard/file_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/file_menu.cljs @@ -14,6 +14,7 @@ [app.main.ui.components.context-menu :refer [context-menu]] [app.main.ui.context :as ctx] [app.main.worker :as uw] + [app.util.debug :as d] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.router :as rt] @@ -192,7 +193,8 @@ [[(tr "dashboard.duplicate-multi" file-count) on-duplicate] (when (or (seq current-projects) (seq other-teams)) [(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] [(tr "labels.delete-multi-files" file-count) on-delete]] @@ -204,7 +206,8 @@ (if (:is-shared file) [(tr "dashboard.remove-shared") on-del-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] [(tr "labels.delete") on-delete]])] diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index bda48caad..9363698bf 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -144,7 +144,7 @@ [:& file-uploader {:input-id "font-upload" :accept cm/str-font-types :multi true - :input-ref input-ref + :ref input-ref :on-selected on-selected}]]] [:* diff --git a/frontend/src/app/main/ui/dashboard/import.cljs b/frontend/src/app/main/ui/dashboard/import.cljs index c30e48f03..dcec18c73 100644 --- a/frontend/src/app/main/ui/dashboard/import.cljs +++ b/frontend/src/app/main/ui/dashboard/import.cljs @@ -39,17 +39,15 @@ (log/debug :action "import-end") (when on-finish-import (on-finish-import)))))))))) -(mf/defc import-button - [{:keys [project-id on-finish-import]}] +(mf/defc import-form + {::mf/forward-ref true} + [{:keys [project-id on-finish-import]} external-ref] - (let [file-input (mf/use-ref nil) - on-file-selected (use-import-file project-id on-finish-import)] + (let [on-file-selected (use-import-file project-id on-finish-import)] [: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" :multi true - :input-ref file-input + :ref external-ref :on-selected on-file-selected}]])) diff --git a/frontend/src/app/main/ui/dashboard/project_menu.cljs b/frontend/src/app/main/ui/dashboard/project_menu.cljs index 8ea8b4132..68c166a32 100644 --- a/frontend/src/app/main/ui/dashboard/project_menu.cljs +++ b/frontend/src/app/main/ui/dashboard/project_menu.cljs @@ -14,6 +14,9 @@ [app.main.store :as st] [app.main.ui.components.context-menu :refer [context-menu]] [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.router :as rt] [beicon.core :as rx] @@ -71,22 +74,43 @@ :title (tr "modals.delete-project-confirm.title") :message (tr "modals.delete-project-confirm.message") :accept-label (tr "modals.delete-project-confirm.accept") - :on-accept delete-fn}))] + :on-accept delete-fn})) - [:& context-menu {:on-close on-menu-close - :show show? - :fixed? (or (not= top 0) (not= left 0)) - :min-width? true - :top top - :left left - :options [(when-not (:is-default project) - [(tr "labels.rename") on-edit]) - [(tr "dashboard.duplicate") on-duplicate] - [(tr "dashboard.pin-unpin") toggle-pin] - (when (seq teams) - [(tr "dashboard.move-to") nil - (for [team teams] - [(:name team) (on-move (:id team))])]) - [:separator] - [(tr "labels.delete") on-delete]]}])) + + 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? + :fixed? (or (not= top 0) (not= left 0)) + :min-width? true + :top top + :left left + :options [(when-not (:is-default project) + [(tr "labels.rename") on-edit]) + [(tr "dashboard.duplicate") on-duplicate] + [(tr "dashboard.pin-unpin") toggle-pin] + (when (seq teams) + [(tr "dashboard.move-to") nil + (for [team teams] + [(:name team) (on-move (:id team))])]) + (when (d/debug? :import) + [(tr "dashboard.import") on-import-files]) + [:separator] + [(tr "labels.delete") on-delete]]}]])) diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 8e6485b37..262fcaac6 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -21,8 +21,7 @@ [app.util.router :as rt] [app.util.time :as dt] [okulary.core :as l] - [rumext.alpha :as mf] - [app.main.ui.dashboard.import :refer [import-button]])) + [rumext.alpha :as mf])) (mf/defc header {::mf/wrap [mf/memo]} @@ -98,13 +97,7 @@ (fn [] (let [mdata {:on-success on-file-created} params {:project-id (:id project)}] - (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))))] + (st/emit! (dd/create-file (with-meta params mdata))))))] [:div.dashboard-project-row {:class (when first? "first")} [:div.project @@ -117,13 +110,12 @@ (tr "labels.drafts") (:name project))]) - (when (:menu-open @local) - [:& project-menu {:project project - :show? (:menu-open @local) - :left (:x (:menu-pos @local)) - :top (:y (:menu-pos @local)) - :on-edit on-edit-open - :on-menu-close on-menu-close}]) + [:& project-menu {:project project + :show? (:menu-open @local) + :left (:x (:menu-pos @local)) + :top (:y (:menu-pos @local)) + :on-edit on-edit-open + :on-menu-close on-menu-close}] [:span.info (str file-count " files")] (when (> file-count 0) @@ -131,9 +123,6 @@ (dt/timeago {:locale locale}))] [: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) [:span.pin-icon.tooltip.tooltip-bottom {:class (when (:is-pinned project) "active") diff --git a/frontend/src/app/main/ui/dashboard/team.cljs b/frontend/src/app/main/ui/dashboard/team.cljs index 168a944c2..4eb028314 100644 --- a/frontend/src/app/main/ui/dashboard/team.cljs +++ b/frontend/src/app/main/ui/dashboard/team.cljs @@ -285,7 +285,7 @@ [:img {:src (cfg/resolve-team-photo-url team)}] [:& file-uploader {:accept "image/jpeg,image/png" :multi false - :input-ref finput + :ref finput :on-selected on-file-selected}]]] [:div.block.owner-block diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs index 2ed0cb182..03a6ddda2 100644 --- a/frontend/src/app/main/ui/settings/profile.cljs +++ b/frontend/src/app/main/ui/settings/profile.cljs @@ -96,7 +96,7 @@ [:img {:src photo}] [:& file-uploader {:accept "image/jpeg,image/png" :multi false - :input-ref file-input + :ref file-input :on-selected on-file-selected}]]])) ;; --- Profile Page diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.cljs b/frontend/src/app/main/ui/workspace/left_toolbar.cljs index 1692a392f..f7ed31957 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.cljs +++ b/frontend/src/app/main/ui/workspace/left_toolbar.cljs @@ -52,7 +52,7 @@ [:& file-uploader {:input-id "image-upload" :accept cm/str-image-types :multi true - :input-ref ref + :ref ref :on-selected on-files-selected}]]])) (mf/defc left-toolbar diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs index 26fd4d30b..293553100 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs @@ -743,7 +743,7 @@ i/plus [:& file-uploader {:accept cm/str-image-types :multi true - :input-ref input-ref + :ref input-ref :on-selected on-file-selected}]]]) [:& asset-section-block {:role :content} diff --git a/frontend/src/app/util/debug.cljs b/frontend/src/app/util/debug.cljs index d83a3e054..cfffaf3f3 100644 --- a/frontend/src/app/util/debug.cljs +++ b/frontend/src/app/util/debug.cljs @@ -6,7 +6,7 @@ [app.common.math :as mth] [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 (def debug-exclude-events diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 6b383d739..46916731f 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2694,5 +2694,8 @@ msgstr "Export file" msgid "dashboard.export-multi" msgstr "Export %s files" +msgid "dashboard.import" +msgstr "Import files" + msgid "dashboard.options" msgstr "Options"