mirror of
https://github.com/penpot/penpot.git
synced 2025-05-11 06:56:37 +02:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Alejandro Alonso
commit
c4c419b971
11 changed files with 243 additions and 448 deletions
|
|
@ -23,29 +23,38 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc header
|
||||
[{:keys [project on-create-clicked] :as props}]
|
||||
(let [local (mf/use-state {:menu-open false
|
||||
:edition false})
|
||||
[{:keys [project create-fn] :as props}]
|
||||
(let [local (mf/use-state
|
||||
{:menu-open false
|
||||
:edition false})
|
||||
|
||||
on-create-click
|
||||
(mf/use-fn
|
||||
(mf/deps create-fn)
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(create-fn "dashboard:header")))
|
||||
|
||||
on-menu-click
|
||||
(mf/use-callback
|
||||
(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
|
||||
(mf/use-callback #(swap! local assoc :edition true :menu-open false))
|
||||
(mf/use-fn #(swap! local assoc :edition true :menu-open false))
|
||||
|
||||
toggle-pin
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps project)
|
||||
#(st/emit! (dd/toggle-project-pin project)))
|
||||
|
||||
on-import
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps (:id project))
|
||||
(fn []
|
||||
(st/emit! (dd/fetch-files {:project-id (:id project)})
|
||||
|
|
@ -78,7 +87,7 @@
|
|||
:on-import on-import}]
|
||||
|
||||
[:div.dashboard-header-actions
|
||||
[:a.btn-secondary.btn-small {:on-click (partial on-create-clicked project "dashboard:header") :data-test "new-file"}
|
||||
[:a.btn-secondary.btn-small {:on-click on-create-click :data-test "new-file"}
|
||||
(tr "dashboard.new-file")]
|
||||
|
||||
(when-not (:is-default project)
|
||||
|
|
@ -95,69 +104,65 @@
|
|||
|
||||
(mf/defc files-section
|
||||
[{:keys [project team] :as props}]
|
||||
(let [files-map (mf/deref refs/dashboard-files)
|
||||
width (mf/use-state nil)
|
||||
rowref (mf/use-ref)
|
||||
itemsize (if (>= @width 1030)
|
||||
280
|
||||
230)
|
||||
(let [files-map (mf/deref refs/dashboard-files)
|
||||
project-id (:id project)
|
||||
width (mf/use-state nil)
|
||||
rowref (mf/use-ref)
|
||||
itemsize (if (>= @width 1030)
|
||||
280
|
||||
230)
|
||||
|
||||
ratio (if (some? @width) (/ @width itemsize) 0)
|
||||
nitems (mth/floor ratio)
|
||||
limit (min 10 nitems)
|
||||
limit (max 1 limit)
|
||||
ratio (if (some? @width) (/ @width itemsize) 0)
|
||||
nitems (mth/floor ratio)
|
||||
limit (min 10 nitems)
|
||||
limit (max 1 limit)
|
||||
|
||||
files (->> (vals files-map)
|
||||
(filter #(= (:id project) (:project-id %)))
|
||||
(sort-by :modified-at)
|
||||
(reverse))
|
||||
files (mf/with-memo [project-id files-map]
|
||||
(->> (vals files-map)
|
||||
(filter #(= project-id (:project-id %)))
|
||||
(sort-by :modified-at)
|
||||
(reverse)))
|
||||
|
||||
on-create-clicked
|
||||
(mf/use-callback
|
||||
(fn [project origin event]
|
||||
(dom/prevent-default event)
|
||||
create-file
|
||||
(mf/use-fn
|
||||
(fn [origin]
|
||||
(st/emit! (with-meta (dd/create-file {:project-id (:id project)})
|
||||
{::ev/origin origin}))))]
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(let [node (mf/ref-val rowref)
|
||||
mnt? (volatile! true)
|
||||
sub (->> (wapi/observe-resize node)
|
||||
(rx/observe-on :af)
|
||||
(rx/subs (fn [entries]
|
||||
(let [row (first entries)
|
||||
row-rect (.-contentRect ^js row)
|
||||
row-width (.-width ^js row-rect)]
|
||||
(when @mnt?
|
||||
(reset! width row-width))))))]
|
||||
(fn []
|
||||
(vreset! mnt? false)
|
||||
(rx/dispose! sub)))))
|
||||
(mf/with-effect []
|
||||
(let [node (mf/ref-val rowref)
|
||||
mnt? (volatile! true)
|
||||
sub (->> (wapi/observe-resize node)
|
||||
(rx/observe-on :af)
|
||||
(rx/subs (fn [entries]
|
||||
(let [row (first entries)
|
||||
row-rect (.-contentRect ^js row)
|
||||
row-width (.-width ^js row-rect)]
|
||||
(when @mnt?
|
||||
(reset! width row-width))))))]
|
||||
(fn []
|
||||
(vreset! mnt? false)
|
||||
(rx/dispose! sub))))
|
||||
|
||||
(mf/with-effect [project]
|
||||
(when project
|
||||
(let [pname (if (:is-default project)
|
||||
(tr "labels.drafts")
|
||||
(:name project))]
|
||||
(dom/set-html-title (tr "title.dashboard.files" pname)))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps project)
|
||||
(fn []
|
||||
(when project
|
||||
(let [pname (if (:is-default project)
|
||||
(tr "labels.drafts")
|
||||
(:name project))]
|
||||
(dom/set-html-title (tr "title.dashboard.files" pname))))))
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps project)
|
||||
(fn []
|
||||
(st/emit! (dd/fetch-files {:project-id (:id project)})
|
||||
(dd/clear-selected-files))))
|
||||
(mf/with-effect [project-id]
|
||||
(st/emit! (dd/fetch-files {:project-id project-id})
|
||||
(dd/clear-selected-files)))
|
||||
|
||||
[:*
|
||||
[:& header {:team team :project project
|
||||
:on-create-clicked on-create-clicked}]
|
||||
[:& header {:team team
|
||||
:project project
|
||||
:create-fn create-file}]
|
||||
[:section.dashboard-container.no-bg {:ref rowref}
|
||||
[:& grid {:project project
|
||||
:files files
|
||||
:on-create-clicked on-create-clicked
|
||||
:origin :files
|
||||
:create-fn create-file
|
||||
:limit limit}]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -177,8 +177,8 @@
|
|||
[{:keys [file navigate? origin library-view?] :as props}]
|
||||
(let [file-id (:id file)
|
||||
local (mf/use-state {:menu-open false
|
||||
:menu-pos nil
|
||||
:edition false})
|
||||
:menu-pos nil
|
||||
:edition false})
|
||||
selected-files (mf/deref refs/dashboard-selected-files)
|
||||
dashboard-local (mf/deref refs/dashboard-local)
|
||||
node-ref (mf/use-ref)
|
||||
|
|
@ -313,7 +313,7 @@
|
|||
|
||||
|
||||
(mf/defc grid
|
||||
[{:keys [files project on-create-clicked origin limit library-view?] :as props}]
|
||||
[{:keys [files project origin limit library-view? create-fn] :as props}]
|
||||
(let [dragging? (mf/use-state false)
|
||||
project-id (:id project)
|
||||
node-ref (mf/use-var nil)
|
||||
|
|
@ -384,10 +384,8 @@
|
|||
|
||||
:else
|
||||
[:& empty-placeholder
|
||||
{:default? (:is-default project)
|
||||
:on-create-clicked on-create-clicked
|
||||
:project project
|
||||
:limit limit
|
||||
{:limit limit
|
||||
:create-fn create-fn
|
||||
:origin origin}])]))
|
||||
|
||||
(mf/defc line-grid-row
|
||||
|
|
@ -407,7 +405,7 @@
|
|||
:navigate? false}])]))
|
||||
|
||||
(mf/defc line-grid
|
||||
[{:keys [project team files limit on-create-clicked] :as props}]
|
||||
[{:keys [project team files limit create-fn] :as props}]
|
||||
(let [dragging? (mf/use-state false)
|
||||
project-id (:id project)
|
||||
team-id (:id team)
|
||||
|
|
@ -494,8 +492,8 @@
|
|||
:limit limit}]
|
||||
|
||||
:else
|
||||
[:& empty-placeholder {:dragging? @dragging?
|
||||
:default? (:is-default project)
|
||||
:on-create-clicked on-create-clicked
|
||||
:limit limit}])]))
|
||||
[:& empty-placeholder
|
||||
{:dragging? @dragging?
|
||||
:limit limit
|
||||
:create-fn create-fn}])]))
|
||||
|
||||
|
|
|
|||
|
|
@ -11,21 +11,27 @@
|
|||
[rumext.v2 :as mf]))
|
||||
|
||||
(mf/defc empty-placeholder
|
||||
[{:keys [dragging? on-create-clicked project limit origin] :as props}]
|
||||
(cond
|
||||
(true? dragging?)
|
||||
[:div.grid-row.no-wrap
|
||||
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
|
||||
[:div.grid-item]]
|
||||
(= :libraries origin)
|
||||
[:div.grid-empty-placeholder.libs {:data-test "empty-placeholder"}
|
||||
[:div.text
|
||||
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
|
||||
:else
|
||||
[:div.grid-empty-placeholder
|
||||
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
|
||||
[:button.create-new {:on-click (partial on-create-clicked project "dashboard:empty-folder-placeholder")}
|
||||
(tr "dashboard.new-file")]]))
|
||||
[{:keys [dragging? limit origin create-fn] :as props}]
|
||||
(let [on-click
|
||||
(mf/use-fn
|
||||
(mf/deps create-fn)
|
||||
(fn [_]
|
||||
(create-fn "dashboard:empty-folder-placeholder")))]
|
||||
(cond
|
||||
(true? dragging?)
|
||||
[:div.grid-row.no-wrap
|
||||
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
|
||||
[:div.grid-item]]
|
||||
|
||||
(= :libraries origin)
|
||||
[:div.grid-empty-placeholder.libs {:data-test "empty-placeholder"}
|
||||
[:div.text
|
||||
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
|
||||
|
||||
:else
|
||||
[:div.grid-empty-placeholder
|
||||
{:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
|
||||
[:button.create-new {:on-click on-click} (tr "dashboard.new-file")]])))
|
||||
|
||||
(mf/defc loading-placeholder
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -33,26 +33,34 @@
|
|||
(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"
|
||||
:role "presentation"}]
|
||||
|
|
@ -60,13 +68,13 @@
|
|||
[: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
|
||||
:aria-label (tr "labels.close")}
|
||||
{:on-click on-close-click
|
||||
:aria-label (tr "labels.close")}
|
||||
[:span i/close]]]))
|
||||
|
||||
(def builtin-templates
|
||||
|
|
@ -145,6 +153,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)
|
||||
|
|
@ -166,30 +175,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)]
|
||||
|
|
@ -199,29 +211,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))))]
|
||||
|
||||
|
|
@ -240,7 +256,6 @@
|
|||
(vreset! mnt? false)
|
||||
(rx/dispose! sub))))
|
||||
|
||||
|
||||
[:div.dashboard-project-row
|
||||
{:class (when first? "first")}
|
||||
[:div.project {:ref rowref}
|
||||
|
|
@ -254,13 +269,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)
|
||||
|
|
@ -277,11 +293,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)
|
||||
|
|
@ -295,7 +315,7 @@
|
|||
{:project project
|
||||
:team team
|
||||
:files files
|
||||
:on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")
|
||||
:create-fn create-file
|
||||
:limit limit}]]))
|
||||
|
||||
|
||||
|
|
@ -354,7 +374,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
|
||||
|
|
|
|||
|
|
@ -202,9 +202,9 @@
|
|||
|
||||
[:header.viewer-header
|
||||
[:div.nav-zone
|
||||
[:div.main-icon
|
||||
;; If the user doesn't have permission we disable the link
|
||||
[:div.main-icon {:style {:cursor (when-not (:can-edit permissions) "auto")}}
|
||||
[:a {:on-click go-to-dashboard
|
||||
;; If the user doesn't have permission we disable the link
|
||||
:style {:pointer-events (when-not (:can-edit permissions) "none")}} i/logo-icon]]
|
||||
|
||||
[:& header-sitemap {:project project :file file :page page :frame frame :index index}]]
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
[app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-attrs layout-container-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.measures :refer [select-measure-keys measures-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]]
|
||||
[rumext.v2 :as mf]))
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
stroke-values (select-keys shape stroke-attrs)
|
||||
layer-values (select-keys shape layer-attrs)
|
||||
measure-values (select-keys shape measure-attrs)
|
||||
measure-values (select-measure-keys shape)
|
||||
constraint-values (select-keys shape constraint-attrs)
|
||||
layout-container-values (select-keys shape layout-container-attrs)
|
||||
layout-item-values (select-keys shape layout-item-attrs)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue