Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-10 00:58:26 -05:00
Code Issues Activity

Merge remote-tracking branch 'origin/eva-new-file-placeholder' into develop

Browse source
This commit is contained in:
Andrey Antukh 2022-07-27 14:36:41 +02:00
commit 00b6d76164
8 changed files with 60 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
frontend/resources/styles/main/partials/dashboard-grid.scss
View file

@ -321,29 +321,34 @@
}
.grid-empty-placeholder {
align-items: center;
border: 1px dashed $color-gray-20;
border-radius: $br-small;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 200px;
margin: $size-4;
padding: 3rem;
justify-content: center;
padding: 24px;
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' stroke='%23E3E3E3FF' stroke-width='3' stroke-dasharray='8%2c 16' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
&.drafts {
background-image: url("/images/ph-left.svg"), url("/images/ph-right.svg");
background-position: 15% bottom, 85% top;
background-repeat: no-repeat;
.text {
p {
max-width: 360px;
text-align: center;
font-size: $fs16;
}
.create-new {
background-color: transparent;
border: 2px solid $color-gray-10;
width: 200px;
height: 100%;
cursor: pointer;
color: $color-gray-30;
border-radius: 3px;
&:hover {
color: $color-primary-dark;
border: 2px solid $color-primary;
}
}
&.search {
align-items: center;
}
svg {
width: 36px;
height: 36px;
@ -355,9 +360,4 @@
color: $color-gray-30;
font-size: $fs16;
}
img.ph-files {
height: 150px;
margin-right: calc(100% - 148px);
}
}

9
frontend/src/app/main/data/dashboard.cljs
View file

@ -713,18 +713,21 @@
[{:keys [project-id] :as params}]
(us/assert ::us/uuid project-id)
(ptk/reify ::create-file
IDeref
(-deref [_] {:project-id project-id})
ptk/WatchEvent
(watch [_ _ _]
(watch [it _ _]
(let [{:keys [on-success on-error]
:or {on-success identity
on-error rx/throw}} (meta params)
name (name (gensym (str (tr "dashboard.new-file-prefix") " ")))
params (assoc params :name name)]
(->> (rp/mutation! :create-file params)
(rx/tap on-success)
(rx/map file-created)
(rx/map #(with-meta (file-created %) (meta it)))
(rx/catch on-error))))))
;; --- EVENT: duplicate-file

1
frontend/src/app/main/data/events.cljs
View file

@ -84,6 +84,7 @@
(derive :app.main.data.comments/update-comment-thread-status ::generic-action)
(derive :app.main.data.dashboard/delete-team-member ::generic-action)
(derive :app.main.data.dashboard/duplicate-project ::generic-action)
(derive :app.main.data.dashboard/create-file ::generic-action)
(derive :app.main.data.dashboard/file-created ::generic-action)
(derive :app.main.data.dashboard/invite-team-members ::generic-action)
(derive :app.main.data.dashboard/leave-team ::generic-action)

27
frontend/src/app/main/ui/dashboard/files.cljs
View file

@ -20,7 +20,7 @@
[rumext.alpha :as mf]))
(mf/defc header
[{:keys [project] :as props}]
[{:keys [project on-create-clicked] :as props}]
(let [local (mf/use-state {:menu-open false
:edition false})
on-menu-click
@ -41,13 +41,6 @@
(mf/deps project)
#(st/emit! (dd/toggle-project-pin project)))
on-create-clicked
(mf/use-callback
(mf/deps project)
(fn [event]
(dom/prevent-default event)
(st/emit! (dd/create-file {:project-id (:id project)}))))
on-import
(mf/use-callback
(mf/deps (:id project))
@ -82,7 +75,7 @@
:on-import on-import}]
[:div.dashboard-header-actions
[:a.btn-secondary.btn-small {:on-click on-create-clicked :data-test "new-file"}
[:a.btn-secondary.btn-small {:on-click (partial on-create-clicked project "dashboard:header") :data-test "new-file"}
(tr "dashboard.new-file")]
(when-not (:is-default project)
@ -103,7 +96,14 @@
files (->> (vals files-map)
(filter #(= (:id project) (:project-id %)))
(sort-by :modified-at)
(reverse))]
(reverse))
on-create-clicked
(mf/use-callback
(fn [project origin event]
(dom/prevent-default event)
(st/emit! (with-meta (dd/create-file {:project-id (:id project)})
{::ev/origin origin}))))]
(mf/use-effect
(mf/deps project)
@ -121,8 +121,11 @@
(dd/clear-selected-files))))
[:*
[:& header {:team team :project project}]
[:& header {:team team
:project project
:on-create-clicked on-create-clicked}]
[:section.dashboard-container
[:& grid {:project project
:files files}]]]))
:files files
:on-create-clicked on-create-clicked}]]]))

