🎉 Improve dashboard and onboarding css

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

@@ -8,10 +8,12 @@
   font-size: $fs14;
   height: 100%;
   overflow: hidden;
+  overflow-y: auto;
 
   .grid-row {
     display: grid;
-    width: 100%;
+    width: 99%;
+    margin-left: 13px;
   }
 
   .grid-item {
@@ -92,12 +94,13 @@
     }
 
     .item-info {
-      color: $color-gray-30;
+      color: $color-gray-20;
       display: flex;
       flex-direction: column;
       padding: $size-2;
       text-align: left;
       width: 100%;
+      font-size: $fs12;
 
       h3 {
         border: 1px solid transparent;
@@ -112,6 +115,10 @@
         width: 100%;
         white-space: nowrap;
         line-height: 27px;
+        max-width: 260px;
+        @media #{$bp-max-1366} {
+          max-width: 230px;
+        }
       }
 
       span.date {
@@ -323,32 +330,34 @@
 }
 
 .grid-empty-placeholder {
-  border-radius: $br-small;
+  border-radius: $br-huge;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  background-color: rgba(227, 227, 227, 0.3);
-  justify-content: center;
+  padding: 13px;
-  align-items: flex-start;
+  margin-right: 13px;
-  height: 200px;
-  margin: $size-4;
-  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");
 
   .create-new {
-    background-color: transparent;
+    background-color: white;
     border: 2px solid $color-gray-10;
-    width: 200px;
+    height: 158px;
-    height: 100%;
     cursor: pointer;
-    color: $color-gray-30;
+    color: $color-black;
     border-radius: 3px;
+    margin: 0.5rem;
     &:hover {
-      color: $color-primary-dark;
       border: 2px solid $color-primary;
     }
   }
 
   &.search {
     align-items: center;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    height: 200px;
+    background: $color-white;
+    border: 1px dashed #e3e3e3;
+    border-radius: 0;
   }
 
   svg {

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

@@ -83,6 +83,7 @@
       font-size: $fs22;
       font-weight: 600;
       z-index: 10;
+      margin-left: 13px;
     }
 
     .context-menu.is-open {

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

@@ -6,13 +6,11 @@
 
 .dashboard-container {
   background-color: $color-dashboard;
-  border-top-right-radius: $br-huge;
-  border-top-left-radius: $br-huge;
   flex: 1 0 0;
   margin-right: $size-4;
   overflow-y: auto;
   user-select: none;
-
+  width: 100%;
   &.no-bg {
     background-color: transparent;
   }
@@ -35,13 +33,14 @@
     align-items: center;
     margin-top: $size-4;
     padding: $size-1 $size-1 $size-1 $size-2;
-    width: 100%;
+    width: 99%;
     height: 40px;
     .project-name-wrapper {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       min-height: 32px;
+      margin-left: 13px;
     }
     .show-more {
       align-items: center;

frontend/resources/styles/main/partials/modal.scss

@@ -1352,15 +1352,21 @@
         .icon {
           display: flex;
           align-items: center;
+          justify-content: center;
+          background: #31efb8;
+          width: 28px;
+          height: 28px;
+          border-radius: 50%;
+
           svg {
             height: 16px;
             width: 16px;
-            fill: $color-white;
+            fill: $color-black;
           }
         }
         .feature-txt {
           margin: 0;
-          margin-left: 16px;
+          margin-left: 13px;
           color: $color-white;
           font-size: $fs14;
           display: flex;

frontend/src/app/main/ui/components/file_uploader.cljs

@@ -31,7 +31,8 @@
        [:label {:for input-id :class-name label-class} label-text])
 
      [:input
-      {:style {:display "none"}
+      {:style {:display "none"
+               :width 0}
        :id input-id
        :multiple multi
        :accept accept

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.dashboard.files
   (:require
+   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
    [app.main.refs :as refs]
@@ -16,6 +17,8 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.webapi :as wapi]
+   [beicon.core :as rx]
    [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
@@ -93,6 +96,17 @@
 (mf/defc files-section
   [{:keys [project team] :as props}]
   (let [files-map (mf/deref refs/dashboard-files)
+        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)
+
         files     (->> (vals files-map)
                        (filter #(= (:id project) (:project-id %)))
                        (sort-by :modified-at)
@@ -105,6 +119,23 @@
            (st/emit! (with-meta (dd/create-file {:project-id (:id project)})
                        {::ev/origin origin}))))]
     
+    (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)))))
+    
+
     (mf/use-effect
      (mf/deps project)
      (fn []
@@ -123,9 +154,10 @@
     [:*
      [:& header {:team team :project project 
                  :on-create-clicked on-create-clicked}]
-     [:section.dashboard-container.no-bg
+     [:section.dashboard-container.no-bg {:ref rowref}
       [:& grid {:project project
                 :files files
                 :on-create-clicked on-create-clicked
-                :origin :files}]]]))
+                :origin :files
+                :limit limit}]]]))
 

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

