mirror of
https://github.com/penpot/penpot.git
synced 2025-05-29 21:56:10 +02:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
commit
064981ff3d
9 changed files with 150 additions and 71 deletions
|
@ -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,12 +528,13 @@
|
|||
:can-edit can-edit}])])
|
||||
|
||||
:else
|
||||
[:& empty-placeholder
|
||||
[:> empty-grid-placeholder*
|
||||
{:limit limit
|
||||
:can-edit can-edit
|
||||
:create-fn create-fn
|
||||
:origin origin
|
||||
:project-id project-id
|
||||
:team-id team-id
|
||||
:on-finish-import on-finish-import}])]))
|
||||
|
||||
(mf/defc line-grid-row
|
||||
|
@ -645,7 +646,7 @@
|
|||
:on-drop on-drop}
|
||||
(cond
|
||||
(nil? files)
|
||||
[:& loading-placeholder]
|
||||
[:> loading-placeholder*]
|
||||
|
||||
(seq files)
|
||||
[:& line-grid-row {:files files
|
||||
|
@ -656,10 +657,11 @@
|
|||
:limit limit}]
|
||||
|
||||
:else
|
||||
[:& empty-placeholder
|
||||
{:dragging? @dragging?
|
||||
[:> empty-grid-placeholder*
|
||||
{:is-dragging @dragging?
|
||||
:limit limit
|
||||
:can-edit can-edit
|
||||
:create-fn create-fn
|
||||
:project-id project-id
|
||||
:team-id team-id
|
||||
:on-finish-import on-finish-import}])]))
|
||||
|
|
|
@ -8,7 +8,6 @@
|
|||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.main.data.event :as ev]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.dashboard.import :as udi]
|
||||
[app.main.ui.ds.product.empty-placeholder :refer [empty-placeholder*]]
|
||||
|
@ -16,51 +15,92 @@
|
|||
[app.main.ui.icons :as i]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[okulary.core :as l]
|
||||
[potok.v2.core :as ptk]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc empty-placeholder-projects*
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [on-create on-finish-import project-id] :as props}]
|
||||
(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
|
||||
:on-finish-import on-finish-import}]]))
|
||||
|
||||
(mf/defc empty-placeholder
|
||||
[{:keys [dragging? limit origin create-fn can-edit project-id on-finish-import]}]
|
||||
(defn- make-has-other-files-or-projects-ref
|
||||
"Return a ref that resolves to true or false if there are at least some
|
||||
file or some project (a part of the default) exists; this determines
|
||||
if we need to show a complete placeholder or the small one."
|
||||
[team-id]
|
||||
(l/derived (fn [state]
|
||||
(or (let [projects (get state :projects)]
|
||||
(some (fn [[_ project]]
|
||||
(and (= (:team-id project) team-id)
|
||||
(not (:is-default project))))
|
||||
projects))
|
||||
(let [files (get state :files)]
|
||||
(some (fn [[_ file]]
|
||||
(= (:team-id file) team-id))
|
||||
files))))
|
||||
st/state))
|
||||
|
||||
(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))
|
||||
files (mf/deref refs/files)]
|
||||
|
||||
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)")}}
|
||||
|
@ -80,18 +120,24 @@
|
|||
:tag-name "span"}])]
|
||||
|
||||
:else
|
||||
(if (= (count files) 0)
|
||||
[:> empty-placeholder-projects* {:on-create on-click :on-finish-import on-finish-import :project-id project-id}]
|
||||
(if-not has-other?
|
||||
[:> 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")]])
|
||||
|
|
|
@ -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 %)))
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue