3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 01:06:14 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Improve consistency on event handling on dashboard

Browse source
This commit is contained in:
Andrey Antukh 2022-10-10 15:55:14 +02:00 • committed by Alejandro Alonso
parent cad2201c54
commit 582a20d369
4 changed files with 162 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

112
frontend/src/app/main/ui/dashboard/projects.cljs
View file

@ -33,37 +33,47 @@
(mf/defc header
{::mf/wrap [mf/memo]}
[]
(let [create #(st/emit! (dd/create-project))]
(let [on-click (mf/use-fn #(st/emit! (dd/create-project)))]
[:header.dashboard-header
[:div.dashboard-title
[:h1 (tr "dashboard.projects-title")]]
[:a.btn-secondary.btn-small {:on-click create :data-test "new-project-button"}
[:a.btn-secondary.btn-small
{:on-click on-click
:data-test "new-project-button"}
(tr "dashboard.new-project")]]))
(mf/defc team-hero
{::mf/wrap [mf/memo]}
[{:keys [team close-banner] :as props}]
(let [go-members (mf/use-fn #(st/emit! (dd/go-to-team-members)))
[{:keys [team close-fn] :as props}]
(let [on-nav-members-click (mf/use-fn #(st/emit! (dd/go-to-team-members)))
invite-member
on-invite-click
(mf/use-fn
(mf/deps team)
(fn []
(st/emit! (modal/show {:type :invite-members
:team team
:origin :hero}))))]
:origin :hero}))))
on-close-click
(mf/use-fn
(mf/deps close-fn)
(fn [event]
(dom/prevent-default event)
(close-fn)))]
[:div.team-hero
[:img {:src "images/deco-team-banner.png" :border "0"}]
[:div.text
[:div.title (tr "dasboard.team-hero.title")]
[:div.info
[:span (tr "dasboard.team-hero.text")]
[:a {:on-click go-members} (tr "dasboard.team-hero.management")]]]
[:a {:on-click on-nav-members-click} (tr "dasboard.team-hero.management")]]]
[:button.btn-primary.invite
{:on-click invite-member}
{:on-click on-invite-click}
(tr "onboarding.choice.team-up.invite-members")]
[:button.close {:on-click close-banner}
[:button.close
{:on-click on-close-click
:aria-label (tr "labels.close")}
[:span i/close]]]))
(def builtin-templates
@ -140,6 +150,7 @@
(let [locale (mf/deref i18n/locale)
file-count (or (:count project) 0)
project-id (:id project)
team-id (:id team)
dstate (mf/deref refs/dashboard-local)
edit-id (:project-for-edit dstate)
@ -161,30 +172,33 @@
on-nav
(mf/use-fn
(mf/deps project)
(mf/deps project-id team-id)
(fn []
(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
:project-id project-id}))))
(st/emit! (rt/nav :dashboard-files
{:team-id team-id
:project-id project-id}))))
toggle-pin
(mf/use-callback
(mf/use-fn
(mf/deps project)
#(st/emit! (dd/toggle-project-pin project)))
on-menu-click
(mf/use-callback (fn [event]
(let [position (dom/get-client-position event)]
(dom/prevent-default event)
(swap! local assoc :menu-open true
:menu-pos position))))
(mf/use-fn
(fn [event]
(let [position (dom/get-client-position event)]
(dom/prevent-default event)
(swap! local assoc
:menu-open true
:menu-pos position))))
on-menu-close
(mf/use-callback #(swap! local assoc :menu-open false))
(mf/use-fn #(swap! local assoc :menu-open false))
on-edit-open
(mf/use-callback #(swap! local assoc :edition? true))
(mf/use-fn #(swap! local assoc :edition? true))
on-edit
(mf/use-callback
(mf/use-fn
(mf/deps project)
(fn [name]
(let [name (str/trim name)]
@ -194,29 +208,33 @@
(swap! local assoc :edition? false))))
on-file-created
(mf/use-callback
(mf/deps project)
(mf/use-fn
(fn [data]
(let [pparams {:project-id (:project-id data)
:file-id (:id data)}
qparams {:page-id (get-in data [:data :pages 0])}]
(st/emit! (rt/nav :workspace pparams qparams)))))
create-file
(mf/use-callback
(mf/deps project)
(mf/use-fn
(mf/deps project-id on-file-created)
(fn [origin]
(let [mdata {:on-success on-file-created}
params {:project-id (:id project)}]
(st/emit! (with-meta (dd/create-file (with-meta params mdata))
{::ev/origin origin})))))
params {:project-id project-id}]
(st/emit! (-> (dd/create-file (with-meta params mdata))
(with-meta {::ev/origin origin}))))))
on-create-click
(mf/use-fn
(mf/deps create-file)
(fn [_]
(create-file "dashboard:grid-header-plus-button")))
on-import
(mf/use-callback
(mf/deps (:id project) (:id team))
(mf/use-fn
(mf/deps project-id (:id team))
(fn []
(st/emit! (dd/fetch-files {:project-id (:id project)})
(st/emit! (dd/fetch-files {:project-id project-id})
(dd/fetch-recent-files (:id team))
(dd/clear-selected-files))))]
@ -235,7 +253,6 @@
(vreset! mnt? false)
(rx/dispose! sub))))
[:div.dashboard-project-row
{:class (when first? "first")}
[:div.project {:ref rowref}
@ -249,13 +266,14 @@
(tr "labels.drafts")
(:name project))])
[:& 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
:on-import on-import}]
[:& 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
:on-import on-import}]
[:span.info (str (tr "labels.num-of-files" (i18n/c file-count)))]
(when (> file-count 0)
@ -272,11 +290,15 @@
i/pin)])
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click create-file :alt (tr "dashboard.new-file") :data-test "project-new-file"}
{:on-click on-create-click
:alt (tr "dashboard.new-file")
:data-test "project-new-file"}
i/close]
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
{:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
{:on-click on-menu-click
:alt (tr "dashboard.options")
:data-test "project-options"}
i/actions]]]
(when (and (> limit 0)
@ -290,7 +312,7 @@
{:project project
:team team
:files files
:on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")
:create-fn create-file
:limit limit}]]))
@ -349,7 +371,7 @@
[:& header]
(when team-hero?
[:& team-hero {:team team :close-banner close-banner}])
[:& team-hero {:team team :close-fn close-banner}])
(when (or (not tutorial-viewed?) (not walkthrough-viewed?))
[:div.hero-projects