diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 0cfa341b56..a8e731ff1c 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -28,7 +28,7 @@ [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.dashboard.placeholder :refer [empty-placeholder loading-placeholder]] + [app.main.ui.dashboard.placeholder :refer [empty-grid-placeholder* loading-placeholder*]] [app.main.ui.ds.product.loader :refer [loader*]] [app.main.ui.hooks :as h] [app.main.ui.icons :as i] @@ -511,7 +511,7 @@ :ref node-ref} (cond (nil? files) - [:& loading-placeholder] + [:> loading-placeholder*] (seq files) (for [[index slice] (d/enumerate (partition-all limit files))] @@ -528,7 +528,7 @@ :can-edit can-edit}])]) :else - [:& empty-placeholder + [:> empty-grid-placeholder* {:limit limit :can-edit can-edit :create-fn create-fn @@ -646,7 +646,7 @@ :on-drop on-drop} (cond (nil? files) - [:& loading-placeholder] + [:> loading-placeholder*] (seq files) [:& line-grid-row {:files files @@ -657,8 +657,8 @@ :limit limit}] :else - [:& empty-placeholder - {:dragging? @dragging? + [:> empty-grid-placeholder* + {:is-dragging @dragging? :limit limit :can-edit can-edit :create-fn create-fn diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index adfc3b42e0..8d6f369561 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -19,30 +19,46 @@ [potok.v2.core :as ptk] [rumext.v2 :as mf])) -(mf/defc empty-placeholder-projects* - {::mf/wrap-props false} +(mf/defc empty-project-placeholder* + {::mf/private true} [{:keys [on-create on-finish-import project-id]}] (let [file-input (mf/use-ref nil) - on-add-library (mf/use-fn - (fn [_] - (st/emit! (ptk/event ::ev/event {::ev/name "explore-libraries-click" - ::ev/origin "dashboard" - :section "empty-placeholder-projects"})) - (dom/open-new-window "https://penpot.app/penpothub/libraries-templates"))) - on-import-files (mf/use-fn #(dom/click (mf/ref-val file-input)))] + + on-add-library + (mf/use-fn + (fn [_] + (st/emit! (ptk/event ::ev/event {::ev/name "explore-libraries-click" + ::ev/origin "dashboard" + :section "empty-placeholder-projects"})) + (dom/open-new-window "https://penpot.app/penpothub/libraries-templates"))) + + on-import + (mf/use-fn #(dom/click (mf/ref-val file-input)))] [:div {:class (stl/css :empty-project-container)} - [:div {:class (stl/css :empty-project-card) :on-click on-create :title (tr "dashboard.add-file")} - [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.create")] - [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.start")]] + [:div {:class (stl/css :empty-project-card) + :on-click on-create + :title (tr "dashboard.add-file")} + [:div {:class (stl/css :empty-project-card-title)} + (tr "dashboard.empty-project.create")] + [:div {:class (stl/css :empty-project-card-subtitle)} + (tr "dashboard.empty-project.start")]] - [:div {:class (stl/css :empty-project-card) :on-click on-import-files :title (tr "dashboard.empty-project.import")} - [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.import")] - [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.import-penpot")]] + [:div {:class (stl/css :empty-project-card) + :on-click on-import + :title (tr "dashboard.empty-project.import")} + [:div {:class (stl/css :empty-project-card-title)} + (tr "dashboard.empty-project.import")] + [:div {:class (stl/css :empty-project-card-subtitle)} + (tr "dashboard.empty-project.import-penpot")]] - [:div {:class (stl/css :empty-project-card) :on-click on-add-library :title (tr "dashboard.empty-project.go-to-libraries")} - [:div {:class (stl/css :empty-project-card-title)} (tr "dashboard.empty-project.add-library")] - [:div {:class (stl/css :empty-project-card-subtitle)} (tr "dashboard.empty-project.explore")]] + [:div {:class (stl/css :empty-project-card) + :on-click on-add-library + :title (tr "dashboard.empty-project.go-to-libraries")} + [:div {:class (stl/css :empty-project-card-title)} + (tr "dashboard.empty-project.add-library")] + [:div {:class (stl/css :empty-project-card-subtitle)} + (tr "dashboard.empty-project.explore")]] [:& udi/import-form {:ref file-input :project-id project-id @@ -65,23 +81,26 @@ files)))) st/state)) -(mf/defc empty-placeholder - [{:keys [dragging? limit origin create-fn can-edit team-id project-id on-finish-import]}] +(mf/defc empty-grid-placeholder* + [{:keys [is-dragging limit origin create-fn can-edit team-id project-id on-finish-import]}] (let [on-click (mf/use-fn (mf/deps create-fn) (fn [_] (create-fn "dashboard:empty-folder-placeholder"))) - show-text (mf/use-state nil) - on-mouse-enter (mf/use-fn #(reset! show-text true)) - on-mouse-leave (mf/use-fn #(reset! show-text nil)) + show-text* (mf/use-state nil) + show-text? (deref show-text*) + + on-mouse-enter (mf/use-fn #(reset! show-text* true)) + on-mouse-leave (mf/use-fn #(reset! show-text* nil)) has-other* (mf/with-memo [team-id] (make-has-other-files-or-projects-ref team-id)) has-other? (mf/deref has-other*)] + (cond - (true? dragging?) + (true? is-dragging) [:ul {:class (stl/css :grid-row :no-wrap) :style {:grid-template-columns (str "repeat(" limit ", 1fr)")}} @@ -102,17 +121,23 @@ :else (if-not has-other? - [:> empty-placeholder-projects* {:on-create on-click :on-finish-import on-finish-import :project-id project-id}] + [:> empty-project-placeholder* + {:on-create on-click + :on-finish-import on-finish-import + :project-id project-id}] [:div {:class (stl/css :grid-empty-placeholder)} [:button {:class (stl/css :create-new) :on-click on-click :on-mouse-enter on-mouse-enter :on-mouse-leave on-mouse-leave} - (if @show-text (tr "dashboard.empty-project.create") i/add)]])))) + (if show-text? + (tr "dashboard.empty-project.create") + i/add)]])))) -(mf/defc loading-placeholder +(mf/defc loading-placeholder* [] [:> loader* {:width 32 :title (tr "labels.loading") :class (stl/css :placeholder-loader)} - [:span {:class (stl/css :placeholder-text)} (tr "dashboard.loading-files")]]) + [:span {:class (stl/css :placeholder-text)} + (tr "dashboard.loading-files")]]) diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 3aaa590f81..cf013de2ab 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -371,6 +371,7 @@ show-team-hero? can-invite))} (for [{:keys [id] :as project} projects] + ;; FIXME: refactor this, looks inneficient (let [files (when recent-map (->> (vals recent-map) (filterv #(= id (:project-id %)))