From 1eede8442d7079151f484a30bcff4a522f0ecdf5 Mon Sep 17 00:00:00 2001 From: Eva Date: Wed, 27 Jul 2022 09:26:25 +0200 Subject: [PATCH 1/2] :sparkles: Add new file creation button on placeholder --- .../styles/main/partials/dashboard-grid.scss | 38 +++++++++---------- frontend/src/app/main/ui/dashboard/files.cljs | 26 +++++++------ frontend/src/app/main/ui/dashboard/grid.cljs | 11 ++++-- .../app/main/ui/dashboard/placeholder.cljs | 10 ++--- .../src/app/main/ui/dashboard/projects.cljs | 3 +- .../src/app/main/ui/dashboard/search.cljs | 6 +-- 6 files changed, 48 insertions(+), 46 deletions(-) diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss index a39028c70..b286fcec3 100644 --- a/frontend/resources/styles/main/partials/dashboard-grid.scss +++ b/frontend/resources/styles/main/partials/dashboard-grid.scss @@ -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); - } } diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 3f7c7bcbb..77e4f33f5 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -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) :data-test "new-file"} (tr "dashboard.new-file")] (when-not (:is-default project) @@ -103,7 +96,13 @@ files (->> (vals files-map) (filter #(= (:id project) (:project-id %))) (sort-by :modified-at) - (reverse))] + (reverse)) + + on-create-clicked + (mf/use-callback + (fn [project event] + (dom/prevent-default event) + (st/emit! (dd/create-file {:project-id (:id project)}))))] (mf/use-effect (mf/deps project) @@ -121,8 +120,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}]]])) diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 2e12dabd3..f4057a60a 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -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}])])) diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index 291071d7d..0f2d4472e 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -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)} + (tr "dashboard.new-file")]])) (mf/defc loading-placeholder [] diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 18ceabe63..98023ec41 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -151,7 +151,8 @@ {:project project :team team :on-load-more on-nav - :files files}]])) + :files files + :on-create-clicked create-file}]])) (def recent-files-ref diff --git a/frontend/src/app/main/ui/dashboard/search.cljs b/frontend/src/app/main/ui/dashboard/search.cljs index 12b6e628d..ccf4419c4 100644 --- a/frontend/src/app/main/ui/dashboard/search.cljs +++ b/frontend/src/app/main/ui/dashboard/search.cljs @@ -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)]] From bfe54fe5e1a5b293611bfb53c8ce19590c87ae6f Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Wed, 27 Jul 2022 11:57:27 +0200 Subject: [PATCH 2/2] :sparkles: Improve audit log for create files --- frontend/src/app/main/data/dashboard.cljs | 9 ++++++--- frontend/src/app/main/data/events.cljs | 1 + frontend/src/app/main/ui/dashboard/files.cljs | 11 ++++++----- frontend/src/app/main/ui/dashboard/placeholder.cljs | 2 +- frontend/src/app/main/ui/dashboard/projects.cljs | 10 +++++----- 5 files changed, 19 insertions(+), 14 deletions(-) diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index e51ed446c..93efdb0ba 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -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 diff --git a/frontend/src/app/main/data/events.cljs b/frontend/src/app/main/data/events.cljs index 7adf4c86c..b457cd8bf 100644 --- a/frontend/src/app/main/data/events.cljs +++ b/frontend/src/app/main/data/events.cljs @@ -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) diff --git a/frontend/src/app/main/ui/dashboard/files.cljs b/frontend/src/app/main/ui/dashboard/files.cljs index 77e4f33f5..99678a6c3 100644 --- a/frontend/src/app/main/ui/dashboard/files.cljs +++ b/frontend/src/app/main/ui/dashboard/files.cljs @@ -75,7 +75,7 @@ :on-import on-import}] [:div.dashboard-header-actions - [:a.btn-secondary.btn-small {:on-click (partial on-create-clicked project) :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) @@ -97,12 +97,13 @@ (filter #(= (:id project) (:project-id %))) (sort-by :modified-at) (reverse)) - + on-create-clicked - (mf/use-callback - (fn [project event] + (mf/use-callback + (fn [project origin event] (dom/prevent-default event) - (st/emit! (dd/create-file {:project-id (:id project)}))))] + (st/emit! (with-meta (dd/create-file {:project-id (:id project)}) + {::ev/origin origin}))))] (mf/use-effect (mf/deps project) diff --git a/frontend/src/app/main/ui/dashboard/placeholder.cljs b/frontend/src/app/main/ui/dashboard/placeholder.cljs index 0f2d4472e..7b4f04ced 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.cljs +++ b/frontend/src/app/main/ui/dashboard/placeholder.cljs @@ -19,7 +19,7 @@ :else [:div.grid-empty-placeholder - [:button.create-new {:on-click (partial on-create-clicked project)} + [:button.create-new {:on-click (partial on-create-clicked project "dashboard:empty-folder-placeholder")} (tr "dashboard.new-file")]])) (mf/defc loading-placeholder diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs index 98023ec41..d23ffc789 100644 --- a/frontend/src/app/main/ui/dashboard/projects.cljs +++ b/frontend/src/app/main/ui/dashboard/projects.cljs @@ -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 @@ -152,8 +153,7 @@ :team team :on-load-more on-nav :files files - :on-create-clicked create-file}]])) - + :on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")}]])) (def recent-files-ref (l/derived :dashboard-recent-files st/state))