Merge pull request #2124 from penpot/3799-dashboard-rework

3799 dashboard rework

frontend/src/app/main/ui/dashboard/files.cljs

@@ -121,10 +121,9 @@
                  (dd/clear-selected-files))))
 
     [:*
-     [:& header {:team team 
-                 :project project
+     [:& header {:team team :project project 
                  :on-create-clicked on-create-clicked}]
-     [:section.dashboard-container
+     [:section.dashboard-container.no-bg
       [:& grid {:project project
                 :files files
                 :on-create-clicked on-create-clicked

frontend/src/app/main/ui/dashboard/grid.cljs

@@ -7,7 +7,6 @@
 (ns app.main.ui.dashboard.grid
   (:require
    [app.common.logging :as log]
-   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.messages :as dm]
    [app.main.features :as features]
@@ -26,7 +25,6 @@
    [app.util.keyboard :as kbd]
    [app.util.time :as dt]
    [app.util.timers :as ts]
-   [app.util.webapi :as wapi]
    [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
@@ -280,44 +278,13 @@
                               :project project}])]))
 
 (mf/defc line-grid-row
-  [{:keys [files selected-files on-load-more dragging? origin] :as props}]
-  (let [rowref           (mf/use-ref)
-
-        width            (mf/use-state nil)
-
-        itemsize       290
-        ratio          (if (some? @width) (/ @width itemsize) 0)
-        nitems         (mth/floor ratio)
-        limit          (min 10 ;; Configuration in backend to return recent files
-                            (if (and (some? @width)
-                                     (> (* itemsize (count files)) @width)
-                                     (< (- ratio nitems) 0.51))
-                              (dec nitems) ;; Leave space for the "show all" block
-                              nitems))
-
-        limit          (if dragging?
+  [{:keys [files selected-files dragging? limit] :as props}]
+  (let [limit          (if dragging?
                          (dec limit)
-                         limit)
+                         limit)]
 
-        limit          (max 1 limit)]
-
-    (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)))))
-
-    [:div.grid-row.no-wrap {:ref rowref}
+    [:div.grid-row.no-wrap
+     {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
      (when dragging?
        [:div.grid-item])
      (for [item (take limit files)]
@@ -326,17 +293,10 @@
          :file item
          :selected-files selected-files
          :key (:id item)
-         :navigate? false
-         :origin origin}])
-     (when (and (> limit 0)
-                (> (count files) limit))
-       [:div.grid-item.placeholder {:on-click on-load-more}
-        [:div.placeholder-icon i/arrow-down]
-        [:div.placeholder-label
-         (tr "dashboard.show-all-files")]])]))
+         :navigate? false}])]))
 
 (mf/defc line-grid
-  [{:keys [project team files on-load-more on-create-clicked origin] :as props}]
+  [{:keys [project team files limit on-create-clicked] :as props}]
   (let [dragging?        (mf/use-state false)
         project-id       (:id project)
         team-id          (:id team)
@@ -419,9 +379,8 @@
        [:& line-grid-row {:files files
                           :team-id team-id
                           :selected-files selected-files
-                          :on-load-more on-load-more
                           :dragging? @dragging?
-                          :origin origin}]
+                          :limit limit}]
 
        :else
        [:& empty-placeholder {:dragging? @dragging?

frontend/src/app/main/ui/dashboard/libraries.cljs

@@ -40,7 +40,7 @@
      [:header.dashboard-header
       [:div.dashboard-title
        [:h1 (tr "dashboard.libraries-title")]]]
-     [:section.dashboard-container
+     [:section.dashboard-container.no-bg
       [:& grid {:files files
                 :project default-project
                 :origin :libraries}]]]))

frontend/src/app/main/ui/dashboard/projects.cljs

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.dashboard.projects
   (:require
+   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
    [app.main.refs :as refs]
@@ -18,6 +19,8 @@
    [app.util.i18n :as i18n :refer [tr]]
    [app.util.router :as rt]
    [app.util.time :as dt]
+   [app.util.webapi :as wapi]
+   [beicon.core :as rx]
    [cuerdas.core :as str]
    [okulary.core :as l]
    [rumext.alpha :as mf]))