@@ -209,7 +209,7 @@
                         :dashboard-local dashboard-local}])]]]))
 
 (mf/defc grid
-  [{:keys [files project on-create-clicked origin] :as props}]
+  [{:keys [files project on-create-clicked origin limit] :as props}]
   (let [dragging?  (mf/use-state false)
         project-id (:id project)
 
@@ -263,6 +263,7 @@
 
        (seq files)
        [:div.grid-row
+        {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
         (when @dragging?
           [:div.grid-item])
         (for [item files]
@@ -275,7 +276,8 @@
        :else
        [:& empty-placeholder {:default? (:is-default project)
                               :on-create-clicked on-create-clicked
-                              :project project}])]))
+                              :project project
+                              :limit limit}])]))
 
 (mf/defc line-grid-row
   [{:keys [files selected-files dragging? limit] :as props}]
@@ -385,5 +387,6 @@
        :else
        [:& empty-placeholder {:dragging? @dragging?
                               :default? (:is-default project)
-                              :on-create-clicked on-create-clicked}])]))
+                              :on-create-clicked on-create-clicked
+                              :limit limit}])]))
 

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

@@ -7,12 +7,15 @@
 (ns app.main.ui.dashboard.libraries
   (:require
    [app.common.data :as d]
+   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.dashboard.grid :refer [grid]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.webapi :as wapi]
+   [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
 (mf/defc libraries-page
@@ -22,7 +25,18 @@
         default-project (->> projects vals (d/seek :is-default))
         files     (->> (vals files-map)
                        (sort-by :modified-at)
-                       (reverse))]
+                       (reverse))
+
+        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)]
     (mf/use-effect
      (mf/deps team)
      (fn []
@@ -36,12 +50,29 @@
      #(st/emit! (dd/fetch-shared-files)
                 (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)))))
+
     [:*
      [:header.dashboard-header
       [:div.dashboard-title
        [:h1 (tr "dashboard.libraries-title")]]]
-     [:section.dashboard-container.no-bg
+     [:section.dashboard-container.no-bg {:ref rowref}
       [:& grid {:files files
                 :project default-project
-                :origin :libraries}]]]))
+                :origin :libraries
+                :limit limit}]]]))
 

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

@@ -11,14 +11,16 @@
    [rumext.alpha :as mf]))
 
 (mf/defc empty-placeholder
-  [{:keys [dragging? on-create-clicked project] :as props}]
+  [{:keys [dragging? on-create-clicked project limit] :as props}]
   (cond
     (true? dragging?)
     [:div.grid-row.no-wrap
+     {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
      [:div.grid-item]]
 
     :else
     [:div.grid-empty-placeholder
+     {:style {:grid-template-columns (str "repeat(" limit ", 1fr)")}}
      [:button.create-new {:on-click (partial on-create-clicked project "dashboard:empty-folder-placeholder")}
       (tr "dashboard.new-file")]]))
 

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

@@ -65,6 +65,7 @@
         nitems         (mth/floor ratio)
         limit          (min 10 nitems)
         limit          (max 1 limit)
+
         toggle-pin
         (mf/use-callback
          (mf/deps project)

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

@@ -6,6 +6,7 @@
 
 (ns app.main.ui.dashboard.search
   (:require
+   [app.common.math :as mth]
    [app.main.data.dashboard :as dd]
    [app.main.refs :as refs]
    [app.main.store :as st]
@@ -13,6 +14,8 @@
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
+   [app.util.webapi :as wapi]
+   [beicon.core :as rx]
    [rumext.alpha :as mf]))
 
 (mf/defc search-page
@@ -33,13 +36,38 @@
      (st/emit! (dd/search {:search-term search-term})
                (dd/clear-selected-files))))
 
-  (let [result (mf/deref refs/dashboard-search-result)]
+  (let [result (mf/deref refs/dashboard-search-result)
+        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)]
+    (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)))))
     [:*
      [:header.dashboard-header
       [:div.dashboard-title
        [:h1 (tr "dashboard.title-search")]]]
 
-     [:section.dashboard-container.search.no-bg
+     [:section.dashboard-container.search.no-bg {:ref rowref}
       (cond
         (empty? search-term)
         [:div.grid-empty-placeholder.search
@@ -58,4 +86,5 @@
 
         :else
         [:& grid {:files result
-                  :hide-new? true}])]]))
+                  :hide-new? true
+                  :limit limit}])]]))