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)]]