11
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -205,7 +205,7 @@
:on-menu-close on-menu-close}])]]]))
(mf/defc grid
[{:keys [files project] :as props}]
[{:keys [files project on-create-clicked] :as props}]
(let [dragging? (mf/use-state false)
project-id (:id project)
@ -268,7 +268,9 @@
:navigate? true}])]
:else
[:& empty-placeholder {:default? (:is-default project)}])]))
[:& empty-placeholder {:default? (:is-default project)
:on-create-clicked on-create-clicked
:project project}])]))
(mf/defc line-grid-row
[{:keys [files selected-files on-load-more dragging?] :as props}]
@ -326,7 +328,7 @@
(tr "dashboard.show-all-files")]])]))
(mf/defc line-grid
[{:keys [project team files on-load-more] :as props}]
[{:keys [project team files on-load-more on-create-clicked] :as props}]
(let [dragging? (mf/use-state false)
project-id (:id project)
team-id (:id team)
@ -414,5 +416,6 @@
:else
[:& empty-placeholder {:dragging? @dragging?
:default? (:is-default project)}])]))
:default? (:is-default project)
:on-create-clicked on-create-clicked}])]))

10
frontend/src/app/main/ui/dashboard/placeholder.cljs
View file

@ -11,20 +11,16 @@
[rumext.alpha :as mf]))
(mf/defc empty-placeholder
[{:keys [dragging? default?] :as props}]
[{:keys [dragging? on-create-clicked project] :as props}]
(cond
(true? dragging?)
[:div.grid-row.no-wrap
[:div.grid-item]]
(true? default?)
[:div.grid-empty-placeholder.drafts {:data-test "empty-placeholder"}
[:div.text
[:& i18n/tr-html {:label "dashboard.empty-placeholder-drafts"}]]]
:else
[:div.grid-empty-placeholder
[:img.ph-files {:src "images/ph-file.svg"}]]))
[:button.create-new {:on-click (partial on-create-clicked project "dashboard:empty-folder-placeholder")}
(tr "dashboard.new-file")]]))
(mf/defc loading-placeholder
[]

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

@ -93,10 +93,11 @@
create-file
(mf/use-callback
(mf/deps project)
(fn []
(fn [origin]
(let [mdata {:on-success on-file-created}
params {:project-id (:id project)}]
(st/emit! (dd/create-file (with-meta params mdata))))))
(st/emit! (with-meta (dd/create-file (with-meta params mdata))
{::ev/origin origin})))))
on-import
(mf/use-callback
@ -140,7 +141,7 @@
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 (partial create-file "dashboard:folder") :alt (tr "dashboard.new-file") :data-test "project-new-file"}
i/close]
[:a.btn-secondary.btn-small.tooltip.tooltip-bottom
@ -151,8 +152,8 @@
{:project project
:team team
:on-load-more on-nav
:files files}]]))
:files files
:on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")}]]))
(def recent-files-ref
(l/derived :dashboard-recent-files st/state))

6
frontend/src/app/main/ui/dashboard/search.cljs
View file

@ -42,17 +42,17 @@
[:section.dashboard-container.search
(cond
(empty? search-term)
[:div.grid-empty-placeholder
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.type-something")]]
(nil? result)
[:div.grid-empty-placeholder
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.searching-for" search-term)]]
(empty? result)
[:div.grid-empty-placeholder
[:div.grid-empty-placeholder.search
[:div.icon i/search]
[:div.text (tr "dashboard.no-matches-for" search-term)]]