@@ -52,6 +55,16 @@
          #(st/emit! (rt/nav :dashboard-files {:team-id (:team-id project)
                                               :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)
         toggle-pin
         (mf/use-callback
          (mf/deps project)
@@ -107,54 +120,76 @@
                      (dd/fetch-recent-files (:id team))
                      (dd/clear-selected-files))))]
 
+    (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)))))
     [:div.dashboard-project-row {:class (when first? "first")}
-     [:div.project
-      (if (:edition? @local)
-        [:& inline-edition {:content (:name project)
-                            :on-end on-edit}]
-        [:h2 {:on-click on-nav
-              :on-context-menu on-menu-click}
-         (if (:is-default project)
-           (tr "labels.drafts")
-           (:name project))])
+     [:div.project {:ref rowref}
+      [:div.project-name-wrapper
+       (if (:edition? @local)
+         [:& inline-edition {:content (:name project)
+                             :on-end on-edit}]
+         [:h2 {:on-click on-nav
+               :on-context-menu on-menu-click}
+          (if (:is-default project)
+            (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 file-count " files")]
-      (when (> file-count 0)
-        (let [time (-> (:modified-at project)
-                       (dt/timeago {:locale locale}))]
-          [:span.recent-files-row-title-info (str ", " time)]))
+       [:span.info (str file-count " files")]
+       (when (> file-count 0)
+         (let [time (-> (:modified-at project)
+                        (dt/timeago {:locale locale}))]
+           [:span.recent-files-row-title-info (str ", " time)]))
+       [:div.project-actions
+        (when-not (:is-default project)
+          [:span.pin-icon.tooltip.tooltip-bottom
+           {:class (when (:is-pinned project) "active")
+            :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
+           (if (:is-pinned project)
+             i/pin-fill
+             i/pin)])
 
-      (when-not (:is-default project)
-        [:span.pin-icon.tooltip.tooltip-bottom
-         {:class (when (:is-pinned project) "active")
-          :on-click toggle-pin :alt (tr "dashboard.pin-unpin")}
-         (if (:is-pinned project)
-           i/pin-fill
-           i/pin)])
+        [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+         {:on-click create-file :alt (tr "dashboard.new-file") :data-test "project-new-file"}
+         i/close]
 
-      [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
-       {: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
-       {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
-       i/actions]]
+        [:a.btn-secondary.btn-small.tooltip.tooltip-bottom
+         {:on-click on-menu-click :alt (tr "dashboard.options") :data-test "project-options"}
+         i/actions]]]
+      (when (and (> limit 0)
+                 (> file-count limit))
+        [:div.show-more {:on-click on-nav}
+         [:div.placeholder-label
+          (tr "dashboard.show-all-files")]
+         [:div.placeholder-icon i/arrow-down]])]
 
      [:& line-grid
       {:project project
        :team team
-       :on-load-more on-nav
        :files files
        :on-create-clicked (partial create-file "dashboard:empty-folder-placeholder")
-       :origin :project}]]))
+       :limit limit}]]))
+
 
 (def recent-files-ref
   (l/derived :dashboard-recent-files st/state))
@@ -183,7 +218,7 @@
     (when (seq projects)
       [:*
        [:& header]
-       [:section.dashboard-container
+       [:section.dashboard-container.no-bg
         (for [{:keys [id] :as project} projects]
           (let [files (when recent-map
                         (->> (vals recent-map)

frontend/src/app/main/ui/dashboard/search.cljs

@@ -39,7 +39,7 @@
       [:div.dashboard-title
        [:h1 (tr "dashboard.title-search")]]]
 
-     [:section.dashboard-container.search
+     [:section.dashboard-container.search.no-bg
       (cond
         (empty? search-term)
         [:div.grid-empty-placeholder.search