✨ UI debug toggle for export/import

2025-03-17 18:21:23 -05:00 · 2021-06-14 21:48:29 +02:00 · 2021-06-14 21:48:29 +02:00 · 5c9ec92cc5
commit 5c9ec92cc5
parent 76e2309778
12 changed files with 81 additions and 60 deletions
--- 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])
--- 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]])]

--- 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}]]]

     [:*
--- 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}]]))


--- 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]]}]]))

--- 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")
--- 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
--- 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
--- 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
--- 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}
--- 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
--- 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"