✨ Add new file creation button on placeholder

frontend/resources/styles/main/partials/dashboard-grid.scss

@@ -321,27 +321,32 @@
 }
 
 .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;
+  padding: 24px;
-  justify-content: center;
+  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 {
+  .create-new {
-    background-image: url("/images/ph-left.svg"), url("/images/ph-right.svg");
+    background-color: transparent;
-    background-position: 15% bottom, 85% top;
+    border: 2px solid $color-gray-10;
-    background-repeat: no-repeat;
+    width: 200px;
-    .text {
+    height: 100%;
-      p {
+    cursor: pointer;
-        max-width: 360px;
+    color: $color-gray-30;
-        text-align: center;
+    border-radius: 3px;
-        font-size: $fs16;
+    &:hover {
+      color: $color-primary-dark;
+      border: 2px solid $color-primary;
     }
   }
+
+  &.search {
+    align-items: center;
   }
 
   svg {
@@ -355,9 +360,4 @@
     color: $color-gray-30;
     font-size: $fs16;
   }
-
-  img.ph-files {
-    height: 150px;
-    margin-right: calc(100% - 148px);
-  }
 }

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

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

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

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

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