✨ Temporary UI

frontend/resources/styles/main/partials/dashboard.scss

@@ -165,3 +165,30 @@
     }
   }
 }
+
+.import-file-btn {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  height: 2rem;
+  justify-content: center;
+  overflow: hidden;
+  padding: 4px;
+  width: 2rem;
+
+  background: none;
+  border: 1px solid $color-gray-20;
+  border-radius: 2px;
+  cursor: pointer;
+  transition: all 0.4s;
+  margin-left: 1rem;
+
+  &:hover {
+    background: $color-primary;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+}

frontend/src/app/main/ui/dashboard/file_menu.cljs

@@ -11,8 +11,9 @@
    [app.main.data.modal :as modal]
    [app.main.repo :as rp]
    [app.main.store :as st]
-   [app.main.ui.context :as ctx]
    [app.main.ui.components.context-menu :refer [context-menu]]
+   [app.main.ui.context :as ctx]
+   [app.main.worker :as uw]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.router :as rt]
@@ -150,7 +151,22 @@
                       :hint (tr "modals.remove-shared-confirm.hint")
                       :cancel-label :omit
                       :accept-label (tr "modals.remove-shared-confirm.accept")
-                      :on-accept del-shared})))]
+                      :on-accept del-shared})))
+
+        on-export-files
+        (fn [event]
+          (->> (uw/ask-many!
+                {:cmd :export-file
+                 :team-id current-team-id
+                 :files files})
+               (rx/subs
+                (fn [{:keys [type data] :as msg}]
+                  (case type
+                    :progress
+                    (prn "[Progress]" data)
+
+                    :finish
+                    (dom/save-as data "export" "application/zip" "Export package (*.zip)"))))))]
 
     (mf/use-effect
      (fn []
@@ -176,6 +192,7 @@
                       [[(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]
                        [:separator]
                        [(tr "labels.delete-multi-files" file-count) on-delete]]
 
@@ -187,6 +204,7 @@
                        (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]
                        [:separator]
                        [(tr "labels.delete") on-delete]])]
 

frontend/src/app/main/ui/dashboard/import.cljs

@@ -14,12 +14,12 @@
    [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
-(log/set-level! :warn)
+(log/set-level! :debug)
 
 (defn use-import-file
-  [project-id]
+  [project-id on-finish-import]
   (mf/use-callback
-   (mf/deps project-id)
+   (mf/deps project-id on-finish-import)
    (fn [files]
      (when files
        (let [files (->> files (mapv dom/create-uri))]
@@ -30,16 +30,23 @@
 
               (rx/subs
                (fn [result]
-                 (log/debug :action "import-result" :result result)))))))))
+                 (log/debug :action "import-result" :result result))
+
+               (fn [err]
+                 (log/debug :action "import-error" :result err))
+
+               (fn []
+                 (log/debug :action "import-end")
+                 (when on-finish-import (on-finish-import))))))))))
 
 (mf/defc import-button
-  [{:keys [project-id]}]
+  [{:keys [project-id on-finish-import]}]
 
   (let [file-input (mf/use-ref nil)
-        on-file-selected (use-import-file project-id)]
+        on-file-selected (use-import-file project-id on-finish-import)]
     [:form.import-file
-     [:button.import-file-icon {:type "button"
+     [:button.import-file-btn {:type "button"
-                                :on-click #(dom/click (mf/ref-val file-input))} i/import]
+                               :on-click #(dom/click (mf/ref-val file-input))} i/import]
      [:& file-uploader {:accept "application/zip"
                         :multi true
                         :input-ref file-input

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -21,7 +21,8 @@
    [app.util.router :as rt]
    [app.util.time :as dt]
    [okulary.core :as l]
-   [rumext.alpha :as mf]))
+   [rumext.alpha :as mf]
+   [app.main.ui.dashboard.import :refer [import-button]]))
 
 (mf/defc header
   {::mf/wrap [mf/memo]}
@@ -30,6 +31,7 @@
     [:header.dashboard-header
      [:div.dashboard-title
       [:h1 (tr "dashboard.projects-title")]]
+
      [:a.btn-secondary.btn-small {:on-click create}
       (tr "dashboard.new-project")]]))
 
@@ -96,7 +98,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-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.project
@@ -130,6 +138,9 @@
                        (dt/timeago {:locale locale}))]
           [:span.recent-files-row-title-info (str ", " time)]))
 
+      #_[:& import-button {:project-id (:id project)
+                         :on-finish-import on-finish-import}]
+
       [:a.btn-secondary.btn-small
        {:on-click create-file}
        (tr "dashboard.new-file")]]

frontend/translations/en.po

@@ -2633,4 +2633,10 @@ 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"
+
+msgid "dashboard.export-single"
+msgstr "Export file"
+
+msgid "dashboard.export-multi"
+msgstr "Export %s files"